在 THREE.js 中获取鼠标相对于 3D 空间的坐标

Question

在过去的三个星期里，我一直在努力试图解决这个问题。如果有人能帮助我，我将非常感激。

我正在开发一款类似于《几何战争》的游戏，其中屏幕中间有一个三角形，您可以在其中移动。

问题是我需要三角形旋转并面向鼠标光标的方向。我不需要担心 z 轴，因为我总是将相机置于固定位置 (z=500)，并且我将场景视为“2D 场景”——所有动作都发生在 z 轴上=0 平面。

计算三角形和鼠标之间的角度是基本的：

targetAngle = Math.atan2(mouseCoord.y-this.position.y, mouseCoord.x-this.position.x)

这是网格。

问题在于 mouseCoords 采用标准 Dom 窗口格式，而三角形的位置采用 Three.js 格式。

问）如何转换鼠标坐标以表示三角形所在 z=0 平面上的坐标？

我尝试了很多方法，包括射线相交，但没有任何效果；（

感谢大家的帮助，非常感谢你们提供了一个令人惊叹的框架！！！！

Answer 1

我怀疑你的交集不起作用，因为你的画布在 DOM 中发生了 CSS 偏移。

如果您需要三角形查看特定的内容，您应该只需使用三角形的“lookAt”方法即可。

例如，要让它查看相机：triangleMesh.lookAt(camera.position);