title: How to make a loading screen in three.js?
body: <p>I have a large amount of textures and models to load into my project. I am trying to show a progress bars while everything is loading. 
  I think the <strong>LoadingManager</strong> does just what I need as it tracks the progress of all loaded assets. </p>
  
  <p>I'm using the JSONLoader and TextureLoader.</p>
  
  <p>If anyone could show me how to do implement this in the example code would be awesome. </p>
  
  <p><a href="https://i.stack.imgur.com/5LnVX.gif"><img src="https://i.stack.imgur.com/5LnVX.gif" alt="enter image description here"></a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var camera, scene, renderer;
  
   init();
   animate();
  
   function init() {
  
     camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 1000);
     camera.position.z = 400;
  
     scene = new THREE.Scene();
  
  
     // Load Textures 
     var modeltexture1 = new THREE.TextureLoader().load('modeltexture1.jpg');
     var modeltexture2 = new THREE.TextureLoader().load('modeltexture2.jpg');
     var modeltexture3 = new THREE.TextureLoader().load('modeltexture3.jpg');
     var modeltexture4 = new THREE.TextureLoader().load('modeltexture4.jpg');
    
     // Materials
     var material = {
       "texture1": new THREE.MeshPhongMaterial({ map: modeltexture1 }),
       "texture2": new THREE.MeshPhongMaterial({ map: modeltexture2 }),
       "texture3": new THREE.MeshPhongMaterial({ map: modeltexture3 }),
       "texture4": new THREE.MeshPhongMaterial({ map: modeltexture4 }),
     }
  
     // Lights
     scene.add(new THREE.AmbientLight(0xcccccc));
     pointLight = new THREE.PointLight(0xff4400, 5, 30);
     pointLight.position.set(5, 0, 0);
     scene.add(pointLight);
    
     var loader = new THREE.JSONLoader();
  
  
     // Model1
     var model1 = new THREE.Object3D;
     scene.add(model1);
  
     loader.load("model1.js", function(geometry) {
       var mainmodel1 = new THREE.Mesh(geometry, material["texture1"]);
       model1.add(mainmodel1);
     }); 
     
     // Model2
     var model2 = new THREE.Object3D;
     scene.add(model2);
  
     loader.load("model2.js", function(geometry) {
       var mainmodel2 = new THREE.Mesh(geometry, material["texture2"]);
       model2.add(mainmodel2);
     });
     
     // Model3
     var model3 = new THREE.Object3D;
     scene.add(model3);
  
     loader.load("model3.js", function(geometry) {
       var mainmodel3 = new THREE.Mesh(geometry, material["texture3"]);
       model3.add(mainmodel3);
     });   
     
     // Model4
     var model4 = new THREE.Object3D;
     scene.add(model4);
  
     loader.load("model4.js", function(geometry) {
       var mainmodel4 = new THREE.Mesh(geometry, material["texture4"]);
       model4.add(mainmodel4);
     });  
     
     renderer = new THREE.WebGLRenderer();
     renderer.setPixelRatio(window.devicePixelRatio);
     renderer.setSize(window.innerWidth, window.innerHeight);
     document.body.appendChild(renderer.domElement);
  
     //
  
     window.addEventListener('resize', onWindowResize, false);
  
   }
  
   function onWindowResize() {
  
     camera.aspect = window.innerWidth / window.innerHeight;
     camera.updateProjectionMatrix();
  
     renderer.setSize(window.innerWidth, window.innerHeight);
  
   }
  
   function animate() {
  
     requestAnimationFrame(animate);
     renderer.render(scene, camera);
  
   }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    margin: 0;
  }
  canvas {
    width: 100%;
    height: 100%
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r74/three.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>