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

相关推荐
拾光拾趣录几秒前
for..in 和 Object.keys 的区别:从“遍历对象属性的坑”说起
前端·javascript
遂心_1 小时前
深入解析前后端分离中的 /api 设计:从路由到代理的完整指南
前端·javascript·api
1 小时前
3D碰撞检测系统 基于SAT算法+Burst优化(Unity)
算法·3d·unity·c#·游戏引擎·sat
风清云淡_A2 小时前
【REACT18.x】CRA+TS+ANTD5.X封装自定义的hooks复用业务功能
前端·react.js
@大迁世界2 小时前
第7章 React性能优化核心
前端·javascript·react.js·性能优化·前端框架
DownToEarth2 小时前
H5实现获取当前定位
javascript
前端Hardy2 小时前
HTML&CSS:惊艳!科技感爆棚的登录页面代码解析
前端·javascript·html
我是哈哈hh2 小时前
【AJAX项目】黑马头条——数据管理平台
前端·javascript·ajax·前端框架·axios·proxy模式
Ronin-Lotus2 小时前
上位机知识篇---AJAX
前端·javascript·ajax
拾光拾趣录2 小时前
箭头函数 vs 普通函数:从“this 指向混乱”到写出真正健壮的代码
前端·javascript