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

Question

我目前正在创建一个包含 3D Market Place 功能的网站。唉，我在实现该网站的主要功能时遇到了麻烦。

这是网站(alpha状态):https://www.openstring-studios.com/

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

有一个名为 sketchfab.com 的网站，他们具有在 WebGL 窗口中预览 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演示了两个加载器的用法。使用类似 glTF Pipeline 的工具压缩现有的 glTF 资源。
• 降低纹理的分辨率。还可以考虑使用纹理压缩来进一步减小文件大小。然而，通过 WebGL 使用平台无关的纹理压缩仍然有点不方便。 Basis将来可能会让事情变得更容易。
• 通过简化几何形状，总体上降低 Assets 的复杂性。有时也可以减少 Material 数量并合并各自的纹理。

三.js R108