ThreeJS 我的 GLTF 在主机服务器上加载速度太慢？

Question

我目前正在创建一个具有 3D Market Place 功能的网站。唉，我在实现这个网站的主要功能时遇到了问题。

这是网站（alpha 状态）：https://www.openstring-studios.com/

所有代码都在 index.html 文件中，因此您可以看到它是如何制作的，不过请不要介意，我的问题只是将 3D 模型加载到场景中。

有一个名为 sketchfab.com 的网站，他们具有在 WebGL Window 中预览 PBR 资产的惊人功能。而且加载速度相当快。

这是我的问题。我想为我的网站创建一个类似的功能，并让 ThreeJS 库来完成它。然而，即使所有内容在我的 xampp 本地主机上加载得非常快，只要我将它上传到我的主机服务器上，模型就需要永远加载（可能是因为 4k 纹理）。

这是我使用的代码：

function init() {   
    camera.position.z = 0.3;
    camera.position.y = 0.15;
    camera.position.x = 0.4;
    renderer.setPixelRatio( window.devicePixelRatio );
    renderer.setSize( window.innerWidth/sceenDivide, 600 );
    renderer.physicallyCorrectLights = true;
    renderer.gammaOutput = true;
    renderer.gammaFactor = 2.8;

    new THREE.RGBELoader().setDataType( THREE.UnsignedByteType )
    .setPath( '' ).load( 'white_cliff_top_1k.hdr', function ( texture ) {   
        var cubeGenerator = new THREE.EquirectangularToCubeGenerator( texture, { resolution: 512 } );
        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 );
        loader = new THREE.GLTFLoader().setPath( '' );
        loadModel( 'Promo_ProductSoil.gltf');
        loadModel( 'Promo_ProductCover.gltf');
        loadModel( 'StraightPot_OrangePaintedIron.gltf');
        pmremGenerator.dispose();
        pmremCubeUVPacker.dispose();
        scene.background = cubeGenerator.renderTarget;
    } );
}

function loadModel( src ) {
    loader.load( src , function ( gltf ) {
        gltf.scene.traverse( function ( child ) {
            if ( child.isMesh ) {

                child.material.envMap = envMap;
                child.position.y -= 0.12
                mesh = child;                   
            }
            gltfSource = gltf;
        } );
        scene.add( gltf.scene );
    },
    function ( xhr ) {
        onProgress( xhr )
    } );
}

有没有解决方案可以达到与网站上看到的相似的加载速度sketchfab.com，因为目前我的简单锅模型在显示之前需要一分钟多的时间。

飞机加载速度如此之快的唯一原因是它们的 material 只有低分辨率的 BaseColor，没有其他任何东西。

关于如何解决这个问题的任何想法。我的网站是通过 domain.com 托管的，我应该问他们还是更多的是 ThreeJS 问题，如果是的话还有其他选择吗？

Answer 1

Is there a solution how I can achieve a similar loading speed as seen on the website sketchfab.com because at the moment my simple pot model takes over a minute before it is displayed.

如评论中所述，您的 glTF 资产太大了。例如。 StraightPot_OrangePaintedIron.gltf 的文件大小为 41 MB。有几种方法可以加快传输时间。

您可以使用 DRACO 压缩资产的几何数据，并结合使用 THREE.DRACOLoader 和 THREE.GLTFLoader 在客户端解压缩资产。以下 live example demonstrates the usage of both loaders. Use a tool like glTF Pipeline 压缩现有 glTF 资产。
降低纹理的分辨率。还可以考虑使用纹理压缩来进一步减小文件大小。但是，在 WebGL 中使用平台无关的纹理压缩还是有点不方便。 Basis 将来可能会让事情变得更容易。
通过简化几何图形总体上降低资产的复杂性。有时也可以减少材料的数量并合并各自的纹理。

three.js R108

ThreeJS 我的 GLTF 在主机服务器上加载速度太慢？

ThreeJS my GLTF loading speed is too slow on host server?

javascript

loading

three.js

gltf