加载纹理

本示例中使用的所有纹理均来自 ambientcg.

三维 (3D) 纹理是包含多个数据层的图像，可以表示体积或模拟三维结构。 这些纹理通常用于 3D 图形和视觉特效中，以增强场景和物体的真实感和复杂性。

在 TresJS 中加载 3D 纹理有两种方法：

使用 useLoader

组合式函数 useLoader 允许您传递任何类型的 three.js 加载器和加载资源的 URL。它会返回一个包含已加载资源的 Promise。

有关如何使用 useLoader 的详细说明，请查看 useLoader 文档。

import { useLoader } from '@tresjs/core'
import { TextureLoader } from 'three'

const texture = useLoader(TextureLoader, '/Rock035_2K_Color.jpg')

然后就可以将纹理传递给材质：

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

请注意在上面的示例中，我们使用 Suspense 组件包装 TresCanvas 组件。这是因为 useLoader 返回一个 Promise，我们需要等待它解析后才能渲染场景。

使用 useTexture

一种更方便的加载纹理的方式是使用 useTexture 组合式函数。它接受一个 URL 数组或一个具有映射纹理路径的单个对象。

要了解有关 useTexture 的更多信息，请查看 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'
})

与前面的示例类似，我们可以通过 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>