Tresjs/docs/examples/load-textures.md

Load Textures

All textures used in this example are from ambientcg.

3D textures are textures that contain multiple layers of image data, allowing them to represent volumetric data or simulate three-dimensional structures. They are often used in 3D graphics and visual effects to add realism and complexity to scenes and objects.

There are two ways of loading 3D textures in TresJS:

Using useLoader

The useLoader composable allows you to pass any type of Three.js loader and a URL to load the resource from. It returns a Promise with the loaded resource.

For a detailed explanation of how to use useLoader, check out the useLoader documentation.

import { useLoader } from '@tresjs/core'
import { TextureLoader } from 'three'

const texture = useLoader(TextureLoader, '/Rock035_2K_Color.jpg')

Then you can pass the texture to a material:

<Suspense>
  <TresCanvas>
    <TresScene>
      <TresMesh>
        <TresSphereGeometry :args="[1,32,32]" />
        <TresMeshStandardMaterial :map="texture" />
      </TresMesh>
    </TresScene>
  </TresCanvas>
</Suspense>

Notice in the example above that we are using the Suspense component to wrap the TresCanvas component. This is because useLoader returns a Promise and we need to wait for it to resolve before rendering the scene.

Using useTexture

A more convenient way of loading textures is using the useTexture composable. It accepts both an array of URLs or a single object with the texture paths mapped.

To learn more about useTexture, check out the useTexture documentation.

import { useTexture } from '@tresjs/core'

const pbrTexture = await useTexture({
  map: '/textures/black-rock/Rock035_2K_Displacement.jpg',
  displacementMap: '/textures/black-rock/Rock035_2K_Displacement.jpg',
  roughnessMap: '/textures/black-rock/Rock035_2K_Roughness.jpg',
  normalMap: '/textures/black-rock/Rock035_2K_NormalDX.jpg',
  ambientOcclusion: '/textures/black-rock/Rock035_2K_AmbientOcclusion.jpg',
})

Similar to the previous example, we can pass all the textures to a material via props:

<Suspense>
  <TresCanvas>
    <TresScene>
      <TresMesh>
        <TresSphereGeometry :args="[1,32,32]" />
        <TresMeshStandardMaterial
          :map="pbrTexture.map"
          :displacementMap="pbrTexture.displacementMap"
          :roughnessMap="pbrTexture.roughnessMap"
          :normalMap="pbrTexture.normalMap"
          :ambientOcclusionMap="pbrTexture.ambientOcclusionMap"
        />
      </TresMesh>
    </TresScene>
  </TresCanvas>
</Suspense>