使用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将包含输入的新值。