threejs 开发使用插件

一、stats性能插件

stats.js用于对JavaScript进行性能检测。

我们创建一个createStats的函数，然后在init初始化中调用它

function createStats() {
    var stats = new Stats();
    stats.setMode(0);
    stats.domElement.style.position = 'absolute';
    stats.domElement.style.left = '0px';
    stats.domElement.style.top = '5px';
    return stats;
}

需要特别注意的一点是，我们需要在render函数中不断的更新stats显示

stats.update();　

二 、dat.gui.js用于创建菜单栏，

可以用来控制场景中的各个参数来调试场景。

function addControls(controlObject){
        var gui = new dat.GUI();
        gui.add(controlObject,'rotationSpeed',-0.1,0.1);
        gui.add(controlObject, 'scale', 0.01, 2);
        gui.add(controlObject, 'rotationSpeed2', -0.1, 0.1);
}　

创建addControls函数，然后在init初始化函数中设置默认值，并调用这个函数

control = new function (){
    this.rotationSpeed = 0.005;
    this.scale = 1;
    this.rotationSpeed2 = 0.05;
}
addControls(control);