Dat.gui 为数组中的每个元素添加滑块

【问题标题】：Dat.gui add slider for each element in arrayDat.gui 为数组中的每个元素添加滑块
【发布时间】：2017-02-07 12:48:58
【问题描述】：

所以我有一个看起来像这样的 javascript 对象

var parameters = {bgColor: 0x5886a0, 
  ambientColor:0xffffff,
  opacityCS:[ 1.0, 1.0, 1.0, 1.0, 1.0, 1.0], 
  whiteThreshold:[160,160,160,160,160,160] };

我想为每个 opacityCs 和每个 whiteThreshold 添加一个滑块。

其他参数很简单

gui.addColor( parameters, 'ambientColor' ).onChange( function(){/**/});

或

gui.add( parameters, 'variable', -0.5, 0.5, 0.005  );

但我没有找到添加数组元素的方法。有人可以帮忙吗？

【问题讨论】：

标签： javascript arrays javascript-objects dat.gui

【解决方案1】：

我认为没有办法直接使用数组。我将每个数组转换为一个对象，其键与索引匹配。试试这个：

const parameters = {
  bgColor: 0x5886a0, 
  ambientColor: 0xffffff,
  opacityCS: [1.0, 1.0, 1.0, 1.0, 1.0, 1.0], 
  whiteThreshold: [160, 160, 160, 160, 160, 160]
};
  
parameters.opacityCS = Object.assign({}, parameters.opacityCS);
parameters.whiteThreshold = Object.assign({}, parameters.whiteThreshold);

const gui = new dat.GUI();
gui.addColor(parameters, 'bgColor');
gui.addColor(parameters, 'ambientColor');
const opacityCS = gui.addFolder("opacityCS");
Object.keys(parameters.opacityCS).forEach((key) => {
  opacityCS.add(parameters.opacityCS, key);
});
const whiteThreshold = gui.addFolder("whiteThreshold");
Object.keys(parameters.whiteThreshold).forEach((key) => {
	whiteThreshold.add(parameters.whiteThreshold, key);
})

&lt;script src="//cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5/dat.gui.min.js"&gt;&lt;/script&gt;

【讨论】：