1. @threlte/core
  2. useTexture



useTexture allows you to easily load textures and automatically convert your textures to the correct color space based on your settings on the <Canvas> component.



Github View Source Code


NPM View Package

Usage Without Context

This hook can be called outside of the <Canvas> component, but with limitations: To make sure that textures are converted to the correct color space, useTexture needs to consume the <Canvas> context. If there's no context, it will fall back to keeping your textures untouched.


useTexture also exposes the native THREE.TextureLoader events onLoad, onProgress and onError:

const texture = useTexture('tex.jpg', {
	onError: (error) => {
		console.warn(`An error occured loading the texture: ${error.message}`)


const tex = useTexture('tex.jpg')
// -> THREE.Texture

const [texA, texB] = useTexture(['texA.jpg', 'texB.jpg'])
// -> THREE.Texture[]

const textures = useTexture({ bumpMap: 'bump.jpg', map: 'map.jpg' })
// -> { bumpMap: THREE.Texture, map: THREE.Texture }
const material = new MeshStandardMaterial({ ...textures })