如何在React Three Fiber中加载3D模型并整合Model.js

步骤1：确保依赖安装 #

自动生成的Model.js依赖@react-three/drei库的useGLTF钩子，先安装这个依赖：

npm install @react-three/drei
# 或使用yarn
yarn add @react-three/drei

步骤2：修改App.js配置 #

你已经导入了Model组件，只需在Canvas中通过Suspense包裹渲染它（Suspense用于处理模型加载时的等待状态），同时清理无用导入：

修改后的App.js代码：

import React, { Suspense, useRef} from "react";
import { Canvas, useFrame } from "react-three-fiber";
import { Model } from "./Model";
import "./styles.scss";

const Box = () => {
  const mesh = useRef(null);
  useFrame(() => (mesh.current.rotation.x = mesh.current.rotation.y += 0.01));
  return (
    <mesh ref={mesh}>
      <icosahedronGeometry  />
      <meshPhongMaterial attach="material" color="#a6fb22" />
    </mesh>
  );
}

function App() {
  return (
    <>
      <Canvas>
        <Box />
        <ambientLight args={[0xff0000]} intensity={0.01} />
        <directionalLight position={[0, 0, 5]} intensity={0.5} />
        {/* 用Suspense包裹Model，可添加加载占位内容 */}
        <Suspense fallback={<mesh><boxGeometry /><meshBasicMaterial color="gray" /></mesh>}>
          {/* 通过props调整模型的位置、缩放等 */}
          <Model position={[2, 0, 0]} scale={[1.5, 1.5, 1.5]} />
        </Suspense>
      </Canvas>
    </>
  );
}

export default App;

关键注意事项 #

• 确保model.gltf文件放在项目的public文件夹下，因为Model.js中使用的路径是/model.gltf，React会从public目录读取静态资源。
• 如果模型位置或大小不合适，给<Model>组件传递position、scale、rotation等props调整即可。
• 原代码中的GLTFLoader和GltfModel导入可以删除，Model.js已通过useGLTF自带GLTF模型加载逻辑。

内容的提问来源于stack exchange，提问作者Ilson Ricardo