How to play animation reversed?

Questions
, ,
1

Hello!
I created a .glb model with Blender and able to successfully start an animation on click.
I’m not very fond of Blender and would prefer to program the animation to play reversed, rather than animate the reversed animation…

Is there a simple way to play the animation reversed?

code:

import { useEffect } from 'react'
import { useGLTF, useAnimations } from '@react-three/drei'

export default function Journal(props) {
    const journal = useGLTF(process.env.PUBLIC_URL + '/journal-full.glb')
    const journalAnimations = useAnimations(journal.animations, journal.scene)
    console.log(journalAnimations.names)
    

    const handleClick = () => {
        const action = journalAnimations.actions.Animation;
        
        if (action) {
          action.reset().play();
        }
      };

    return  <primitive object={journal.scene} 
            rotation={[Math.PI / 2, 0, 0]}
            position={props.position}
            scale={props.scale}
            
            onClick={(e) => {
              e.stopPropagation();
              handleClick(); 
              console.log('Journal clicked')}}

            onPointerEnter={(e) => { 
              document.body.style.cursor = 'pointer'; 
              e.stopPropagation()}}

            onPointerLeave={(e) => { 
              document.body.style.cursor = 'default'; 
              e.stopPropagation()}}
    />;
}
2

in THREE you can simply set the AnimationMixer.timeScale to a minus number i believe, I’m not 100% on this but you should be able to use something like the following in r3f…

const [timeScale, setTimeScale] = useEffect(-1)
{ actions, mixer } = useAnimations(journal.animations, journal.scene)
//console.log(journalAnimations.names)
console.log(actions.names)

useEffect(()=>{
  mixer.timeScale = timeScale
})
1 Like
3

Yep negative timeScale should work…

4

The AnimationAction.timeScale has the same effects.
The Mixer.timeScale is the global effects for all AnimationActions controlled by the mixer, while the AnimationAction.timeScale is the independent effects for AnimationAction self.

1 Like