three.js 創(chuàng)建文字

有時候，您可能需要在你的Three.js應(yīng)用程序中使用到文本，這里有幾種方法可以做到。

1. DOM + CSS

使用HTML通常是最簡單、最快速的添加文本的方法，這是大多數(shù)的Three.js示例中用于添加描述性疊加文字的方法。

你可以在這里添加內(nèi)容

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

然后使用CSS來將其絕對定位在其它具有z-index的元素之上，尤其是當(dāng)你全屏運行three.js的時候。

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

2. 將文字繪制到畫布中，并將其用作Texture（紋理）

如果你希望在three.js的場景中的平面上輕松地繪制文本，請使用此方法。

3. 在你所喜歡的3D軟件里創(chuàng)建模型，并導(dǎo)出給three.js

如果你更喜歡使用3D建模軟件來工作并導(dǎo)出模型到three.js，請使用這種方法。

4. three.js自帶的文字幾何體

如果你更喜歡使用純three.js來工作，或者創(chuàng)建能夠由程序改變的、動態(tài)的3D文字，你可以創(chuàng)建一個其幾何體為THREE.TextGeometry的實例的網(wǎng)格：

new THREE.TextGeometry( text, parameters );

然而，為了使得它能夠工作，你的TextGeometry需要在其“font”參數(shù)上設(shè)置一個THREE.Font的實例。
請參閱 TextGeometry 頁面來閱讀如何完成此操作的詳細(xì)信息，以及每一個接收的參數(shù)的描述，還有由three.js分發(fā)、自帶的JSON字體的列表。

示例

WebGL / geometry / text

WebGL / shadowmap

如果Typeface已經(jīng)關(guān)閉，或者沒有你所想使用的字體，這有一個教程:http://www.jaanga.com/2012/03/blender-to-threejs-create-3d-text-with.html
這是一個在blender上運行的python腳本，能夠讓你將文字導(dǎo)出為Three.js的JSON格式。

5. 位圖字體

BMFonts (位圖字體) 可以將字形批處理為單個BufferGeometry。BMFont的渲染支持自動換行、字母間距、字句調(diào)整、signed distance fields with standard derivatives、multi-channel signed distance fields、多紋理字體等特性。 詳情請參閱 three-mesh-ui 或 three-bmfont-text。

現(xiàn)有庫存的字體在項目中同樣可用，就像A-Frame Fonts一樣， 或者你也可以從任何TTF字體中創(chuàng)建你自己的字體，優(yōu)化時，只需要包含項目中所需的字符即可。

這是一些有用的工具：

• msdf-bmfont-web (web-based)
• msdf-bmfont-xml (commandline)
• hiero (desktop app)