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("輸出所有對象");