Three.js - 单击平面内的 XY 位置

Question

因此，我可以使用光线投射器获取鼠标下的当前对象（本例为平面），但我希望获得平面内鼠标位置的准确 X 和 Y 值。

var vector = new THREE.Vector3( ( event.clientX / window.innerWidth ) * 2 - 1, - ( event.clientY / window.innerHeight ) * 2 + 1,
    0.5 );

projector.unprojectVector( vector, camera );

var raycaster = new THREE.Raycaster( camera.position, vector.sub( camera.position ).normalize() );

var intersects = raycaster.intersectObject(plane, true);

if (intersects.length > 0) {
    console.log(intersects[0].point);
}

如果我的 200x200 平面面向摄像头，则intersects[0].point.x范围如预期从 -100 到 +100。但当我旋转飞机时，我得到的结果好坏参半。

无论飞机在场景中的哪个位置，如何获得 -100 到 +100 的 x 值？

Answer 1

要在使用 时获取对象局部坐标系中的交点Raycaster，请执行以下操作：

var vector = new THREE.Vector3().copy( intersects[ 0 ].point );

intersects[ 0 ].object.worldToLocal( vector );

console.log( 'local point: ', vector );

三.js r.65