# React 三个 Fiber Loader ## 快速入门从“@react-三/纤维”导入{画布} 从 '@react-two/drei' 导入 { useGLTF, OrbitControls } 从 'react' 导入 { Suspense } 函数模型() { const { 场景 } = useGLTF('/models/robot.glb') 返回 } 导出默认函数 App() { 返回（ <画布> <环境光/> <悬念回退={null}> <型号/> <轨道控制/> ） } ## 使用GLTF (Drei) 加载 GLTF/GLB 模型的推荐方法。 ### 基本用法从 '@react-two/drei' 导入 { useGLTF } 函数模型() { const gltf = useGLTF('/models/robot.glb') // gltf 包含： // - 场景：THREE.Group（主场景） // - 节点：命名网格物体 // - 材料：命名材料的对象 // - 动画：AnimationClip 数组返回 } ### 使用节点和材质函数模型() { const { 节点，材料 } = useGLTF('/models/robot.glb') 返回（ <组> {/* 使用特定的网格 */} <网格几何={节点.Body.几何} 材料={材料.金属} 位置={[0,0,0]} /> <网格几何={节点.Head.几何} 材料={材料.塑料} 位置={[0,1,0]} /> ） } ### 使用 TypeScript (gltfjsx) 使用 gltfjsx 生成类型化组件： npx gltfjsx model.glb --类型 // 生成的组件从 '@react-two/drei' 导入 { useGLTF } 从“三标准库”导入 { GLTF } 类型 GLTFResult = GLTF & { 节点：{ 主体：三.网状头：三.网状 } 材料：{ 金属：THREE.MeshStandardMaterial 塑料：三.网状标准材质 } } 导出函数 Model(props: JSX.IntrinsicElements['group']) { const { 节点，材料 } = useGLTF('/model.glb') as GLTFResult 返回（ <组{...props}处置= {null}> <网格几何= {nodes.Body.geometry}材料= {materials.Metal} /> <网格几何= {nodes.Head.geometry}材料= {materials.Plastic} /> ） } useGLTF.preload('/model.glb') ### 德拉科压缩从 '@react-two/drei' 导入 { useGLTF } 函数模型() { // 如果文件是 Draco 压缩的，Drei 会自动处理 Draco const { 场景 } = useGLTF('/models/compressed.glb') 返回 } // 或者指定Draco解码器路径 useGLTF.setDecoderPath('https://www.gstatic.com/draco/versioned/decoders/1.5.6/') ### 预加载从 '@react-two/drei' 导入 { useGLTF } // 在模块级别预加载 useGLTF.preload('/models/robot.glb') useGLTF.preload(['/model1.glb', '/model2.glb']) 函数模型() { // 如果预加载，将是即时的 const { 场景 } = useGLTF('/models/robot.glb') 返回 } ### 处理加载的模型函数模型() { const { 场景 } = useGLTF('/models/robot.glb') 使用效果（（）=> { // 在所有网格上启用阴影场景.遍历（（子）=> { if (child.isMesh) { 孩子.castShadow = true child.receiveShadow = true } }) }，[场景]）返回 } ## useLoader（核心 R3F）用于加载任何 Three.js 资源。 ### 基本纹理加载从 '@react-two/fibre' 导入 { useLoader } 从“三”导入{TextureLoader} 函数纹理网格（）{ const 纹理 = useLoader(TextureLoader, '/textures/color.jpg') 返回（ <网格> <盒子几何/> ） } ### 多种资产函数多纹理（）{ const [颜色贴图，法线贴图，粗糙度贴图] = useLoader(TextureLoader, [ '/纹理/颜色.jpg', '/textures/normal.jpg', '/textures/roughness.jpg', ]）返回（ <网格> ） } ### 带扩展（Draco）从 '@react-two/fibre' 导入 { useLoader } 从 '三个/examples/jsm/loaders/GLTFLoader' 导入 { GLTFLoader } 从 '三个/examples/jsm/loaders/DRACOLoader' 导入 { DRACOLoader } 函数模型() { const gltf = useLoader(GLTFLoader, '/model.glb', (loader) => { const dracoLoader = 新 DRACOLoader() dracoLoader.setDecoderPath('https://www.gstatic.com/draco/v1/decoders/') loader.setDRACOLoader(dracoLoader) }) 返回 } ### 进度回调函数模型() { const gltf = useLoader( GLTF加载器， '/model.glb', 未定义, // 扩展（进度）=> { console.log(`加载中：${(进度.加载/进度.总计) * 100}%`) } ）返回 } ### 预加载从 '@react-two/fibre' 导入 { useLoader } 从“三”导入{TextureLoader} // 预加载 useLoader.preload(TextureLoader, '/textures/color.jpg') useLoader.preload(TextureLoader, ['/tex1.jpg', '/tex2.jpg']) // 清除缓存 useLoader.clear(TextureLoader, '/textures/color.jpg') ## Drei 装载机挂钩 ### 使用纹理从 '@react-two/drei' 导入 { useTexture } // 单个 const 纹理 = useTexture('/texture.jpg') // 数组 const [颜色，正常] = useTexture(['/color.jpg', '/normal.jpg']) // 命名对象（直接传播到材质）常量纹理 = useTexture({ 地图: '/color.jpg', 法线贴图: '/normal.jpg', 粗糙度贴图: '/roughness.jpg', }) // 带有配置回调 const 纹理 = useTexture('/texture.jpg', (tex) => { tex.wrapS = tex.wrapT = THREE.RepeatWrapping tex.repeat.set(4, 4) }) // 预加载 useTexture.preload('/texture.jpg') ### 使用CubeTexture 从 '@react-two/drei' 导入 { useCubeTexture } 函数 EnvMap() { const envMap = useCubeTexture( ['px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg'], { 路径：'/textures/cube/' } ）返回（ <网格> <球体几何/> ） } ### 使用环境从 '@react- Three/drei' 导入 { useEnvironment } // 预设 const envMap = useEnvironment({ 预设: '日落' }) // 预设：公寓、城市、黎明、森林、大厅、夜晚、公园、工作室、日落、仓库 // 自定义 HDR 文件 const envMap = useEnvironment({ 文件: '/hdri/studio.hdr' }) // 立方体贴图 const envMap = useEnvironment({ 文件: ['px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg'], 路径：'/纹理/'， }) ### 使用视频纹理从 '@react-two/drei' 导入 { useVideoTexture } 函数视频平面（）{ const 纹理 = useVideoTexture('/video.mp4', { 开始：真实，循环：真，静音：真实， crossOrigin: '匿名', }) 返回（ <网格> ） } ### 使用字体从 '@react-two/drei' 导入 { useFont, Text3D } // 预加载字体 useFont.preload('/fonts/helvetiker.json') 函数文本() { 返回（你好） } ## 悬念模式 ### 基本悬念从 'react' 导入 { Suspense } 函数场景（）{ 返回（ <画布> <暂挂回退={}> <型号/> ） } 函数加载器() { 返回（ <网格> <盒子几何/> ） } ### 加载进度 UI 从 '@react-two/drei' 导入 { useProgress, Html } 函数加载器() { const { 活动、进度、错误、项目、已加载、总计 } = useProgress() 返回（

