Camera Controls in Three.js: ArcballControls

Working with the camera

Besides animating and changing objects, we can also animate a scene by moving the camera around. We did this a couple of times by manually updating the position of the camera. Three.js also provides several ways of updating the camera.

Three.js has several camera controls we can use throughout a scene. These controls are located in the Three.js distribution and can be found in the examples/js/controls directory. We’ll look at the following controls in more detail:

• ArcballControls: This is an extensive control providing a transparent overlay that we can use to easily move the camera around.

• FirstPersonControls: These are controls that behave like those in first-person shooters. We can move around with the keyboard and look around with the mouse.

• FlyControls: These are flight simulator-like controls. We can move and steer with the keyboard and the mouse.

• OrbitControls: This simulates a satellite in orbit around a specific scene. This allows us to move around with the mouse and keyboard.

• PointerLockControls: These are similar to the first-person controls but they also lock the mouse pointer to the screen, making it a great choice for simple games.

• TrackBallControls: ...