There are no errors in my script, but I can't see the model

Here is my code:

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <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(
        window.innerWidth / window.innerHeight,
      const renderer = new THREE.WebGLRenderer();
      renderer.setSize(window.innerWidth / window.innerHeight);

      const loader = new GLTFLoader();

      let obj;
      loader.load("./includes/violin.glb", function (gltf) {
        obj = gltf.scene;

      scene.background = new THREE.Color(0xffffff);

      const light = new THREE.HemisphereLight(0xffffff, 0x000000, 2);

      camera.position.set(0, 0, 10);

      function animate() {
        renderer.render(scene, camera);


Any idea why?

Why twice?

<script type="module" src="js/GLTFLoader.js"></script>
    <script type="module">
      import { GLTFLoader } from "./js/GLTFLoader.js";

see BeginnerExample
// … step 03: load 3D models - gltf

from Collection of examples from

Could be a number of reasons:

  1. Your violin model is too big and it surrounds the camera, or too small and the camera is rendering it as a tiny dot.
  2. The model is displaced in one direction (Maybe it’s centered around [0, 50, 0] instead of [0, 0, 0]), and it’s outside the camera’s view.
  3. Your .glb file is in a different folder, or the relative address you’re requesting is incorrect (is anything being loaded in your network tab?).
  4. As Hofk said, you’re importing GLTFLoader.js twice. Might be breaking your loader.