three.js - 单击平面内的 X Y 位置答案

【问题标题】：three.js - X Y position INSIDE of a clicked planethree.js - 单击平面内的 X Y 位置
【发布时间】：2018-04-17 23:08:40
【问题描述】：

所以我可以使用 raycaster 获取鼠标下方的当前对象（本例为平面），但我希望获得平面内鼠标位置的准确 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 值？

【问题讨论】：

标签： javascript 3d three.js

【解决方案1】：

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

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

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

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

three.js r.65

【讨论】：

嗨@WestLangley，此方法适用于旋转平面，但如果在相交对象上调用了 .updateMatrixWorld 则无效。这是可以预期的吗？三.js r85.
@MichaelRibbons 如果您遇到问题，请发布一个包含所有相关信息的新问题。