Three.jsで文字を表示する方法

2021.11.28

Three.jsのキャンバスに文字を表示する方法を解説します。
いくつかの解説ページがありますが、なぜか私はうまくいかなかったため、その点を踏まえて解説します。

私はjavascriptプログラミングのスペシャリストではなく、何となくjavascriptを使用しているため詳細の説明はできませんが、この解説を見れば、私と同じ初心者の方でも文字表示ができると思います。

Three.jsのキャンバスには、一つのコードのみで文字を表示させることはできません。
以下の順番に実行する必要があります。

仮のフォントファイルを準備する

まず最初にフォントファイルを作る必要があります。
Three.jsには日本語のフォントはないため、日本語を表示させたい場合は日本語のフォントを準備する必要があります。
英数字のフォントファイルはあらかじめ準備されていますが、ファイルサイズが大きいため必要な文字だけのフォントファイルを作ったほうがよいです。
その方法を解説します。
まずは以下のアドレスから仮のフォントファイルをダウンロードしてください。
https://easiest-english.com/font/ipaexm.ttf
こちら
ipaexm.ttfというファイルです。
このファイルを元に、必要なフォントファイルを作ります。

サブセットフォントメーカー をダウンロードする

以下のフリーソフトをダウンロードし、フォントファイルを作り替える必要があります。
サブセットフォントメーカー
https://opentype.jp/subsetfontmk.htm
サイトはこちら
サイトの下の方に、Windows版またはMac版のダウンロードという項目がありますので、そこからダウンロードしてください。



必要な文字のみのフォントファイルに作り替える

サブセットフォントメーカー を開き、下図赤丸箇所で、先ほどダウンロードした ipaexm.ttf を開きます。

次に、下図赤丸箇所を選択し、保存するファイル名を記入します。

次に、下図赤丸箇所に、表示したい文字を入力します。

作成開始をクリックします。
作成後フォントファイル、の項目で指定したファイル名でttfファイルが生成されます。

ttfファイルをjsonファイルに変換する

以下のFacetype.jsというサイトで変換を行います。
https://gero3.github.io/facetype.js/
こちら
ファイル選択をクリックし、先ほど作成したttfファイルを選択します。
Generate a JSON file(.json)を選択し、Convertをクリックすると、jsonファイルが作成されます。

コードを書く

以下のコードを書きます。
細かい説明は割愛します。
meshは、事前に定義しておくことで、最後のコードのように後から自由に位置変更などができるようになります。

// 文字表示の変数をグローバルで定義
let mesh = new THREE.Mesh();

// 文字入力
var moji_loader = new THREE.FontLoader();

moji_loader.load('https://*****/test.json', (function (font) { // ***の箇所にパスを記載します。

    var geometry = new THREE.TextGeometry('こんにちは', {
        font: font, // font: 使用するフォント
        size: 100, // size: オブジェクトサイズ
        height: 0.1, // height: オブジェクトの奥行き
        curveSegments: 15, // curveSegments: 曲線の滑らかさ
        bevelThickness: 10,  // bevelThickness: 斜体の傾き度
        bevelSize: 8, // bevelSize: アウトラインからどの程度傾けるか
        bevelEnabled: false  // bevelEnabled: 斜体にするかどうか
    });

    // マテリアルの作成
    var material = new THREE.MeshBasicMaterial({ color: 0x00ff00, transparent: true, opacity: 0.7 });

    // オブジェクトの作成
    mesh = new THREE.Mesh(geometry, material);

    mesh.position.set(moji_x, 10, moji_z); // 表示位置
    mesh.rotation.set(0, Math.PI * 1.7, 0); // 回転

    //シーンに追加
    scene.add(mesh);

}));

mesh.position.set(moji_x, 10, moji_z); // 文字表示位置

コメント