使用Three.js和dat.gui制作動態文本

Question

我想使用three.js和dat.gui對用戶輸入的文本進行動態渲染，到目前為止，我已經完成了渲染文本的操作：

var displayGui = function(){
  var gui = new dat.GUI();
  var parameters = {
    message:"sample",
    spinVelocity: 0
  }
  //Adds Text controls
  var myText = gui.add(parameters, 'message').name('Text');
  myText.onChange(function () {
      //adds text
      var loader = new THREE.FontLoader();
      loader.load('fonts/OpenSansBold.json', function(font) {
          console.log(myText);
          var textGeo = new THREE.TextGeometry(myText, {
              font: font,
              size: 200,
              height: 50,
              curveSegments: 12,
              position: 3,
              bevelThickness: 2,
              bevelSize: 5,
              bevelEnabled: true,
          });

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

          var mesh = new THREE.Mesh(textGeo, textMaterial);
          mesh.position.set(100, 100, 100);
          scene.add(mesh);
      });
  });
  gui.add(parameters, 'spinVelocity').name('Spin');
  gui.open();

  };

但是，正如您在此處看到的那樣，它只是呈現出一個大紅色的3D文本，上面寫着[object Object]，我懷疑這可能是因為var myText是對象而不是字符串，所以我嘗試了String（myText ），但變化不大，仍然無法正常工作。

這是因為文本不是字符串而不能正常工作，還是因為three.js無法識別用戶在dat.gui界面上輸入的文本？

Answer 1

您不應該在每次dat.gui觸發時嘗試加載字體。 您的代碼有一個可怕的性能問題，很可能您在與gui糾纏了一段時間后會耗盡內存。

我的理解是，每次您更改gui中的值時，此代碼都會創建一個幾何的新實例，並且永遠不會對其進行處理。 您正在用此網格物體的副本填充您的GPU。

針對您的問題，您使用的是datgui錯誤：

console.log(myText); //logs the intance of a gui object (a JS object with methods and such)

改成：

console.log(parameters.message);

要解決重新加載問題，請緩存字體

var myFont
loader.load('fonts/OpenSansBold.json', function(font) {
   myFont = font
   //your gui is not ready until the font comes so, for example you could instantiate it here
   gui.add(...).onChange(function(){..})
})

Answer 2

換線

myText.onChange(function () { 

至

myText.onChange(function (value) {

然后，value將包含輸入的新值。