CODEWITHSUNDEEP
javascriptthree.js
Justiciar
Justiciar

Reputation: 376

Loading .gltf models in three.js

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>

Upvotes: 0

Views: 1557

Answers (1)

M -
M -

Reputation: 28497

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.

Upvotes: 1

Related Questions