9.环境遮挡贴图与强度
与透明材质类似，也是使用到一个黑白的图片，黑色的部分会暗下去，在真实的灯光下会有阴影，遮挡贴图就起到这个作用。
首先定义它，并加到材质中
const stoneAoTexture = textureLoader.load("./textures/ao.jpg")
//几何体
const cubeGeometry = new THREE.BoxBufferGeometry(1, 1, 1)
//材质
const basicMaterial = new THREE.MeshBasicMaterial({
map: stoneColorTexture,
transparent: true,
aoMap: stoneAoTexture,//遮挡贴图
aoMapIntensity: 0.5, //设置遮挡强度
side: THREE.DoubleSide
})
const cube = new THREE.Mesh(cubeGeometry, basicMaterial)
scene.add(cube)
需要设置第二组uv来给这个遮挡贴图，也就是把原来图案的uv给到这个贴图。
cubeGeometry.setAttribute('uv2', new THREE.BufferAttribute(cubeGeometry.attributes.uv.array, 2))//两个值作为一点
把几何体的平面图uv设置给遮挡贴图。平面也是一样
//添加平面
const planeGeometry = new THREE.PlaneBufferGeometry(1, 1)
const plane = new THREE.Mesh(
planeGeometry, basicMaterial
)
plane.position.set(3, 0, 0)
scene.add(plane)
//给平面设置第二组uv
planeGeometry.setAttribute('uv2', new THREE.BufferAttribute(planeGeometry.attributes.uv.array, 2))
10.PBR物理渲染
什么是PBR
基于物理渲染，以前的渲染是在模仿灯光的外观，现在是在模仿灯光的实际行为。
PBR的组成部分
- 灯光属性：直接照明、间接照明、直接高光、间接高光、阴影、环境光闭塞。
- 表面属性：基础色、法线、高光、粗糙度、金属度。
灯光属性
1.光线类型
入射光：
- 直接照明：直接从光源发射到阴影物体表面的光
- 间接照明：环境光和直接光经过反弹第二次进入的光
反射光：
- 镜面光：在经过表面反射聚集在同一方向上进入人眼的高亮光
- 漫反射：光被散射并沿着各个方向离开表面
光与表面相互作用类型
- 直接漫反射：来自光源的光被表面散射的光。
- 直接高光：来自光源并被表面集中反射的光。
- 间接漫反射：来自环境的光被表面散射的光。
- 间接高光：来自环境并被表面集中反射的光。
表面属性
基础色
法线
镜面
粗糙度
金属度
11.标准网格材质与光照物理效果
在THREE.JS中，MeshStandardMaterial标准网格材质是一种基于物理的渲染(PBR)的标准材质。
那这里我们先把原来的基础材质替换成这个标准网格材质。
const standardMaterial = new THREE.MeshStandardMaterial({
//下面都不用改
map: stoneColorTexture,
// alphaMap: stoneAlphaTexture,
transparent: true,
aoMap: stoneAoTexture,
aoMapIntensity: 0.8,
side: THREE.DoubleSide
})
但这个时候我们发现，网页上看到我们的物体是黑的！为什么呢，因为没有灯光。
AmbientLight环境光
环境光会均匀的照亮场景中的所有物体，不能用来投射阴影，因为它没有方向。
//灯光
const light = new THREE.AmbientLight(0xffffff, 0.1) //颜色，强度
scene.add(light)
DirectionalLight平行光
平行光是沿着特定方向发射的光。平行光是可以设置 光源位置position 和 目标位置target 的。
//直线光(平行光)
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5)
directionalLight.position.set(10, 10, 10)
scene.add(directionalLight)
12.置换贴图与顶点细分设置
除了前面使用过的透明贴图、遮挡贴图之外，还有高度贴图、金属贴图等等。
置换贴图 .displacementMap
也是使用一张黑白灰的图。越白呢就会越突出。
//导入置换贴图
const stoneHeightTexture = textureLoader.load("./textures/ao.jpg")
//材质
const standardMaterial = new THREE.MeshStandardMaterial({
displacementMap:stoneHeightTexture,//置换贴图
displacementScale:0.1,//置换的影响程度 默认是1
})
但是呢，这样还不足以让它显示，因为没有足够的点让它去把贴图贴上去。这个时候我们就要看到我们的几何体的构造器了。
先拿平面举例子，之前我们只用到了两个参数，就是width、height，而它后面还有两个参数分别是widthSegments平面的宽度分段数和heightSegments平面的高度分段数。
像这样修改
//添加平面
const planeGeometry = new THREE.PlaneBufferGeometry(1, 1, 200, 200)
那么在平面是这样，在Box也是 只不过有三个参数。
//几何体
const cubeGeometry = new THREE.BoxBufferGeometry(1, 1, 1, 100, 100, 100)
当然后面的点给的越多效果就会越逼真，但是要是给得太多的话，可能就要闻到烧烤的香味了哈哈哈。
