hey guys i am new to threejs and i am trying to load my gltf models and their respectives textures using gltf models. i heard that gltf loaders automatically load the textures along with the models respectively, but that seems to be not the case here as it missed out the textures hence the errors any ideas how to solve this? thanks in advance
canglong_normal.png:1 GET http://127.0.0.1:5500/textures/canglong_normal.png 404 (Not Found)
canglong_metallicRoughness.png:1 GET http://127.0.0.1:5500/textures/canglong_metallicRoughness.png 404 (Not Found)
canglong_baseColor.png:1 GET http://127.0.0.1:5500/textures/canglong_baseColor.png 404 (Not Found)
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>3d model</title>
<style>
body {
margin: 0;
}
canvas {
position: fixed; top: 0; left: 0;
}
div#test2 {
height: 5000px;
}
</style>
</head>
<body>
<script type="module">
import * as THREE from 'https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js';
import { OrbitControls } from 'https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/controls/OrbitControls.js';
import { GLTFLoader } from 'https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/loaders/GLTFLoader.js';
import { RGBELoader } from 'https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/loaders/RGBELoader.js';
var container, controls;
var camera, scene, renderer, mixer, clock;
var obj , material , texture
init();
animate();
function init() {
container = document.getElementById( 'test' );
document.body.appendChild( container );
camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.01, 1000 );
// camera.position.set(0, 5, 30);
camera.position.x = 0
camera.position.y = 5
camera.position.z = 10
scene = new THREE.Scene();
scene.background = new THREE.Color(0xffffff);
var light = new THREE.HemisphereLight(0xffffff,0x000000,10);
scene.add(light);
var texture = new THREE.MeshMatcapMaterial()
// var matcapTexture = new THREE.TextureLoader().load('purple.jpg')
// var texture = new THREE.MeshMatcapMaterial( {map: matcapTexture})
// console.log(texture)
clock = new THREE.Clock();
// model
var loader = new GLTFLoader();
loader.load( 'scene.gltf', function ( gltf ) {
obj = scene.add( gltf.scene );
mixer = new THREE.AnimationMixer( gltf.scene );
gltf.animations.forEach( ( clip ) => {
mixer.clipAction( clip ).play();
} );
} );
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 0.8;
renderer.outputEncoding = THREE.sRGBEncoding;
container.appendChild( renderer.domElement );
function rotateFunction() {
obj.rotation.y += 0.02;
console.log(obj.rotation.y)
}
document.addEventListener('scroll', function(e) { rotateFunction() });
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
//
function animate() {
requestAnimationFrame( animate );
var delta = clock.getDelta();
if ( mixer ) mixer.update( delta );
renderer.render( scene, camera );
}
function adjustCamera() {
var t = scrollY / (5000 - innerHeight);
console.log(t)
// t is 0 to 1
camera.position.z = 10 + 5 * t;
}
document.addEventListener('scroll', function(e) { adjustCamera() });
</script>
</body>
<div id="test">
</div>
<div id="test2">
testing121
</div>
</html>