Textures laden

Alle textures uit dit voorbeeld zijn van ambientcg.

Driedimensionale (3D) texturen zijn afbeeldingen die meerdere gegevenslagen bevatten, waardoor ze volume kunnen weergeven of driedimensionale structuren kunnen simuleren. Deze texturen worden vaak gebruikt in 3D graphics en visuele effecten om het realisme en de complexiteit van scènes en objecten te verbeteren.

Er zijn twee manieren om 3D textures te laden in TresJS:

Middels useLoader

Met de useLoader composable kunt u elk type three.js-lader en een URL doorgeven waaruit de bron kan worden geladen. Het returned een Promise met de geladen bron.

Voor een gedetailleerde uitleg over het gebruik van useLoader, bekijk de useLoader documentatie.

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

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

Dan kun je de texture naar een materiaal sturen:

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

Merk op dat we in het bovenstaande voorbeeld de component Suspense gebruiken om de component TresCanvas te wrappen. Dit komt omdat useLoader een Promise returned en we moeten wachten tot dit is resolved voordat de scène wordt weergegeven.

useTexturegebruiken

Een gemakkelijkere manier om texturen te laden is het gebruik van de useTexture composable. Het accepteert zowel een reeks URL's als een enkel object waarvan de textuurpaden in kaart zijn gebracht.

Voor meer informatie over useTexture, bekijk de useTexture documentatie.

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

Net als in het vorige voorbeeld kunnen we alle texturen via props aan een materiaal doorgeven:

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