Loading .gltf models in three.js

Question

I am teaching myself three.js and have a simple script that should load an external 3d model. There are no console errors, in fact using a code snippet I found it says that the model is 100% loaded. However, it is not visible in the browser. I'd really appreciate it if someone could take a look and let me know what I'm missing to get this to work. I'm not sure why it isn't working at this point.

<html lang="en">
<head>
    <title>External Asset</title>
    <meta charset=utf-8>
    <link rel="stylesheet" type="text/css" href="canvas.css">
</head> 
<body>
    <script src="../three.js-master/build/three.min.js"></script>
    <script src="../three.js-master/examples/js/loaders/GLTFLoader.js"></script>
    <!-- <script src="../three.js-master/examples/js/controls/OrbitControls.js"></script> -->
    <script>
        var camera, scene, renderer;
        //var controls;
        var loader;

        init();

        function init() {
            //Renderer
            renderer = new THREE.WebGLRenderer( {antialias: true} );
            var width = window.innerWidth;
            var height = window.innerHeight;
            renderer.setSize( width, height );
            renderer.setClearColor ( new THREE.Color( "rgb( 198,215,244 )" ), .5 );
            document.body.appendChild( renderer.domElement );

            scene = new THREE.Scene();

            //Light Source
            var light = new THREE.PointLight( new THREE.Color( "rgb( 232,227,92 )" ), 3, 100 );
            light.position.set( 5,5,0 );
            scene.add( light );

            //Create Camera
            camera = new THREE.PerspectiveCamera (45, width/height, 1, 1000);
            camera.position.set( 5,5,5 );
            camera.lookAt( 0, 0, 0 );

            //Load asset
            loader = new THREE.GLTFLoader();
            loader.load( '../models/gltf/scifi-girl/scene.gltf',  
                function( gltf ) {
                    scene.add( gltf.scene );
                }, 
                function ( xhr ) {
                    console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
                },
                function ( error ) {
                    console.log( 'An Error Occurred' );
                }
            );

            renderer.render( scene, camera );
        }
    </script>
</body>

The model loading is asynchronous and you only call the render function once. So I would say that your model is loading after the call to render, and your scene never updates. Look at adding a simple animation loop, should fix the problem. Take a look at the animate() function in here, and integrate with your code - codepen.io/Staak/pen/wNvZVP — danlong

Marquizzo Marquizzo · Accepted Answer · 2019-02-06T16:33:22

You need to add a render loop to your code. Right now you're rendering once, and your .gltf file is loading after that, since it's asynchronous.

From the Creating a scene docs:

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

This way, the first time you call animate() will trigger the loop, and your scene will render at 60 frames per second. When your .gltf is loaded, it'll get added to the scene, and automatically render in the next frame.

Loading .gltf models in three.js

1 Answers