Exploded parts view

[pixlbndr]

I am not a coder but I try my best to figure things out on my own. But this time I am stuck and looking for some help.
I have some models that I want to animate into an exploded parts view and then animate back together by clicking a button toggle.
I have animated the GLB model in Blender with the parts separation animation I want.

Here's what I am trying to do in detail:

1. Model loads in paused state (solved).
2. A Static button is clicked that plays the exploded view animation (frames 1-15), then the model pauses on frame 15. (unsolved)
3. The same static button is clicked again to play the animated in reverse back to frame 0, OR I can animate the model in reverse from frame 15-30, where frame 30 is the same as frame 0. (animating model: solved, coding this function: unsolved)

Here is the code I have been able to cable together thus far, (again, fair warning I am not a coder):

The following code lets me click a hotspot to start playing the exploded view animation, but I don't know how to make it so when the model reaches frame 15 the animation pauses. I think it might have something to do with the currentTime property.

explodeButton.addEventListener('click', () => {
 if (model.paused) {
 model.play();
 } else {
model.pause();
 }
 });

Here is my model-viewer environment code:
I have the explodedButton set as a hotspot but I intend to change it a static button on the lower left corner of the screen once I figure out the first part.

<model-viewer id="model" 
                      bounds="tight" 
                      enable-pan
                      src="assets/Model_animated.glb" 
                      ar 
                      ar-modes="webxr scene-viewer quick-look" 
                      camera-controls 
                      poster="assets/poster.png" 
                      shadow-intensity="0"
                      camera-orbit="22.57deg 86.55deg auto" 
                      min-camera-orbit="auto auto 5%" 
                      exposure="1"
                      >
            <div class="progress-bar hide" slot="progress-bar">
                <div class="update-bar"></div>
            </div>
            <button id="explodeButton"
            slot="hotspot-one"
            data-position="0.16 0.1 0.17"
            data-normal="-0.07 0.97 0.23">Hotspot</button>

Any help appreciated!

[elalish]

I think the best way would be to cut your animation in half, just going from together to exploded. Then you can call mv.play({repetitions: 1}) to explode it, then set mv.timeScale = -1, await mv.updateComplete, and then mv.play({repetitions: 1}) to play in reverse.

Only caveat is we have some bugs on the animation, so take a look at the issues list if you are having odd behavior.

[elalish]

https://modelviewer.dev/docs/index.html#entrydocs-animation-methods-play

[pixlbndr]

Thank you @elalish , Providing the syntax for the play() method helped me out a lot as I was trying to use this before but with no luck as I did not understand how to write the number of repetitions.

Currently, attending YouTube University ;-) to learn up on async and await in order to understand how to use them as you suggested.

Current code looks like this:

<button class="Hotspot" slot="hotspot-1" data-position="0.17074580241197168m 57.64602628246281m 10.21635430620246m" data-orbit="-0.7568deg 86.81deg 200m" data-normal="0.023904054163873593m -0.0960409793179101m 0.9950903107186742m" data-visibility-attribute="visible">
    <div class="HotspotAnnotation" onclick="playAnimation()">Play button</div>
</button>

<script>
    async function playAnimation() {
    if (model.currentTime == 0){
    model.play({repetitions: 1});
    console.log(model.currentTime);
    //await model.updateComplete;
    //model.timeScale = -1;
    console.log(model.updateComplete);
    }
}
   
	</script>

This works and the animations plays once. Now trying to figure out how to pressed the same button again to get the timeScale = -1 and then play another rep so the animation is reversed. Again, thank you. I'll update if I find anything.

[pixlbndr]

Hello all,

The following code seems to be working as I needed it too.

Click "open" button to play explode animation, button text changes from "open" to "close"
Animation plays to the end once then stops
Click "close" button to play explode animation in reverse, button text changes from "close" to "open"
as a bonus I was able to get the hotspot (part label) to update is position from closed and exploded states.

Hope this helps!

<div><button class="playbutton" id="animation" onclick="toggleAnimation()">Open</button></div>

function toggleAnimation() {
        let animation,state;
        animation = document.getElementById("animation");
        state = animation.innerText;
        if(state == 'Open') 
        {
            animation.innerText = "Close";
            model.timeScale = 1;
            model.updateHotspot({ 
                name: 'hotspot-1', //Name of hotspot when open
                position: "-0.25217607736855535m 110.35097035692672m 68.70624102514762m"
            });
        }
         else {
            animation.innerText = "Open";
            model.timeScale = -1;
            model.updateHotspot({ 
                name: 'hotspot-1', //Name of hotspot when closed
                position: "0.07838113854751327m 109.68274346113967m 7.710404087301681m"
            });
        }
        model.play({repetitions: 1});
        console.log(model.currentTime);
        console.log(animation);
    };