鼠标/画布X，Y到Three.js世界X，Y，Z

Question

我一直在寻找一个与我的用例相匹配的例子，却找不到一个。我正在尝试将屏幕鼠标坐标转换为考虑到相机的3D世界坐标。解决方案我发现所有人都做射线交叉以实现对象拾取。我想要做的是将Three.js对象的中心定位在鼠标当前“结束”的坐标上。我的相机位于x：0，y：0，z：500（虽然它会在模拟过程中移动）并且我的所有物体都在z = 0时具有不同的x和y值，所以我需要知道世界X，Y为基础假设az = 0表示跟随鼠标位置的对象。这个问题看起来像一个类似的问题，但没有解决方案：在THREE.js中获取鼠标相对于3D空间的坐标给定屏幕上的鼠标位置，其范围为“左上角= 0,0 |右下角= window.innerWidth，window.innerHeight”，任何人都可以提供将Three.js对象移动到鼠标坐标的解决方案沿z = 0？

Answer 1

您不需要在场景中有任何对象来执行此操作。

你已经知道相机的位置了。

使用vector.unproject( camera )你可以获得指向你想要的方向的光线。

您只需要从摄像机位置延伸该光线，直到光线尖端的z坐标为零。

你可以这样做：

var vec = new THREE.Vector3(); // create once and reuse

var pos = new THREE.Vector3(); // create once and reuse

vec.set(

    ( event.clientX / window.innerWidth ) * 2 - 1,

    - ( event.clientY / window.innerHeight ) * 2 + 1,

    0.5 );

vec.unproject( camera );

vec.sub( camera.position ).normalize();

var distance = - camera.position.z / vec.z;

pos.copy( camera.position ).add( vec.multiplyScalar( distance ) );

变量pos是3D空间中的点的位置，“鼠标下方”和平面中的位置z=0。

编辑：如果您需要“在鼠标下”和平面中的点z = targetZ，请将距离计算替换为：

var distance = ( targetZ - camera.position.z ) / vec.z;

three.js r.98