Easily monitor the performances of your vanilla threeJS application.
Add the ThreePerf component anywhere in your Canvas [example]. |
![]() |
npm install three-perf --save-dev
logsPerSecond?: number // Refresh rate of the logs [default 10]
renderer: THREE.WebGLRenderer // renderer you want to debug
domElement: HTMLElement // dom element to which stats block will be attached to
showGraph?: boolean // toggles cpu/gpu/fps graphs rendering
memory?: boolean // toggles memory info visiblity [like geos / textures / shaders etc count]
enabled?: boolean // toggles stats harvesting
visible?: boolean // stats are harvested, but stats panel is hidden
actionToCallUI?: string // by default is disabled [''], but if set and type this text in the tab window three-perf dev gui will be shown
guiVisible?: boolean, // default three-perf dev gui visiblity [falde by default]
backgroundOpacity?: number // stats block background opacity level [0.7 by default]
scale?: 1 // stats block scale [default 1]
anchorX?: 'left' | 'right' // default is left [stats container horrisontal anchor]
anchorY?: 'top' | 'bottom' // default is top [stats container vertical anchor]
import { ThreePerf } from 'three-perf'
const perf = new ThreePerf({
anchorX: 'left',
anchorY: 'top',
domElement: document.body, // or other canvas rendering wrapper
renderer: renderer // three js renderer instance you use for rendering
});
function () {
perf.begin();
// supports composer or multy-pass rendering
renderer.render( scene, camera );
perf.end();
}
To twitter @utsuboco
[this is port from r3f/pref to vanilla]