title: ThreeJS Loading Screen
body: <p>Im completely new at ThreeJS and currently working on something like a 3D Configurator. Now Im trying to implement a loading screen before the obj object is loaded, this is my code right now:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
      &lt;div id="container"&gt;&lt;/div&gt;
  
  
      &lt;script src="js/three.js"&gt;&lt;/script&gt;
      &lt;script src="js/OrbitControls.js"&gt;&lt;/script&gt;
      &lt;script src="js/RGBELoader.js"&gt;&lt;/script&gt;
      &lt;script src="js/HDRCubeTextureLoader.js"&gt;&lt;/script&gt;
  
      &lt;script src="js/Detector.js"&gt;&lt;/script&gt;
      &lt;script src="js/stats.min.js"&gt;&lt;/script&gt;
  
      &lt;script src="js/PMREMGenerator.js"&gt;&lt;/script&gt;
      &lt;script src="js/PMREMCubeUVPacker.js"&gt;&lt;/script&gt;
      &lt;script src="js/dat.gui.min.js"&gt;&lt;/script&gt;
  
      &lt;script src="js/EffectComposer.js"&gt;&lt;/script&gt;
      &lt;script src="js/RenderPass.js"&gt;&lt;/script&gt;
      &lt;script src="js/MaskPass.js"&gt;&lt;/script&gt;
      &lt;script src="js/ShaderPass.js"&gt;&lt;/script&gt;
      &lt;script src="js/CopyShader.js"&gt;&lt;/script&gt;
      &lt;script src="js/FXAAShader.js"&gt;&lt;/script&gt;
      &lt;script src="js/BloomPass.js"&gt;&lt;/script&gt;
      &lt;script src="js/ConvolutionShader.js"&gt;&lt;/script&gt;
  
      &lt;script src="js/OBJLoader.js"&gt;&lt;/script&gt;
  
  
  
  
      &lt;script&gt;
          if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
          var container, stats;
          var params = {
              projection: 'normal',
              Rotieren: false,
              reflectivity: 1.0,
              background: false,
              Beleuchtung: 2.0,
              Farbe: 'Black'
          };
          var camera, scene, renderer, controls, objects = [];
          var hdrCubeMap;
          var composer;
          var gemBackMaterial, gemFrontMaterial;
          var hdrCubeRenderTarget;
          init();
          animate();
  
  
          function init() {
              container = document.createElement( 'div' );
              document.body.appendChild( container );
              camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 2000 );
  
              camera.position.set( 0.0, -10, 20 * 25 );
              scene = new THREE.Scene();
              scene.background = new THREE.Color( 0x000000 );
              renderer = new THREE.WebGLRenderer( { antialias: true } );
  
  
              gemBackMaterial = new THREE.MeshPhysicalMaterial( {
                  map: null,
                  color: 0x0000ff,
                  metalness: 1.0,
                  roughness: 0,
                  opacity: 0.5,
                  side: THREE.BackSide,
                  transparent: true,
                  envMapIntensity: 5,
                  premultipliedAlpha: true,
                  wireframe: false
  
  
              } );
              gemFrontMaterial = new THREE.MeshPhysicalMaterial( {
                  map: null,
                  color: 0x0000ff,
                  metalness: 0.0,
                  roughness: 0,
                  opacity: 0.5,
                  side: THREE.FrontSide,
                  transparent: true,
                  envMapIntensity: 5,
                  premultipliedAlpha: true,
                  wireframe: false
              } );
  
  
              var manager = new THREE.LoadingManager();
              manager.onProgress = function ( item, loaded, total ) {
                  console.log( item, loaded, total );
              };
  
  
              var textureLoader = new THREE.TextureLoader();
              var map = textureLoader.load('img/4.png');
              var material = new THREE.MeshPhysicalMaterial({map: map});
  
  
              var loader = new THREE.OBJLoader( manager );
  
  
              loader.load( 'models/testgpu.obj', function ( object ) {
                  object.traverse( function ( child ) {
                      if ( child instanceof THREE.Mesh ) {
                          child.material = gemBackMaterial;
  
                          child.material = material;
  
  
                          var second = child.clone();
                          second.material = gemFrontMaterial;
                          var parent = new THREE.Group();
                          parent.add( second );
                          parent.add( child );
                          scene.add( parent );
                          objects.push( parent );
                      }
                  } );
              } );
  
              //Beleuchtung mit Ambientlights
              var ambient = new THREE.AmbientLight( 0x666666 );
              scene.add( ambient );
              directionalLight = new THREE.DirectionalLight( 0xffffff, 2 );
              directionalLight.position.set( 2, 1.2, 10 ).normalize();
              scene.add( directionalLight );
              directionalLight = new THREE.DirectionalLight( 0xffffff, 1 );
              directionalLight.position.set( -2, 1.2, -10 ).normalize();
              scene.add( directionalLight );
              pointLight = new THREE.PointLight( 0xffaa00, 2 );
              pointLight.position.set( 2000, 1200, 10000 );
              scene.add( pointLight );
              renderer.setPixelRatio( window.devicePixelRatio );
              renderer.setSize( window.innerWidth, window.innerHeight );
              renderer.shadowMap.enabled = true;
              container.appendChild( renderer.domElement );
              renderer.gammaInput = true;
              renderer.gammaOutput = true;
              stats = new Stats();
              container.appendChild( stats.dom );
              controls = new THREE.OrbitControls( camera, renderer.domElement );
              window.addEventListener( 'resize', onWindowResize, false );
  
  
              var gui = new dat.GUI();
              gui.add( params, 'Beleuchtung', 0.1, 2 );
              gui.add( params, 'Rotieren' );
              gui.add( params, 'Farbe', [ 'Blue', 'Green', 'Red', 'White', 'Black', 'Purple' ] );
              gui.open();
          }
  
  
          function onWindowResize() {
              var width = window.innerWidth;
              var height = window.innerHeight;
              camera.aspect = width / height;
              camera.updateProjectionMatrix();
              renderer.setSize( width, height );
          }
  
  
  
  
          function animate() {
  
  
              requestAnimationFrame(animate);
  
  
              stats.begin();
              render();
              stats.end();
  
          }
  
  
  
  
  
          function render() {
              if ( gemBackMaterial !== undefined &amp;&amp; gemFrontMaterial !== undefined ) {
  
                  var newColor = gemBackMaterial.color;
                  switch( params.Farbe ) {
                      case 'Blue': newColor = new THREE.Color( 0x000088 ); break;
                      case 'Red': newColor = new THREE.Color( 0x880000 ); break;
                      case 'Green': newColor = new THREE.Color( 0x008800 ); break;
                      case 'White': newColor =  new THREE.Color( 0x888888 ); break;
                      case 'Black': newColor =  new THREE.Color( 0x0f0f0f ); break;
                      case 'Purple': newColor =  new THREE.Color( 0xff00ff ); break;
  
                  }
                  gemBackMaterial.color = gemFrontMaterial.color = newColor;
              }
              renderer.toneMappingExposure = params.Beleuchtung;
              var timer = Date.now() * 0.00025;
              camera.lookAt( scene.position );
              if( params.Rotieren ) {
                  for ( var i = 0, l = objects.length; i &lt; l; i ++ ) {
                      var object = objects[ i ];
                      object.rotation.y += 0.005;
                  }
              }
              renderer.render( scene, camera );
          }
      &lt;/script&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  <p>I tried something like this:</p>
  
  <pre><code>    var loadingScreen =
          {
              scene = new THREE.Scene();
              camera = new PerspectiveCamera(90, 1280/720, 0.1, 1000);
              box : new THREE.Mesh(
                  new THREE.BoxGeometry(0.5,0.5, 0.5),
              new THREE.MeshBasicMaterial ({color:0x4444ff})
          )
          };
  
          var RESORUCES_LOADED = false;
  </code></pre>
  
  <p>Putting the loadingscreen into function init:</p>
  
  <pre><code>            loadingScreen.box.position.set(0,0,5);
              loadingScreen.camera.lookAt(loadingScreen.box.position);
              loadingScreen.scene.add(loadingScreen.box);
  </code></pre>
  
  <p>And finally in the function animate:</p>
  
  <pre><code>    if (RESORUCES_LOADED == false)
              {
                  requestAnimationFrame(animate);
                  renderer.render(loadingScreen.scene, loadingScreen.camera);
                  stats.begin();
                  render();
                  stats.end();
  
                  return;
              }
  </code></pre>
  
  <p>But this is not working, do you have any tips?</p>