three.jsにTextGeometryを追加するには？

Question

three.jsにテキストを追加するにはどうすればよいですか？私はこのコードを試しましたが、それはUncaught TypeError: Cannot read property 'offsetX' of undefinedのエラーを生成します。これをどうすれば解決できますか？

ここは私の.json fileです。

var loader = new THREE.FontLoader(); 
loader.load('https://thefortcity.dev/build/fonts/FontAwesome_Regular.json', function (font) { 
    var textGeometry = new THREE.TextGeometry("text", { 
     font: font, 

     size: 50, 
     height: 10, 
     curveSegments: 12, 

     bevelThickness: 1, 
     bevelSize: 1, 
     bevelEnabled: true 
    }); 

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

    var mesh = new THREE.Mesh(textGeometry, textMaterial); 

    scene.add(mesh); 
}); 

Answer 1

問題はあなたがFont Awesomeを使用していることです。あなたのフォント定義ファイルをよく見ると、あなたが表示したい文字である"text"の文字の定義は見つかりません。あなたが他の何かを試してみたら：

/** 
    below boxes stand for: 
    - fa-volume-up [] 
    - fa-font [] 
    - fa-italic [] 
    - fa-align-right [] 
*/ 
var textGeometry = new THREE.TextGeometry("   ", { 

それはうまくいくはずです。 上記のシンボルをcheatsheetからコピーしてコードに貼り付けて、動作するかどうかを確認できます。あなたがthis plunkrを試すことができる例として

---

。