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