hey guys i am new to threejs and i am trying to load a 3d animated model with textures, but i am facing issues trying to do so as the textures are not loading into gltf. both the files are in textures folder while index.html is in the main folder. thanks in advance!
textures/Material_diffuse.png:1 Failed to load resource: the server responded with a status of 404 (Not Found)
textures/Material_specularGlossiness.png:1 Failed to load resource: the server responded with a status of 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 {
display: block;
}
</style>
</head>
<body>
<!-- <script src="three.js"></script> -->
<!-- <script type="module" src="GLTFLoader.js"></script> -->
<script type="module">
import * as THREE from 'https://cdn.skypack.dev/[email protected]/build/three.module.js';
import { GLTFLoader } from 'https://cdn.skypack.dev/[email protected]/examples/jsm/loaders/GLTFLoader.js';
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.01,
1000
);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var loader = new GLTFLoader();
var obj;
loader.load("scene.gltf", function (gltf) {
obj = gltf.scene;
scene.add(gltf.scene);
});
scene.background = new THREE.Color(0xffffff);
var light = new THREE.HemisphereLight(0xffffff, 0x444444);
scene.add(light);
// camera.position.set(0, 5, 30);
camera.position.set(0, 5, 20);
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
animate();
function rotateFunction() {
obj.rotation.y += 0.01;
}
document.addEventListener('scroll', function(e) { rotateFunction() });
</script>
<div>
</div>
</body>
</html>