title: ThreeJS my GLTF loading speed is too slow on host server?
body: <p>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.</p>
  
  <p>This is the website (alpha state): <a href="https://www.openstring-studios.com/" rel="nofollow noreferrer">https://www.openstring-studios.com/</a></p>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>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).</p>
  
  <p>This is the code I use:</p>
  
  <pre><code>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 )
      } );
  }
  </code></pre>
  
  <p>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.</p>
  
  <p>The only reason why the planes load so fast is that their material has only a low-resolution BaseColor and nothing else.</p>
  
  <p>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?</p>