---
title: Textures laden
description: Voeg texture maps toe aan je TresJS objects.
author: alvarosabu
thumbnail: /recipes/load-textures.png
difficulty: 1
---
# Textures laden
> Alle textures uit dit voorbeeld zijn van [ambientcg](https://ambientcg.com/).
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](/nl/api/composables#use-loader) documentatie.
```ts
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:
```html
```
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.
## `useTexture`gebruiken
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](/nl/api/composables#use-texture) documentatie.
```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'
})
```
Net als in het vorige voorbeeld kunnen we alle texturen via props aan een materiaal doorgeven:
```html
```