Autorotation of 3D model - start/stop by clicking a button

[Jaumen90]

Hi,

I try to create the js function to start and stop 'auto-rotate' attribute after click on button. I'm not sure but I used 'toogle' for this purpose but it still does not work. How to correct the below code to make it work properly?

let isOff = true; const modelViewer = document.querySelector('#orbit-demo'); $("#autorotation").click(() => modelViewer.toggle(modelViewer.auto-rotate, isOff = !isOff))

#autorotation - it's button ID

Thank you for any support.

[elalish]

I'd guess it's because HTML attributes use kabob-case: auto-rotate, while JS uses camelCase: autoRotate. This is a web-standard practice that we follow.

[Lemovision]

That's good to know, would it be possible to have a note about this in your attributes docs for JS noobs like me?

[Jaumen90]

[elalish]

You can follow this example; it's changing a different attribute, but same idea: https://modelviewer.dev/examples/lightingandenv/#neutralLighting

[elalish]

check the docs 😁: https://modelviewer.dev/docs/#entrydocs-stagingandcameras-attributes-autoRotateDelay

[Jaumen90]

Thank you so much. The last thing I struggle with at the moment is the initial camera view. After clicking the hotspot, the camera changes the view (camera.Orbit coordinates). But when I press button for autorotation attribute and then I click again on this hotspot the camera view is incorrect. I think it's because the camera-target has chagned after autorotation attribute. But has no information about initial camera-target. How to change it or find the coordinates to fix it? Maybe is solution that resets the view (restores the default view) for the hotspot to work properly?

[elalish]

auto-rotate turns the model itself (relative to the environment) rather than the camera. If you're doing fancy things with camera-orbit, it's probably easier to skip auto-rotate. You can reset rotation with this: https://modelviewer.dev/docs/#entrydocs-stagingandcameras-methods-resetTurntableRotation or you can do your own auto rotation by changing the camera orbit inside of a requestAnimationFrame callback.