Company logo
  • Empleos
  • Bootcamp
  • Acerca de nosotros
  • Para profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
    • Bootcamp
  • Para empresas
    • Inicio
    • Nuestro proceso
    • Planes
    • Pruebas
    • Nómina
    • Blog
    • Comercial
    • Calculadora

0

62
Vistas
How to render animations with JSX components in Three.JS

I am trying to render some animations from my .glb file. There are 4 animations in the file. I am using Next.js paired with Three.js (and react-three-fiber), so I would like to use JSX components for this, instead of using the traditional HTML. This is the code I have so far:

function Scene() {
    const gltf = useLoader(GLTFLoader, '/drone1_spin.glb')
    const mesh = useRef()

    // This is where i'm having issues as I do not know how to render all 4 animations

    const [mixer] = useState(() => new THREE.AnimationMixer())
    useEffect(
        () => {
            void mixer.clipAction(gltf.animations[0], mesh.current).play()
            void mixer.clipAction(gltf.animations[1], mesh.current).play()
            void mixer.clipAction(gltf.animations[2], mesh.current).play()
            void mixer.clipAction(gltf.animations[3], mesh.current).play()
        },
        [gltf.animations, mixer]
    )

    // The return and stuff works all fine, but just displays a static model with no animations

    return (
        <Suspense fallback={null}>
            <primitive ref={mesh} object={gltf.scene} scale={0.5} />
        </Suspense>
    )
}

I have tried googling everything and I can't find any documentation for this so any help would be appreciated. Thank you.

7 months ago · Juan Pablo Isaza
Responde la pregunta
Encuentra empleos remotos