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

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-uithree-bmfont-text

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

一些实用工具:

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


玛德致
280 声望6 粉丝