GLTFLoader not working with three.module.js

Questions
1

I just started using three js and I was trying to switch to modules but the gltf loader doesn’t work. I even tried using examples I found on the main site but I can’t make them work. This is the code, very simple because I was trying to understand what didn’t work exactly, and it turns out it’s the loader section, everything else works if I comment it out

<html>
    <head>
        <title>Document</title>
        <style>
            body {
                margin: 0;
                overflow: hidden;
            }
        </style>
    </head>
    <body>
        <script type="module">
            import * as THREE from './build/three.module.js';
            import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';
            import { OrbitControls } from './jsm/controls/OrbitControls.js';

            let camera,
                scene,
                renderer;

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

            //CAMERA
        camera = new THREE.PerspectiveCamera(35, window.innerWidth / window.innerHeight, 0.1, 10000;
            camera.position.set(10,4,-5);
            var controls = new OrbitControls(camera, renderer.domElement);
            controls.update();

            //SCENE
            scene = new THREE.Scene();

            //LIGHTS
            var light = new THREE.AmbientLight(0xffffff, 1);
            scene.add(light);

            //MATERIAL
            var material = new THREE.MeshBasicMaterial({color: 0x77cc77});
            var geometry = new THREE.BoxGeometry();

            var cube = new THREE.Mesh(geometry, material);
            scene.add(cube);

            const loader = new GLTFLoader();
            loader.load('./cube.glb', function ( gltf ) {
                const mesh = scene.children[0];
                scene.add(mesh);
            } );

            //RENDER LOOP
            render();

            function render() {
                requestAnimationFrame(render);
                renderer.render(scene, camera);
            }
        </script>
    </body>
</html>

The cube.glb object is literally the default Blender cube I exported after getting rid of the light and the camera. I also tried to take its geometry and paint it like the other cube, and also to change the background to white to make sure it wasn’t just blending in with the background, still nothing

I managed to load models, merge them etc with three.js, that’s why I feel like it’s due to modules, unless I’m missing something

2
  1. Make sure there are no errors in the console.
  2. After adding the model to the scene (in load callback) do:
camera.lookAt(mesh.position);
  1. If still not visible, make sure the model is not too small / too big. You can try mesh.add(new THREE.Mesh(new THREE.BoxBufferGeometry(1.0, 1.0, 1.0), new THREE.MeshNormalMaterial)) - if you can see the cube, but can’t see the model - scale is probably the issue.
3

I can’t load the same models I loaded in my three.js files, so I don’t think it’s a problem of the models themselves, I’ll check tomorrow

4

I think you should:
const loader = new GLTFLoader();
loader.load(‘./cube.glb’, function ( gltf ) {
scene.add(gltf.scene);
// gltf.scene.scale.set(x, y, z); to set position
// gltf.scene.position.set(x, y, z); to set sclale
gltf.scene.traverse(function (child) {
if (child.isMesh) {
//do something with mesh.
child.castShadow = true;
}
});
});

5

Thanks, it was a silly mistake, I forgot gltf. before scene