title: Three JS convert 3D dimensions to 2D
body: <p>I would like to take the world space coordinates of a sphere to screenspace coordinates in order to get the screen space bounds, which I can then use to overlay a div.</p>
  
  <p>Ideally I would like to extend this function to return the height and width of the object, as well as the x &amp; y :</p>
  
  <p>toScreenPosition : function (obj, camera)
      {</p>
  
  <pre><code>    var vector = new THREE.Vector3();
  
      var widthHalf = 0.5*world.renderer.context.canvas.width;
      var heightHalf = 0.5*world.renderer.context.canvas.height;
  
      obj.updateMatrixWorld();
  
      vector.setFromMatrixPosition(obj.matrixWorld);
      vector.project(camera);
  
      vector.x = ( vector.x * widthHalf ) + widthHalf;
      vector.y = - ( vector.y * heightHalf ) + heightHalf;
  
  
      return { 
          x: vector.x,
          y: vector.y
      };
  
  },
  </code></pre>