如何在three.js中添加TextGeometry？

如何在three.js中添加文本？我試過這段代碼，但它產生了一個錯誤Uncaught TypeError: Cannot read property 'offsetX' of undefined。我怎樣才能解決這個問題？如何在three.js中添加TextGeometry？

這是我的.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); 
});

來源

2017-10-19 Merida

這個問題我猜不是javascript，是你的json試圖通過這裏，如果不是大。 – 2017-10-19 07:00:42

@headmax我已更新我的帖子 – Merida

謝謝;）爲添加。 – 2017-10-19 07:05:14

問題是您使用的是字體真棒。如果仔細查看字體定義文件，您將無法找到"text"中您想要顯示的任何字母的定義。如果你嘗試別的，如：

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

那麼它應該工作。您可以從cheatsheet複製上述符號並將它們粘貼到您的代碼中以檢查它是否有效。

舉個例子，你可以嘗試一下this plunkr。

來源

2017-10-19 08:30:59

ohh謝謝！我沒有注意到這一點。錯誤消失，但不顯示文本。我試過不同的字體，所以我可以使用文本。我如何在屏幕上顯示它？我可以顯示.BoxGeometry fine – Merida

我已經更新了你的問題 - 你應該定位你的網格，以便你可以看到文本 - 嘗試設置（x，y，z）像'mesh.position.x = -100;' –

我試圖改變這些值，它仍然不會顯示。我試圖輸出場景，它實際上讀取它，但它不奇怪，它不顯示。我正在用ar.js – Merida

如何在three.js中添加TextGeometry？

回答

相關問題