Texturen laden

Alle Texturen in diesem Beispiel stammen von ambientcg.

Dreidimensionale (3D) Texturen sind Bilder, die mehrere Datenebenen enthalten, was es ihnen ermöglicht, Volumen zu repräsentieren oder dreidimensionale Strukturen zu simulieren. Diese Texturen werden häufig in 3D-Grafiken und visuellen Effekten verwendet, um den Realismus und die Komplexität von Szenen und Objekten zu erhöhen.

Es gibt zwei Möglichkeiten, 3D-Texturen in TresJS zu laden:

Verwendung von useLoader

Das Composable useLoader ermöglicht es dir, einen three.js-Loader und eine URL zum Laden der Resource zu übergeben. Es gibt ein Promise mit der geladenen Resource zurück.

Für eine detaillierte Erklärung, wie useLoader verwendet wird, siehe die Dokumentation von useLoader.

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

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

Dann kannst du die Textur einem Material zuweisen:

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

Beachte im obigen Beispiel, dass TresCanvas von einer Suspense-Komponente umgeben ist. Dies liegt daran, dass useLoader ein Promise zurückgibt und wir warten müssen, bis es erfüllt ist, bevor wir die Szene rendern können.

Verwendung von useTexture

Eine bequemere Möglichkeit, Texturen zu laden, ist die Verwendung des Composables useTexture. Es akzeptiert sowohl ein Array von URLs als auch ein einzelnes Objekt mit den Pfaden der gemappten Texturen.

Für mehr Informationen über useTexture, siehe die Dokumentation von 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'
})

Wie im vorherigen Beispiel können wir alle Texturen über Props an ein Material übergeben:

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