dat.GUI处理嵌套复杂变量报错求助：无法识别多层属性路径

嘿，我刚碰到过一模一样的问题，dat.GUI的add()方法并不支持直接传入用点分隔的嵌套属性路径！你遇到的错误就是因为这个原因——你把complexVariable作为第一个参数传给add()，但这个对象本身并没有topLayer.deeperLayer.deepestLayer这个直接属性，它只有topLayer这一层属性，所以才会触发“找不到属性”的报错。

给你两种可行的解决办法：

方法一：用文件夹分层管理（推荐） #

这种方式适合复杂嵌套结构，能让你的GUI界面更有条理，用户操作起来也更清晰：

let complexVariable = { 
  topLayer: { 
    deeperLayer: { 
      deepestLayer: 20 
      // Other stuff 
    } 
  } 
};
let gui = new dat.GUI();

// 创建顶层文件夹
const topFolder = gui.addFolder('topLayer');
// 在顶层文件夹下创建深层文件夹
const deeperFolder = topFolder.addFolder('deeperLayer');
// 给最深层的属性添加控制器
deeperFolder.add(complexVariable.topLayer.deeperLayer, 'deepestLayer', 10, 40);

// 可以默认展开文件夹，方便查看
topFolder.open();
deeperFolder.open();

方法二：直接传入目标层级对象 #

如果不想用文件夹，也可以直接把嵌套结构中包含目标属性的那一层对象传给add()：

let complexVariable = { 
  topLayer: { 
    deeperLayer: { 
      deepestLayer: 20 
      // Other stuff 
    } 
  } 
};
let gui = new dat.GUI();

// 直接传入最深层的对象，指定属性名
gui.add(complexVariable.topLayer.deeperLayer, 'deepestLayer', 10, 40);

两种方法都能解决你的报错问题，要是嵌套层级比较多，真心推荐第一种，GUI的可读性会好很多～

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