javascript - 如何在 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 .