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

Question

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

我正在开发一个类似于Geometry Wars的游戏，在游戏中，屏幕中央有一个三角形，您可以移动它。

问题在于，我需要三角形旋转并朝向鼠标指针的方向。我不需要担心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平面上三角形所在的坐标？

我已经尝试了许多方法，包括光线相交，但都没有成功；（

感谢大家的帮助，也非常感谢这个框架！

- Jamie Fearon

---

如果我没记错的话，DOM鼠标从0,0到宽度、高度，并从左上角开始。你尝试过将这些坐标从-1,-1转换为1,1并从左下角开始吗？ - Torsten Becker

这可能会有所帮助：https://dev59.com/D2cs5IYBdhLWcg3wMhGz#49847108 - SalientBrain

Answer 1

我并没有看到问题。使用z坐标为0的THREE.vector3，然后使用类似于triangle.rotate(THREE.vector3(targetAngle,0,0)之类的东西

- lesolorzanov

Answer 2

我怀疑你的交叉点没有起作用，可能是因为你的画布在DOM中有CSS偏移。

如果你需要三角形看向特定的东西，你应该可以简单地使用三角形的“lookAt”方法。

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

- cubicleDowns