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() はテキストを中央寄席にしてくれるので便利！