Javascript Three.Js 与其他 GLTF 查看器相比，GLTF 加载非常慢

Question

您好，我正在尝试使用 Three.Js 实现 3D 模型查看器，但是我遇到了加载时间问题，我不知道问题出在哪里。

例如，我尝试在此处上传此模型（下载 link）：https://opensplit.com/gltf/assets/PromoModel.glb

您可以在这个 gltf 查看器中进行测试，例如：https://gltf-viewer.donmccurdy.com/

基本上几秒后就会弹出

但是你可以在我的网站上看到它需要多长时间：https://opensplit.com/ 同样的模型现在需要两分钟多的时间来加载..这不可能是正确的，为什么这么慢？

这是我的代码：

<canvas id="canvas"></canvas>   
<br>            
<div style="margin:15px; margin-bottom:0px;">
    <progress id="load_lowPoly" value="0" max="100"></progress>
        
    <div id="lowPoly_progress">Loading Raw Model</div>
</div>
<div id="progressElement" style="background: green; width:0%;"></div>
<div id="previewquali" style="margin:15px; margin-top:0px;">
    Material Quality: loading.. 
</div>
<script src="../gltf/libraries/three.js"></script>
<script src="../gltf/libraries/OrbitControls.js"></script>
<script src="../gltf/libraries/GLTFLoader.js"></script>
<script src="../gltf/libraries/RGBELoader.js"></script>
<script src="../gltf/libraries/DRACOLoader.js"></script>
<script src="../gltf/libraries/EquirectangularToCubeGenerator.js"></script>
<script src="../gltf/libraries/PMREMGenerator.js"></script>
<script src="../gltf/libraries/PMREMCubeUVPacker.js"></script>  

<script>
    window.addEventListener( "resize", this.onWindowResize, false );    
    var manager = new THREE.LoadingManager();   
    var loader = new THREE.TextureLoader()
    var windowHeight = 800; 
    var camera = new THREE.PerspectiveCamera( 47, (window.innerWidth/window.innerHeight) / windowHeight, 0.01, 100000 );
    var renderer = new THREE.WebGLRenderer( { canvas: document.getElementById( "canvas" ), antialias: true, alpha: true } );
    var controls = new THREE.OrbitControls( camera, renderer.domElement );
    var scene = new THREE.Scene();
    var loadAsset = true;
    var percentComplete;
    var gltfSource;
    var envMap;
    var mesh;
    onWindowResize();
    init();
    animate();
    
    function onWindowResize() {
        camera.aspect = (window.innerWidth/1.15) / windowHeight;
        camera.updateProjectionMatrix();
        renderer.setSize( window.innerWidth/1.15, windowHeight );
    }

    function init() {   
        camera.position.z = 0;
        camera.position.y = 0;
        camera.position.x = 2000.00;
        renderer.setPixelRatio( window.devicePixelRatio );
        renderer.setSize( window.innerWidth/1.15, windowHeight );
        renderer.physicallyCorrectLights = true;
        renderer.gammaOutput = true;
        renderer.gammaFactor = 2.8;
        renderer.setClearColor( 0xf2f2f2, 1 );
        updateWindow();
        createCubeMap( "../gltf/hdri/machine_shop_02_1k.hdr", 1024 );
        loadDraco6141012( "../gltf/assets/PromoModel.glb" );
    }

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

    function createCubeMap( src, res ) {
        new THREE.RGBELoader().setDataType( THREE.UnsignedByteType ).load( src, function ( texture ) {  
            var cubeGenerator = new THREE.EquirectangularToCubeGenerator( texture, { resolution: res } );
            var pmremGenerator = new THREE.PMREMGenerator( cubeGenerator.renderTarget.texture );
            var pmremCubeUVPacker = new THREE.PMREMCubeUVPacker( pmremGenerator.cubeLods );
            envMap = pmremCubeUVPacker.CubeUVRenderTarget.texture;
            cubeGenerator.update( renderer );
            pmremGenerator.update( renderer );
            pmremCubeUVPacker.update( renderer );
            pmremGenerator.dispose();
            pmremCubeUVPacker.dispose();
        } );
    }
    
    function loadDraco6141012( src ) {
        var loader = new THREE.GLTFLoader();
        loader.setDRACOLoader( new THREE.DRACOLoader() );
        loader.load( src, function( gltf ) {
            gltf.scene.traverse( function ( child ) {
                if ( child.isMesh ) {
                    child.material.envMap = envMap;
                    child.material.envMapIntensity = 0.8;
                    mesh = child;
                }
            } );
            scene.add( gltf.scene );
        }, function ( xhr ) {
            if ( xhr.lengthComputable ) {
                percentComplete = xhr.loaded / xhr.total * 100;
                console.log( "Loading Model - " + Math.round(percentComplete, 2) + "%" );
                document.getElementById("lowPoly_progress").innerHTML = "Loading Raw Model " + Math.round(percentComplete, 2) + "%";
                document.getElementById("load_lowPoly").value = percentComplete;
            }
        } );
    }
                
    function updateWindow() {
        onWindowResize();
    }

</script>

我认为这是最简单的方法。但是正如您在我的网站上亲眼所见，这需要很长时间才能加载。我该如何解决这个问题？

Answer 1

您可以在此处查看 Dons 查看器的代码：https://github.com/donmccurdy/three-gltf-viewer

Answer 2

这是我的猜测：

您的网站速度很慢，因为它必须先下载 glb 文件，这需要一段时间。

您可能通过将 glb 文件下载到您的计算机并将其拖到查看器中，将其与 Dons 网站进行了比较。这样下载已经完成，一切都在您的计算机上本地发生，因此您不必再等待......当然更快。

你以后怎么解决这样的问题？打开 Chrome 中的开发者工具，转到“性能”并开始录制。刷新您的网页。当模型可见时，停止录制。现在您可以在分析器中的渲染帧下方看到一个名为“网络”的小下拉菜单（或类似内容）。如果打开它，您会看到加载 .glb 文件需要 1.2 分钟。

Javascript Three.Js 与其他 GLTF 查看器相比，GLTF 加载非常慢

Javascript Three.Js GLTF Loading Is Very Slow Compared To Other GLTF Viewers

javascript

three.js

gltf