Comprehensive Guide to Babylon.js Game Engine, undefined

ArcRotateCamera

The ArcRotateCamera is one of the most versatile and widely used cameras in Babylon.js. It orbits around a target point, making it ideal for object viewing, 3D modeling applications, and orbital gameplay.

// Create ArcRotateCamera: name, alpha, beta, radius, target, scene
const camera = new BABYLON.ArcRotateCamera("camera", 
    Math.PI / 2, // Alpha (horizontal rotation)
    Math.PI / 4, // Beta (vertical angle)
    10,          // Radius (distance from target)
    new BABYLON.Vector3(0, 0, 0), // Target
    scene);

// Enable camera controls
camera.attachControl(canvas, true);

// Configure mouse/touch behavior
camera.inputs.attached.mousewheel.detachControl(canvas); // Disable zoom with mouse wheel
camera.inputs.addMouseWheel();                           // Re-add with custom settings
camera.wheelPrecision = 50;                              // Lower value = faster zoom

// Constrain camera movement
camera.lowerRadiusLimit = 5;   // Minimum zoom distance
camera.upperRadiusLimit = 20;  // Maximum zoom distance
camera.lowerBetaLimit = 0.1;   // Limit vertical rotation (lower)
camera.upperBetaLimit = Math.PI / 2.2; // Limit vertical rotation (upper)

// Camera inertia (smooth movement)
camera.inertia = 0.7; // Higher = more inertia

// Adjust rotation speed
camera.angularSensibilityX = 500; // Horizontal rotation sensitivity
camera.angularSensibilityY = 500; // Vertical rotation sensitivity

ArcRotateCamera Animation

Animate the camera for cinematic effects or guided tours:

// Animate the camera orbit
let alpha = 0;
scene.onBeforeRenderObservable.add(() => {
    alpha += 0.01;
    camera.alpha = alpha;
});

// Or use the animation system
const rotationAnimation = new BABYLON.Animation(
    "cameraRotation",
    "alpha",
    30, // frames per second
    BABYLON.Animation.ANIMATIONTYPE_FLOAT,
    BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE
);

const keyFrames = [];
keyFrames.push({ frame: 0, value: 0 });
keyFrames.push({ frame: 120, value: Math.PI * 2 });
rotationAnimation.setKeys(keyFrames);

camera.animations = [rotationAnimation];
scene.beginAnimation(camera, 0, 120, true); // true = loop

ArcRotateCamera Advanced Features

// Auto-rotation when idle
camera.useAutoRotationBehavior = true;
camera.autoRotationBehavior.idleRotationSpeed = 0.2;
camera.autoRotationBehavior.idleRotationWaitTime = 3000; // ms

// Bouncing behavior when hitting limits
camera.useBouncingBehavior = true;
camera.bouncingBehavior.transitionDuration = 150; // ms