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