performance

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.

  <div id="container">
    <canvas style="width:100%;height:95%;border:1px gray solid;">
  </div>
</body>

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

<script type="text/javascript" src="js/three/Stats.js"></script>

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();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
stats.domElement.style.zIndex = 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.
stats.update();


  
  1-2-threeexample 7: performance 
  
    <!DOCTYPE html>
<html>
<head>
<title>example 7: performance</title>
<script type="text/javascript" src="js/three/three.js"></script>
<script type="text/javascript" src="js/three/stats.js"></script>
<script type="text/javascript" src="js/three/examples/js/controls/OrbitControls.js"></script>
<script type="text/javascript">

function init() {  
  var mycanvas = document.getElementsByTagName("canvas")[0];
  var w = mycanvas.clientWidth;
  var h = mycanvas.clientHeight;

  var renderer = new THREE.WebGLRenderer({canvas:mycanvas});
  renderer.setSize( w, h );
  renderer.setClearColor( new THREE.Color(0xeeeeee), 1 );

  var scene = new THREE.Scene();

  var camera = new THREE.PerspectiveCamera(
      15,     // Field of view
      w / h,  // Aspect ratio
      0.1,    // Near
      10000   // Far
  );
  scene.add(camera);
  
  // Camera looks toward negative z with y up
  camera.position.set( 5, 5, 100 );
  
  var control = new THREE.OrbitControls(camera,mycanvas);

  var nCubes = 2;
  for (var i=0;i<nCubes;++i) {
    for (var j=0;j<nCubes;++j) {
      for (var k=0;k<nCubes;++k) {
        var cube = new THREE.Mesh(
            new THREE.CubeGeometry( 1, 1, 1 ),
            new THREE.MeshLambertMaterial( { color: 0xFF0000 } )
        );
        cube.position.set(-i*2,-j*2,-k*2);
        scene.add( cube );
      }
    }
  }

  var light = new THREE.PointLight( 0xFFFF00 );
  light.position.set( 10, 0, 10 );
  scene.add( light );
  
  var clock = new THREE.Clock();
  
  var animate = function() {
    var dt = clock.getDelta();
    control.update(dt);
    stats.update();
    renderer.render(scene,camera);
    requestAnimationFrame(animate);
  };

  requestAnimationFrame(animate);
  
  var container = document.getElementById("container");
  var stats = new Stats();
  stats.domElement.style.position = 'absolute';
  stats.domElement.style.top = '0px';
  stats.domElement.style.zIndex = 100;
  container.appendChild( stats.domElement );
}
  
window.onload = init;
window.onresize = init;
</script>
</head>
<body><div id="container"><canvas style="width:100%;height:95%;border:1px gray solid;"></div></body>
</html>