[three.js]Webフォントを表示したい

three.js で3dなアニメーション作りたいですよね〜
「geometoryを表示」に関しては情報が多いですが、文字の表示[特にwebfont]がよくわからなかったのでまとめます。

STEP1

フォントを表示するためにTextGeometoryとFontLoaderのモジュールをthree.jsと別で読み込む必要があります。
それぞれ公式のgitにあがっているのでダウンロードして適当なディレクトリに配置してください。
TextGeometory
FontLoader

STEP2

①フォントをダウンロード。
特になんでもよければ公式のjsonファイルをダウンロードで問題ないです。その場合はSTEP3へ

今回はWebフォントを表示したいので、、
安定のNotoSansJpをダウンロード
https://fonts.google.com/noto/specimen/Noto+Sans+JP

②jsonに変換
フォントデータは.ttfの形式になっていることが多いですが、FontLoaderがjson形式のデータしか受け付けてくれないので変換する必要があります。

Facetype.js
こちらでjsonを選択して変換！

STEP3

あとはcoding

import { TextGeometry } from "<任意のpath>/TextGeometry";
import { FontLoader } from "<任意のpath>/FontLoader";

// ...

fontLoader.load("[任意のファイル].json", (font: object) => {
  const geometry: TextGeometry = new TextGeometry("表示したい文字", {
    font: font,
    size: 4,
    height: 0.1,
    curveSegments: 12,
    bevelEnabled: true,
    bevelThickness: 0.4,
    bevelSize: 0.02,
    bevelOffset: 0,
    bevelSegments: 10,
  });

  geometry.center(); // 中央寄せ
  const material = new THREE.MeshLambertMaterial({
    color: 0xffffff,
  });
  const mesh = new THREE.Mesh(geometry, material);
  scene.add(mesh);

表示されない場合はparamaterとかpositionいじってみれば良さそう！