Question

所以我有一个看起来像这样的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  );

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

Answer 1

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

＆＃13;

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);
})

＆＃13;

<script src="//cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5/dat.gui.min.js"></script>

＆＃13;

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

1 个答案: