Resource

Resource is the component form of useLoader — it loads a resource and drops it straight into the scene graph, or hands it to a render function.

Props

Prop	Type	Description
`loader`	`Constructor<Loader>`	The three.js loader class — `TextureLoader`, `GLTFLoader`, …
`url`	`string \| string[] \| Record<string, string>`	What to load, matching what the loader expects.
`children`	`(resource) => JSX.Element`	Optional render function, receiving the loaded resource.
`base`	`string`	Base URL for resolving relative paths (forwarded to `useLoader`).
`cache`	`boolean \| LoaderRegistry`	`true` (default global cache), `false` (disable), or a custom registry. See Caching.
`onBeforeLoad`	`(loader) => void`	Runs with the loader before loading — e.g. to configure decoders.
`onLoad`	`(resource) => void`	Runs with the resolved resource after loading.
other props	—	Forwarded to the loaded resource — including `attach`.

Examples

// CubeTextureLoader expects an array of strings
<Resource
  loader={CubeTextureLoader}
  url={["px.png", "nx.png", "py.png", "ny.png", "pz.png", "nz.png"]}
/>

// Attach loaded textures into a material's slots
<T.MeshStandardMaterial>
  <Resource loader={TextureLoader} url="diffuse.jpg" attach="map" />
  <Resource loader={TextureLoader} url="normal.jpg" attach="normalMap" />
</T.MeshStandardMaterial>

// A render function for full control over the result
<Resource loader={GLTFLoader} url="model.gltf">
  {gltf => <Entity from={gltf.scene} scale={2} />}
</Resource>

// Disable caching for a specific resource
<Resource loader={TextureLoader} url="/dynamic-texture.png" cache={false} />

Resource

Props

Examples

See also