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.