TrackballControls vs OrbitControls in Three.js

In Three.js, both TrackballControls and OrbitControls are popular utilities used to navigate 3D scenes by manipulating the camera. This article explains the primary differences in their interaction styles, focusing on camera rotation, orientation constraints, and how to choose the right control scheme for your specific web-based 3D project.

The Core Difference: Camera Orientation and the “Up” Vector

The fundamental difference between these two controller types lies in how they handle rotation and maintain the camera’s orientation relative to the horizon.

OrbitControls: Constrained and Grounded

OrbitControls is designed to orbit around a specific target point while keeping a fixed “up” direction (typically the positive Y-axis). * Orientation Lock: The camera cannot flip upside down. If you attempt to drag the camera over the top or under the bottom of the target, the movement stops at the poles (90 degrees upward or downward). * Horizon Stability: The camera’s horizon remains level. If you rotate left or right, the camera sweeps around the target like a satellite orbiting a planet, ensuring that “up” always points toward the top of your screen.

TrackballControls: Free-Floating and Unconstrained

TrackballControls simulates a physical trackball. When you drag the mouse, you rotate a virtual sphere enclosing the scene, allowing the camera to spin along any axis without restriction. * No “Up” Vector Restriction: The camera can easily flip upside down, spin sideways, and roll. There is no concept of a locked horizon. * Continuous Rotation: You can drag the mouse in any direction to continuously roll and tumble the camera around the target, which can result in the scene appearing tilted or completely inverted relative to your starting view.

Typical Use Cases

Because of their differing mechanics, each controller is suited for distinct types of 3D applications.

When to Use OrbitControls

OrbitControls is the industry standard for applications where a sense of gravity, ground, or realistic orientation is important. * Product Viewers: Allowing users to inspect a 3D model of a car, shoe, or furniture while keeping the object upright. * Architectural Visualizations: Walking or flying around a building where the sky should always remain at the top of the viewport. * Map and GIS Applications: Navigating terrain or cityscapes.

When to Use TrackballControls

TrackballControls is ideal for abstract environments where “up” and “down” do not matter. * Molecular and Scientific Visualization: Inspecting complex 3D chemical bonds, protein structures, or particle clouds. * Space Simulations: Navigating celestial bodies or star maps where there is no absolute orientation. * Complex Geometry Analysis: Rotating abstract 3D meshes to inspect them from non-standard angles.

Summary of Interaction Behavior