<script src="js/dat.gui.min.js"></script>
在js中初始化配置
var viewModel = {emissionRate : 5.0,gravity : 0.0,miniParticleLife : 1.0,maxiParticleLife : 1.0,fly:true}window.onload = function() {gui = new dat.GUI();gui.add(viewModel, 'emissionRate',0,100);gui.add(viewModel, 'particleSize',2 ,60);gui.add(viewModel, 'miniParticleLife',0.1,29.1);gui.add(viewModel, 'maxiParticleLife',0.1,29.1);//復選框按鈕gui.add(viewModel, 'fly')}
當數值變化時賦值給對象屬性onchange 事件會在域的內容改變時發生
window.onload = function() {var gui = new dat.GUI();gui.add(viewModel, 'emissionRate',0,100).onChange(function (val) {//操作_this.particleSystem.emissionRate = parseFloat(val);});gui.add(viewModel, 'particleSize',2 ,60).onChange(function (val) {_this.particleSystem.particleSize = parseFloat(val);});gui.add(viewModel, 'miniParticleLife',0.1,29.1 ).onChange(function (val) {_this.particleSystem.miniParticleLife = parseFloat(val);});gui.add(viewModel, 'maxiParticleLife',0.1,29.1 ).onChange(function (val) {_this.particleSystem.maxiParticleLife = parseFloat(val);});}
這裏就可以完成了。