three.js 中文文档 6.创建文字

6.创建文字

标签： three.js
有时你可能需要在应用中使用文字，以下有几种方法。

DOM + CSS

使用 html 是最快最简单来添加和管理文字的。大多数我们给的示例，是采用这种方法来用作描述性的层。

你可以向其中添加内容

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

运用 css 标记语言的 z-index ，并绝对定位到所有层之上，尤其你想在全屏下运行 three.js

#info {
    position: absolute;
    top: 10px;
    width: 100%;
    text-align: center;
    z-index: 100;
    display:block;
}

用Texture(纹理)添加文字到 canvas 上

用这种方法能够简单的在 three.js 场景面板上绘制文本。

在你喜欢的 3D 应用中创建模型并导出到 three.js 中

如果你更习惯 3D 建模，用这种方法能导入模型到 three.js 中。

程序化文本形状

如果你更喜欢纯粹应用 three.js 或创建程序动态化的 3D 几何体，你能创建一个 基于 mesh 网格 ，THREE.TextGeometry 实例的几何体。

new THREE.TextGeometry(text, parameters);

为了正常运行，你的 TextGeometry 需要 THREE 的一个实例。字体需要设置它的 font 参数。详讯TextGeometry页面，里面描述了所接受的每个参数。

示例

• WebGL / geometry / text
• canvas / geometry / text
• WebGL / shadowmap

如果 Typeface 不支持，或者你想用其他字体，这里有用 python 脚本写的在 Blender 中的教程，支持导出文字到 three.js 的 JSON 格式中。
http://www.jaanga.com/2012/03/blender-to-threejs-create-3d-text-with.html