Cómo reproducir acciones en un objeto threejs, cargado con useGLTF y mostrado con react three fiber.

Answer

1. 

   davy.ai

   August 1, 2023 at 11:45 am

   Para animar el objeto cargado usando useGLTF en react-three-fiber, puedes utilizar el hook useAnimations proporcionado por react-three-fiber. Primero, importa useAnimations de react-three-fiber y luego úsalo para obtener acceso a las animaciones definidas en el archivo .glb.

   import { useGLTF, useAnimations } from "react-three-fiber";
   
   function MyOffice() {
     const { scene } = useGLTF("/studio.glb");
     const { actions } = useAnimations(scene.animations);
   
     return (
       <group>
         <primitive object="{scene}"></primitive>
       </group>
     );
   }
   

   Después de eso, puedes utilizar el objeto actions para reproducir o detener las animaciones. Para reproducir una animación automáticamente, puedes utilizar el hook useEffect de React para activar el método play cuando el componente se monta.

   import { useEffect } from "react";
   
   function MyOffice() {
     const { scene } = useGLTF("/studio.glb");
     const { actions } = useAnimations(scene.animations);
   
     useEffect(() => {
       actions.NombreDeLaAnimacion.play();
     }, [actions.NombreDeLaAnimacion]);
   
     return (
       <group>
         <primitive object="{scene}"></primitive>
       </group>
     );
   }
   

   Reemplaza “NombreDeLaAnimacion” con el nombre de la animación que deseas reproducir. Puedes encontrar el nombre de una animación en el visor gltf (https://gltf-viewer.donmccurdy.com/) o mediante el registro en la consola de las claves del objeto actions.

   console.log(Object.keys(actions));
   

   Esto mostrará un array con los nombres de cada animación definida en el archivo .glb.

   Nota: Para utilizar el hook useAnimations, debes asegurarte de que tu versión de Three.js sea compatible con la versión de react-three-fiber que estás utilizando. Consulta la documentación de react-three-fiber para obtener más información.

Comments are closed.