Model not Visible on the scene after loading using glTF Loader

Questions
1

Hi Al,
I am trying to simply import mesh into my scene. In the console, it is visible that my mesh has been loaded 100% but it is not visible on the screen. I am attaching the code I am using. Plz, help me with the solution.

        const scene = new THREE.Scene();
        const camera = new THREE.PerspectiveCamera(75,
            window.innerWidth / window.innerHeight,0.1,1000);
        camera.position.set(0, 0, 5);

        const renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);
        var loader = new THREE.GLTFLoader();
        loader.load(
            "./Switch.glb",
            function (gltf) {
                scene.add(gltf.scene)
            },
            function (xhr) {
                console.log((xhr.loaded / xhr.total * 100) + '% loaded');
            },
            function (error) {
                console.log('An error happened');
            }
        );

        const animate = function () {
            requestAnimationFrame(animate);
            renderer.render(scene, camera);
        };
        animate();
2

Try to add some lights to your scene and see if it helps:

const hemiLight = new THREE.HemisphereLight( 0xffffff, 0x444444, 0.4 );
hemiLight.position.set( 0, 20, 0 );
scene.add( hemiLight );

const dirLight = new THREE.DirectionalLight( 0xffffff, 0.8 );
dirLight.position.set( - 3, 10, - 10 );
scene.add( dirLight );
1 Like