乐趣区

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

jiezi

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

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

退出移动版