threejs文档翻译：三.创建文本

Posted 2021-09-28 玛德致

很多时候需要在应用中使用文本，有几种方法可供选择。

1.dom+css

用html是最简单快捷的方式，在是一种在大多数例子中用来进行描述性覆盖的方式。加如下内容：

<div id="info">Description</div>

通过以下css的设置可以覆盖在其他内容上面，尤其是当应用撑满全屏的时候

#info { 

 position: absolute; 

 top: 10px; 

 width: 100%; 

 text-align: center; 

 z-index: 100; 

 display:block;

}

2.在canvas中画文本并用作纹理

用这种方法绘制文本会更简单一点

3.在3d应用中创建模型然后导入到threejs中

如题

4.直接用threejs绘制文本

如果你只想用threejs绘制程序和动态3d几何文本，可以创建一个THREE.TextGeometry的实例

new THREE.TextGeometry( text, parameters );

要让它展示，还需要创建THREE.Font实例来设置字体参数，查看text的api来了解更多细节，

例子：

WebGL / geometry / text

WebGL / shadowmap

如果字体不合适，或者你想用的字体这里没有，这里有个python脚本教程，让你可以把文本输出到threejs的json格式中。

5.bitmap字体

BMFont(bitmap fonts)允许批处理符号到单个BufferGeometry中， BMFont渲染支持换行，字母间距，字距，带标准导数的带符号距离字段，多通道带符号距离字段，多纹理字体等等，可以查看three-mesh-ui或three-bmfont-text。

普通字体可以在A-frame字体等项目中使用，也可以从任何.TTF字体创建自己的字体，优化为只包含项目所需的字符。

一些实用工具：

• msdf-bmfont-web (基于网络的)
• msdf-bmfont-xml (命令行)
• hiero (桌面应用)

上一篇：threejs文档翻译：二.画线