创建文字([name])

有时候,您可能需要在你的Three.js应用程序中使用到文本,这里有几种方法可以做到。

1. DOM + CSS

使用HTML通常是最简单、最快速的添加文本的方法,这是大多数的Three.js示例中用于添加描述性叠加文字的方法。

你可以在这里添加内容:

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

然后使用CSS来将其绝对定位在其它具有z-index的元素之上,尤其是当你全屏运行three.js的时候。

  1. #info {
  2. position: absolute;
  3. top: 10px;
  4. width: 100%;
  5. text-align: center;
  6. z-index: 100;
  7. display: block;
  8. }

2. 将文字绘制到画布中,并将其用作[page:Texture](纹理)

如果你希望在three.js的场景中的平面上轻松地绘制文本,请使用此方法。

3. 在你所喜欢的3D软件里创建模型,并导出给three.js

如果你更喜欢使用3D建模软件来工作并导出模型到three.js,请使用这种方法。

4. three.js自带的文字几何体

如果你更喜欢使用纯three.js来工作,或者创建能够由程序改变的、动态的3D文字,你可以创建一个其几何体为THREE.TextGeometry的实例的网格:

  1. new THREE.TextGeometry( text, parameters );

然而,为了使得它能够工作,你的TextGeometry需要在其“font”参数上设置一个THREE.Font的实例。
请参阅 [page:TextGeometry] 页面来阅读如何完成此操作的详细信息,以及每一个接收的参数的描述,还有由three.js分发、自带的JSON字体的列表。

示例

[example:webgl_geometry_text WebGL / geometry / text]
[example:webgl_shadowmap WebGL / shadowmap]

如果Typeface已经关闭,或者没有你所想使用的字体,这有一个教程:[link:http://www.jaanga.com/2012/03/blender-to-threejs-create-3d-text-with.html]
这是一个在blender上运行的python脚本,能够让你将文字导出为Three.js的JSON格式。

5. 位图字体

BMFonts (位图字体) 可以将字形批处理为单个BufferGeometry。BMFont的渲染支持自动换行、字母间距、字句调整、signed distance fields with standard derivatives、multi-channel signed distance fields、多纹理字体等特性。
详情请参阅 [link:https://github.com/felixmariotto/three-mesh-ui three-mesh-ui] 或 [link:https://github.com/Jam3/three-bmfont-text three-bmfont-text]。

现有库存的字体在项目中同样可用,就像[link:https://github.com/etiennepinchon/aframe-fonts A-Frame Fonts]一样,
或者你也可以从任何TTF字体中创建你自己的字体,优化时,只需要包含项目中所需的字符即可。

这是一些有用的工具: