如何在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。