Load Textures

All textures used in this example are from ambientcg.

Three-dimensional (3D) textures are images that contain multiple layers of data, allowing them to represent volume or simulate three-dimensional structures. These textures are commonly used in 3D graphics and visual effects to enhance the realism and complexity of scenes and objects.

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

WARNING

Please note that in the examples below use top level await. Make sure to wrap such code with a Vue's Suspense component.

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:

App.vue

<script setup lang="ts">
import TexturedSphere from './TexturedSphere.vue'
</script>

<template>
  <TresCanvas
    clear-color="#82DBC5"
    shadows
    alpha
  >
    <Suspense>
      <TexturedSphere />
    </Suspense>
  </TresCanvas>
</template>

Model.vue

<script setup lang="ts">
import { useLoader } from '@tresjs/core'
import { TextureLoader } from 'three'

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

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

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',
  aoMap: '/textures/black-rock/Rock035_2K_AmbientOcclusion.jpg',
  metalnessMap: '/textures/black-rock/myMetalnessTexture.jpg',
  matcap: '/textures/black-rock/myMatcapTexture.jpg',
  alphaMap: '/textures/black-rock/myAlphaMapTexture.jpg'
})

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

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