Charger des textures

Toutes les textures utilisées dans cet exemple proviennent de ambientcg.

Les textures tridimensionnelles (3D) sont des images contenant plusieurs couches de données, leur permettant de représenter du volume ou de simuler des structures tridimensionnelles. Ces textures sont couramment utilisées dans les graphiques 3D et les effets visuels pour améliorer le réalisme et la complexité des scènes et des objets.

Il existe deux façons de charger des textures 3D dans TresJS :

Avec useLoader

Le composable useLoader vous permet de transmettre tout type de loader three.js et une URL pour charger la ressource. Renvoie une « Promesse » avec la ressource chargée.

Pour une explication détaillée de la façon d'utiliser useLoader, consultez la documentation useLoader.

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

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

Ensuite vous pouvez passer la texture à un matériau :

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

Notez dans l'exemple ci-dessus que nous utilisons le composant Suspense pour envelopper le composant TresCanvas. En effet, useLoader renvoie une Promise et nous devons attendre qu'elle soit résolue avant de restituer la scène.

Avec useTexture

Un moyen plus pratique de charger des textures consiste à utiliser le composable useTexture. Accepte à la fois un tableau d'URL et un seul objet avec des chemins de texture mappés.

Pour plus d'informations sur useTexture, consultez la documentation useTexture.

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'
})

Semblable à l'exemple précédent, nous pouvons transmettre toutes les textures à un matériau via des accessoires :

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