Javascript three.js中的工具提示

如何在悬停在三个.js元素（即球体）上时创建工具提示

我有一个三维散点图，每次我鼠标在散点图中的球体上时，我都希望弹出一个工具提示

如何在纯WebGL中制作此工具提示

---

如何使用DOM制作它？

您正在寻找的被称为“光线投射”，您将找到更多信息和帮助

---

通过光线投射，您将获得当前鼠标光标下的对象的信息。基于此，你可以将数据填充到工具提示中，并使用鼠标位置来定位它（或者，使用一些东西来计算3D对象的屏幕位置并在其中放置工具提示）。

水果挞>我从Martin Schuhfu的答案开始，作为回答的基础：

使用DOM制作：

---

你正在寻找的是所谓的“光线投射”，你会发现一些更多的信息和信息

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

或者，也可以计算3d对象的屏幕位置，并将DOM工具提示定位在屏幕空间坐标中

使用DOM制作工具提示是最简单的方法，但缺点是，如果要在工具提示中添加光泽、阴影、凹凸贴图等，则无法获得WebGL渲染的好处

使用WebGL制作更为复杂： 使用一些东西来计算3d对象的屏幕位置，并将工具提示定位在屏幕空间坐标中

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

一旦您了解了如何在Three.js中绘制屏幕空间，就可以使用前面的

使用DOM制作部分中提到的技术来确定要在屏幕空间中的何处绘制WebGL工具提示

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


在同一场景中绘制所有元素。您可能需要调整对象的
renderOrder
，以便UI内容始终呈现在顶部。看
将元素作为纹理绘制到四边形（PlaneGeometry）上（您需要了解这一点），然后使用前面提到的
renderOrder
技术（或类似技术，请参见前面的项目符号链接）确保该四边形渲染在所有内容之上。

或者，使用后处理效果在场景顶部渲染四边形，以确保它始终在顶部渲染，而不会影响原始场景的渲染顺序。为此，你需要

将屏幕空间WebGL内容渲染到第二个e.js场景中的第二个画布上，然后使用DOM技术将第二个画布放在第一个画布上。这还将确保UI内容不会干扰第一个场景的渲染顺序，但这种方法可能会使用最多的资源

三种可能性中的第一种可能最快，但最困难。三种可能性中的最后一种可能最简单，但速度最慢（但在你的情况下，这可能并不重要，取决于你想画什么）

我没有列出所有可能的选择。还有其他方法可以做到这一点！有人可以随意编辑，添加更多可能的方式或更多细节

也可以自由提问，然后我可以扩展答案。
可能重复^Other topic-three.js呈现到画布元素的WebGL上下文中。