我一直在寻找一个与我的用例相匹配的例子,却找不到一个.我正在尝试将屏幕鼠标坐标转换为考虑到相机的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？
我不确定如何做到这一点。我阅读了很多关于光线投射的内容，这似乎有助于找到与某物相交的点，但在这种情况下，我只想将 2d 鼠标坐标插入到 3d 点鼠标点击的确切位置，无论缩放、旋转、那里是否有对象等。
我已经想到但没有接近的一种方法是制作一个平行于相机的隐形平面，始终垂直定向并始终与 y 轴相交。然后使用光线投射器击中飞机，根据需要绘制，然后删除飞机。不过，这似乎是一种愚蠢的方法。
目前我有一种方法效果很好，但是当线条远离原点或相机放大时会出现一些问题
在这张照片中，我从两个不同的角度画了两条线。垂直线是相机与 x 轴和 z 轴水平时的样子，我在 y 轴上画一条直线，而水平线是我在相机朝下涂鸦时发生的情况。 https://i.imgur.com/f8qw5xV.png
可以看到，这个计算好像是用到相机的距离来做的，所以距离相机越远，计算中的失真就越大。怎样才能摆脱这种扭曲？
来源：https : //github.com/AskAlice/mandala-3d-threejs 现场演示：https : //askalice.me/mandala/
这是相关的代码：
js/content.js@112
function get3dPointZAxis(event)
{
camPos = camera.position;
var mv = new THREE.Vector3((event.clientX / window.innerWidth) * 2 - 1, -(event.clientY/window.innerHeight) * 2 + 1, 1).unproject(camera);
var m2 = new THREE.Vector3(0,0,0);
var pos = camPos.clone();
pos.add(mv.sub(camPos).normalize().multiplyScalar(m2.distanceTo(camPos)));
return pos;
}
我使用了来自两个 stackoverflow 帖子的信息来解决这个问题，它有我所描述的问题。
首先，这篇文章展示了如何绘制并将其转换为 z 轴。它是平的。但是我在尝试在三个维度上进行工作时遇到了很多麻烦。
然后我使用以下帖子中的信息至少使其与 xz 轴上的相机平行，如下所示：https : //i.imgur.com/E9AQNpH.png
