3d-Model loading via Three.js

Question

I have started getting into Three.js and have gotten stuck with loading gltf-files. I have managed to fix all errors, but my model still does not show up on my page. This is my code:

function init() {

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

        camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

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

        document.body.appendChild(renderer.domElement);


        let controls = new OrbitControls(camera, renderer.domElement);

        /*
        let geometry = new THREE.BoxGeometry();
        let material = new THREE.MeshBasicMaterial( { color: 0x00ff00, wireframe: true } );
        cube = new THREE.Mesh( geometry, material );
        scene.add( cube );*/

        var loader = new GLTFLoader();

        loader.load(
            // resource URL
            'models/eevee/eevee.gltf',
            // called when the resource is loaded
            function ( gltf ) {

                let object = gltf.scene.children[0];
                object.scale.set(0.1,0.1,0.1);
                object.position.set(0, -10, -0.75);

                scene.add( object );

                renderer.render(scene, camera);

            },
            // called while loading is progressing
            function ( xhr ) {

                console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );

            },
            // called when loading has errors
            function ( error ) {

                console.log( 'An error happened' );
                console.log(error)

            }
        );

        camera.position.z = 5;

        window.addEventListener('resize', onWindowResize);

    }

As I said, no error shows up, but the 3d model does not get displayed on my page.

user_12446500 · Answer

It works fine for me, I just add an Ambiant Light, setting the camera position and add "THREE" to : var loader = new THREE.GLTFLoader();

function init() {
    scene = new THREE.Scene();
    scene.background = new THREE.Color(0xffffff);

    light = new THREE.AmbientLight(0xffffff); 
    scene.add(light);

    camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 100000);
    camera.position.set(150, 180, 280);

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

    document.body.appendChild(renderer.domElement);

    let controls = new OrbitControls(camera, renderer.domElement);

    var loader = new THREE.GLTFLoader();

    loader.load(
        'assets/models/gltf/street_car.glb',
        function ( gltf ) {
            let object = gltf.scene.children[0];
            object.scale.set(100,100,100);
            object.position.set(0, 0, 0);
            scene.add( object );
            renderer.render(scene, camera);
        },
        function ( xhr ) {
            console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
        },
        function ( error ) {
            console.log( 'An error happened' );
            console.log(error)
        }
    );
    camera.position.z = 5;
    window.addEventListener('resize', onWindowResize);
}

init();

3d-Model loading via Three.js

1 Answers