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

Posted 2023-02-27

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

【英文标题】：Getting coordinates of the mouse in relation to 3D space in THREE.js

【发布时间】：2012-06-08 03:02:37

【问题描述】：

过去 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 平面上的坐标？

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

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

【问题讨论】：

IIRC dom 鼠标从 0、0 到宽度、高度并从左上角开始。您是否尝试过从左下角开始将这些坐标从 -1、-1 转换为 1,1？

这可能会有所帮助：***.com/a/49847108/1453867

【参考方案1】：

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

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

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

【参考方案2】：

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