跳到主要内容

组件加载器

类型​

组件

GLTF 加载器​

默认用法​

下面的每个示例都可以用 WebGPU（默认）或 WebGL 渲染器查看 —— 切换标签页进行对比。

import { Scene, GLTFLoader } from 'react-three-lite'

function App() {
  const handleCreated = (scene, { camera }) => {
    camera.position.set(0, 1.5, 3)
  }

  return (
    <Scene
      style={{ marginTop: '10px', width: '100%', height: '300px' }}
      onCreated={handleCreated}
    >
      <GLTFLoader modelUrl="/models/perseverance-draco.glb" scale={[0.8, 0.8, 0.8]} useDraco />
    </Scene>
  )
}

属性​

名称类型默认值描述
modelUrlstring必需 模型的 URL。
sceneTHREE.SceneTHREE.Scene可选 渲染模型的场景。
scale[number, number, number][1.0, 1.0, 1.0]可选 模型的缩放比例。
cachebooleantrue可选 是否将模型缓存到 IndexedDB 中。默认为 true。
useDracobooleanfalse可选 是否使用 Draco 解码器。Draco 压缩的 GLTF 模型需设为 true。
dracoDecoderPathstringhttps://www.gstatic.com/draco/versioned/decoders/1.5.7/可选 Draco 解码器路径。仅在 useDraco 为 true 时需要。

事件​

名称参数描述
onProgress(event: ProgressEvent) => void模型加载进度的回调函数。
onLoaded(model: THREE.Group) => void模型加载完成时调用的回调函数。

FBX 加载器​

默认用法​

import { Scene, FBXLoader } from 'react-three-lite'

function App() {
  const handleCreated = (scene, { camera }) => {
    camera.position.set(0, 1.5, 3)
  }

  return (
    <Scene
      style={{ marginTop: '10px', width: '100%', height: '300px' }}
      onCreated={handleCreated}
    >
      <FBXLoader modelUrl="/models/perseverance.fbx" scale={[0.8, 0.8, 0.8]} />
    </Scene>
  )
}

属性​

名称类型默认值描述
modelUrlstring必需 模型的 URL。
sceneTHREE.SceneTHREE.Scene可选 渲染模型的场景。
scale[number, number, number][1.0, 1.0, 1.0]可选 模型的缩放比例。
cachebooleantrue可选 是否将模型缓存到 IndexedDB 中。默认为 true。

事件​

名称参数描述
onProgress(event: ProgressEvent) => void模型加载进度的回调函数。
onLoaded(model: THREE.Group) => void模型加载完成时调用的回调函数。

OBJ 加载器​

默认用法​

import { Scene, OBJLoader } from 'react-three-lite'

function App() {
  const handleCreated = (scene, { camera }) => {
    camera.position.set(0, 1.5, 3)
  }

  return (
    <Scene
      style={{ marginTop: '10px', width: '100%', height: '300px' }}
      onCreated={handleCreated}
    >
      <OBJLoader
        modelUrl="/models/obj/perseverance.obj"
        mtlUrl="/models/obj/perseverance.mtl"
        scale={[0.8, 0.8, 0.8]}
      />
    </Scene>
  )
}

属性​

名称类型默认值描述
modelUrlstring必需 模型的 URL。
mtlUrlstring可选 当使用 OBJLoader 时，材质文件的 URL。
sceneTHREE.SceneTHREE.Scene可选 渲染模型的场景。
scale[number, number, number][1.0, 1.0, 1.0]可选 模型的缩放比例。
cachebooleantrue可选 是否将模型缓存到 IndexedDB 中。默认为 true。

事件​

名称参数描述
onProgress(event: ProgressEvent) => void模型加载进度的回调函数。
onLoaded(model: THREE.Group) => void模型加载完成时调用的回调函数。