使用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 等信息。

相关推荐
林太白26 分钟前
NestJS用户模块CRUD和分页实现
前端·javascript·nestjs
brzhang27 分钟前
JS 代码是如何跑起来的?带你深入 V8 引擎和事件循环的幕后
前端·javascript·后端
天天扭码37 分钟前
面试常考 | 深入理解 JavaScript 中手写 new 操作符
前端·javascript·面试
浪裡遊1 小时前
TypeScript之基础知识
前端·javascript·typescript
爱的叹息1 小时前
Vue 2 和 Vue 3 中 Vue 实例变量方法的功能差异对比,包含关键方法的详细说明和表格总结
前端·javascript·vue.js
拳打南山敬老院1 小时前
从零搭建MCP服务:基于Stdio的实践指南
前端·javascript·aigc
腊月廿二1 小时前
JavaScript Promise 的立即执行问题
javascript
肠胃炎1 小时前
Vue:mixin详解
前端·javascript·vue.js
前端大白话1 小时前
Vue3开发老踩坑?10个实战技巧助你突围
前端·javascript·vue.js