贴图

贴图是一种纹理，可以用来模拟物体的表面细节。

通常来说，贴图就是一张图片。

加载贴图：

// 加载贴图
const map = textureLoader.load('/texture/watercover/CityNewYork002_COL_VAR1_1K.png')
// 加载环境光遮蔽贴图
const aoMap = textureLoader.load('/texture/watercover/CityNewYork002_AO_1K.jpg')
// 透明度贴图
const alphaMap = textureLoader.load('/texture/door/height.jpg')
// 光照贴图
const lightMap = textureLoader.load('/texture/colors.png')
// 高光贴图
const specularMap = textureLoader.load('/texture/watercover/CityNewYork002_GLOSS_1K.jpg')

设置贴图：

const planeGeometry = new THREE.PlaneGeometry(1, 1)
const planeMaterial = new THREE.MeshBasicMaterial({
  color: 0xffffff,
  // 添加纹理贴图
  map: map,
  // 允许透明度
  transparent: true,
  // 设置 ao 贴图
  aoMap,
  // // 设置透明度贴图
  // alphaMap,
  // // 设置光照贴图
  // lightMap,
  // 设置高光贴图
  specularMap,
})

为背景添加贴图：

// 加载 hdr 贴图
const rgbeLoader = new RGBELoader()
rgbeLoader.load('/texture/Alex_Hart-Nature_Lab_Bones_2k.hdr', (envMap) => {
  // 设置环境贴图
  scene.background = envMap
  // 设置环境贴图的映射方式
  envMap.mapping = THREE.EquirectangularReflectionMapping
  // 设置 plane 的反射贴图
  planeMaterial.envMap = envMap
  // 设置 plane 的反射贴图的强度
  planeMaterial.reflectivity = 0.5
})

本节示例代码：https://github.com/wukaipeng-dev/threejs-demo/blob/main/02-basic/src/main-texture.ts