Three.js でテキスト描画をしよう。

テキストを3Dオブジェクトとして使用する場合は、TextGeometry を使えばいいが、
フォントが必要になってくる。

FontLoaderを使って利用するだけなんですけど。

TypeScript + webpack の構成にしているので、
どこから、読み込めばいいのだ？となったので一応動く形を共有しておく。

webpackは、js,css,img ファイルですら、
１つのバンドルファイルにパックするので、単純に特定のパスに置かれるわけじゃない。
いや、単純に好きなディレケトリに配置すればいいだけなんだけど…。

Font はjsonファイルになっていて、
three.js と同様にインストールされるが、examples/fonts/ ディレクトリに入ってます。

なぜexamplesなのか。。

json-loader をインストール

webpackでjsonファイルをパックするために使うローダー

npmからインストールする。

npm install --save-dev json-loader

webpackの設定　

webpack.config.js はこんな感じ。
rules に、拡張子がjsonのファイルは json-loader を通すように設定している。

module.exports = {
    entry: "./app.ts",
    output: {
        filename: "./assets/bundle.js"
    },
    devtool: "source-map",
    resolve: {
        extensions: [".ts", ".js"]
    },

    module: {
        rules: [
            { test: /\.ts$/,   loader: 'ts-loader', options: { transpileOnly: true } },
            { test: /\.json$/, loader: 'json-loader' }
        ]
    }
};

resolve に ".json" を追記すれば、インポートする際に拡張子を省略してかけるようになるみたいだ。

エントリーファイルからインポート

エントリーファイルに設定している、app.tsファイル (TypeScript) から、インポート文を書く。

バンドルしたフォントのJSONファイルをインポートする。

インポートに指定するPATHは、node_modulesからの相対パスになる。

import fontJson = require("three/examples/fonts/helvetiker_regular.typeface.json");

利用方法

バンドルされたファイルは既にロード済みのJSONオブジェクトとなるので、
FontLoader::load じゃなくて、parseメソッドというのが利用できる。

ここにインポートしたFont のJsonオブジェクトを渡せばOK！

// FontLoaderを使って、フォント取得
let font = new THREE.FontLoader().parse(fontJson);

// 取得したフォントを、TextGeometryのパラメータに渡す。
let textGeometry = new THREE.TextGeometry("Hello World!", {
    font: font,
    size: 3,
    height: 3
});

// シーンに追加
textGeometry.center();
let textObject = new THREE.Mesh(textGeometry, material);
scene.add(textObject);

おしまい

テキスト描画できるようになったら、もう何も怖くない！
次は、シェーディングを勉強し始めるよ。