std9.jp
JavaScript - Three.js · · by hikaru

Three.js の 3D 空間内に文字列を表示する方法

【Three.js 入門】3D 空間内にテキストを表示するためには FontLoader クラスで json 形式のフォントを読み込んで、TextGeometry クラスで指定した文字列の 3D 形状を作ります

Three.js0.139.2
目次 (4)
  1. コードの解説
  2. json フォントについて
  3. デモとソースコード
  4. 参考

コードの解説

Three.js では 3D 空間内にテキストを表示するための機能が example 内に用意されています。 FontLoader クラスで json 形式のフォントを読み込んで、TextGeometry クラスで指定した文字列の 3D 形状を作ります。

import * as THREE from "three";
import { FontLoader } from "three/examples/jsm/loaders/FontLoader.js";
import { TextGeometry } from "three/examples/jsm/geometries/TextGeometry.js";

// フォントローダー
const fontLoader = new FontLoader();

// フォントを読み込む
const font = await fontLoader.loadAsync(`/fonts/droid_sans_mono_regular.typeface.json`);

// テキストメッシュ
const textMesh = new THREE.Mesh(
  new TextGeometry(`TextGeometry Scene`, {
    font: font, // フォントを指定 (FontLoaderで読み込んだjson形式のフォント)
    size: 10,   // 文字のサイズを指定
    height: 1,  // 文字の厚さを指定
  }),
  new THREE.MeshBasicMaterial({
    color: `#ccc`, // 文字の色
  })
);
textMesh.position.set(-0.75, 0, 0);   // Meshの位置を設定
textMesh.scale.set(0.01, 0.01, 0.01); // Meshの拡大縮小設定

// シーンを初期化
const scene = new THREE.Scene();
scene.add(textMesh); // Meshをシーンに追加

json フォントについて

TextGeometry クラスに使用できる json フォントは、three.js ライブラリの three/examples/fonts/ に用意されています。

ただし日本語フォントは無さそうでしたので、https://gero3.github.io/facetype.js/ などのサイトで ttf 等のフォントファイルから json フォント形式に変換する必要がありそうです。(私はまだ試していません)

デモとソースコード

今回のデモと GitHub のソースコードの URL を記載しておきます。ライセンスは MIT としていますのでご自由に利用ください。

参考