Graphics Reference
In-Depth Information
How to do it...
In this recipe, we'll add a resize handler to the web page, which reacts to resize
events. Adding this handler only takes a couple of steps:
1. The first thing we need to add is the function that we call when the resize
event occurs. The following code fragment shows you the
onResize
func-
tion that we will call in the next step:
function onResize() {
camera.aspect = window.innerWidth /
window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth,
window.innerHeight);
}
In this code snippet, we first recalculate the aspect ratio for the camera based
on the new width and height. As Three.js caches certain aspects of the cam-
era, we have to call the
updateProjectionMatrix()
function next to
make sure the new aspect ratio is used. We also change the size for the ren-
derer to the new width and height, so the complete screen space is used.
2. Now that we've got our update function, we need to define an event listener:
window.addEventListener('resize',
onResize, false);
As you can see, we add an event listener for the
resize
event. So whenever
the screen is resized, the provided function, which is
onResize
, will be
called.
How it works...
Whenever something happens within a browser (a button is clicked on, the mouse
is moved, the window is resized, and so on), browsers will throw an event. From
JavaScript, you can register listeners to these events so that you can respond to
