使用 three.js 呈现数千个独特的文本标签

Question

我有一个包含大量积分的THREE.PointCloud。在上面的屏幕截图中，每个点都映射到紫色的小圆圈。

我正在尝试找出一种在每个点旁边显示文本标签的方法。

我的第一次尝试是通过画布动态创建文本并在THREE.Sprite 对象中显示纹理。这实现了我想要的外观，但性能影响很大。我很快就知道这不会超过几百点。

我认为可能有一种方法可以使用着色器来做到这一点，但我无法弄清楚该方法。 animating a million letters 中使用的方法使用了字形纹理，并将字母映射到字形：

我想我可以通过创建一个THREE.Geometry 对象并为标签的每个文本字母推送顶点和面来做同样的事情。缺点是我希望标签放在广告牌上，以便它们始终面向相机。 Billboarding in the vertex shader 似乎很简单。

我的感觉是，已经有一些示例将所有这些想法结合到一个工作示例中。任何有关如何制作大型文本标签的建议将不胜感激。谢谢！

Answer 1

我想通了。您必须使用字形表并使用两个面将每个字符渲染为四边形。

animating a million letters 中很好地概述了该过程

在性能开始受到打击之前，我可以在屏幕上使用大约一百万个字符。