---
title: 加载纹理
description: 将纹理贴图添加到你的TresJS对象。
author: alvarosabu
thumbnail: /recipes/load-textures.png
difficulty: 1
---
# 加载纹理
> 本示例中使用的所有纹理均来自 [ambientcg](https://ambientcg.com/).
三维 (3D) 纹理是包含多个数据层的图像，可以表示体积或模拟三维结构。 这些纹理通常用于 3D 图形和视觉特效中，以增强场景和物体的真实感和复杂性。
在 TresJS 中加载 3D 纹理有两种方法：
## 使用 `useLoader`
组合式函数 `useLoader` 允许您传递任何类型的 three.js 加载器和加载资源的 URL。它会返回一个包含已加载资源的 `Promise`。
有关如何使用 `useLoader` 的详细说明，请查看 [useLoader](/zh/api/composables#use-loader) 文档。
```ts
import { useLoader } from '@tresjs/core'
import { TextureLoader } from 'three'
const texture = useLoader(TextureLoader, '/Rock035_2K_Color.jpg')
```
然后就可以将纹理传递给材质：
```html
```
请注意在上面的示例中，我们使用 `Suspense` 组件包装 `TresCanvas` 组件。这是因为 `useLoader` 返回一个 `Promise，我们需要等待它解析后才能渲染场景。`
## 使用 `useTexture`
一种更方便的加载纹理的方式是使用 `useTexture` 组合式函数。它接受一个 URL 数组或一个具有映射纹理路径的单个对象。
要了解有关 `useTexture` 的更多信息，请查看 [useTexture](/zh/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'
})
```
与前面的示例类似，我们可以通过 props 将所有纹理传递给材质：
```html
```