Dat.gui add slider for each element in array

Question

So I have a javascript object that looks like this

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

I would like to add a slider for each opacityCs and for each whiteThreshold.

For other parameters is easy

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

or

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

But I dont find the way to add elements of arrays. Can anyone help?

score 0 · Answer 1 · answered Aug 07 '17 at 03:32

I don't think there's a way to work directly with array. I converted each array to an object with keys matched to the indices. Try this out:

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

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

Dat.gui add slider for each element in array

1 Answers1