如何在 THREE.js 中将平面正确定位在相机“观看”方向的前面？

Question

我正在为我正在开发的应用程序在 3 空间中渲染一个球体，并且当鼠标悬停事件发生时，我想在相机前面覆盖一个平面（沿着它“看”的方向）球体的某些部分。该平面的目的是向用户提供有关球体该部分的信息。当用户将鼠标移离球体的该部分时，提供信息的平面应该消失。我遇到的问题是，飞机是在相机“对象”前面渲染的，而不是在它“看”的地方前面渲染的，这样飞机就在视野中居中并与相机平行。下面是说明问题的图片：

我想我可能需要对平面应用一些旋转来完成此操作，可能涉及四元数。有没有人有什么建议？

Answer 1

您可能已经知道了这一点，但所需的位置应该是相机正在观察的方向，您可以从camera.getWorldDirection()获得该方向。只需将该矢量乘以所需的距离就可以定位平面。至于旋转它，你可以使用 object.lookAt 相机的世界位置。我有一段时间没有使用 Three.js，但这与文档相符。