useLoader (Experimental)

Copy
useLoader(loader, url: string | string[], extensions?)

This hook loads assets and suspends for easier fallback- and error-handling.

Copy
import React, { Suspense } from "react";
import { useLoader } from "react-three-fiber";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
function Asset({ url }) {
  const gltf = useLoader(GLTFLoader, url);
  return <primitive object={gltf.scene} dispose={null} />;
}
<Suspense fallback={<Cube />}>
  <Asset url="/spaceship.gltf" />
</Suspense>;

You can provide a callback if you need to configure your loader:

Copy
import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader";
useLoader(GLTFLoader, url, (loader) => {
  const dracoLoader = new DRACOLoader();
  dracoLoader.setDecoderPath("/draco-gltf/");
  loader.setDRACOLoader(dracoLoader);
});

It can also make multiple requests in parallel:

Copy
const [bumpMap, specMap, normalMap] = useLoader(TextureLoader, [
  url1,
  url2,
  url2,
]);