Three.js第六课-认识贴图

通过本次课的学习，我理解了，在three.js中，某一个真实的物体其实是由众多贴图构成的，在众多贴图的共同作用下，一个普普通通的图片才会显得真实，下面我将详细的介绍每一种贴图及其作用。

图解

Three.js中一个看起来非常真实的物体，其实是由很多个贴图共同作用下的结果

常见的贴图

纹理贴图（Texture Map） ：最基本的贴图类型，用于定义表面的颜色、图案和细节。它们可以用于模拟各种不同的表面类型，如砖块、木头、金属等。
法线贴图（Normal Map） ：包含了表面法线信息的贴图，用于模拟凹凸不平的表面细节，从而增加光照效果和视觉细节。
环境贴图（Environment Map） ：用于模拟物体周围的环境光照，包括反射和折射效果。环境贴图可以让物体看起来更加真实，并且在镜面和折射材质中起着关键作用。
位移贴图（Displacement Map） ：包含了表面高度信息的贴图，可以用于改变物体的几何形状，从而创建更加复杂的表面细节。
透明贴图（Alpha Map） ：用于控制物体表面的透明度，可以创建透明或半透明的效果。
发光贴图（Emissive Map） ：用于模拟物体发光的效果，可以让物体表面产生自发光的效果。
凹凸贴图（Bump Map） ：类似于法线贴图，但它使用灰度值来模拟表面的凹凸效果。通过改变法线方向，可以给物体表面增加凹凸感，从而产生更真实的表现。
光照贴图（Light Map） ：用于模拟光照效果的预计算贴图。它可以包含阴影、光照和颜色信息，用于增强物体的光照效果，并创建更加逼真的渲染结果。
反射贴图（Reflection Map） ：用于模拟物体表面的反射效果。通过将环境的反射映射到物体表面，可以创建出具有镜面反射的效果。
折射贴图（Refraction Map） ：用于模拟物体表面折射效果的贴图。通过调整折射贴图的强度和形状，可以模拟出物体透明度不均匀的效果，例如水或玻璃材质。
粒子贴图（Particle Map） ：用于在粒子系统中对每个粒子应用自定义的纹理。粒子贴图可以为粒子系统带来更多的视觉细节和丰富性。
环境光遮蔽（Ambient Occlusion） ：用来模拟物体表面上因周围环境光照不足而产生的阴影效果。这种贴图通常以灰度图像的形式存在，黑色表示遮蔽最深的区域，白色表示没有遮蔽的区域，灰色表示中间的遮蔽程度。

编码

想要加载贴图，首先就需要贴图的加载器，因此我们需要创建一个纹理加载器

csharp 复制代码

// 创建纹理加载器
let textureLoader=new Three.TextureLoader()

拥有纹理加载器后，就可以加载贴图了

csharp 复制代码

// 加载纹理贴图
let texture=textureLoader.load('/src/assets/texture/texture.png')
// 加载AO贴图（环境遮挡贴图）
let aoMap=textureLoader.load('/src/assets/texture/aoMap.jpg')
// 加载灰度贴图
let alphaMap=textureLoader.load('/src/assets/texture/alphaMap.jpg')
// 加载光照贴图
let lightMap=textureLoader.load('/src/assets/texture/lightMap.png')
// 加载高光贴图
let specularMap=textureLoader.load('/src/assets/texture/specularMap.jpg')

加载贴图后，我们在材质中进行配置后，就可以正常显示啦

less 复制代码

let Material=new Three.MeshBasicMaterial({
    color:0xffffff,
    // 纹理
    map:texture,
    // 允许透明
    transparent:true,
    // 设置ao贴图
    aoMap:aoMap,
    // 设置灰度贴图
    alphaMap:alphaMap,
    // 设置光照贴图
    lightMap:lightMap,
    // 设置高光贴图
    specularMap:specularMap,
    // 设置正反
    side:Three.DoubleSide,
})

在需要使用材质的物体上进行使用

csharp 复制代码

let object=new Three.Mesh(Geometry,Material)
scene.add(object)

效果

环境贴图

如果想要全景全覆盖的真实背景，我们就需要使用到环境贴图，在使用环境贴图之前，要导入HDR加载器，因为这种背景一般都是HDR类型的文件

javascript 复制代码

// 导入HDR加载器
import {RGBELoader} from 'three/examples/jsm/loaders/RGBELoader'
// 创建HDR全景图加载器RGBEloader
let rgbeLoader=new RGBELoader()

有了加载器，就可以来加载对应的环境文件了

ini 复制代码

// 加载环境贴图(hdr:需要引入对应的加载器)
rgbeLoader.load("/src/assets/texture/background.hdr",(envMap)=>{
    // 设置球形映射（变成VR图）
    envMap.mapping=Three.EquirectangularReflectionMapping;
    // 设置环境贴图（背景）
    scene.background=envMap
    // 设置环境贴图（环境）
    scene.environment=envMap
    // 设置环境贴图（object）
    planeMaterial.envMap=envMap
})

效果

最后补充个知识点 : 色彩空间 Three.js中的色彩空间默认为Linear（实际光照），但是这与人眼看到的还是有很大的差别的，因此考虑到让场景更加真实，我们可以将色彩空间改为sRGB（人眼光照）

ini 复制代码

texture.colorSpace=Three.SRGBColorSpace

也可以用GUI进行控制

csharp 复制代码

let gui=new GUI()

gui.add(texture,"colorSpace",{
    sRGB:Three.SRGBColorSpace,
    Linear:Three.LinearSRGBColorSpace
}).name("色彩光").onChange(()=>{
    // 更新色彩空间
    texture.needsUpdate=true
})