title: How to dynamically add mesh from Object3D to new Object in THREE.js
body: <p>I am a complete newbie to 3d programming and have been working with three.js just over a week now. I have managed to load multiple collada and obj files, and managed to get perspectives, trackballs, everything working from examples. However, now I am stuck and need some help. For reference you can see the file i'm posting about at the following url:</p>
  
  <p><a href="http://shaman-labz.appspot.com/webgl_loader_obj_mtl.html" rel="nofollow">http://shaman-labz.appspot.com/webgl_loader_obj_mtl.html</a></p>
  
  <p>This page is basically straight from the examples, except that i am loading up an obj file, which has all these objects as meshes. what i am working on now is after loading the obj, i am going to iterate through all the geometries in the object and extract them so that i can drop them in the scene one a time when i need them, or have them float around like bubbles or something. I was thinking to maybe try to use the fresnel example, but this is where i'm hitting up against the boundaries of my understanding, and some terminology escapes me.</p>
  
  <p>My question is, when this runs, the object that returns and is added to the scene after load has all these gems in it together. </p>
  
  <p>So instead of the following lines:</p>
  
  <pre><code>var loader = new THREE.OBJMTLLoader();
  loader.addEventListener( 'load', function ( event ) {
      var object = event.content;
      object.position.y = - 100;
      scene.add( object );
  });
  loader.load( 'obj/gems/24.obj', 'obj/gems/24.mtl' );  
  </code></pre>
  
  <p>So what i'm doing is when the object returns, i look at the internals in debug/break mode, and i see that it's an object3D and object.children is an array of 25 meshes...and each of those meshes would be one of my 'gems' that i want to work with individually.</p>
  
  <p>So here's where i get lost...when i grab the 'mesh' do i need to strip out the underlying geometry and create a new mesh?</p>
  
  <p>on this page, you can see what i tried to accomplish:</p>
  
  <p><a href="http://shaman-labz.appspot.com/webgl_loader_obj_mtl2.html" rel="nofollow">http://shaman-labz.appspot.com/webgl_loader_obj_mtl2.html</a></p>
  
  <p>the only major difference is in this section of code:</p>
  
  <pre><code>var loader = new THREE.OBJMTLLoader();
  loader.addEventListener( 'load', function ( event ) {
          var object = event.content;
          var pos=0;
          for(var i=0; i&lt; object.children.length; i++){
              var m = object.children[i];
              var gem = new THREE.Object3D();
              gem.name=m.name;
              gem.add(m);                     
              gem.position.x = -10;
              gem.position.y = -10;
              gem.position.z = pos;
              scene.add( gem );
              pos = pos - 10;
      }
  });
  loader.load( 'obj/gems/24.obj', 'obj/gems/24.mtl' );
  </code></pre>
  
  <p>notice that only 13 of the 25 gems show up from the collection, and also note how they are scattered, indicating that they are somehow still linked to some higher-order relationships that i am unable to set with position properly (it's like each mesh is somehow offset relative to it's original positioning in the original object loaded...thinking this has to do with world matrix?</p>