在three.js中添加文本答案

【问题标题】：Adding text in three.js在three.js中添加文本
【发布时间】：2013-12-08 00:23:51
【问题描述】：

我正在使用 Three.js 可视化一个图形，并为图形的每个节点添加一个使用 TextGeometry 的标签。这是一个非常小的图表，但是当我添加文本时，我的应用程序变得非常慢。我该怎么办？

【问题讨论】：

能否提供一个jsfiddle，让我们看看？

【解决方案1】：

TextGeometry 更适合您真正有兴趣以 3D 形式呈现文本的情况。它会创建复杂的几何图形，当有大量文本或您使用 CanvasRenderer 时，这肯定会降低您的应用程序的速度。

对于标签，通常最好使用 2D 标签，它的渲染速度更快。对此有许多不同的方法。这些可以放在 Three.js 渲染画布之上，在单独的画布上，甚至是使用 CSS 属性定位的普通 HTML 节点。或者，您可以动态创建标签文本的小画布，并将它们用作始终面向相机的精灵纹理 - 这可能是最简单的方法，因为标签将作为其他对象的 3D 场景的一部分。对于单独的图层方法，您需要使用 unprojectVector 等来计算屏幕 XY 坐标以匹配您的 3D 场景位置。

例如查看这些 SO 帖子： - Dynamically create 2D text in three.js - Canvas and SpriteMaterial - How do I add a tag/label to appear on top of several objects so that the tag always faces the camera when the user clicks the object?

【讨论】：

以下哪种情况在性能方面最好？可能是单独的层，那么 HTML 节点和画布之间是哪一层？