THREE中的辅助工具

WebGL

Detector.js webgl兼容性检测

 if(!Detector.webgl){
        Detector.addGetWebGLMessage()
    }else{
        console.log('浏览器支持');
    }

stats.js 检测动画帧频

设置一个容器

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

初始化统计对象

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;
}

在render()函数里调用

function render() {
    stats.update();
    requestAnimationFrame(render);
｝

dat.gui.js GUI图形界面

定义控件对象

var controls = new function(){
    this.rotationSpeed = 0.02; //数值
    this.perspective = "Perspective" //函数改变属性
    this.switchCamra = function(){
        if(){
         this.perspective = ""
        }
    }
};
var gui  = new dat.GUI();
gui.add(controls, 'rotationSpeed', 0,0.5);
gui.add(controls, 'switchCamera');
gui.add(controls,'perspective').listen();

在这个对象里，定义两个属性及他们的默认值，接下来我们把这个对象传递给dat.GUI对象，并定义这两个属性的取值范围,也可以定义一个函数，点击的时候会执行此函数改变属性，.listen() 可以把改变更新到GUI控件里。

在render()函数里调用

function render() {
    cube.rotation.x += controls.rotationSpeed;
    ···
｝

辅助坐标轴

var axes = new THREE.AxesHelper(20);
scene.add(axes);

辅助网格

var gridHelper = new THREE.GridHelper( size, divisions, colorCenterLine, colorGrid );
scene.add(gridHelper);

4个参数分别是：网格宽度、等分数、中心线颜色，网格线颜色
默认分别是10,10,0x444444,0x888888

相机辅助线

var cameraHelper = new THREE.CameraHelper( camera );
scene.add( cameraHelper );

聚灯光辅助线

demo

var lightHelper = new THREE.SpotLightHelper( spotLight );
scene.add( lightHelper );
function render() {
    lightHelper.update(); // required
}