118 lines
2.9 KiB
TypeScript
118 lines
2.9 KiB
TypeScript
/**
|
||
* 性能状态监视器，基于stats.js
|
||
* 默认展示全部面板
|
||
*/
|
||
import ThreeStats from 'three/examples/jsm/libs/stats.module.js';
|
||
import Viewer from "@/core/viewer/Viewer.ts";
|
||
|
||
export class Stats {
|
||
private viewer: Viewer;
|
||
private threeStats: ThreeStats;
|
||
private panel = 0;
|
||
private _visible = true;
|
||
|
||
private fns:{
|
||
beforeRender:null | (() => void);
|
||
afterRender:null | (() => void);
|
||
} = {
|
||
beforeRender: null,
|
||
afterRender: null,
|
||
}
|
||
|
||
constructor(viewer: Viewer) {
|
||
this.viewer = viewer;
|
||
this.threeStats = new ThreeStats();
|
||
|
||
this.initEvent();
|
||
|
||
this.init();
|
||
}
|
||
|
||
get domElement():HTMLElement {
|
||
return this.threeStats.dom;
|
||
}
|
||
|
||
get visible(){
|
||
return this._visible;
|
||
}
|
||
|
||
set visible(visible:boolean) {
|
||
this._visible = visible;
|
||
|
||
this.domElement.style.display = visible ? "block" : 'none';
|
||
}
|
||
|
||
initEvent(){
|
||
this.fns.beforeRender = () => {
|
||
if(!this.visible) return;
|
||
|
||
this.threeStats.begin();
|
||
};
|
||
this.viewer.addEventListener("beforeRender",this.fns.beforeRender);
|
||
|
||
this.fns.afterRender = () => {
|
||
if(!this.visible) return;
|
||
|
||
this.threeStats.end();
|
||
};
|
||
this.viewer.addEventListener("afterRender",this.fns.afterRender);
|
||
}
|
||
|
||
init(){
|
||
const canvases = this.domElement.querySelectorAll("canvas");
|
||
canvases.forEach(canvas => {
|
||
canvas.style.width = "5rem";
|
||
canvas.style.height = "3rem";
|
||
canvas.style.display = "block";
|
||
});
|
||
}
|
||
|
||
showPanel(type: number | 'fps' | 'ms' | 'mb') {
|
||
if (typeof type === 'number') {
|
||
this.threeStats.showPanel(type);
|
||
this.panel = type;
|
||
return;
|
||
}
|
||
|
||
switch (type.toLowerCase()) {
|
||
case 'fps':
|
||
this.threeStats.showPanel(0);
|
||
this.panel = 0;
|
||
break;
|
||
case 'ms':
|
||
this.threeStats.showPanel(1);
|
||
this.panel = 1;
|
||
break;
|
||
case 'mb':
|
||
this.threeStats.showPanel(2);
|
||
this.panel = 2;
|
||
break;
|
||
}
|
||
}
|
||
|
||
showAllPanels(show:boolean) {
|
||
const canvases = this.domElement.querySelectorAll("canvas");
|
||
canvases.forEach(canvas => {
|
||
canvas.style.display = show ? "block" : "none";
|
||
});
|
||
|
||
if(!show){
|
||
this.showPanel(this.panel);
|
||
}
|
||
}
|
||
|
||
dispose(){
|
||
if(this.fns.beforeRender){
|
||
this.viewer.removeEventListener("beforeRender",this.fns.beforeRender);
|
||
this.fns.beforeRender = null;
|
||
}
|
||
|
||
if(this.fns.afterRender){
|
||
this.viewer.removeEventListener("afterRender",this.fns.afterRender);
|
||
this.fns.afterRender = null;
|
||
}
|
||
|
||
// @ts-ignore
|
||
this.threeStats = null;
|
||
}
|
||
} |