Three.js--6.使用dat.GUI库添加一个用户界面

  使用dat.GUI 很容易可以创建一个简单的页面组件，用以修改代码中的变量；

   示例中：

•   控制球体弹跳的速度   
•   控制方块的旋转

  首先，先引入库

 接下来，我们定义一个JavaScript 对象，用来保存我们想要通过dat.GUI 库来修改的那些变量；

在这个JavaScript 对象里，定义了两个属性（this.rotationSpeed和this.bouncingSpeed）,以及它们的默认值；

 var controls = new function() {
        this.rotationSpeed = 0.02;
        this.bouncingSpeed = 0.03;
    }

再接下来，我们把这个对象传递给dat.GUI对象，并定义这两个属性值的范围：

 var gui = new dat.GUI();
 gui.add(controls, 'rotationSpeed', 0, 0.5);
 gui.add(controls, 'bouncingSpeed', 0, 0.5);

属性rotationSpeed和 bouncingSpeed 的取值范围都是从0到0.5；

现在要做的就是保证在animate 循环里直接引用这两个属性；

这样当我在dat.GUI 用户界面里修改时可以直接影响物体的旋转速度和弹跳速度；

 var animate = function() {
                ...
                step += controls.bouncingSpeed;
                requestAnimationFrame(animate);
                sphere.position.x = 8 + (15 * (Math.cos(step)));
                sphere.position.y = 2 + (5 * Math.abs(Math.sin(step)));
                cube.rotation.x += controls.rotationSpeed;
                cube.rotation.y += controls.rotationSpeed;
                cube.rotation.z += controls.rotationSpeed;
                 ...
            }

实现效果图和代码（请忽视效果图右下角的输入法图标哈）