title: three.js raycaster with dynamic canvas position
body: <p>i currently have a three.js scene in a twitter bootstrap environment, so the renderer.domelement can resize and change its position dependent on screen resolution, browser window size and so on.</p>
  
  <p>Now i have problems using the three.js raycaster to intersect objects in this scene. When the page loads and the scene is shown on the screen the raycaster works fine, but when i scroll the browser window and/or resize it so that the scene is at a different position in the browser window, the intersection of objects doesn't work anymore.</p>
  
  <p>i have no idea how to fix this issue...does someone have an idea how i can fix this?</p>
  
  <p>This is how my Raycaser aktually looks like:</p>
  
  <pre><code>var container = document.getElementById( 'view' );
  
  ///Raycaster///
  
      var projector = new THREE.Projector();
  
      function onDocumentMouseDown(event) {
  
          var mouseX = ( ( event.clientX - container.offsetLeft ) / container.clientWidth ) * 2 - 1;
          var mouseY = - ( ( event.clientY - container.offsetTop ) / container.clientHeight ) * 2 + 1;
  
          var vector = new THREE.Vector3(mouseX, mouseY, 0.5);
          projector.unprojectVector(vector, camera);
  
          var raycaster = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize());
  
          var intersects = raycaster.intersectObjects(objects);
  
          if (intersects.length &gt; 0) {
  
              // do something
  
              var origin = raycaster.ray.origin.clone();
              console.log(origin);
  
              }
          }
  
  }
  </code></pre>