Blank screen on loading glb

I’m trying to get a simple glb object to show on browser, but the screen is all black. I tried to use this tutorial as basis, but it didn’t work either: Add 3D Model to WebSite in 5 Minutes - Three.js Tutorial | Red Stapler

I tried it on localhost and on hosted webserver, same results. Anyone to help to figure out what’s the problem? Or maybe a link to a working tutorial? :smiley:

Here’s the code:


<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8 />
    <link rel="stylesheet" type="text/css" href="5minstyle.css" />
  </head>
  <body>
    <script src="js/three.min.js"></script>
    <script src="js/GLTFLoader.js"></script>
    <script src="js/OrbitControls.js"></script>
    <script>
      let scene, camera, renderer;

      function init() {

        scene = new THREE.Scene();
        scene.background = new THREE.Color(0xdddddd);

        camera = new THREE.PerspectiveCamera(40,window.innerWidth/window.innerHeight,1,5000);
        camera.rotation.y = 45/180*Math.PI;
        camera.position.x = 800;
        camera.position.y = 100;
        camera.position.z = 1000;

        controls = new THREE.OrbitControls(camera);
        controls.addEventListener('change', renderer);

        hlight = new THREE.AmbientLight (0x404040,100);
        scene.add(hlight);

        directionalLight = new THREE.DirectionalLight(0xffffff,100);
        directionalLight.position.set(0,1,0);
        directionalLight.castShadow = true;
        scene.add(directionalLight);
        light = new THREE.PointLight(0xc4c4c4,10);
        light.position.set(0,300,500);
        scene.add(light);
        light2 = new THREE.PointLight(0xc4c4c4,10);
        light2.position.set(500,100,0);
        scene.add(light2);
        light3 = new THREE.PointLight(0xc4c4c4,10);
        light3.position.set(0,100,-500);
        scene.add(light3);
        light4 = new THREE.PointLight(0xc4c4c4,10);
        light4.position.set(-500,300,500);
        scene.add(light4);

        renderer = new THREE.WebGLRenderer({antialias:true});
        renderer.setSize(window.innerWidth,window.innerHeight);
        document.body.appendChild(renderer.domElement);

        let loader = new THREE.GLTFLoader();
        loader.load('Luna_mm40.glb', function(gltf){
          cabinet = gltf.scene.children[0];
          cabinet.scale.set(0.5,0.5,0.5);
          scene.add(gltf.scene);
          animate();
        });
      }
      function animate() {
        renderer.render(scene,camera);
        requestAnimationFrame(animate);
      }
      init();
    </script>
  </body>
</html>

…HTML code seems to be lost as I copy pasted the code… but here’s whole package I’m struggling with:
webgl_cab.zip (159.4 KB)

I tried it and it gives me these errors.

GLTFLoader.js:9 Uncaught SyntaxError: Cannot use import statement outside a module
three.min.js:160 THREE.WebGLRenderer 85
5min.html:52 Uncaught TypeError: THREE.GLTFLoader is not a constructor
    at init (5min.html:52)
    at 5min.html:64
5min.html:92 Live reload enabled.

I’ve correctly formatted you code. You can wrap code in three backticks to preserve formatting:

``` js

your code here

```