TypescriptでThree.jsのTextGeometry描画

やること

ThreejsのTextGeometryで、日本語を描画する。
typescriptで記述する。

環境

• typescript2.2.1
• Threejs r82
• jquery 3.2.1

方法

問題

日本人的には日本語を扱いたいのでフォントファイルを読み込ませないといけない。

フォントファイルはjsonファイルにしないと使えないため、
typeface.jsでttfをjsonに変換。

それっぽく書くと下記の感じになると思うが…

class threeDrawing{
...
  function Text(){
    let t = this;
    let loader = new THREE.FontLoader( text: string );
    loader.load('font_path', function( font ){
      let geometry = new THREE.TextGeometry(text, {
        font: font,
        size: 5,
        ...
        }
      );
      let material = ...
      let mesh = ...
      t.scene.add( mesh );
    });
  }
...
}

これではエラーが出る。
理由は2つ。

1. TextGeometryに与えるパラメータは{}ではなく、TextGeometryParametersで与える必要がある
2. fontはtype Fontでないといけない

パラメータに関して

let parameters: THREE.TextGeometryParameters = {
  font: font,
  size: ...
  ...
};

このように型を指定する。

ちなみに、TextGeometryParametersはInterfaceである。

type Fontに関して

FontLoaderで読み込んでるものはtype Objで型が違うためダメ。

よってTHREE.Fontを使う。

THREE.Fontの使い方だが、
THREE.Font( font_path )ではない。

実装例は以下の感じ。

public FontobjLoad(): void{
  // thisの保持をする
  // fontはインスタンス変数this.fontに格納
  let t = this;
  $.ajax({
    type: "get",
    url: 'font_path',
    async: false,
    dataType: 'json',
    success: function( data ){
        t.font = new THREE.Font( data );
    }
  });
}

THREE.Fontの引数はjson stringであり、Objectではない。
そのため、フォントのjsonファイルをjson stringとして読み込んで、そのjsonをTHREE.Fontに渡す。

結果

class内に書く感じでやると、
こんな感じでできる。(一部省略)

class ThreeDrawing{
  ...
  public FontobjLoad(): void{
    // thisの保持をする
    // fontはインスタンス変数this.fontに格納
    let t = this;
    $.ajax({
      type: "get",
      url: 'font_path',
      async: false,
      dataType: 'json',
      success: function( data ){
          t.font = new THREE.Font( data );
      }
    });
  }

  function Text(){
    let parameters: THREE.TextGeometryParameters = {
      font: this.font,
      size: ...
      ...
    };
    let geometry = new THREE.TextGeometry( text, parameters );
    let material = ...
    let mesh = ...
    this.scene.add( mesh );
  }
}

おわりに

少し面倒な方法になるが、日本語対応のTextGeometryを作ることができた。

DefinitelyTypedのTHREEの定義ファイルに関して、
r81で追加されたEdgesGeometryに対応してないことから、
おそらくr81〜は対応していない(2017/05/09現在)。

なお、r81以降はEdgesHelperは非推奨(使えない)。