Model-viewer: [feature] Auto Zoom

[warshell]

Hello i already saw a camera-orbit that can zoom a model, but what about slow auto zoom after loading. Thanks

[cdata]

@devcline are you referring to the sort of zoom-out effect that Poly has?

You can do something similar today with camera-orbit and the model-visibility event. Consider the following example:

<model-viewer src="any.glb" camera-orbit="75deg 40deg 0.75m">
</model-viewer>

<!-- ... later ... -->
<script>
(() => {
  const modelViewer = document.querySelector('model-viewer');
  modelViewer.addEventListener('model-visibility', (event) => {
    if (event.detail.visible) {
      modelViewer.cameraOrbit = '0deg 75deg auto';
    }
  }, { once: true });
})();
</script>

I have made a live example for you to check out here: http://lopsided-motion.glitch.me/zoom.html

[warshell]

This is very cool! Wow. I will test to make it zoom in also . Any way to change a zoom speed ? Thanks you for this , i appreciate !

[cdata]

@devcline eventually there will be. Kind of inline with #458 we would like to make other properties like maximum velocity configurable.

[mikkoh]

I almost wonder if the camera-orbit attribute and cameraOrbit should animate. Like in @devcline's case he could write/use code that's external to animate.

One interesting thing that comes up with #458 that it might be nice in JS to have something like:

const couldOrbitToPosition = modelViewer.setCameraOrbit('0deg 75deg auto');

This way your application logic could be reactive to whether you could orbit to that position.

[cdata]

Yeah, great point. I think we have #454 to allow users to disable interpolation for exactly that case @mikkoh 🙌

[cdata]

I'm going to close this in favor of #598 , which is asking for the same thing but has pretty GIFs :)