Cargar Texturas

Todas las texturas utilizadas en este ejemplo son de ambientcg.

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.

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:

<Suspense>
  <TresCanvas>
    <TresMesh>
      <TresSphereGeometry :args="[1,32,32]" />
      <TresMeshStandardMaterial :map="texture" />
    </TresMesh>
  </TresCanvas>
</Suspense>

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.

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:

<Suspense>
  <TresCanvas>
    <TresMesh>
      <TresSphereGeometry :args="[1,32,32]" />
      <TresMeshStandardMaterial
        :map="pbrTexture.map"
        :displacementMap="pbrTexture.displacementMap"
        :roughnessMap="pbrTexture.roughnessMap"
        :normalMap="pbrTexture.normalMap"
        :aoMap="pbrTexture.ambientOcclusionMap"
      />
    </TresMesh>
  </TresCanvas>
</Suspense>