如何通过鼠标移动事件获取相机位置并在three.js中转换为屏幕坐标？ [关闭]

Posted 2023-02-23

【中文标题】如何通过鼠标移动事件获取相机位置并在three.js中转换为屏幕坐标？ [关闭]

【英文标题】：How to get camera position with mouse move event and transform into screen coordinates in three.js? [closed]

【发布时间】：2016-05-09 18:19:23

【问题描述】：

实际上我不知道这是否可能，但我想通过鼠标移动事件获取我的相机位置并将它们转换为屏幕坐标。更详细地说，我试图用鼠标在我的球体对象上移动，并试图通过鼠标移动获得相应的新相机位置，并想更新谷歌地图上的对象位置。我找到了一些如何将 3D 对象位置转换为 2D 的来源，但我不确定它是否适合我的场景。

[“我在 cmets 部分添加了下面问题的解决方案，希望对遇到此类类似问题的人有用。检查下面的两个链接”]

【问题讨论】：

至少你应该包含正确的依赖关系，以便可以执行小提琴。

对不起#Thomas 我对 jsfiddle 了解不多，这就是为什么如果您需要更多我什至可以详细解释的话，我会用文字解释所有内容的原因。如果您能帮助我，那就太好了。

请不要绕过 jsfiddle.net 警告。相反，请听从建议，并编辑您的帖子以包含您所描述问题的minimal reproducible example。

我已经发布了我遇到的问题的解决方案。我希望这可以更有效。 #马特，#kryger

【参考方案1】：

我猜，您希望在需要纬度和经度的谷歌地图 google 上显示您正在查看球体的点（可能带有地球纹理）。使用 2D 屏幕坐标对我来说似乎是一种奇怪的方法。

您的相机可能在位于坐标系中心的球体周围。我会将相机位置转换为极坐标/球坐标，即角度（半径无关紧要）。然后你几乎掌握了经纬度。

从您的相机位置 (x,y,z) 转换：(Conversion between Spherical and Cartesian Coordinates Systems)

您需要在公式和图形中交换y 和z，因为在three.js 中y 是向上的（也许您需要反转z）。

现在，您需要将phi（范围从0 到2*PI）和theta（0 到PI）转换为经度（-180° 到180°）和纬度（ -90° 到 90°)，这应该很容易。

您的球体上的格林威治子午线应朝向正 x 轴。

（如果我错了，请纠正我。）

【讨论】：

谢谢#Brakebein，这是我正在寻找的东西，您的参考对我帮助很大..

根据参考我找到了问题的解决方案。为了使它更简单，问题是我应该同时更新我的​​ Webgl 和地图，反之亦然，当我的鼠标移动事件被触发时。我正在分享为我执行此操作的两个转换函数。当我的 Webgl 应用程序中触发鼠标移动事件时，此函数会更新我在地图上的位置pastebin.com/t7M7PusG 现在反之亦然函数pastebin.com/JvHYnSRq