Book Image

Three.js Cookbook

By : Jos Dirksen
Book Image

Three.js Cookbook

By: Jos Dirksen

Overview of this book

Table of Contents (15 chapters)
Three.js Cookbook
Credits
About the Author
Acknowledgments
About the Reviewers
www.PacktPub.com
Preface
Index

Zooming the camera to an object


Usually, when you position a camera in your scene, you might move it around a bit or let it focus on different objects. In this recipe, we'll show you how you can zoom in to an object so that it almost fills the rendered view.

Getting ready

To zoom in, we use the standard functionality from the THREE.PerspectiveCamera object. We've provided an example that demonstrates the result you'll get at the end of this recipe. To experiment with this example, open 03.02-zoom-camera-to-object.html in your browser. You will see something similar to the following screenshot:

Initially, you'll see a small rotating cube in the center of the scene. If you click on the updateCamera button in the menu in the top-right section, the camera will update and show you the rotating cube fullscreen like this:

How to do it...

To zoom the camera to an object, we need to take the following steps:

  1. The first thing we need to do is create and position the camera that we use to zoom in:

      camera...