title: Three.js OrthographicCamera -- Zoom to cursor
body: <p>My Three.js project uses and OrthographicCamera and OrthographicTrackBallControls for zoom/pan. I'm trying to add functionality to zoom to the cursor position with no luck. First things first, here's how I'm getting mouse position:</p>
  
  <pre><code>var mX = ((event.clientX - offset.left) / renderer.domElement.clientWidth) * 2 - 1;
  var mY = -((event.clientY - offset.top) / renderer.domElement.clientHeight) * 2 + 1;
  var vector = new THREE.Vector3(mX, mY, 0.5);
  vector.unproject(camera);
  vector.sub(camera.position);
  </code></pre>
  
  <p>Through looking on StackOverflow, there seems to be a lot of information on how to do this with PerspectiveCamera, but these methods don't work with OrthographicCamera. I was able to find this example:</p>
  
  <p><a href="https://htmlpreview.github.io/?https://github.com/w3dot0/three.js/blob/973bf1d40ef552dbf19c19654a79f70e2882563d/examples/misc_controls_zoom_to_mouse.html" rel="nofollow noreferrer">https://htmlpreview.github.io/?https://github.com/w3dot0/three.js/blob/973bf1d40ef552dbf19c19654a79f70e2882563d/examples/misc_controls_zoom_to_mouse.html</a></p>
  
  <p>Which does precisely what I am trying to accomplish, but the code that achieves this is hidden, though I am able to discern that the camera position is being changed.</p>
  
  <p>Another SO question which is similar suggests changing camera.left, camera.right, camera.top and camera.bottom, but I have had no luck with this approach. This approach seems like a possibility, but I dont understand the calculations necessary to get the correct left, right, top and bottom values.</p>
  
  <p>So the way I see it I have two possibilities:</p>
  
  <ol>
  <li>Change camera's left/right/top/bottom to get the correct view rectangle. </li>
  <li>Change camera position.</li>
  </ol>
  
  <p>But I don't know how to get the values I need to accomplish either, let alone which is the better approach.</p>
  
  <p>UPDATE 11/16/2018:</p>
  
  <p>I've updated my function to this ( based on <a href="https://github.com/w3dot0/three.js/blob/973bf1d40ef552dbf19c19654a79f70e2882563d/examples/misc_controls_zoom_to_mouse.html" rel="nofollow noreferrer">https://github.com/w3dot0/three.js/blob/973bf1d40ef552dbf19c19654a79f70e2882563d/examples/misc_controls_zoom_to_mouse.html</a>):</p>
  
  <pre><code>zoomDirection = new THREE.Vector3();
  function mousewheel(event) {
      event.preventDefault();
      var amount = event.deltaY / 100;
      var zoom = camera.zoom - amount;
      var offset = el.offset();
      ;
      var mX = amount &gt; 0 ? 0 : ((event.clientX - offset.left) / renderer.domElement.clientWidth) * 2 - 1;
      var mY = amount &gt; 0 ? 0 : -((event.clientY - offset.top) / renderer.domElement.clientHeight) * 2 + 1;
  
      zoomDirection.set(mX, mY, 0.001)
          .unproject(camera)
          .sub(camera.position)
          .multiplyScalar(amount / zoom);
  
      camera.position.subVectors(camera.position, zoomDirection);
  
      orthographictrackBallControls.target.subVectors(orthographictrackBallControls.target, webGl.zoomDirection);
      camera.zoom = zoom;
      camera.updateProjectionMatrix();
  }
  </code></pre>
  
  <p>This seems to work at first: the camera zooms into the mouse point, but then the camera starts to "jump" around after a bit of zooming, with the mesh no longer visible on screen. </p>
  
  <p>Something that might help: I have an axis helper in the screen as well that "flips" when it stops working as expected. When the scene is loaded, the X-axis helper point due left, but when I get to the point where the camera jumps and I no longer see the mesh, the X-axis helper flips to point due right.</p>
  
  <p>Also, if I zoom OUT first, I can zoom in further before the mesh disappears. I'm not sure what this all adds up to but I would appreciate any help.</p>