javascript - 为动态添加的控件保存 dat.gui 预设？

Question

我正在向 dat.gui 界面动态添加控件，但“保存设置”功能无法识别它们。

var mygui = new dat.GUI();
mygui.remember(mygui);

// standard way of adding a control
mygui.control1 = 0.0;
var control = mygui.add(mygui, 'control1', -1, 1);

// adding controls dynamically
var myArray = ['control2', 'control3'];
var controls = [];
for (x in myArray) {
    controls[myArray[x]] = 0.0;
    var newControl = mygui.add(controls, myArray[x], -1, 1);
}

控件都按预期工作，但是当我单击齿轮图标时，设置 JSON 仅包含第一个控件或我以正常方式添加的任何其他控件:

{
  "preset": "Default",
  "closed": false,
  "remembered": {
    "Default": {
      "0": {
        "control1": 0.5,
      }
    }
  },
  "folders": {}
}

我假设我以某种方式混淆了 remember() 功能，有什么想法吗？

Answer 1

for 循环中的行应该是:

mygui[myArray[x]] = 0.0;
var newControl = mygui2.add(mygui, myArray[x], -1, 1);

add 函数的第一个参数执行两个功能:它既是第二个参数的source(要添加的控件的名称，在此case 是 myArray[x])，也是 destination。您可以将控件名称存储在任何您喜欢的位置，但是如果第一个参数不是 gui，remember() 函数将不知道这些控件，并且它们不会被添加到gui的__rememberedObjects属性或者保存在JSON对象中。