我的threejs学习笔记（四）——dat.gui函数

写在前面

dat.gui 不仅提供了参数的调节，还有类似于按钮的功能（即将其参数写为函数的形式），可以看作是gui对象的一个属性。

定义按钮属性

var controls=new function () {          this.gravity=-0.005;          this.speedY=0;          this.posY=2;          this.numberOfObjects = scene.children.length;          this.addCube=function () {            var cubeSize=Math.ceil((Math.random()*3));            var cubeGeo=new THREE.CubeGeometry(cubeSize,cubeSize,cubeSize);            var cubeMat=new THREE.MeshLambertMaterial({color:Math.random()*0xffffff});            var cube=new THREE.Mesh(cubeGeo,cubeMat);            cube.position.x=Math.random()*3;            cube.position.y=Math.random()*3;            scene.add(cube);            this.numberOfObjects = scene.children.length;          };        };

addCube即将原来的参数化为了函数，并定义了其功能。

加入到控制器中

var gui=new dat.GUI();gui.add(controls,"gravity",-0.01,0);gui.add(controls,'addCube');gui.add(controls, 'numberOfObjects').listen();

像添加参数一样将其添加到控制器中即可。
最后一句实时将控制器的属性进行监听。

总结

dat.gui的函数控制功能还是非常好用的，跟添加参数的道理是一样的。