乐趣区

关于javascript:threejs文档翻译三创建文本

很多时候须要在利用中应用文本,有几种办法可供选择。

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 文档翻译:二. 画线

退出移动版