フォントを読み込んでTextGeometryでレンダリングする方法

Question

最近、three.jsでの作業を開始しましたが、現在はtextgeometryで問題に直面しています。 私はthree.jsバージョン75を使用しています。私はjs/helvetiker_bold.typeface.jsフォントを使用しました。

var geometry = new THREE.TextGeometry(this.txt, { 
    size: this.textSize, 
    height: this.textHeight, 
    curveSegments: 3, 
    font: this.textFont, 
    weight: "bold", 
    style: "normal", 
    bevelEnabled: false 
}); 

テストがあるため、次の問題

1キャッチされないにReferenceErrorのレンダリングされていません：889 THREE.TextGeometry：フォントパラメータがない_typeface_jsは

2.three.min.jsが定義されていません。 THREE.Fontのインスタンス

誰でも私を助けてください。

Answer 1

フォントをロードし、TextGeometryでそれをレンダリングするために、このパターンを使用します。

var loader = new THREE.FontLoader(); 

loader.load('fonts/helvetiker_bold.typeface.json', function (font) { 

    var textGeo = new THREE.TextGeometry("My Text", { 

     font: font, 

     size: 200, 
     height: 50, 
     curveSegments: 12, 

     bevelThickness: 2, 
     bevelSize: 5, 
     bevelEnabled: true 

    }); 

    var textMaterial = new THREE.MeshPhongMaterial({ color: 0xff0000 }); 

    var mesh = new THREE.Mesh(textGeo, textMaterial); 
    mesh.position.set(x, y, z); 

    scene.add(mesh); 

}); 

three.js r.82

Answer 2

あなたは同じようにJSONをロードし、FontLoaderを使用する必要はありません。

const fontJson = require("./fonts/gentilis_bold.typeface.json"); 

const font = new THREE.Font(fontJson);