You can usually get a sense of how good your frame rate is by checking how smooth your animations and movement through the environment are. Nonetheless, it's quicker and more precise to display the frame rate directly. Here we will show how to add the frame rate display used in the Three examples to your applications.

Firstly, our HTML needs to change a little bit. Specifically, we need to place our canvas in a named div element rather than directly in the HTML body. This element acts as a container to which we can dynamically add additional elements (like the frame rate display) at run time. The HTML has been reformatted for easier reading.

The real work of rendering the display is done by the Stats.js library, which we must include.

Next we need to create the frame rate display and add it to the div when the application initializes.

var container = document.getElementById("container");
var stats = new Stats(); = 'absolute'; = '0px'; = 100;
container.appendChild( stats.domElement );

These lines set the style of the frame rate display domElement so that it appears at the top of the div and above the canvas so we can see it.

Finally, the display needs to be updated each time a frame is rendered so that it animates properly.


example 7: performance