THREE.js, Orthographic Camera, 找到y=0处的x和z

Question

此代码适用于透视相机：

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));

如何使用正交相机获得相同的 3D 坐标？

Answer 1

如果您使用的是正交相机并且想知道鼠标点击发出的光线与 XZ 平面相交的位置，您可以使用如下模式：

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 将是鼠标下方位于 XZ 平面中的 3D 点。

确保正确初始化 OrthographicCamera。参见 Three.js - Orthographic camera。

three.js r.79

THREE.js, Orthographic Camera, 找到y=0处的x和z

THREE.js, Orthographic Camera, find x and z where y=0

mouse

location

orthographic

three.js