Matching the rendered view to a resized browser

When you define a camera in Three.js, you need to define the aspect ratio; for a renderer, you need to define its output size. Normally, you do this once when you set up your initial scene. This works great until the user resizes their browser. In this case, the aspect ratio for the camera will probably change, as will the output size for the renderer. In this recipe, we'll show you the steps you need to take to react to changes to the screen size.

Getting ready

As with every recipe, we provide an example that you can use to test and experiment with for this recipe as well. Open 03.06-change-the-camera-on-screen-resize.html in your browser and make the screen very small.

What you see is that the same ...

Get Three.js Cookbook now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.