使用Three.js和dat.gui实现动态文本渲染遇问题求助

你猜的没错，问题根源就是你用了myText这个dat.gui控制器对象来创建文本几何体，而不是用户实际输入的字符串！

问题拆解 #

gui.add(parameters, 'message')返回的myText是dat.gui的控制器实例，它负责管理这个输入框的交互逻辑，并不是用户输入的文本内容。当你把它传给THREE.TextGeometry时，Three.js会把这个对象转成字符串表示，也就是你看到的[object Object]。

修复步骤 #

1. 获取正确的文本内容：直接使用parameters.message，这才是绑定了用户输入的变量，每次输入变化时它都会自动更新。
2. 清理旧文本（可选但重要）：每次修改文本时，记得移除场景里之前的文本Mesh，避免场景中堆积大量重复对象，影响性能。

修正后的代码示例 #

var displayGui = function(){ 
  var gui = new dat.GUI(); 
  var parameters = { 
    message:"sample", 
    spinVelocity: 0 
  };
  // 用来存储文本Mesh，方便后续移除
  let textMesh = null;

  // 添加文本控制器
  var myText = gui.add(parameters, 'message').name('Text'); 
  myText.onChange(function () { 
    // 加载字体
    var loader = new THREE.FontLoader(); 
    loader.load('fonts/OpenSansBold.json', function(font) { 
      // 移除旧的文本Mesh
      if(textMesh) {
        scene.remove(textMesh);
        // 释放几何体资源（可选，优化内存）
        textMesh.geometry.dispose();
        textMesh.material.dispose();
      }
      // 使用parameters.message作为文本内容
      var textGeo = new THREE.TextGeometry(parameters.message, { 
        font: font, 
        size: 200, 
        height: 50, 
        curveSegments: 12, 
        position: 3, 
        bevelThickness: 2, 
        bevelSize: 5, 
        bevelEnabled: true, 
      }); 
      var textMaterial = new THREE.MeshPhongMaterial({ color: 0xff0000 }); 
      textMesh = new THREE.Mesh(textGeo, textMaterial); 
      textMesh.position.set(100, 100, 100); 
      scene.add(textMesh); 
    }); 
  }); 

  gui.add(parameters, 'spinVelocity').name('Spin'); 
  gui.open(); 
};

额外提示 #

• 字体加载是异步操作，如果你频繁修改文本，可能会出现旧的字体加载回调覆盖新内容的情况，你可以考虑在每次触发onChange时取消之前的加载请求，或者添加防抖处理。
• 可以给TextGeometry添加center()方法，让文本居中显示，比如textGeo.center();，这样调整位置会更方便。

内容的提问来源于stack exchange，提问作者Alex