Here is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Violin</title>
</head>
<body>
<script src="js/three.js"></script>
<script type="module" src="js/GLTFLoader.js"></script>
<script type="module">
import { GLTFLoader } from "./js/GLTFLoader.js";
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.01,
1000
);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth / window.innerHeight);
document.body.appendChild(renderer.domElement);
const loader = new GLTFLoader();
let obj;
loader.load("./includes/violin.glb", function (gltf) {
obj = gltf.scene;
scene.add(gltf.scene);
});
scene.background = new THREE.Color(0xffffff);
const light = new THREE.HemisphereLight(0xffffff, 0x000000, 2);
scene.add(light);
camera.position.set(0, 0, 10);
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
animate();
</script>
</body>
</html>
Any idea why?