title: Threejs object selection issue
body: <p>Im currently working on an small web-application which is using threejs. I ran into the following issue: </p>
  
  <p>I build a prototype which contains my threejs content and everything works well here (The canvas is in the prototype window.innerWidth and window.innerHeight => so has the same size as my Browser window. Selecting works well but I want to use the canvas on my web page application and picking of 3d surfaces needs to work as well there. </p>
  
  <p>I discovered as soon as I change the margin or top via CSS of the canvas it doesn't work anymore. The web-application is based on a scroll page and the threejs canvas is inside a div container which can only be seen by scrolling through the page.</p>
  
  <p>For picking I use the following logic/code -> this one works well in the "fullscreen prototype" but not in the web application page</p>
  
  <p><code></p>
  
  <pre><code>self.renderer.domElement.addEventListener( 'click', function(event){
  
      event.preventDefault();
      //CONVERT MOUSE POSITION TO CORRECT VECTOR
      var vector = new THREE.Vector3( ( event.clientX / window.innerWidth ) * 2 - 1, - ( event.clientY / window.innerHeight ) * 2 + 1, 0.5 );
      //TRANSLATES A 2D POINT FROM Normalized Device Coordinates TO RAYCASTER THAT CAN BE USED FOR PICKING
      self.projector.unprojectVector( vector, self.camera );
      //RAYCASTER IS NEEDED TO DETECT INTERACTION WITH CUBE SURFACE
      var raycaster = new THREE.Raycaster( self.camera.position, vector.sub( self.camera.position ).normalize() );
      var intersects = raycaster.intersectObjects( self.scene.children );
      //CHANGE COLOR BASED ON INTERSECTION WITH ELEMENT
      if ( intersects.length &gt; 0 ) {
          //SELECTED OBJECT
      }
  }, false );
  </code></pre>
  
  <p></code> </p>
  
  <p>I think that the calculation is wrong for the var vector but I just can't figure it out how to do it correctly.</p>
  
  <p>Any help would be appreciated
  Thank you 
  best reards</p>