model_viewer_plus.dart icon indicating copy to clipboard operation
model_viewer_plus.dart copied to clipboard

Feature Request: Interpolation between camera orbits

Open MetalHepple opened this issue 1 year ago • 0 comments

Is your feature request related to a problem? Please describe.

I'm currently developing an application using the Flutter Model Viewer package. I would like to smoothly transition between different camera orbits, similar to the functionality provided by the web component. However, the current Flutter package does not support this feature, which limits the user experience in my application. Additionally, the cameraOrbit property in the Flutter package is currently final and cannot be changed dynamically.

Describe the solution you'd like

I would like the Flutter Model Viewer to support interpolation between camera orbits. This would allow for smooth transitions when changing the camera's position and orientation, enhancing the visual experience for users. Ideally, this feature would mimic the behavior of the web component's cameraOrbit property, which automatically interpolates between orbits even when controls are disabled. Also, making the cameraOrbit property mutable would allow for dynamic changes to the camera's position and orientation.

Describe alternatives you've considered

As an alternative, I've considered manually implementing this feature by periodically updating the cameraOrbit property in a loop. However, this approach does not provide the smooth, continuous transitions that are achievable with interpolation, and it is not possible with the current implementation where cameraOrbit is final.

Additional context

Here's an example of the desired functionality using the web component:

<model-viewer id="orbit-demo" interpolation-decay="200" src="../../shared-assets/models/Astronaut.glb" alt="A 3D model of an astronaut"></model-viewer>
<script>
(() => {
  const modelViewer = document.querySelector('#orbit-demo');
  const orbitCycle = [
    '45deg 55deg 4m',
    '-60deg 110deg 2m',
    modelViewer.cameraOrbit
  ];

  setInterval(() => {
    const currentOrbitIndex = orbitCycle.indexOf(modelViewer.cameraOrbit);
    modelViewer.cameraOrbit =
        orbitCycle[(currentOrbitIndex + 1) % orbitCycle.length];
  }, 3000);
})();
</script>

In this example, the camera smoothly transitions between different orbits every 3 seconds. I would like to achieve similar functionality in my Flutter application using the Model Viewer package.

MetalHepple avatar Jul 19 '23 09:07 MetalHepple