---
title: Texturen laden
description: Füge Texture-Maps zu deinen TresJS-Objekten hinzu.
author: alvarosabu
thumbnail: /recipes/load-textures.png
difficulty: 1
---
# Texturen laden
> Alle Texturen in diesem Beispiel stammen von [ambientcg](https://ambientcg.com/).
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](/de/api/composables#useloader).
```ts
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:
```html
```
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](/de/api/composables#usetexture).
```ts
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:
```html
```