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

Question

在过去的 3 周里，我一直在努力解决这个问题。如果有人可以帮助我，我将不胜感激。

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

问题是我需要三角形旋转并面向鼠标光标的方向。我不需要担心 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 平面上的坐标？

我尝试了很多方法，包括光线相交，但没有任何效果;(

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

score 0 · Accepted Answer

我实际上没有看到问题。使用 Z 坐标为 0 的 THREE.vector3。然后使用诸如 triangle.rotate(THREE.vector3(targetAngle,0,0) 之类的东西

score -5 · Accepted Answer

我怀疑您的交叉点无法正常工作，因为您的画布在 DOM 中存在 CSS 偏移。

如果您需要三角形来查看特定的东西，您应该能够简单地使用三角形的“lookAt”方法。

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

2 回答 2