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