Graphics Reference
In-Depth Information
...
stats = createStats();
document.body.appendChild(
stats.domElement );
// call the render function
render();
}
As you can see we created a new global variable called
stats
, which we'll
use to access our statistics object. In the
init
method, we use the function
we just created, and add the
stats
object to our HTML body.
3. We're almost there. The only thing we need to do now is make sure that we
update the
stats
object whenever the render function is called. This way,
the
stats
object can calculate either the framerate or the time it took to run
the render function:
function render() {
requestAnimationFrame(render);
scene.getObjectByName('cube').rotation.x+=0.05;
renderer.render(scene, camera);
stats.update();
}
How it works...
We mentioned that
Stats.js
provides two modes. It either shows the framerate
or the time it took to render the last frame. The
Stats.js
library works by simply
keeping track of the time passed between calls and its
update
function. If you're
monitoring the framerate, it counts how often the update was called within the last
second, and shows that value. If you're monitoring the render time, it just shows the
time between calls and the
update
function.
