从对象数组中动态添加 Dat.gui 个元素

Question

我正在尝试扩展 dat.gui 菜单以支持用户添加的多个数据集。

目的是在加载新数据集时重建图形用户界面。所以在下面的代码片段中，它应该为数组数据中的每个对象添加一个新的滑块。

function buildGui() {
  var gui_data = []
  gui = new dat.GUI();

  // data is an array of objects
  for (var i = 0; i < data.length; i++) {
      // create gui folder for each dataset with name var1
      gui_data.push(gui.addFolder(data[i].var1))

      // add a slider linked to data[i].var2 <- already set as an integer
      gui_data[i].frameno = gui_data[i].add(this,data[i].var2).name('var2');

  }
}

最后一行报错：

TypeError: Cannot read property '0' of undefined

我知道 this 是传递错误的对象，但无法弄清楚我做错了什么。

Answer 1

所以，上面的 data[i].var2 不存在 - 我试图在没有创建变量的情况下引用它。鉴于 data[i].frameNo 存在，下面的版本有效。

function buildGui() {
  var gui_data = []
  gui = new dat.GUI();

  // data is an array of objects
  data.forEach(function(each,i) {
      // create gui folder for each dataset with name var1
      gui_data.push(gui.addFolder(data[i].var1))

      // add a slider linked to data[i].var2 <- already set as an integer
      gui_data[i].frameno = gui_data[i].add(each,'frameNo').name('var2');

  }
}

从对象数组中动态添加 Dat.gui 个元素

Dynamically adding Dat.gui elements from array of objects

javascript

dat.gui