Camera interpolation between orbits after clicking on the hotspot

[Jaumen90]

Hi,

I'm trying to find a solution to change the orientation of the camera after click on button (hotspot). I'd like to implement a similar solution as tween.js for 3D models. This kind of usage is implemented by sketchfab for hotspots (the camera changes position and orienatation after clicking on the hotspot).

If I have several hotspots e.g.: <button class="Hotspot" slot="hotspot-1"...> can I use script below:

`<script>
function() {
const modelViewer = document.querySelector('#orbit-demo');
const orbitCycle = [
'45deg 55deg 4m',
modelViewer.cameraOrbit
];

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

to change camera orientation for these hotspots? How can I turn this script on after clicking on the specific hotspot (not automatically)?

Currently the script reverts to the default view after a given time. I need to change the camera orientation only when the hotspot is used.

Thank you all for any advice or support.

[elalish]

Just put a click handler on your hotspot element that sets the cameraOrbit instead of using an interval.

[elalish]

Yes, this has been asked for a few times so it's probably time to prioritize it: #1663.

[pyjacques]

Seam to be implemented in #2286 but how to set it to work with modelViewer.cameraOrbit = '45deg 55deg 4m'; please ? ( to slow down camera interpolations)

[elalish]

You can set it with either HTML or JS (interpolation-decay or interpolationDecay, respectively): https://modelviewer.dev/docs/#entrydocs-stagingandcameras-attributes-interpolationDecay

[pyjacques]

<model-viewer interpolation-decay="300"> is working great to slow my camera movements like modelViewer.cameraOrbit = '45deg 55deg 4m'; But moving around the model is also slower, not very responsive now 🤔 The two are necessarily linked by this parameter?

[elalish]

Yes, that's right. You can always set it in JS in your click listener and then set it back I suppose. You can also do your own camera interpolation inside of a requestAnimationFrame callback.