@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.