09three.js-dat.GUI和stats.js库的使用

dat.gui效果

dat.gui.png
stats库.png
1、stats.js库的使用。下载js文件，引入文件。
在body中添加一个div标签用于stats。初始化和使用见下面代码，记得要不断更新。

<div id="Stats-output"></div>

var stats = initStats();
function initStats() {
        var stats = new Stats();
        stats.setMode(0); // 0: fps, 1: ms 
        stats.domElement.style.position = 'absolute';
        stats.domElement.style.left = '0px';
        stats.domElement.style.top = '0px';
        document.getElementById("Stats-output").appendChild(stats.domElement);
        return stats;
    }
function run() {
        stats.update();      
        requestAnimationFrame(run);
        renderer.render(scene,camera);
    }

function run() {
        stats.update();
        var allChildren = scene.children;
        for(var i=5;i<allChildren.length;i++){
            allChildren[i].rotation.y += 0.04;
        }
        camera.position.y = controls.hAngle;
        camera.position.x = 40*Math.sin(controls.sAngle/180*Math.PI);
        camera.position.z = 40*Math.cos(controls.sAngle/180*Math.PI);
        camera.lookAt(scene.position);
        requestAnimationFrame(run);
        renderer.render(scene,camera);
    }
    run();

2、 dat.GUI库的使用。

   var controls = new function () {
        this.sAngle = 45;
        this.hAngle = 40;
        this.numberOfObjects = scene.children.length;
        this.addCube = function () {
            var cubeSize = Math.ceil((Math.random()*3));
            var cubeGe = new THREE.BoxGeometry(cubeSize,cubeSize,cubeSize);
            var cubeMe = new THREE.MeshLambertMaterial({color:0xFFFFFF*Math.random()});
            var cube = new THREE.Mesh(cubeGe,cubeMe);
            cube.castShadow = true;
            cube.name = "cube-" + scene.children.length;
            cube.position.x = -25+Math.round(Math.random()*50);
            cube.position.y = Math.round(Math.random()*10);
            cube.position.z = -25+Math.round(Math.random()*50);

            scene.add(cube);
            this.numberOfObjects = scene.children.length;
        }

        this.removeCube = function () {
            var allChildren = scene.children;
            var lastObject = allChildren[allChildren.length-1];
            if(lastObject instanceof THREE.Mesh){
                scene.remove(lastObject);
                this.numberOfObjects = scene.children.length;
            }
        }

        this.outputObjects = function () {
            console.log(scene.children);
        }

    }
    var gui = new dat.GUI();
    gui.add(controls,'sAngle',-360,360,"相机角度");
    gui.add(controls,'hAngle',0,90,"相机高度");
    gui.add(controls,'addCube','添加立方体');
    gui.add(controls,'removeCube','删除立方体');
    gui.add(controls, 'outputObjects','打印场景中的物体');
    gui.add(controls,'numberOfObjects','场景对象数量').listen(); //为什么第一次输出的数量比实际少一个呢？

    function run() {
        stats.update();
        var allChildren = scene.children;
        for(var i=5;i<allChildren.length;i++){
            allChildren[i].rotation.y += 0.04;
        }
        camera.position.y = controls.hAngle;
        camera.position.x = 40*Math.sin(controls.sAngle/180*Math.PI);
        camera.position.z = 40*Math.cos(controls.sAngle/180*Math.PI);
        camera.lookAt(scene.position);
        requestAnimationFrame(run);
        renderer.render(scene,camera);
    }
    run();

image.png