title: Javascript Three.Js GLTF Loading Is Very Slow Compared To Other GLTF Viewers
body: <p>Hello I'm trying to implement a 3D Model Viewer using Three.Js however I have a problem with the loading times and I don't know where the problem might be.</p>
  <p>As an example I'm trying to upload this model here (download link): <a href="https://opensplit.com/gltf/assets/PromoModel.glb" rel="nofollow noreferrer">https://opensplit.com/gltf/assets/PromoModel.glb</a></p>
  <p>You can test it In this gltf Viewer here for example: <a href="https://gltf-viewer.donmccurdy.com/" rel="nofollow noreferrer">https://gltf-viewer.donmccurdy.com/</a></p>
  <p>It will basically pops up after only a few seconds.</p>
  <p>However you can see how ridiculously long it takes on my website: <a href="https://opensplit.com/" rel="nofollow noreferrer">https://opensplit.com/</a>
  The same model takes now more than two minutes to load.. this cannot be correct, why is it so slow?</p>
  <p>Here is my code:</p>
  <pre><code>&lt;canvas id=&quot;canvas&quot;&gt;&lt;/canvas&gt;   
  &lt;br&gt;            
  &lt;div style=&quot;margin:15px; margin-bottom:0px;&quot;&gt;
      &lt;progress id=&quot;load_lowPoly&quot; value=&quot;0&quot; max=&quot;100&quot;&gt;&lt;/progress&gt;
          
      &lt;div id=&quot;lowPoly_progress&quot;&gt;Loading Raw Model&lt;/div&gt;
  &lt;/div&gt;
  &lt;div id=&quot;progressElement&quot; style=&quot;background: green; width:0%;&quot;&gt;&lt;/div&gt;
  &lt;div id=&quot;previewquali&quot; style=&quot;margin:15px; margin-top:0px;&quot;&gt;
      Material Quality: loading.. 
  &lt;/div&gt;
  &lt;script src=&quot;../gltf/libraries/three.js&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;../gltf/libraries/OrbitControls.js&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;../gltf/libraries/GLTFLoader.js&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;../gltf/libraries/RGBELoader.js&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;../gltf/libraries/DRACOLoader.js&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;../gltf/libraries/EquirectangularToCubeGenerator.js&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;../gltf/libraries/PMREMGenerator.js&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;../gltf/libraries/PMREMCubeUVPacker.js&quot;&gt;&lt;/script&gt;  
  
  &lt;script&gt;
      window.addEventListener( &quot;resize&quot;, 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( &quot;canvas&quot; ), 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( &quot;../gltf/hdri/machine_shop_02_1k.hdr&quot;, 1024 );
          loadDraco6141012( &quot;../gltf/assets/PromoModel.glb&quot; );
      }
  
      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( &quot;Loading Model - &quot; + Math.round(percentComplete, 2) + &quot;%&quot; );
                  document.getElementById(&quot;lowPoly_progress&quot;).innerHTML = &quot;Loading Raw Model &quot; + Math.round(percentComplete, 2) + &quot;%&quot;;
                  document.getElementById(&quot;load_lowPoly&quot;).value = percentComplete;
              }
          } );
      }
                  
      function updateWindow() {
          onWindowResize();
      }
  
  &lt;/script&gt;
  </code></pre>
  <p>I thought this was the most simple way to do it. But as you can see for yourself on my website this takes forever to load. How can I fix this issue?</p>