I am trying to add animation to my React project. Animation is taken from mixamo.com and then exported to a glb file using blender. I saved the glb file in my public folder. Next, I used:
npx gltfjsx model.glb
but I receive the following error:
ERROR Objects are not valid as a React child (found: Error: Invalid hook call. Hooks can only be called inside of the body of a
function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.). If you meant to render a
collection of children, use an array instead.
- 1. You might have mismatching versions of React and the renderer (such as React DOM)
- 2. You might be breaking the Rules of Hooks
- 3. You might have more than one copy of React in the same app
- See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.). If you meant to render a
collection of children, use an array instead.
- throwOnInvalidObjectType (node_modules/ink/node_modules/react-reconciler/cjs/react-reconciler.development.js:4612:15)
- createChild (node_modules/ink/node_modules/react-reconciler/cjs/react-reconciler.development.js:4850:7)
- reconcileChildrenArray (node_modules/ink/node_modules/react-reconciler/cjs/react-reconciler.development.js:5100:25)
- reconcileChildFibers (node_modules/ink/node_modules/react-reconciler/cjs/react-reconciler.development.js:5506:14)
- reconcileChildren (node_modules/ink/node_modules/react-reconciler/cjs/react-reconciler.development.js:8417:28)
- updateHostComponent (node_modules/ink/node_modules/react-reconciler/cjs/react-reconciler.development.js:9059:3)
- beginWork (node_modules/ink/node_modules/react-reconciler/cjs/react-reconciler.development.js:10507:14)
- Object.invokeGuardedCallbackProd (node_modules/ink/node_modules/react-reconciler/cjs/react-reconciler.development.js:12101:10)
- invokeGuardedCallback (node_modules/ink/node_modules/react-reconciler/cjs/react-reconciler.development.js:12292:31)
- beginWork$1 (node_modules/ink/node_modules/react-reconciler/cjs/react-reconciler.development.js:16531:7)
If I try to manually add the Model.js file using:
import React, { useRef, useEffect } from 'react';
import { useGLTF, useAnimations } from '@react-three/drei';
export default function Model({ ...props }) {
const group = useRef();
const { nodes, materials, animations } = useGLTF('/model.glb');
const { actions } = useAnimations(animations, group);
// 'Armature|mixamo.com|Layer0' is the name of the animation we need to run.
// console.log(actions);
useEffect(() => {
actions['Armature|mixamo.com|Layer0'].play();
});
return (
<group ref={group} {...props} dispose={null}>
<primitive object={nodes.Hips} />
<skinnedMesh
geometry={nodes.Wolf3D_Body.geometry}
material={materials.Wolf3D_Body}
skeleton={nodes.Wolf3D_Body.skeleton}
/>
<skinnedMesh
geometry={nodes.Wolf3D_Glasses.geometry}
material={materials.Wolf3D_Glasses}
skeleton={nodes.Wolf3D_Glasses.skeleton}
/>
<skinnedMesh
geometry={nodes.Wolf3D_Hair.geometry}
material={materials.Wolf3D_Hair}
skeleton={nodes.Wolf3D_Hair.skeleton}
/>
<skinnedMesh
geometry={nodes.Wolf3D_Outfit_Bottom.geometry}
material={materials.Wolf3D_Outfit_Bottom}
skeleton={nodes.Wolf3D_Outfit_Bottom.skeleton}
/>
<skinnedMesh
geometry={nodes.Wolf3D_Outfit_Footwear.geometry}
material={materials.Wolf3D_Outfit_Footwear}
skeleton={nodes.Wolf3D_Outfit_Footwear.skeleton}
/>
<skinnedMesh
geometry={nodes.Wolf3D_Outfit_Top.geometry}
material={materials.Wolf3D_Outfit_Top}
skeleton={nodes.Wolf3D_Outfit_Top.skeleton}
/>
<skinnedMesh
name="EyeLeft"
geometry={nodes.EyeLeft.geometry}
material={nodes.EyeLeft.material}
skeleton={nodes.EyeLeft.skeleton}
morphTargetDictionary={nodes.EyeLeft.morphTargetDictionary}
morphTargetInfluences={nodes.EyeLeft.morphTargetInfluences}
/>
<skinnedMesh
name="EyeRight"
geometry={nodes.EyeRight.geometry}
material={nodes.EyeRight.material}
skeleton={nodes.EyeRight.skeleton}
morphTargetDictionary={nodes.EyeRight.morphTargetDictionary}
morphTargetInfluences={nodes.EyeRight.morphTargetInfluences}
/>
<skinnedMesh
name="Wolf3D_Head"
geometry={nodes.Wolf3D_Head.geometry}
material={materials.Wolf3D_Skin}
skeleton={nodes.Wolf3D_Head.skeleton}
morphTargetDictionary={nodes.Wolf3D_Head.morphTargetDictionary}
morphTargetInfluences={nodes.Wolf3D_Head.morphTargetInfluences}
/>
<skinnedMesh
name="Wolf3D_Teeth"
geometry={nodes.Wolf3D_Teeth.geometry}
material={materials.Wolf3D_Teeth}
skeleton={nodes.Wolf3D_Teeth.skeleton}
morphTargetDictionary={nodes.Wolf3D_Teeth.morphTargetDictionary}
morphTargetInfluences={nodes.Wolf3D_Teeth.morphTargetInfluences}
/>
</group>
);
}
useGLTF.preload('/model.glb');
in console, the object is showing empty and the app is not working (an empty page shows up with just the background color) while the following error is received in the console: Error message showing browser console
Avatar.jsx where I want to render the Model.js
import React, { Suspense } from "react";
import { Canvas } from "@react-three/fiber";
import { OrbitControls } from "@react-three/drei";
import Model from "./Model";
function Avatar() {
return (
<Canvas camera={{ position: [2, 0, 12.25], fov: 15 }}>
<ambientLight intensity={1.25} />
<ambientLight intensity={0.1} />
<directionalLight intensity={0.4} />
<Suspense fallback={null} r3f>
<Model />
</Suspense>
<OrbitControls />
</Canvas>
);
}
Any help or suggestions are welcome. (Before adding animation I was able to add the 3D image in my project, the app was working fine.)
the glb file must saved inside of "public" folder.