three.js中的工具提示

Question

当我将鼠标悬停在Three.js元素（即sphere）上时，如何创建工具提示。 我有一个3D散点图，每次将鼠标悬停在散点图中的球体上时，我都希望弹出工具提示。

任何帮助将是有用的。
预先感谢

Answer 1

您正在寻找的被称为“光线投射”，您将找到更多的信息in the documentation和the examples。

通过射线广播，您将获得有关当前光标光标位于哪个对象的信息。基于此，您可以将数据填充到工具提示中并使用鼠标位置进行定位（或者，使用like this来计算3d对象的屏幕位置并将工具提示定位在此处）。

Answer 2

我从MartinSchuhfuß的答案开始，以此为基础：

使用DOM制作：

您正在寻找的东西称为“光线投射”，您将找到更多信息in the documentation和the examples。

通过光线投射，您将获得有关当前光标光标位于哪个对象的信息。基于此，您可以将数据填充到工具提示中，并使用鼠标定位它。

或者，用like this来计算3d对象的屏幕位置，并将DOM工具提示放置在屏幕空间坐标中。

使用DOM制作工具提示是最简单的方法，但是缺点是，如果您想在工具提示中进行诸如增加光泽，阴影，凹凸贴图等操作，则无法获得WebGL渲染的好处。 / p>

使用WebGL进行操作更为复杂：

使用like this来计算3d对象的屏幕位置，并将工具提示放置在屏幕空间坐标中。

然后，使用您需要弄清楚如何相对于Three.js相机定位内容，以便项目的大小和位置在屏幕空间中。为此，请参阅以下Three.js论坛帖子：

• https://discourse.threejs.org/t/solved-how-do-we-size-something-using-screen-pixels/1177
• https://discourse.threejs.org/t/easiest-way-to-make-positive-y-axis-go-downward-without-using-scale/1333/3

一旦确定了如何在Three.js中绘制屏幕空间，就可以使用上一节 Making it with DOM 中提到的技术来确定要在屏幕空间中的哪个位置绘制WebGL工具提示。

要绘制WebGL工具提示，您有一些选择：

• 在同一场景中绘制所有元素。您可能需要调整对象的renderOrder，以使UI内容始终呈现在顶部。参见three.js: how to control rendering order
• 将元素作为纹理绘制到四边形（PlaneGeometry）上（为此您需要学习render targets），然后使用前面提到的renderOrder技术（或类似方法，请参见前面的要点）链接）以确保此四边形在所有内容的顶部都呈现。
  • 或者，使用后期处理效果在场景顶部渲染四边形，以确保四边形始终在顶部渲染，而不会干扰原始场景的渲染顺序。为此，您需要learn about post processing。
• 将屏幕空间WebGL内容渲染到第二个Thee.js场景中，绘制到第二个画布上，然后使用DOM技术将第二个画布放在第一个画布的顶部。这也将确保UI内容不会干扰第一个场景的渲染顺序，但是这种方法可能会使用最多的资源。

这三种可能性中的第一种可能最快，但最困难。这三种可能性中的最后一种可能是最简单但最慢的（但对于您的情况，这并不重要，具体取决于您要绘制的内容）。

我没有列出所有可能的选项。还有其他方法可以做到！有人可以随时对其进行编辑，以添加更多可能的方式或更多细节。

也可以随意提出其他问题，那么也许我可以扩大答案。