Three.js使用dat.GUI让调试更简单

首先我们来介绍一下这个库，它能够以界面形式让你操控threejs中的数值，让调试运行效果一目了然。

第一步引入这个库

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

第二步就是创建对象了：

    // 创建datGUI对象
    var datGui = new dat.GUI();

先给大家看一段核心代码，然后再解释其中的方法

    gui = {
        cube1X:30, //方块1 X轴位置
        cube1Y:0, //方块1 Y轴的位置
    };
    //创建一个具有下拉菜单的栏目
    var lightFolder = datGui.addFolder('Light');
    //在栏目中添加属性值并侦听改变值得侦听事件 
    lightFolder.add(gui, 'cube1X', 0.1, 100).onChange(function (val) {
        //改变对象属性值
        cube1.position.x = val;

    });

下面给大家介绍一下这个对象的一些方法：

//此方法是添加一个栏目，返回一个栏目对象，具有下拉菜单的功能，
gui.addFolder()

//这个方法是常用的添加方法，可以添加一个普通按钮.
//将设置属性添加到gui当中，gui.add(对象，属性，最小值，最大值）
g