Matt Keeter // 3D Rotation Design

submited by

Style Pass

2024-11-06 09:30:03

When interacting with 3D models on a 2D screen, users expect to be able to spin the model around and inspect it from all angles.

Let's start with what's known as "turntable" rotation. All of the systems we'll be exploring are mouse-based; when you click and drag, the angle changes:

There's one obvious flaw with this system: it's impossible to see the model from arbitrary angles, because the model's Z axis is always pointing up and down on the screen.

This system allows rotation to an arbitrary angle, but feels very unintuitive: users end up "tumbling" the model by moving the mouse in small circles, walking towards the desired target position.

There's another, more subtle critique of this system: it lacks path independence. This means that if you start and end a drag with your mouse at a particular location, the rotation will depend on the path that your mouse took.

As hinted by its name, we project a sphere (the "ball") onto the model. When the user clicks, we "grab" that point on the sphere. As the mouse is dragged, we derive the rotation that puts the grabbed point onto the new mouse position.