title: ThreeJs THREE.Mesh.position issue
body: <p>I'm totally new to three.js and just trying to get a grip on the three.js libraries.
  I've got a sphere rendering to screen but I can't tell what it's .position member is referencing, it doesn't appear to be screen coordinates.
  It's x0 point seems to be about half way across the screen (which i can handle and understand)
  but it's y0 is roughly 1/3 up from the bottom of the screen and if I move it say 300 it's not moving by 300 pixels.</p>
  
  <p>I'm kinda outta my depth and just hacking away at someone's example code to try and get a grip but this is bluffing me. I've tried looking over 3js API but not finding any answers.</p>
  
  <p>I'll post the relevant code in case somethings wrong in there.</p>
  
  <pre><code>    &lt;script src="js/Three.js"&gt;&lt;/script&gt;
      &lt;script src="js/Stats.js"&gt;&lt;/script&gt;
      &lt;script src="js/mDetector.js"&gt;&lt;/script&gt;
      &lt;script src="moddShape.js"&gt;&lt;/script&gt;
      &lt;script language="javascript" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script&gt;
          var SCREEN_WIDTH = window.innerWidth;
          var SCREEN_HEIGHT = window.innerHeight;
          var container,stats;
          var camera, scene;
          var canvasRenderer, webglRenderer;
          var mesh, zmesh, geometry, pointLight, pmesh, sphere, sphereMaterial;
          var mouseX = 0, mouseY = 0;
          var windowHalfX = window.innerWidth / 2;
          var windowHalfY = window.innerHeight / 2;
          var render_canvas = 1; 
          var render_gl = 1;
          var has_gl = 0;
          var targetX = 0, targetY = 0;
          var CameraZPos = 240;
  
          document.addEventListener( 'mousemove', onDocumentMouseMove, false );
          document.addEventListener( 'mousedown', handleMouseEvent, false );
  
          init();
          animate();
  
          function init() 
          {
              container = document.createElement( 'div' );
              document.body.appendChild( container );
              camera = new THREE.PerspectiveCamera( 90, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 100000 );
              camera.position.z = CameraZPos;
              scene = new THREE.Scene();
              // RENDERER
              webglRenderer = new THREE.WebGLRenderer
              (
                  {
                      antialias: true
                  }
              );
                  webglRenderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
                  webglRenderer.domElement.style.position = 'relative';
                  container.appendChild( webglRenderer.domElement );
                  has_gl = 1;
  
              // STATS - FPS
              stats = new Stats();
              stats.domElement.style.position = 'absolute';
              stats.domElement.style.top = '0px';
              stats.domElement.style.left = '0px';
              stats.domElement.style.zIndex = 0;
              container.appendChild( stats.domElement );
  
              { 
                  createScene(0, 100, 5, 0 ) 
              };
  
              // LIGHT
              var pointLight = new THREE.PointLight( 0xFFFFFF );
              // set its position
              pointLight.position.x = 10;
              pointLight.position.y = 50;
              pointLight.position.z = 130;
              // add to the scene
              scene.add(pointLight);
          }
  
          function createScene(x, y, z, b ) 
          {
              // create the sphere's material
              sphereMaterial = new THREE.MeshLambertMaterial(
              {
                  // red.
                  color: 0xCC0000
              });
              // set up the sphere vars
              var radius = 50, segments = 16, rings = 16;
              // create a new mesh with sphere geometry -
              sphere = new THREE.Mesh( new THREE.SphereGeometry(radius, segments, rings), sphereMaterial);
              sphere.position.set( x, y, z ); 
              sphere.scale.set( 1, 1, 1 );
              sphere.overdraw = true;
              // add the sphere to the scene
              scene.add(sphere);
          }
  
          function onDocumentMouseMove(event) 
          {
              mouseX = ( event.clientX - windowHalfX );
              mouseY = ( event.clientY - windowHalfY );
          }
  
          function animate() 
          {
              requestAnimationFrame( animate );
              render();
              stats.update();//Update FPS
          }
  
          function handleMouseEvent(mouseEvent) 
          {
              targetX = mouseX;
              targetY = mouseY;
              //Text field printouts
              //Positions relevent to 0 0 midscreen
              document.myform.XY_Coords.value = "X Pos " + targetX + "\n" + "Y Pos " + targetY;
              //Positions relevent to 0 0 top left
              document.myform.XY_Coords.value += "\n\nX Pos 2 " + mouseEvent.clientX + "\n" + "Y Pos 2 " + mouseEvent.clientY;
  
          } 
  
          function render() 
          {
              if (sphere.position.x &lt; targetX)
              {
                  sphere.position.x += .1;
              }
              if (sphere.position.y &lt; targetY)
              {
                  sphere.position.y += .1;
              }
              if (sphere.position.x &gt; targetX)
              {
                  sphere.position.x -= .1;
              }
              if (sphere.position.y &gt; targetY)
              {
                  sphere.position.y -= .1;
              }               
              camera.lookAt( scene.position );
              document.myform.shipCoords.value = "ShipX " + sphere.position.x + "\nShipY " + sphere.position.y + "\nShipZ " + sphere.position.z;
              if ( render_gl &amp;&amp; has_gl ) webglRenderer.render( scene, camera );
          }
      &lt;/script&gt;
  </code></pre>
  
  <p>Thanks in advance</p>