three.js 中的工具提示

Posted 2023-02-22

【中文标题】three.js 中的工具提示

【英文标题】：Tooltip in three.js

【发布时间】：2018-12-18 07:25:33

【问题描述】：

当我将鼠标悬停在 Three.js 元素（即球体）上时如何创建工具提示。

我有一个 3D 散点图，每次我将鼠标悬停在散点图中的球体上时，我都希望弹出一个工具提示。

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

如何用 DOM 制作？

【问题讨论】：

How to add a tooltip to a div的可能重复

^不同的主题——three.js 渲染到画布元素的 WebGL 上下文中。

【参考方案1】：

我以 Martin Schuhfuß 的回答作为这个答案的基础：

用 DOM 制作：

您正在寻找的内容称为“光线投射”，您会发现更多信息in the documentation 和the examples。

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

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

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

使用 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 内容不会干扰第一个场景的渲染顺序，但这种方法可能会使用最多的资源。

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

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

如有更多问题，请随时提出，然后也许我可以扩展答案。

【参考方案2】：

您正在寻找的内容称为“光线投射”，您会发现更多信息in the documentation 和the examples。

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