How to Auto-Rotate OrbitControls in Three.js

This article explains how to enable automatic camera rotation and control its speed using the OrbitControls library in Three.js. You will learn the exact properties to modify and how to properly configure your animation loop so that the auto-rotation effect renders correctly in your 3D scene.

Enabling Auto-Rotation

To make your camera automatically orbit around its target, you need to set the autoRotate property of your OrbitControls instance to true. By default, this property is set to false.

// Set up your OrbitControls
const controls = new OrbitControls(camera, renderer.domElement);

// Enable auto-rotation
controls.autoRotate = true;

Adjusting the Rotation Speed and Direction

You can customize the speed and direction of the rotation using the autoRotateSpeed property.

• Default Value: 2.0 (which equates to roughly 30 seconds per orbit at 60 frames per second).
• Faster Rotation: Set the value higher than 2.0.
• Slower Rotation: Set the value lower than 2.0.
• Reverse Direction: Set the value to a negative number.

// Speed up the rotation (e.g., 2.5 times faster than default)
controls.autoRotateSpeed = 5.0;

// Slow down and reverse the direction of rotation
controls.autoRotateSpeed = -1.0;

Updating the Animation Loop

For the auto-rotation to actually move the camera, you must call controls.update() inside your game loop or animation request frame. If this method is not called in the loop, the camera will remain stationary regardless of your auto-rotate settings.

function animate() {
    requestAnimationFrame(animate);

    // Required when autoRotate or enableDamping are set to true
    controls.update();

    renderer.render(scene, camera);
}

// Start the animation loop
animate();