Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[animation-mixer] timeScale -1 not working for gltf animation #446

Open
udl opened this issue Mar 26, 2024 · 3 comments
Open

[animation-mixer] timeScale -1 not working for gltf animation #446

udl opened this issue Mar 26, 2024 · 3 comments

Comments

@udl
Copy link

udl commented Mar 26, 2024

Hi there and thank you for your great work!

I tried to trigger a gltf animation and then reverse it. Triggering the animation works. But the backward direction doesn't work.
It seems, several people had this issue in the past (#364).
I've created a glitch demonstrating the problem: https://glitch.com/edit/#!/thoracic-typhoon-rest
You can click "forward" and it works just fine, "backward" doesn't work unfortunately. Or am I doing something wrong?

Thanks in advance and let me know if anything is missing to reproduce the issue.

@vincentfretin
Copy link
Member

Hi, there is even a more recent discussion #430
I don't have a solution, I'm not too familiar with the AnimationMixer api. Maybe someone else can look at it.

@v5ma
Copy link

v5ma commented Apr 26, 2024

I've solved it. GLBanireverse

@vincentfretin
Copy link
Member

Thanks @v5ma!
Reading again #364 that you referenced, the comment #364 (comment) indeed had part of the solution setting action.time = clip.duration.

I'm putting your index.html here for context:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>GLBanireverse: The GLTF GLB Animation Mixer Reversible Control Example</title>
    <script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/c-frame/[email protected]/dist/aframe-extras.min.js"></script>
</head>
<body>
    <button id="forward">Forward</button>
    <button id="backward">Backward</button>
    <div id="myEmbeddedScene" style="width: 600px; height: 600px">
      <a-scene embedded>
        <a-assets>
          <a-asset-item id="box"
            src="https://cdn.glitch.global/9fd8c761-9851-4e63-b098-a2c6c76f905a/BoxAnimated_BoxMoves_Has10Frames.glb?v=1711472748160"></a-asset-item>
        </a-assets>

        <a-entity camera look-controls position="1 1 1"></a-entity>

        <a-entity id="movingBox"
                  gltf-model="#box"
                  position="2 1 -2"
                  animation-mixer="clip: CubeAction; loop: once; clampWhenFinished: true; timeScale: 0">
        </a-entity>
      </a-scene>
    </div>

    <script>
      document.getElementById('forward').addEventListener('click', function () {
        const box = document.querySelector("#movingBox");
        const mixerComponent = box.components['animation-mixer'];
        const action = mixerComponent.mixer.clipAction(mixerComponent.data.clip);
        if (action.time === 0) {
          action.reset();
          action.timeScale = 1;
          action.play();
        }
      });

      document.getElementById('backward').addEventListener('click', function () {
        const box = document.querySelector("#movingBox");
        const mixerComponent = box.components['animation-mixer'];
        const action = mixerComponent.mixer.clipAction(mixerComponent.data.clip);
        if (action.time === action.getClip().duration) {
          action.paused = false;
          action.timeScale = -1;
          action.time = action.getClip().duration; // Set the animation time to its full duration before playing in reverse
          action.play();
        }
      });
    </script>
</body>
</html>

There is probably a way to make a change in the animation-mixer component so we can
use
box.setAttribute("animation-mixer", { timeScale: -1 });
and
box.setAttribute("animation-mixer", { timeScale: 1 });

If you want to attempt to make a change to the component, that would be great.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants