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