Animation Applies Only to the First Element in the Element Tree

Questions
, ,
1

Hello,

I am utilizing react-three-fiber and react-three-drei to load multiple 3D models alongside various animations. I handle animations through useAnimations (react-three-drei).

const idle = useGLTF('/animations/idle.glb');
const walk = useGLTF('/animations/walk.glb');
const charge = useGLTF('/animations/__charge.glb');
const dance = useGLTF('/animations/__dancing.glb');
const pointing = useGLTF('/animations/__pointingGesture.glb');
const surprised = useGLTF('/animations/__surptised.glb');
const [animationName, setAnimationName] = useState('idle')
    
    idle.animations[0].name = 'idle'
    walk.animations[0].name = 'walk'
    charge.animations[0].name = 'charge'
    dance.animations[0].name = 'dance'
    pointing.animations[0].name = 'pointing'
    surprised.animations[0].name = 'surprised'

    const {actions, names} = useDreiAnimations([
        idle.animations[0],
        walk.animations[0],
        charge.animations[0],
        dance.animations[0],
        pointing.animations[0],
        surprised.animations[0],
    ], group)
    
    console.log({group}, 'useAnimations')

    useEffect(() => {
        actions[animationName]?.reset().fadeIn(0.5).play()

        return () => {
            actions[animationName]?.fadeOut(0.5)
        }
    }, [animationName]);

However, I have encountered an issue where only the first element in the hierarchy is animated.

           <Stage
                adjustCamera={false}
                environment={{files: 'env/kiara_1_dawn_1k.hdr', background: true, blur: 0.75}}
            >
                <primitive
                    object={topModelGltf.scene}
                />

                <primitive
                    object={thad.scene}
                />
            </Stage>

In the code scenario described above, the animation is applied to ‘topModelGltf’. However, if I place ‘thad’ before ‘topModelGltf’, then ‘thad’ would be the one that gets animated.

I would be extremely grateful for any guidance or suggestions on how to resolve this matter. Thank you in advance for your time and assistance.

2

First try the model in https://gltf-viewer.donmccurdy.com
And view the animations panel section and press all. If the animations all play then you have the data you need in the model.

You should try rebuilding JUST the model and animations loading in basic THREEjs first. What you need to test is the Mixer. You can try running the .play() on the array of animations in the gltf model for the mixer. From there you can store the animations and mixer on the processed model and update the render loop to run them all in a for loop.

If that all works you have the necessary routines to try to work that into fibers logic tree. Namely in fiber when your loading the model you need to process it the same way. and then load those into fibers render system

1 Like