(1)首先在页面的 标签中添加这个库。

(2)定义一个 JavaScript 对象(这里假设叫做 controls),该对象将保存希望通过 dat.GUI 改变的属性。

var controls = new function () {

this.rotationSpeed = 0.02;

//......

};

(3)接下来需要将这个 JavaScript 对象传递给 dat.gui 对象,并设置各个属性的取值范围。

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

(4)最后当用户对 dat.GUI 控件进行操作时,controls 里的属性值也会同步修改。我们在程序中直接引用这个属性值就好了。

代码:

<!DOCTYPE html>
<html>
<head>
    <title>魔方程序</title>
    <script type="text/javascript" src="./lib/three.js"></script>
    <script type="text/javascript" src="./lib/dat.gui.min.js"></script>
    <style>
        body {
            /* 背景设置 */
            text-align:center;
            margin:20;
            overflow:scroll;
        background-color:black;
        }
    </style>
</head>
<body>

<!-- Div which will hold the Output -->
<div id="WebGL-output">
</div>

<!-- Javascript code that runs our Three.js examples -->
<script type="text/javascript">
//var scene
    function init() {
        //生成一个场景
        var scene = new THREE.Scene();
       
        //生成一个相机
        //参数:视场,长宽比,近面,远面
        var camera=new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,10,100);
        camera.position.x=-50;
        camera.position.y=40;
        camera.position.z= 0;
        camera.lookAt(scene.position);
        scene.add(camera);
        
       //生成一个webgl的渲染器
        var render;       
        var webGLrender=new THREE.WebGLRenderer();
        webGLrender.setClearColor(0xEEEEEE);
        webGLrender.setSize(window.innerWidth * 0.8,window.innerHeight * 0.8);
        webGLrender.shadowMapEnabled=true;
        //允许阴影映射,渲染阴影需要大量的资源,因此我们需要告诉渲染器我们需要阴影        
        render=webGLrender;

        //环境光
         var ambientLight = new THREE.AmbientLight(0x0c0c0c);
        scene.add(ambientLight);

        // add spotlight for the shadows
        var spotLight = new THREE.SpotLight(0xffffff);
        spotLight.position.set(-40, 60, -10);
        spotLight.castShadow = true;
        scene.add(spotLight);
                
        //生成一个有6个基础材质的数组
        var materials=[];
        materials.push(new THREE.MeshBasicMaterial({color:"red"}));
        materials.push(new THREE.MeshBasicMaterial({color:"blue"}));
        materials.push(new THREE.MeshBasicMaterial({color:"yellow"}));
        materials.push(new THREE.MeshBasicMaterial({color:"green"}));
        materials.push(new THREE.MeshBasicMaterial({color:"white"}));
        materials.push(new THREE.MeshBasicMaterial({color:"black"}));
        //这6个基础材质的数组作为参数传递给MeshFaceMaterial
        var faceMaterial=new THREE.MeshFaceMaterial(materials);
        
        //生成一个方块应用faceMaterial,即为每个面指定一种材质
        var cubeGeom=new THREE.CubeGeometry(6,6,6);
        var cube=new THREE.Mesh(cubeGeom,faceMaterial);
        scene.add(cube);
                
        //增加图形控制界面
        var controls=new function(){           
            this.rotationSpeed=0.1;            
        };
        
        var gui=new dat.GUI();        
        gui.add(controls,"rotationSpeed",0,0.3);
        
        
        //gui的一个参数是一个对象,该对象控制的属性是add的函数的第二个参数
        //即controls的this.switchRender必须与下面的属性一致        
        document.getElementById("WebGL-output").append(render.domElement);       
        function renderScene(){
            scene.traverse(function(e){
                if(e instanceof THREE.Mesh){
                    e.rotation.x+=controls.rotationSpeed;
                    e.rotation.y+=0;
                    e.rotation.z+=0;
                    //e.rotation.y+=controls.rotationSpeed;
                    //e.rotation.z+=controls.rotationSpeed;
                }
            });
            requestAnimationFrame(renderScene);
            render.render(scene, camera);
        }
        //scene.fog=new THREE.Fog(0xffffff,0.015,100);
        renderScene();
    }   
    window.onload = init;
</script>
</body>
</html>