Dat.gui添加滑塊，每個元素陣列

所以我有一個JavaScript對象，看起來像這樣Dat.gui添加滑塊，每個元素陣列

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

但我不覺得加入數組的元素的方式。誰能幫忙？

來源

2017-02-07 Zloy Smiertniy

我不認爲有一種方法可以直接使用數組。我將每個數組轉換爲一個與索引匹配的鍵。嘗試了這一點：

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) => { 
 
\t whiteThreshold.add(parameters.whiteThreshold, key); 
 
})

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

來源

2017-08-07 03:32:25

Dat.gui添加滑塊，每個元素陣列

回答

相關問題