跳到主要内容

函数加载器

类型​

函数

GLTF 加载器​

默认用法​

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

import { Scene, GLTFLoaderAsync } from 'react-three-lite'
import type * as THREE from 'three'

function App() {
  const handleCreated = async (scene: THREE.Scene, { camera }: { camera: THREE.Camera }) => {
    camera.position.set(0, 1.5, 3)
    camera.lookAt(0, 0, 0)

    // 加载模型到场景
    const model = await GLTFLoaderAsync('/models/perseverance-draco.glb', true)
    model.scale.set(0.8, 0.8, 0.8)
    scene.add(model)
  }

  return (
    <Scene
      style={{ marginTop: '10px', width: '100%', height: '300px' }}
      onCreated={handleCreated}
    />
  )
}

参数​

名称类型默认值描述
urlstring必需 模型的 URL。
useDracobooleanfalse可选 是否使用 Draco 解码器。Draco 压缩的 GLTF 模型需设为 true。
dracoDecoderPathstringhttps://www.gstatic.com/draco/versioned/decoders/1.5.7/可选 Draco 解码器路径。仅在 useDraco 为 true 时需要。
cachebooleantrue可选 是否将模型缓存到 IndexedDB 中。默认为 true。
onProgressfunction可选 模型加载进度的回调函数。

FBX 加载器​

默认用法​

import { Scene, FBXLoaderAsync } from 'react-three-lite'
import type * as THREE from 'three'

function App() {
  const handleCreated = async (scene: THREE.Scene, { camera }: { camera: THREE.Camera }) => {
    camera.position.set(0, 1.5, 3)
    camera.lookAt(0, 0, 0)

    // 加载模型到场景
    const model = await FBXLoaderAsync('/models/perseverance.fbx')
    model.scale.set(0.8, 0.8, 0.8)
    scene.add(model)
  }

  return (
    <Scene
      style={{ marginTop: '10px', width: '100%', height: '300px' }}
      onCreated={handleCreated}
    />
  )
}

参数​

名称类型默认值描述
urlstring必需 模型的 URL。
cachebooleantrue可选 是否将模型缓存到 IndexedDB 中。默认为 true。
onProgressfunction可选 模型加载进度的回调函数。

OBJ 加载器​

默认用法​

import { Scene, OBJLoaderAsync } from 'react-three-lite'
import type * as THREE from 'three'

function App() {
  const handleCreated = async (scene: THREE.Scene, { camera }: { camera: THREE.Camera }) => {
    camera.position.set(0, 1.5, 3)
    camera.lookAt(0, 0, 0)

    // 加载模型到场景
    const model = await OBJLoaderAsync('/models/obj/perseverance.obj', '/models/obj/perseverance.mtl')
    model.scale.set(0.8, 0.8, 0.8)
    scene.add(model)
  }

  return (
    <Scene
      style={{ marginTop: '10px', width: '100%', height: '300px' }}
      onCreated={handleCreated}
    />
  )
}

参数​

名称类型默认值描述
urlstring必需 模型的 URL。
mtlUrlstring可选 模型的材质 URL。只有 OBJLoader 需要此参数。
cachebooleantrue可选 是否将模型缓存到 IndexedDB 中。默认为 true。
onProgressfunction可选 模型加载进度的回调函数。