three.jsで日本語フォントを使う

日本語フォントでTextGeometryを作る方法

まずはGoogleFontsから任意の日本語フォントをダウンロード。
今回はM PLUS Rounded 1cを使います。

ダウンロードできたら、Facetype.jsで.ttf を json に変換します。

変換できたらあとは three.js の FontLoder でフォントを読み込み、TextGeometry を生成するだけ！

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

const fontLoader = new FontLoader();
fontLoader.load("/fonts/rounded_mplus_1c_medium_regular.json", (font) => {
  console.log("loaded font!!");
  const textGeometry = new TextGeometry("すりーじぇいえす", {
    font: font,
    size: 0.5,
    height: 0.2,
    curveSegments: 12,
    bevelEnabled: true,
    bevelThickness: 0.03,
    bevelSize: 0.02,
    bevelOffset: 0,
    bevelSegments: 5,
  });
  textGeometry.center();

  const textMaterial = new THREE.MeshStandardMaterial();
  const text = new THREE.Mesh(textGeometry, textMaterial);
  text.castShadow = true;
  text.position.z = 1;
  scene.add(text);
});

textGeometry.center() はテキストを中央寄席にしてくれるので便利！