Playing GLB Animations in Reverse with Three.js

Yes, you can play your animation in reverse programmatically without having to create a separate reversed animation in Blender. Three.js animations (which @react-three/drei uses under the hood) support this functionality through the timeScale property.

Here's how you can modify your code to play the animation in reverse:

JAVASCRIPTCopied
import { useEffect, useState } 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)
    const [isOpen, setIsOpen] = useState(false)
    
    const handleClick = () => {
        const action = journalAnimations.actions.Animation;
        
        if (action) {
          // Set timeScale to -1 to play in reverse
          action.timeScale = isOpen ? -1 : 1;
          
          // If we're closing (playing in reverse), we need to make sure
          // we're starting from the end of the animation
          if (isOpen) {
            action.time = action.getClip().duration;
          } else {
            action.time = 0;
          }
          
          action.paused = false;
          action.play();
          setIsOpen(!isOpen);
        }
    };

    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()}}
    /> 
}

Key Changes:

1. Added a state variable isOpen to track whether the journal is open or closed
2. Set timeScale to -1 when playing in reverse (closing) or 1 when playing forward (opening)
3. When playing in reverse, set the animation's time to the end of the animation using action.time = action.getClip().duration
4. When playing forward, set the animation's time to 0
5. Toggle the isOpen state after playing the animation

This approach allows you to use the same animation for both opening and closing the journal, without having to create a separate reversed animation in Blender.