在 three.js 中加载 .gltf 模型答案

【问题标题】：Loading .gltf models in three.js在 three.js 中加载 .gltf 模型
【发布时间】：2019-02-07 00:33:22
【问题描述】：

我正在自学three.js，并且有一个应该加载外部3d 模型的简单脚本。没有控制台错误，实际上使用代码 sn-p 我发现它说模型已 100% 加载。但是，它在浏览器中不可见。如果有人可以看一下并让我知道我缺少什么以使其正常工作，我将非常感激。我不确定为什么它现在不起作用。

<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>

【问题讨论】：

模型加载是异步的，你只调用一次渲染函数。所以我会说你的模型是在调用渲染之后加载的，你的场景永远不会更新。看看添加一个简单的动画循环，应该可以解决问题。看看这里的 animate() 函数，并与您的代码集成 - codepen.io/Staak/pen/wNvZVP

标签： javascript three.js

【解决方案1】：

您需要在代码中添加渲染循环。现在您正在渲染一次，并且您的 .gltf 文件正在加载之后，因为它是异步的。

来自Creating a scene docs：

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

这样，您第一次调用animate() 将触发循环，您的场景将以每秒 60 帧的速度渲染。加载 .gltf 后，它将被添加到场景中，并在下一帧中自动渲染。

【讨论】：

太棒了。这解决了问题，模型现在在屏幕中可见！谢谢！我知道它必须是我忽略的相对较小的东西。在我能够加载模型之后，我打算用轨道控制器添加动画功能，看起来我应该先继续做。