Throw to auto-rotate

[bcairns]

Auto rotation is great... until the user doesn't want it. There's currently no built-in mechanism for the user to enable/disable auto rotation at runtime, you either have it turned on or off. It's pretty easy to use the API to cancel auto-rotation on user interaction (camera-change), but then there's no way to start it again if the user wants to.

It would be nice to have built-in options enabling the user to 1) cancel auto rotation when they first interact with the model, and 2) some way of re-starting auto rotation. An intuitive way would be to detect them "throwing" the model left or right (eg drag-and-release with inertia), and then turn on auto-rotation in this direction. Models already appear to have inertia when thrown this way, so hopefully this would not be hard to add.

Options could potentially be something like:

auto-rotate-policy="always" // this would be like current functionality
auto-rotate-policy="until-interaction" // only auto rotate until the user has interacted with the model
auto-rotate-policy="throw" (or maybe "auto"?) // as "until-interaction", but user can restart auto rotation by "throwing" left or right

[elalish]

If this feature is important to you, you can add a mouse/touch event listener to toggle auto-rotate and change the direction using the sign of https://modelviewer.dev/docs/#entrydocs-stagingandcameras-attributes-rotationPerSecond

[tonyhschu]

Stumbled upon this as I'm looking for a way to disable auto-rotate entirely. Setting the attribute to false doesn't work, still rotates, nor does "none" work. The only hack I found that works is auto-rotate-delay="Infinity". Feels like a bug?

[danilokrulj]

Just remove (delete) the auto-rotate attribute, that should stop it from rotating :)

[bcairns]

Yes just don't include the auto-rotate attribute at all. And you can remove the attribute at runtime and it will work too. Eg here is code to remove auto-rotate on user interaction:

modelViewer.addEventListener('camera-change', onCameraChange);

function onCameraChange(e: CustomEvent) {
	if (e.detail?.source === 'user-interaction') {
		// once the user starts interacting with the model, disable automatic rotation
		modelViewer.removeAttribute('auto-rotate');
		modelViewer.removeEventListener('camera-change', onCameraChange); // and stop listening for this
	}
}

There is also the interaction prompt, which demonstrates how dragging can be used to rotate. This is on by default and can be disabled with interaction-prompt="none".

See https://modelviewer.dev/docs/index.html#stagingandcameras-attributes