Three.js - 2 - Getting Started Part 2
Three.js - 2 - Getting Started Part Two
Introduction
In the last tutorial we got a very basic three.js application up and running. This tutorial will continue on from that, adding a stats counter and dealing with window resizing.
Stats Counter
A number of the example three.js applications have a neat little stats counter showing the number of frames per second, and displaying a graph of the frame rate over the last few seconds. This information is invaluable when testing the performance of your 3D application.
The JavaScript library responsible for this stats counter is not actually part of three.js. It is a separate library that can be found on GitHub at
https://github.com/mrdoob/stats.js/. The file that we need to include in our project can be found at https://github.com/mrdoob/stats.js/blob/master/build/stats.min.jshttps://github.com/mrdoob/stats.js/blob/master/build/stats.min.js. This JavaScript file is included like the others in the
<head> element.
<head> <title>Three.js - 2 - Getting Started 2</title> <link rel="stylesheet" type="text/css" href="css/style.css"> <script type="application/javascript" src="javascript/stats.min.js"></script> <script type="application/javascript" src="javascript/three.min.js"></script> <script type="application/javascript" src="javascript/threejs-2.js"></script> </head>
If you look at the code above, you'll notice that we have also included a link to a CSS file. The DOM element created by the stats.js library has the ID of
stats. Knowing this, we can create a CSS rule to position the stats counter in the top left hand corner of the page.
#stats { position: absolute; top:0; left: 0 }
With the stats.js library loaded and the DOM element styled, we now create the stats counter and add it to the HTML page in JavaScript. The following lines are added to the end of the
init() function. Note that we are appending the stats element directly to the body of the HTML page, just like we did with the renderer in the last tutorial. Because we specified absolute positioning in the style that is applied to the stats element, it will not interfere with the position of the renderer.
stats = new Stats(); document.body.appendChild( stats.domElement );
The final step is to update the stats counter every time a frame is rendered. This is done with the following code added to the end of the
animate() function.
stats.update();
Window Resizing
Take a moment to run the example from the last tutorial, and after it has been loaded, resize the window. Notice that the 3D cube does not change its position relative to the top left hand corner of the screen. Obviously this is not ideal.
Fixing this requires the camera's aspect ratio and projection matrix, and the renderer's size, to be updated if the window is resized. We can specify a function to be run in the event that the window is resized by adding an event listener to the window's resize event.
window.addEventListener( 'resize', onWindowResize, false );
The onWindowResize() function is where we update the camera's aspect ratio and projection matrix, and the renderer's size.
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
When running the example supplied with this tutorial, it is possible to resize the window and still have the cube placed in the middle of the screen.
Tips
If you click on the stats counter, you will switch between two views. The first displays the frames per second, while the second displays the milliseconds per frame.
Comments
Digital Marketing Course In Hyderabad