使用glb作为react的3D组件

使用 gltfjsx 可以把 .glb 模型转换为 React 组件,这样你可以直接在代码中修改 3D 模型的结构、材质等。


🛠️ 步骤 1:安装 gltfjsx

首先,在项目的根目录运行以下命令:

bash 复制代码
npx gltfjsx model.glb

这个命令会:

  • 解析 model.glb
  • 生成一个 Model.js 文件(默认在当前目录)
  • Model.js 里包含 React 组件 ,可以直接在 @react-three/fiber 中使用

如果你想指定输出目录:

bash 复制代码
npx gltfjsx model.glb -o src/components/

🎨 步骤 2:使用生成的 Model.js

转换完成后,你会得到一个 React 组件,比如:

jsx 复制代码
import React, { useRef } from "react";
import { useGLTF } from "@react-three/drei";

export default function Model(props) {
    const { nodes, materials } = useGLTF("/model.glb");
    return (
        <group {...props} dispose={null}>
            <mesh geometry={nodes.Object_0.geometry} material={materials.Material_0} />
        </group>
    );
}

🖼️ 步骤 3:在 Canvas 里使用 Model

jsx 复制代码
import { Canvas } from "@react-three/fiber";
import { OrbitControls } from "@react-three/drei";
import Model from "./Model";

function App() {
    return (
        <Canvas camera={{ position: [0, 2, 5] }}>
            <ambientLight intensity={0.5} />
            <directionalLight position={[2, 2, 2]} intensity={1} />
            <Model scale={1} />
            <OrbitControls />
        </Canvas>
    );
}

export default App;

🎨 额外优化

1️⃣ 修改颜色、材质

Model.js 里,你可以更改材质:

jsx 复制代码
<mesh geometry={nodes.Object_0.geometry}>
    <meshStandardMaterial color="red" />
</mesh>

2️⃣ 增加动画

jsx 复制代码
import { useFrame } from "@react-three/fiber";

function Model(props) {
    const { nodes, materials } = useGLTF("/model.glb");
    const ref = useRef();

    useFrame(() => {
        ref.current.rotation.y += 0.01; // 让模型旋转
    });

    return (
        <group ref={ref} {...props} dispose={null}>
            <mesh geometry={nodes.Object_0.geometry} material={materials.Material_0} />
        </group>
    );
}



使用 useGLTF 直接加载 .glb

安装必要的依赖

如果你还没有安装 @react-three/fiber@react-three/drei,请先安装:

bash 复制代码
npm install three @react-three/fiber @react-three/drei

创建 3D 组件

jsx 复制代码
import { useGLTF } from "@react-three/drei";

function Model(props) {
    const { scene } = useGLTF("/model.glb"); // 你的 GLB 文件路径

    return <primitive object={scene} {...props} />;
}

export default Model;

App.js 里使用

jsx 复制代码
import { Canvas } from "@react-three/fiber";
import { OrbitControls } from "@react-three/drei";
import Model from "./Model";

function App() {
    return (
        <Canvas camera={{ position: [0, 2, 5] }}>
            <ambientLight intensity={0.5} />
            <directionalLight position={[2, 2, 2]} intensity={1} />
            <Model scale={1} />
            <OrbitControls />
        </Canvas>
    );
}

export default App;

✅ 优势:

  • 直接加载 .glb 文件,无需手动转换。
  • @react-three/drei 提供的 useGLTF 可以解析 GLB 文件,并返回 scenenodesmaterials 等信息。

相关推荐
zhanshuo6 分钟前
不依赖框架,如何用 JS 实现一个完整的前端路由系统
前端·javascript·html
讨厌吃蛋黄酥7 分钟前
智能前端新纪元:语音交互技术与安全实践全解析
javascript
1234Wu35 分钟前
React Native 接入 eCharts
javascript·react native·react.js
脑袋大大的8 小时前
JavaScript 性能优化实战:减少 DOM 操作引发的重排与重绘
开发语言·javascript·性能优化
速易达网络9 小时前
RuoYi、Vue CLI 和 uni-app 结合构建跨端全家桶方案
javascript·vue.js·低代码
耶啵奶膘9 小时前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
JoJo_Way9 小时前
LeetCode三数之和-js题解
javascript·算法·leetcode
视频砖家10 小时前
移动端Html5播放器按钮变小的问题解决方法
前端·javascript·viewport功能
小白变怪兽12 小时前
一、react18+项目初始化(vite)
前端·react.js