Question

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

目的是在加载新数据集时重建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元素

1 个答案: