---
title: Cargar Texturas
description: Agrega mapas de texturas a tus objetos en TresJS.
author: alvarosabu
thumbnail: /recipes/load-textures.png
difficulty: 1
---
# Cargar Texturas
> Todas las texturas utilizadas en este ejemplo son de [ambientcg](https://ambientcg.com/).
Las texturas tridimensionales (3D) son imágenes que contienen múltiples capas de datos, lo que les permite representar volumen o simular estructuras tridimensionales. Estas texturas se utilizan comúnmente en gráficos 3D y efectos visuales para mejorar el realismo y la complejidad de escenas y objetos.
Hay dos formas de cargar texturas 3D en TresJS:
## Usando `useLoader`
El composable `useLoader` te permite pasar cualquier tipo de cargador de three.js y una URL para cargar el recurso. Retorna una `Promise` con el recurso cargado.
Para obtener una explicación detallada de cómo usar `useLoader`, consulta la documentación de [useLoader](/api/composables#use-loader).
```ts
import { useLoader } from '@tresjs/core'
import { TextureLoader } from 'three'
const texture = useLoader(TextureLoader, '/Rock035_2K_Color.jpg')
```
Luego puedes pasar la textura a un material:
```html
```
Observa en el ejemplo anterior que estamos utilizando el componente `Suspense` para envolver el componente `TresCanvas`. Esto se debe a que `useLoader` devuelve una `Promise` y necesitamos esperar a que se resuelva antes de renderizar la escena.
## Usando `useTexture`
Una forma más conveniente de cargar texturas es utilizando el composable `useTexture`. Acepta tanto un array de URLs como un objeto único con los caminos de las texturas mapeadas.
Para obtener más información sobre `useTexture`, consulta la documentación de [useTexture](/api/composables#use-texture).
```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'
})
```
Similar to the previous example, we can pass all the textures to a material via props:
Al igual que en el ejemplo anterior, podemos pasar todas las texturas a un material a través de props:
```html
```