title: How to add my obj model to a three.js scene?
body: <p>Here is the link to the example <a href="http://threejs.org/examples/#misc_controls_pointerlock" rel="nofollow">http://threejs.org/examples/#misc_controls_pointerlock</a>.  From what I can see in the source code the geometry is created in the code.  How would you go about putting your own model in there?</p>
  
  <p>(Very new to JS and webGL so be gentle). Thanks in advance.</p>
  
  <p>Edit:</p>
  
  <p>In the example cubes are generated on the floor.  I would also like my model to sit on the floor.  This is how they did it:</p>
  
  <p>// floor</p>
  
  <pre><code>            geometry = new THREE.PlaneGeometry( 2000, 2000, 100, 100 );
              geometry.applyMatrix( new THREE.Matrix4().makeRotationX( - Math.PI / 2 ) );
  
              for ( var i = 0, l = geometry.vertices.length; i &lt; l; i ++ ) {
  
                  var vertex = geometry.vertices[ i ];
                  vertex.x += Math.random() * 20 - 10;
                  vertex.y += Math.random() * 2;
                  vertex.z += Math.random() * 20 - 10;
  
              }
  
              for ( var i = 0, l = geometry.faces.length; i &lt; l; i ++ ) {
  
                  var face = geometry.faces[ i ];
                  face.vertexColors[ 0 ] = new THREE.Color().setHSL( Math.random() * 0.2 + 0.5, 0.75, Math.random() * 0.25 + 0.75 );
                  face.vertexColors[ 1 ] = new THREE.Color().setHSL( Math.random() * 0.2 + 0.5, 0.75, Math.random() * 0.25 + 0.75 );
                  face.vertexColors[ 2 ] = new THREE.Color().setHSL( Math.random() * 0.2 + 0.5, 0.75, Math.random() * 0.25 + 0.75 );
  
              }
  
              material = new THREE.MeshBasicMaterial( { vertexColors: THREE.VertexColors } );
  
              mesh = new THREE.Mesh( geometry, material );
              scene.add( mesh );
  
              // objects, creates one cube
  
              geometry = new THREE.BoxGeometry( 20, 20, 20 );             
  
              material = new THREE.MeshPhongMaterial( { specular: 0xffffff, shading: THREE.FlatShading, vertexColors: THREE.VertexColors } );
  
              var mesh = new THREE.Mesh( geometry, material );
              mesh.position.x = Math.floor( Math.random() * 20 - 10 ) * 20;
              mesh.position.y = Math.floor( Math.random() * 20 ) * 20 + 10;
              mesh.position.z = Math.floor( Math.random() * 20 - 10 ) * 20;
              scene.add( mesh );              
  
              objects.push( mesh );           
  
              renderer = new THREE.WebGLRenderer();
              renderer.setClearColor( 0xffffff );
              renderer.setSize( window.innerWidth, window.innerHeight );
  
              document.body.appendChild( renderer.domElement ); 
  </code></pre>
  
  <p>I've included the relevant scrips and have called the scene <code>scene</code> as you suggested. If i delete the code from  <code>// objects, creates one cube</code> down and replace it with my own model the floor get deleted and my model does not show:</p>
  
  <pre><code>             var manager = new THREE.LoadingManager();
              manager.onProgress = function ( item, loaded, total ) {
                  console.log( item, loaded, total );
              };
  
              var loader = new THREE.OBJLoader( manager );
              loader.load( 'obj/springCastle.obj', 'obj/springCastle.mtl', function ( object ) {
  
                  //set properties of object (i.e. position, rotation, etc);                  
                  object.position.y = - 80;
                  scene.add( object );
  
              } ); 
  </code></pre>
  
  <p>Sorry if its something blindingly obvious, but if you could help in anyway that would be great.</p>