{Math.round(progress)}% 已加载

正在加载：{item}

） } 函数应用程序（）{ 返回（ <画布> <暂挂回退={}> <场景/> ） } ### Drei 加载器组件从“@react-two/drei”导入{Loader} 函数应用程序（）{ 返回（ <> <画布> <悬念回退={null}> <场景/> {/* HTML 加载覆盖 */} <装载机/> ） } ## 其他模型格式 ### OBJ + MTL 从 '@react-two/fibre' 导入 { useLoader } 从 '三个/examples/jsm/loaders/OBJLoader' 导入 { OBJLoader } 从 '三个/examples/jsm/loaders/MTLLoader' 导入 { MTLLoader } 函数 OBJModel() { const 材料 = useLoader(MTLLoader, '/model.mtl') const obj = useLoader(OBJLoader, '/model.obj', (loader) => { 材料.预加载() loader.setMaterials(材质) }) 返回<原始对象= {obj} /> } ### FBX 从 '@react-two/drei' 导入 { useFBX } 函数 FBXModel() { const fbx = useFBX('/model.fbx') 返回 } // 预加载 useFBX.preload('/model.fbx') ### STL 从 '@react-two/fibre' 导入 { useLoader } 从 '三个/examples/jsm/loaders/STLLoader' 导入 { STLLoader } 函数 STLModel() { const 几何 = useLoader(STLLoader, '/model.stl') 返回（ <网格几何={几何}> ） } ### 层数从 '@react-two/fibre' 导入 { useLoader } 从 '三个/examples/jsm/loaders/PLYLoader' 导入 { PLYLoader } 函数 PLYModel() { const 几何 = useLoader(PLYLoader, '/model.ply') 使用效果（（）=> { 几何.computeVertexNormals() }，[几何]）返回（ <网格几何={几何}> ） } ## 克隆多个实例从 '@react-two/drei' 导入 { useGLTF, Clone } 函数树() { const { 场景 } = useGLTF('/models/tree.glb') 返回（ <> <克隆对象={场景} 位置={[0, 0, 0]} /> <克隆对象={场景} 位置={[5, 0, 0]} /> <克隆对象={场景} 位置={[-5, 0, 0]} /> <克隆对象={场景} 位置={[0, 0, 5]} 比例={1.5} /> ） } ## 错误处理从 '@react-two/drei' 导入 { useGLTF } 从 'react-error-boundary' 导入 { ErrorBoundary } 函数 ModelWithErrorHandling() { 返回（ }> <暂挂回退={}> <型号/> ） } 函数 FallbackModel() { 返回（ <网格> <盒子几何/> ） } ## 资源缓存从 '@react-two/drei' 导入 { useGLTF, useTexture } // 资源通过URL自动缓存 // 相同的 URL = 相同的资产实例函数场景（）{ // 这些都引用相同的缓存资源 const model1 = useGLTF('/model.glb') const model2 = useGLTF('/model.glb') const model3 = useGLTF('/model.glb') // 如果需要清除缓存 useGLTF.clear('/model.glb') } ## 性能提示 1. **预加载关键资产**：避免在交互过程中加载 2. **使用 Draco 压缩**：较小的文件大小 3. **使用LOD模型**：距离的不同细节级别 4. **克隆而不是重新加载**：对于多个实例 5. **延迟加载非关键**：按需加载 // 预加载策略 useGLTF.preload('/models/hero.glb') // 关键 useTexture.preload('/textures/main.jpg') // 关键函数 LazyModel({ 可见 }) { // 仅在可见时加载 const { scene } = useGLTF(visible ? '/models/detail.glb' : null) 返回场景？ : null } ## 另请参阅 * `r3f-animation` \- 播放加载的动画 * `r3f-textures` \- 纹理配置 * `r3f-materials` \- 来自加载模型的材质

R3f装载机

包含技能