three.js学习:性能监视器stats.js的用法

时间:2022-01-17 20:23:46

用法一:

var stats = new Stats();
stats.setMode(0);
stats.domElement.style.position = 'absolute';
stats.domElement.style.left = '0px';
stats.domElement.style.top = '0px';
document.body.appendChild(stats.domElement);
setInterval(function () {
    stats.begin();
    stats.end();
}, 1000 / 60)

用法二(红字部分):

var renderer;
var stats = new Stats();
function initThree() {
    stats.setMode(0);
    stats.domElement.style.position = 'absolute';
    stats.domElement.style.left = '0px';
    stats.domElement.style.top = '0px';
    document.body.appendChild(stats.domElement);
    renderer = new THREE.WebGLRenderer({
        canvas: canvas,
        antialias: true
    });
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setClearColor(0xffffff, 1.0);
}......此处代码省略......
function animation3D() {    cylinder.position.x -= 0.5;    renderer.render(scene, camera);    requestAnimationFrame(animation3D);    stats.update();}
requestAnimationFrame(animation3D);