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

Question

I'm currently creating a Website with a 3D Market Place feature in it. Alas, I'm having trouble implementing the main feature of this website.

This is the website (alpha state): https://www.openstring-studios.com/

All the code is in the index.html file there so you can see how it's made, don't mind the mess though, my issue is only with the loading of 3D models into the scene.

There is this website called sketchfab.com and they have this amazing feature of previewing PBR Assets within a WebGL Window. And it loads reasonably fast.

Here's my problem. I want to create a similar feature for my website and got the ThreeJS Library to do it. However, even though everything loads quite quickly on my xampp localhost as soon as I upload it on my host server, the models take forever to load (probably because of the 4k textures).

This is the code I use:

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 )
    } );
}

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.

The only reason why the planes load so fast is that their material has only a low-resolution BaseColor and nothing else.

Any ideas on how to solve this. My website is hosted through domain.com, should I ask them or is it more a ThreeJS issue and if so are there alternatives?

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.

As mentioned in the comments, your glTF assets are just too big. E.g. StraightPot_OrangePaintedIron.gltf has file size of 41 MB. There are several way in order to speed up transmission time.

• You can compress the geometry data of your assets with DRACO and use THREE.DRACOLoader in combination with THREE.GLTFLoader to decompress the asset on the client side. The following live example demonstrates the usage of both loaders. Use a tool like glTF Pipeline to compress existing glTF assets.
• Reduce the resolution of your textures. Also consider to use texture compression to further reduce the file size. However, it's still a bit inconvenient to use platform independent texture compression with WebGL. Basis will probably make things easier in the future.
• Reduce the complexity of your asset in general by simplifying the geometry. Sometimes it's also possible to lower the amount of materials and to merge the respective textures.

three.js R108