Babylon.js Cameras — Viewpoint and Navigation Controls

DodaTech Updated 2026-06-28 3 min read

In this tutorial, you will learn about Babylon.js Cameras. We cover key concepts, practical examples, and best practices to help you master this topic.

Babylon.js cameras define the viewpoint for rendering 3D scenes, with multiple types for orbiting, first-person, follow, and VR navigation.

What You'll Learn

By the end of this guide, you will set up ArcRotateCamera for orbit controls, use FreeCamera for first-person movement, configure FollowCamera for target tracking, set up VR experience, and customize camera inputs and constraints.

ArcRotateCamera

var camera = new BABYLON.ArcRotateCamera(
    'camera',
    -Math.PI / 2, Math.PI / 3,
    10, BABYLON.Vector3.Zero(), scene
);
camera.attachControl(canvas, true);
camera.lowerRadiusLimit = 3;
camera.upperRadiusLimit = 20;
camera.lowerBetaLimit = 0.1;
camera.upperBetaLimit = Math.PI / 2;

FreeCamera

var camera = new BABYLON.FreeCamera(
    'fpsCamera',
    new BABYLON.Vector3(0, 1, -5), scene
);
camera.attachControl(canvas, true);
camera.speed = 0.1;
camera.checkCollisions = true;
camera.applyGravity = true;

FollowCamera

var camera = new BABYLON.FollowCamera(
    'followCam',
    new BABYLON.Vector3(0, 5, -10), scene
);
camera.lockedTarget = playerMesh;
camera.radius = 8;
camera.heightOffset = 3;
camera.rotationOffset = 0;
camera.cameraAcceleration = 0.05;

Common Mistakes

1. Forgetting attachControl

Cameras do not receive input until attachControl is called. Without it, the scene renders but stays static.

2. Not Setting Target for ArcRotateCamera

ArcRotateCamera defaults to target (0,0,0). Set camera.setTarget() to a specific position.

3. Camera Speed Too High on Mobile

FreeCamera default speed is too fast for touch. Reduce speed when on mobile devices.

4. FollowCamera Ignoring Collisions

FollowCamera does not check collisions by default. Set camera.checkCollisions = true for walls.

5. Multiple Active Cameras

Only one camera can be active per viewport. Call scene.activeCamera = camera to switch.

Practice Questions

Q1: What camera is best for orbiting a 3D model? A: ArcRotateCamera with lower/upper radius limits.

Q2: How do you make a first-person camera? A: Use FreeCamera with checkCollisions and applyGravity.

Q3: How do you make a camera follow a moving object? A: Use FollowCamera and set lockedTarget to the mesh.

Q4: How do you limit camera zoom? A: Set lowerRadiusLimit and upperRadiusLimit on ArcRotateCamera.

Q5: How do you switch cameras? A: Set scene.activeCamera = newCamera and call scene.activeCamera.attachControl.

Challenge: Build a scene with two viewports: one overview with ArcRotateCamera and one first-person view with FreeCamera. Both render simultaneously.

FAQ

Does Babylon.js support stereoscopic rendering?

Yes. Babylon.js has stereoscopic cameras for VR and anaglyph rendering.

Can I animate camera position?

Yes. Use BABYLON.Animation or BABYLON.Scene.BeginAnimation on the camera.

How do I prevent camera from going through walls?

Enable checkCollisions on the camera and set ellipsoid for collision volume.

What is the difference between attachControl(true) and attachControl(false)

true prevents default touch events like scrolling. Use true for fullscreen, false for embedded.

Can I use gamepad with Babylon.js cameras?

Yes. Babylon.js supports gamepad input out of the box.

Try It Yourself

Build a scene with ArcRotateCamera.

<!DOCTYPE html>
<html>
<head>
    <title>Babylon.js Cameras</title>
    <script src="https://cdn.babylonjs.com/babylon.js"></script>
</head>
<body style="font-family:sans-serif;padding:20px;">
<h2>Camera Demo</h2>
<canvas id="renderCanvas" style="width:100%;height:400px;border-radius:8px;"></canvas>
<script>
var canvas = document.getElementById('renderCanvas');
var engine = new BABYLON.Engine(canvas, true);
var scene = new BABYLON.Scene(engine);

var camera = new BABYLON.ArcRotateCamera('camera', -Math.PI/2, Math.PI/3, 10, BABYLON.Vector3.Zero(), scene);
camera.attachControl(canvas, true);
camera.lowerRadiusLimit = 3;
camera.upperRadiusLimit = 20;

new BABYLON.HemisphericLight('light', new BABYLON.Vector3(0, 1, 0), scene);

BABYLON.MeshBuilder.CreateBox('box', { size: 1.5 }, scene);
BABYLON.MeshBuilder.CreateSphere('sphere', { diameter: 1 }, scene).position.x = 2.5;
BABYLON.MeshBuilder.CreateGround('ground', { width: 10, height: 10 }, scene);

engine.runRenderLoop(function() { scene.render(); });
window.addEventListener('resize', function() { engine.resize(); });
</script>
</body>
</html>

What's Next

Master lighting.

Lights — Point, directional, and spot lights. Shaders — Custom shaders.

← Previous Babylon.js Scene Graph — Organizing 3D Objects Next → Babylon.js Lights — Illuminating Your 3D Scene

Built by the developers of DodaTech

Doda Browser, DodaZIP & Durga Antivirus Pro

Home Browse Babylonjs