我正在尝试为我的React项目添加动画。动画来自mixamo.com，然后使用blender将其导出为glb文件。我将glb文件保存在public文件夹中。接下来，我使用了：
但是我收到了以下错误：
如果我尝试手动添加Model.js文件，使用：
npx gltfjsx model.glb
但是我收到了以下错误：
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)
如果我尝试手动添加Model.js文件，使用：
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');
在控制台中，对象显示为空，应用程序不工作（只显示具有背景颜色的空白页面），同时在控制台中收到以下错误消息： Error message showing browser console
Avatar.jsx，我想呈现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>
);
}
欢迎提供任何帮助或建议。（在添加动画之前，我能够将3D图像添加到我的项目中，应用程序运行正常。）