three gui的使用方法

1. 首先需要引入gui 的对应组件

<script src="js/libs/dat.gui.min.js"></script>

2. 然后声明一个控制器对象，用来存储关于gui的参数和方法：

var controls;
controls = new function() {
    this.cameraPX = 0;
    this.cameraPY = 0;
    this.cameraPZ = 0;
}

// 方法既可以写在controls里面也可以写在外面，都是一样的。
var setCamera = function() {
        console.log(controls.cameraPX, controls.cameraPY, controls.cameraPZ);
        camera.position.set(
        controls.cameraPX,
        controls.cameraPY,
        controls.cameraPZ);
    }

3. 之后开始声明gui

var gui = new dat.GUI();

4. 然后设置改变的内容
   可以添加一个折叠的菜单，这样需要修改的参数过多的时候好看一点：

// addFolder 使用addFolder添加菜单
var cameraPosition = gui.addFolder("cameraPosition");
cameraPosition.add(controls, 'cameraPX', -100, 300).onChange(setCamera);
cameraPosition.add(controls, 'cameraPY', -100, 300).onChange(setCamera);
cameraPosition.add(controls, 'cameraPZ', -100, 300).onChange(setCamera);

// 自然也可以直接放到gui上
gui.add(controls, 'cameraPX', -100, 300).onChange(setCamera);
gui.add(controls, 'cameraPY', -100, 300).onChange(setCamera);
gui.add(controls, 'cameraPZ', -100, 300).onChange(setCamera);

add函数里面的参数需要注意，controls是存放参数的对象，要求它里面必须有参数2，即controls里面必须有cameraPX，cameraPY，cameraPZ，三个参数，后面的数字是这个参数可选的赋值范围。后面的onChange即使该参数被改变的时候需要执行的方法。

上述方式是值为数字的时候的gui，还有值为颜色的，布尔值的情况：

var controls;
controls = new function() {
   this.colorSUN = "#e8c72b"; // CSS string
   this.isOpen=true;
}

// colorify是外部的某个对象
var changeColor = function() {
    colorify.uniforms.color.value = new THREE.Color(controls.color);
};
var showColor = function() {
    colorify.enabled = controls.colorifyFlag;
}

var gui = new dat.GUI();
var clFolder = gui.addFolder("Colorify");
clFolder.addColor(controls, "color").onChange(function() {
    colorify.uniforms.color.value = new THREE.Color(color);
});
clFolder.add(controls, "colorifyFlag").onChange(showColor);

// 事后也可以随时改名
//colorPlate.addColor(controls, 'colorSUN').name("点光源1");