在three.js中添加文本

Question

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

Answer 1

当您真正有兴趣在3D中渲染文本时,TextGeometry更适合于这种情况.它将创建复杂的几何体,当有大量文本或使用CanvasRenderer时,它肯定会减慢你的应用程序.

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

例如,请参阅以下SO帖子: - 在three.js中动态创建2D文本 - Canvas和SpriteMaterial - 如何添加标签/标签以显示在多个对象的顶部,以便当用户单击对象时标签始终面向摄像机？