THREE.js, Orthographic Camera, найдите x и z, где y = 0

Этот код работает на перспективной камере:

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-координаты с помощью ортогональной камеры?


location three.js mouse orthographic
person MikeB    schedule 11.08.2016    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Если вы используете орфографическую камеру и хотите знать, где луч, исходящий от щелчка мыши, пересекает плоскость 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.

Убедитесь, что вы правильно инициализировали OrthographicCamera. См. раздел Three.js — Ортогональная камера.

три.js р.79

person WestLangley    schedule 11.08.2016
comment
Я включил этот код в функцию под названием unprojectOrtho(), которая доступна в этой демонстрации. - person karlphillip; 06.01.2021