useAnimations (@react-fiber/drei) + NextJS14

Questions
1

Hi ! i’ve a problem with my transition between 2 animations.
I’m following wawa sensei tutorial on youtube, but i’m using NextJS and not ViteJS.
In a vitejs project, the code works perfectly, but not in nextjs and i don’t know why and how resolve it

The problem is in my useEffect, i use a fadeIn to make a “smooth” effect between 2 animations, but the result is like a rerender component

There is the code component

import { useAnimations, useFBX, useGLTF } from "@react-three/drei";
import { useFrame } from "@react-three/fiber";
import React, { useEffect, useRef, useState } from "react";
import { useControls } from "leva";
import * as THREE from "three";

export default function Avatar(props) {
  const { animation } = props;
  const { headFollow, cursorFollow } = useControls({
    headFollow: false,
    cursorFollow: false,
  });
  const group = useRef();

  const { nodes, materials } = useGLTF("/models/65e9daad23ee6c0016182b1f.glb");

  const { animations: typingAnimation } = useFBX("/animations/type.fbx");
  const { animations: standingAnimation } = useFBX(
    "/animations/standingIdle.fbx"
  );
  const { animations: fallingAnimation } = useFBX(
    "/animations/fallingIdle.fbx"
  );

  typingAnimation[0].name = "Typing";
  standingAnimation[0].name = "Standing";
  fallingAnimation[0].name = "Falling";

  const { actions } = useAnimations(
    [typingAnimation[0], fallingAnimation[0], standingAnimation[0]],
    group
  );

  useFrame((state) => {
    if (headFollow) {
      group.current.getObjectByName("Head").lookAt(state.camera.position);
    }
    if (cursorFollow) {
      const target = new THREE.Vector3(state.mouse.x, state.mouse.y, 1);
      group.current.getObjectByName("Head").lookAt(target);
    }
  });

  **useEffect(() => {**
**    actions[animation].fadeIn(0.5).play();**
**    return () => {**
**      actions[animation].fadeIn(0.5).stop();**
**    };**
**  }, [animation]);**

  return (
   <--------The generated code glft --------->
  );
}
useGLTF.preload("/models/65e9daad23ee6c0016182b1f.glb");
useFBX.preload("/animations/type.fbx");
useFBX.preload("/animations/standingIdle.fbx");
useFBX.preload("/animations/fallingIdle.fbx");
1 Like
2

Hi @Sylvain_Leguay!

I’m having the same issue! Have you been able to find a solution regarding that?

Thanks,
Clarel

3

Hi @Clarel_Antoine , actually i found only one solution : remove nextJS and go to ViteJS…

But it’s really not my favorite solution …

If someone got any solution ? :slight_smile:

4

I am also facing a problem where the character animation is not smoothly transitioning with fadeIn(). I am also following wawa sensei’s youtube video and I am using Next.js 15 App Router. Any fixes yet?

5

Maybe you need to add 'use client' at the top of your file to avoid anything happening server side and messing with the logic?

Else you need to do some debugging - for a start I’d add a log in your useEffect hook and its returned function, to understand when exactly it’s firing.

You might for example find that your useEffect hook fires 2x more than expected if you’re using React’s strict mode.