Three笔记-辅助工具的使用（二）

1.stats    Three的性能测试工具

  使用方法：

   //初始化统计对象
        var stats = initStats();
 stats.update();//更改数据后更新
 //初始化统计对象
        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';
            //将统计对象添加到对应的<div>元素中
            document.getElementById("Stats-output").appendChild(stats.domElement);
            return stats;
        }

2.dat.gui.js    Three可视化工具,用于创建菜单栏，可以用来控制场景中的各个参数来调试场景

使用方法：

//设置位置，redraw是当参数变化时的重绘函数
var controls = new function() {  
this.cx = 0;  
this.cy = 0;  
this.cz = 0;  
this.redraw = function() {  
    camera.position.set(controls.cx, controls.cy, controls.cz);  
} 
//往菜单中添加cx、cy、cz三个参数。定义参数变化范围是 -100 ~100 。定义参数变化时调用redraw()函数。
var gui = new dat.GUI();  
gui.add(controls, 'cx', -100, 100).onChange(controls.redraw);  
gui.add(controls, 'cy', -100, 100).onChange(controls.redraw);  
gui.add(controls, 'cz', -100, 100).onChange(controls.redraw) 

 //dat.GUI对象使用的配置（存放有所有需要改变的属性的对象）
        var controls = new function () {
            //旋转速度
            this.rotationSpeed = 0.02;

            //场景对象个数
            this.numberOfObjects = scene.children.length;

            //增加一个立方体
            this.addCube = function () {
                var cubeSize = Math.ceil((Math.random() * 3));
                var cubeGeometry = new THREE.BoxGeometry(cubeSize, cubeSize, cubeSize);
                var cubeMaterial = new THREE.MeshLambertMaterial({color: Math.random() * 0xffffff});
                var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
                cube.castShadow = true;
                //设置立方体的名字
                cube.name = "cube-" + scene.children.length;

                //立方体位置随机
                cube.position.x = -30 + Math.round(
                        (Math.random() * planeGeometry.parameters.width));
                cube.position.y = Math.round((Math.random() * 5));
                cube.position.z = -20 + Math.round(
                        (Math.random() * planeGeometry.parameters.height));

                //将立方体添加到场景中
                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.overrideMaterial = function() {
                scene.overrideMaterial = new THREE.MeshLambertMaterial({color: 0xffffff});
            }

            //雾化
            this.foggy = function() {
                scene.fog = new THREE.Fog(0xffffff, 0.015, 100);
            }

            //输出所有对象
            this.outputObjects = function () {
                console.log(scene.children);
            }
        };

        //创建dat.GUI，传递并设置属性
        var gui = new dat.GUI();
        gui.add(controls, 'numberOfObjects').name("当前对象个数").listen();
        gui.add(controls, 'rotationSpeed', 0, 0.5);
        gui.add(controls, 'addCube');
        gui.add(controls, 'removeCube');
        gui.add(controls, 'overrideMaterial').name("使用相同材质");
        gui.add(controls, 'foggy').name("雾化");
        gui.add(controls, 'outputObjects').name("输出所有对象");