javascript - dat.GUI 和复杂变量

Question

我对 dat.GUI 相当陌生，在让它与更复杂的变量一起工作时遇到问题。

我有以下内容:

let complexVariable= {
    topLayer:
        {
            deeperLayer:
                {
                    deepestLayer: 20,
                    //Other stuff                    
                }
        }
}

let gui = new dat.GUI();
gui.add(complexVariable, "topLayer.deeperLayer.deepestLayer", 10, 40);

这给了我以下错误:

Uncaught Error: Object "[object Object]" has no property "topLayer.deeperLayer.deepestLayer"

如有任何帮助，我们将不胜感激。

Answer 1

目前看来不可能通过查看 source code 。它们对您在对象上传递的单个属性使用括号表示法。

function add(gui, object, property, params) {
  if (object[property] === undefined) {
    throw new Error(`Object "${object}" has no property "${property}"`);
  }
...

因此，您告诉 dat.GUI 要做的就是找到一个顶级属性“topLayer.deeperLayer.deepestLayer”，而您的对象上显然不存在该属性。似乎需要编写更多代码才能支持嵌套属性。

dat.gui 必须执行类似 if (object[property1][property2][...] === undefined) 的操作，或者在您的情况下 - complexVariable["topLayer "]["deeperLayer"]["deepestLayer"];