TypeScript + Webpack4 + Three.js でTextGeometry生成

はじめに

タイトルの構成でThree.jsのTextGeometryを出します。
さくっとできるでしょとたかをくくっていたら最近やってる資料がなくて変に苦労したので残しときます。

環境

• TypeScript 3.4.5
• Webpack 4.31.0
• Three.js r104

参考資料

調べたやつ

• TextGeometryの公式ドキュメント
  • TypeScriptの場合このままだとうまくいかない
• TypescriptでThree.jsのTextGeometry描画
  • jQuery使いたくない
• Three.js テキスト描画(TypeScript)
  • Webpack2以降はjson-loaderのインストールがいらなくなったらしく少しごにょったけど無理そうと察した

方針

いろいろ見て回った感じ、three/examples/fontsにあるようなhoge.typeface.jsonをほしいところで読み込んでTHREE.Fontに突っ込めばよさそうです。

解決策

1. tsconfig.json で以下の設定にする

これをすることで2番が使えるようになります。

tsconfig.json

{
  "compilerOptions": {
    // 中略
    "esModuleInterop": true,
    "resolveJsonModule": true,
    // 中略
  }
}

2. 適当な名前でほしいフォントのjsonファイルをimportする

hogeという名前のjsonオブジェクトをインポート。

app.ts

import hoge from 'hoge.typeface.json';//path 

3. importしたjsonオブジェクトをそのままTHREE.Font()に突っ込む

注意すべきは、そのまま(=jsonオブジェクトの状態)で突っ込んでください。
TypescriptでThree.jsのTextGeometry描画で「json string」という表記があってわざわざJSON.stringify()してやりましたが見事通りませんでした。

app.ts

const myFont = new THREE.Font(hoge);

4. THREE.TextGeometryParameterを作ってTHREE.TextGeometryに突っ込む

後は他サイトと同様に、パラメータを作って目的のジオメトリを作るだけです。

app.ts

const params = new THREE.TextGeometryParameter({
  font: myFont,
  // 必要なパラメータを追記
});
const geometry = new THREE.TextGeometry('hoge', params);
// 後略

あとは作ったジオメトリを使って普通にメッシュ生成、描画までできます。

終わりに

調べていた時「なんか長ったらしくていろいろめんどくさい...」と感じていましたが実装してみたら大したことない分量でこの野郎という気持ちになりました。

メモ、json使うサンプルばっかだけど実はjsonだけじゃなくてttfにも対応してるらしい、自分で動作確認はしていません。
https://medium.com/@joshmarinacci/threejs-secretly-supports-true-type-fonts-b896df19af2e