javascript - THREE.js GLTFLoader() model not displaying

Question

I am trying to load a model into my browser using THREE.js. I can see in my network tab that the model is being loaded and returning a 200 error, but I cannot see the rendered model.

This is my code,

import * as THREE from './node_modules/three/src/Three.js';
        import { GLTFLoader } from './node_modules/three/examples/jsm/loaders/GLTFLoader.js';

        const scene = new THREE.Scene();
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        const lightPosition = [75, 300, -75]
        const ambientLight = new THREE.AmbientLight(0xaaaaaa);
        const pointLight = new THREE.DirectionalLight(0xffffff, 0.5);
        const sun = new THREE.Group();
        sun.add(pointLight);
        sun.position.set(75, 300, -75);
        scene.add(sun);
        scene.add(ambientLight);
        camera.position.set(0, 0, 3);
        scene.background = new THREE.Color( 0x11f8bb );

        const renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        const geometry = new THREE.BoxGeometry();
        const material = new THREE.MeshBasicMaterial( { color: 0x00ff00} );
        
        const loader = new GLTFLoader();
        loader.load('./chair.glb', (gltf) => {
            gltf.scene.position.set(0, -1.5, -2);
            scene.add(gltf.scene);
        });

        renderer.render( scene, camera );
    

But all I see when the page loads is,

I am assuming that it potentially a lighting or camera issue and not an issue with the model as when I load the model into model viewer I can see the model fine.

I am new to THREE.js so any help would be gratefully received.

question from:https://stackoverflow.com/questions/65836555/three-js-gltfloader-model-not-displaying

Answer 1

Waitting for answers