title: How to load JSON models first in three.js and assign a variable before init?
body: <p>I want to load quite a lot of JSON models and put them in global variables so I can use them to copy, translate, etc. That way I won't have to load a model every time i need one.</p>
  
  <p>I tried some methods but it seems loading the models happens asynchronously.</p>
  
  <p>The models seem to be loaded after everything else is already done. So I will already have declared my variables but they stay empty or don’t work. How do I load the models first, wait until that is done and then start the init() and the rest of my code?</p>
  
  <p>example:</p>
  
  <pre><code>var loader = new THREE.JSONLoader();
  
  var test1 = new THREE.Object3D();
  var test2 = new THREE.Object3D();
  var test3 = new THREE.Object3D();
  var test4 = new THREE.Object3D();
  var test5 = new THREE.Object3D();
  var test6 = new THREE.Object3D();
  var test7 = new THREE.Object3D();
  
  loadparts();
  init();
  animate();
  
  function init() {
      var newpart = test1.clone();
      console.log("newpart.id:" + newpart.id);
      newpart.position.set(0,0,0);
      scene.add(newpart);
  
      console.log("test1.children.length:" + test1.children.length);
  
      placePart(test1,0,100,0);
      placePart(test2,0,200,0);
      placePart(test3,0,300,0);
      placePart(test4,0,400,0);
      placePart(test5,0,500,0);
      placePart(test6,0,600,0);
      placePart(test7,0,700,0);
  }
  
  function loadparts( ) {
  
      loader.load( "Models/test1.js", function ( geometry, materials ) { createPart( geometry, materials, test1 ) } );
      loader.load( "Models/test2.js", function ( geometry, materials ) { createPart( geometry, materials, test2 ) } );
      loader.load( "Models/test3.js", function ( geometry, materials ) { createPart( geometry, materials, test3 ) } );
      loader.load( "Models/test4.js", function ( geometry, materials ) { createPart( geometry, materials, test4 ) } );
      loader.load( "Models/test5.js", function ( geometry, materials ) { createPart( geometry, materials, test5 ) } );
      loader.load( "Models/test6.js", function ( geometry, materials ) { createPart( geometry, materials, test6 ) } );
      loader.load( "Models/test7.js", function ( geometry, materials ) { createPart( geometry, materials, test7 ) } );
  }
  
  function createPart( geometry, materials, object3Dtemp) {
      Part = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial( materials ) );
      Part.scale.set( 1000, 1000, 1000 );
      console.log("ModelPart created:" + Part.id);
      object3Dtemp.add( Part );
  }
  
  function placePart( object3Dtemp, x, y, z) {
      Part = object3Dtemp.clone();
      Part.position.set( x, y, z );
  
      console.log("Part.id:" + Part.id);
      scene.add( Part );
  }
  </code></pre>
  
  <p>in console:</p>
  
  <pre><code>newpart.id:12 
  test1.children.length:0
  Part placed: 0 100 0 13 
  Part placed: 0 200 0 14 
  Part placed: 0 300 0 15 
  Part placed: 0 400 0 16 
  Part placed: 0 500 0 17 
  Part placed: 0 600 0 18 
  Part placed: 0 700 0 19
  THREE.WebGLRenderer 63 
  ModelPart created:21 
  ModelPart created:22 
  ModelPart created:23 
  ModelPart created:24 
  ModelPart created:25 
  ModelPart created:26 
  ModelPart created:27 
  </code></pre>