model-viewer Rotate 3d model at 90 degree steps using JS and html button press.

[phatpixels]

Hi There!
I have a button and a 3d object. I would like an object to rotate 90 degrees each time i press the onscreen button once. So if i press it 4 times it does a full 360 turn. With a smooth transition. I tried googling for an example but had no luck so far. Is this possible with model-viewer AR, Javascript and a regular html button? Somewhat new to this, just wondering if this level of interaction is possible. Thankyou

[phatpixels]

I have a temp fix to this of animation play and timed pause, its not very precise but ok for now. It would be good to have JS control the model rotation to a precise angle without animation.

[WadeMorrison]

Not necessarily an answer but if you could figure out how to code the transform option to transform the Yaw 90, 180, 270, and then 0 once clicked, it should work! Here is a link to the transform options: https://modelviewer.dev/examples/scenegraph/#transforms

[phatpixels]

Thankyou @WadeMorrison for pointing me here. Ill definitely look into this option. If i can get a way for it to transition into place without snapping then that could be the solution i am after. I'll keep you posted on progress. Fingers crossed.

[WadeMorrison]

An easier way to maybe do it, is to animate your object spinning in a 360, and making a "Rotate" button that actually plays/pauses it every 90 degrees (so lets say you have a 4 second animation, you would pause it every 1 second). If that makes sense? It would also make it to where it doesn't snap it in increments.

[phatpixels]

That's a great working solution you mention, animating it. I already have that functioning and it works quite well to be honest. I was looking for a code only approach initially so i can easily swap axis, models etc. But for the meantime, for this proof of concept i am happily working with the animation approach and may even stick with it.