# Load Textures > All textures used in this example are from [ambientcg](https://ambientcg.com/). Three-dimensional (3D) textures are images that contain multiple layers of data, allowing them to represent volume or simulate three-dimensional structures. These textures are commonly used in 3D graphics and visual effects to enhance the realism and complexity of scenes and objects. <StackBlitzEmbed projectId="tresjs-load-textures" /> There are two ways of loading 3D textures in TresJS: ## Using `useLoader` The `useLoader` composable allows you to pass any type of Three.js loader and a URL to load the resource from. It returns a `Promise` with the loaded resource. For a detailed explanation of how to use `useLoader`, check out the [useLoader](/api/composables#use-loader) documentation. ```ts import { useLoader } from '@tresjs/core' import { TextureLoader } from 'three/examples/jsm/loaders/TextureLoader' const texture = useLoader(TextureLoader, '/Rock035_2K_Color.jpg') ``` Then you can pass the texture to a material: ```html <Suspense> <TresCanvas> <TresScene> <TresMesh> <TresSphereGeometry :args="[1,32,32]" /> <TresMeshStandardMaterial :map="texture" /> </TresMesh> </TresScene> </TresCanvas> </Suspense> ``` Notice in the example above that we are using the `Suspense` component to wrap the `TresCanvas` component. This is because `useLoader` returns a `Promise` and we need to wait for it to resolve before rendering the scene. ## Using `useTexture` A more convenient way of loading textures is using the `useTexture` composable. It accepts both an array of URLs or a single object with the texture paths mapped. To learn more about `useTexture`, check out the [useTexture](/api/composables#use-texture) documentation. ```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', ambientOcclusion: '/textures/black-rock/Rock035_2K_AmbientOcclusion.jpg', }) ``` Similar to the previous example, we can pass all the textures to a material via props: ```html <Suspense> <TresCanvas> <TresScene> <TresMesh> <TresSphereGeometry :args="[1,32,32]" /> <TresMeshStandardMaterial :map="pbrTexture.map" :displacementMap="pbrTexture.displacementMap" :roughnessMap="pbrTexture.roughnessMap" :normalMap="pbrTexture.normalMap" :ambientOcclusionMap="pbrTexture.ambientOcclusionMap" /> </TresMesh> </TresScene> </TresCanvas> </Suspense> ```