Using a Camera in a 3D WebGL World – BabylonJS Series part 5

BabylonJS Series by David Catuhe (@DeltaKosh):

Learn WebGL and Babylon.js at your own pace

Feel free to check out our online course 3D Programming with WebGL and Babylon.js for Beginners on Zenva Academy. The course covers the Babylon.js framework and explains all you need to get started with using this fantastic library in new or existing projects.

What you could expect

To continue building our scene, let’s see how to manage cameras.


Final result

How can I do this ?

Cameras management is pretty simple: Babylon.js supports 3 kind of cameras:

  • FreeCamera is a FPS like camera where you control the camera with the cursors keys and the mouse
  • TouchCamera is a camera controlled with touch events (it requires “hand.js” to work, always included in our demos)
  • ArcRotateCamera is a camera that rotates around a given pivot. It can be controlled with the mouse or touch events (and it also requires “hand.js” to work)

You can create as much cameras as you want but only one camera can be active at a time. Here is how to write the code for each of those cameras:

All the cameras can automatically handle inputs for you by calling “attachControl” function on the canvas. And you can revoke the control by using “detachControl” function:

Note that you can change some parameters later, depending of the type of cameras: Change target/position of ArcRotate camera:

Change sensibility of Touch camera:

Apply gravity to Free camera: later in those tutorials 😉

Published by

David Catuhe

David Catuhe is technical evangelist lead at Microsoft France. He defines himself as a geek. He loves to develop with JavaScript and HTML5 but also with DirectX, C#, C++ or even Kinect (He wrote a book about it which is available on Amazon).David has a blog called Eternal Coding where he writes about HTML5, Windows, Kinect and 3D Development.

Share this article