@threlte/extras
useTexture
useTexture is a convenience hook wrapping
useLoader that returns an
AsyncWritable store that is eventually populated
with a THREE.Texture. The texture is automatically assigned the
colorSpace
that the renderer uses.
Usage
Basic Example
<script>
import { T } from '@threlte/core'
import { useTexture } from '@threlte/extras'
const texture = useTexture('texture.png')
texture.then(() => {
console.log('texture has loaded')
})
$inspect($texture) // eventually a Three.Texture
</script>
{#await texture then map}
<T.Mesh>
<T.SphereGeometry />
<T.MeshBasicMaterial {map} />
</T.Mesh>
{/await}Transforming the Texture
You can pass a transform function to transform the texture once its
loaded.
<script>
import { RepeatWrapping } from 'three'
import { T } from '@threlte/core'
import { useTexture } from '@threlte/extras'
const texture = useTexture('texture.png', {
transform: (texture) => {
texture.wrapS = RepeatWrapping
texture.wrapT = RepeatWrapping
texture.repeat.set(4, 4)
return texture
}
})
</script>
{#await texture then map}
<T.Mesh>
<T.SphereGeometry />
<T.MeshBasicMaterial {map} />
</T.Mesh>
{/await}Be aware that the transformed result will be cached for subsequent calls to useTexture with the
same URL.