如何使用 dat.gui 控制 textGeometry 的大小和颜色？答案

【问题标题】：How to control size and color of textGeometry with dat.gui?如何使用 dat.gui 控制 textGeometry 的大小和颜色？
【发布时间】：2022-12-15 12:04:23
【问题描述】：

我发现除了通过编辑 .js 文件更改每个其他场景的颜色和大小之外，我还可以使用 dat.gui 来控制 textGeometry 的大小和颜色。但可能是我的代码架构不好，我无法控制甚至无法将 gui 文件夹添加到场景中。它可能与我正在使用的 FontLoader 有关。

我尝试将 dat.gui 放在我的 textGeometry 创建函数的内部和外部，但没有一个起作用。据我所知，每次尺寸或颜色发生变化时，它都应该处理并删除创建的网格以创建一个具有新颜色/尺寸参数的新网格（我还为每个按键事件更新以创建一个新网格所以这就是我的想法).

textGeometry、textMesh、textMaterial等定义在全局

function textCreation() {
  const fontLoader = new FontLoader();
  fontLoader.load(
    "node_modules/three/examples/fonts/droid/droid_sans_bold.typeface.json",
    (droidFont) => {
      textGeometry = new TextGeometry(initText, { //initText variable gets updated with each keydown
        size: 5,
        height: 2,
        font: droidFont,
        parameters: {
          size: 5,
          height: 2,
        },
      });
      textMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 });
      textMesh = new THREE.Mesh(textGeometry, textMaterial);

      group = new THREE.Group();
      group.add(textMesh);
      scene.add(group);

    }

这是我尝试放入和放入此函数之外的 dat.gui 控制器。

let textFolder = gui.addFolder("Text Controls");
textFolder.add(textGeometry, "size", 10, 20).onChange(function () {
textGeometry.setSize(textGeometry.size);
// Probably dispose and remove old mesh from scene and create mesh with these new parameters
});

textFolder.addColor(textGeometry, "color").onChange(function () {
textGeometry.setColor(textGeometry.color);

我无法在不破坏场景的情况下添加任何 dat.gui 控制器。顺便说一句，我对 JavaScript 和 three.JS 有点陌生，所以如果有进一步的解释，欢迎提供。

【问题讨论】：

标签： three.js dat.gui

【解决方案1】：

textGeometry.setSize(textGeometry.size);

这不起作用，因为没有 setSize() 方法。您必须在现有几何体上调用dispose()，然后根据更新后的参数创建一个新几何体。然后将新几何体分配给文本网格。所以像：
const params = {
    color: '#ffffff',
    size: 5
};

textFolder.add(params, "size", 10, 20).onChange(function (value) {

    textGeometry.dispose();
    textGeometry = new TextGeometry(initText, {
            size: value,
            height: 2,
            font: droidFont
    });
    textMesh.geometry = textGeometry;

});
无需创建新对象即可更改材质的颜色。
textFolder.addColor(params, 'color').onChange(function (value) {

    textMaterial.set(value);

});

【讨论】：