HTMLを使用することは、一般的にテキストを追加する最も簡単で早い方法です。これは、three.jsにテキストを追加する際に主に使用されている方法です。

以下のようにすることでコンテンツを追加できます。

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

そして、three.jsをフルスクリーンで使用する場合は、CSSを使ってz-indexの絶対的な位置を他の要素よりも上にしておきましょう。


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

2.テキストをcanvasに書いて、[page:Texture]として使用する

3.お気に入りの3Dアプリケーションでモデルを作成し、three.jsに書き出す

4. Procedural Text Geometry

純粋なTHREE.jsで作業したい場合や、手続き的に動的な3Dのテキストジオメトリを作成したい場合、メッシュで実現することが出来ます。そのメッシュのジオメトリはTHREE.TextGeometryインスタンスを使います。

new THREE.TextGeometry( text, parameters );

しかし、これを機能させるためには、TextGeometryのfontパラメータにTHREE.Fontのインスタンスを設定する必要があります。これをどのように行うかについては [page:TextGeometry] ページを参照してください。また、受け入れ可能な各パラメータの説明、THREE.js ディストリビューションに付属する JSON フォントの一覧も参照してください。

Examples

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

Typefaceがダウンしている場合や、そこにないフォントを使いたい場合は、以下のリンク先のチュートリアル(blender用のPythonスクリプトでテキストをThree.jsのJSON形式に書き出す)を参考にしてください。 [link:http://www.jaanga.com/2012/03/blender-to-threejs-create-3d-text-with.html]

5. Bitmap Fonts

BMFonts（ビットマップフォント）では、グリフを1つのBufferGeometryにバッチ処理することができます。BMFont レンダリングは、ワードラッピング、文字間隔、カーニング、標準的な導関数を持つ符号付き距離フィールド、マルチチャンネル符号付き距離フィールド、マルチテクスチャフォントなどをサポートしています。[link:https://github.com/Jam3/three-bmfont-text three-bmfont-text]を参照してください。

[link:https://github.com/etiennepinchon/aframe-fonts A-Frame Fonts]のようなプロジェクトではストックフォントが利用できますが、任意の .TTF フォントから独自のフォントを作成し、プロジェクトに必要な文字のみを含めるように最適化することもできます。

役に立つツール

[link:http://msdf-bmfont.donmccurdy.com/ msdf-bmfont-web] (web-based)
[link:https://github.com/soimy/msdf-bmfont-xml msdf-bmfont-xml] (commandline)
[link:https://github.com/libgdx/libgdx/wiki/Hiero hiero] (desktop app)

[name]

1. DOM + CSS

2.テキストをcanvasに書いて、[page:Texture]として使用する

3.お気に入りの3Dアプリケーションでモデルを作成し、three.jsに書き出す

4. Procedural Text Geometry

Examples

5. Bitmap Fonts