使用npx gltfjsx model.glb命令在React中渲染GLB文件

Question

我正在尝试将动画添加到我的React项目中。动画取自 mixamo.com ，然后使用 Blender 强>。我将GLB文件保存在 public 文件夹中。接下来，我使用了：

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)

如果我尝试手动添加模型。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');

在控制台中，该对象显示为空并且该应用程序不起作用（空页面仅显示为背景颜色）虽然在控制台中收到以下错误： 错误消息显示浏览器控制台

avatar.jsx我想在我想为型号提供

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图像，该应用程序正常。）

Answer 1

GLB文件必须保存在“公共”文件夹中。