Threejs——3D文字

Threejs——3D文字

序章

threejsプロジェクトでは必ずテキストを表示したいところがあり、2Dでもいいところもあれば、3Dにしたほうがいいところもあるので、今回はthreejsの3Dテキストを使う必要があります。

公式のフォントファイルはすべて英語ですが、中国語を表示したい場合は、自分で中国語フォントを生成する必要があります。

ステップ

フォントを生成する

フォント パス: コンピューターからフォント ファイル (C:\Windows\Fonts) を見つけることができます.その中にはさまざまな中国語フォントがあります.必要に応じて対応するフォントを選択してください.

URL: Facetype.js (gero3.github.io)

このサイトでは、FontLoader で読み込んだフォントの json ファイルを生成することができます. フォント形式に制限があるようです. .ttc のものはうまく生成されませんが、.ttf のものは問題ありません.

引用文字

公式サイト: FontLoader – three.js docs (threejs.org)

サンプル ソース コード

add3DFont("中文测试");
/**
     * 添加3D文字
     * @param {string} message 文字内容
     */
function add3DFont(message) {
    
    
    new FontLoader().load('/fonts/SimHei_Regular.json', function (font) {
    
    
        let textGeo = new TextGeometry(message, {
    
    
            font: font,
            size: 5,
            height: 0.1,
        });
        let materials = [
            new THREE.MeshPhongMaterial({
    
     color: 0xff0000, flatShading: true }), // front
            new THREE.MeshPhongMaterial({
    
     color: 0xffff00 }) // side
        ];
        let textMesh = new THREE.Mesh(textGeo, materials);

        scene.add(textMesh);
    });
}
}

効果

エピローグ：

私は threejs の初心者です。何か間違ったことを書いたら、批判や訂正を歓迎します。