Use the camera-controls attribute to enable user interaction

Set the camera-orbit change the initial angle and position of the camera

Use CSS-like calc() to sync camera orbit with scroll position

Disable user zoom so that wheel and pinch interactions have the browser's default behavior.

The camera automatically interpolates between orbits (even when controls are disabled)

By default, the camera targets the center of the model's bounding box

Use the camera-target attribute to orbit a different coordinate

Disable Tap

Pan is enabled by default via two fingers on touch or using right-click or any modifier key with mouse drag. When panning, the center point is shown visually (and can be suppressed/changed using the pan-target slot) and when the pan gesture ends, the camera is focused on that model point (if there was a surface under the dot), so that the camera doesn't orbit around a random point in space. Clicking on the model focuses on that point, while clicking off the model returns to the default center.

There is a disable-pan attribute to turn all of this off, but here we demonstrate only turning off the click/tap behaviors via the disable-tap attribute. Note that after panning and rotating the model, it can be very hard to get back to the original centering, so it's recommended to implement your own re-centering logic via camera-target if you decide to go this route.

Add other interactions like rotating the skybox

Event listeners can cooperate with camera-controls

By using capture on your event listeners you can make sure the events are also passed in as usual to the built in camera controls. This can be selectively disabled by calling stopPropagation() on the event.

Using shift-drag or two-finger drag on mobile, one can rotate the skybox to see how the environment would cast light onto the object from different angles.

Create your own custom interaction prompts with one or two touch points.