Three.jsでテキストを表示する方法を調査した

JavaScriptが少し書ければ、リッチでかっこいい3Dコンテンツが作れるThree.js。今回はThree.jsでテキストを表現する方法を探るべく、Three.jsのオフィシャルサイトのマニュアルページで、"Creating text"として紹介されている7種の手法を紹介、お試しできそうなものはお試ししていきたいと思います👏

three.js docs

1. DOM + CSS

DOMでテキスト表示をし、CSSで位置の調整を行い重ねて表示させるシンプルな方法です。Three.js上でというよりはコンテンツに文字が乗っかっているだけの状態ですが、3Dコンテンツを背景として用いる時などはこれで十分かもしれません。

2. Use CSS2DRenderer or CSS3DRenderer

DOM要素を3D空間に擬似的にレンダリングすることによって、
サンプルではマウスやトラックパッドで視点を動かせるように設定しており、モデルの動きに合わせてテキストが追従していくようになっています！
DOM要素がなんでも3D空間とリンクできるので、テキスト表示以外にも色々活用できそうです。
（サンプルはCSS3DRendererを用いています。）

3. Draw text to canvas and use as a Texture

次はシンプルに、テクスチャを用いてテキストを描く方法です。
立方体6面にテキストが含まれた画像を貼り付け、ぐるぐる回してみました！

4. Create a model in your favourite 3D application and export to Three.js

3Dアプリケーションでモデルを作り、Three.jsにエクスポートする方法です。
SVGのロゴデータをもとにBlenderでモデルを作成し、Three.jsで読み込みました。デパートのロゴがぐるぐるしています🌀👏

5. Procedural Text Geometry

テキストジオメトリを使って、文字列を立体的なオブジェクトとして追加する方法です。
4番目の手法と違って、3Dソフトでモデルを作ったわけではなく、Three.jsがフォントのデータから3Dオブジェクトを配置してくれています。
パラメーターの設定でテキストの大きさや厚み、ベベル（縁取り）の調整などが可能なようです！

6. Bitmap Fonts

BMFonts（Bitmap Fonts）は、文字をビットマップ画像として保存し、その画像を使ってテキストをレンダリングする技術です。ベクターフォントと比べて軽量で高速なため、特定の用途に（ゲームやモバイルアプリなど）非常に適していますが、解像度やスタイルの柔軟性には制限があります。
ビットマップフォントのデータがないので試せていないのですが、下記のページで使い方について記載されていました。

7. Troika Text

Troika Text for Three.jsで6のBitmap Fontsと同様の技術を使用して綺麗にテキストをレンダリングする方法です。こちらはBMFontsではなく、.ttfファイルや.woffファイルで動作可能です。
react-three-fiberの<Text>は内部でこれが動いている模様。

※codepenでお試しできなかったので、公式のデモを貼り付けておきます！

React App

まとめ

Three.js上でテキストを表示する方法を7種紹介しました。
それぞれ簡単に試すことができるので、皆さんも好きな文字を表示させて遊んでみてください！