1

This code works on the perspective camera:

var vector = new THREE.Vector3((mouseX / window.innerWidth) * 2 - 1, -(mouseY / window.innerHeight) * 2 + 1, 0.5);
vector.unproject(camera);
var dir = vector.sub(camera.position).normalize();
var distance = -camera.position.y / dir.y;
var cursor3DPos = camera.position.clone().add(dir.multiplyScalar(distance));

How do I get the same 3D coordinates using an Orthographic Camera?

MikeB
  • 53
  • 3

1 Answers1

2

If you are using an orthographic camera and you want to know where a ray eminating from a mouse click intersects the XZ-plane, you can use a pattern like so:

var raycaster = new THREE.Raycaster(); // create once and reuse
var mouse = new THREE.Vector2(); // create once and reuse
var position = new THREE.Vector3(); // create once and reuse

...

mouse.x = ( event.clientX / renderer.domElement.width ) * 2 - 1;
mouse.y = - ( event.clientY / renderer.domElement.height ) * 2 + 1;

raycaster.setFromCamera( mouse, camera );

var origin = raycaster.ray.origin;
var dir = raycaster.ray.direction;
var distance = - origin.y / dir.y;

position.copy( origin ).add( dir.multiplyScalar( distance ) );

position will be the 3D point under the mouse that lies in the XZ-plane.

Be sure you initialize your OrthographicCamera properly. See Three.js - Orthographic camera.

three.js r.79

Community
  • 1
  • 1
WestLangley
  • 102,557
  • 10
  • 276
  • 276
  • I wrapped up this code in a function called `unprojectOrtho()` which is available on [this demo](https://codepen.io/karlphillip/pen/rNMvZKR). – karlphillip Jan 05 '21 at 22:44