【Three(2)

修改基础材质为标准网格材质

const basicMaterial = new THREE.MeshBasicMaterial()
// 修改上一行代码为下一行代码，基础材质 ——> 标准网格材质
const material = new THREE.MeshStandardMaterial()

---

环境光：均匀的照亮场景中的所有物体。

接下来，我们来给物体添加环境光

// 第一个参数是颜色，第二个参数是明亮程度（0-1）
const light = new THREE.AmbientLight(0xffffff, 0.9)
// 向场景中添加环境光
scene.add(light)

---

平行光：方向从一个平行光位置 position 到 target 位置

接下来，我们来给物体在环境光的基础上添加平行光

const directionLight = new THREE.DirectionalLight(0xffffff, 0.95)
// 设置光的位置
directionLight.position.set(0, 10, 10)
// 向场景中添加平行光
scene.add(directionLight)

二、置换贴图和顶点细分设置

.displacementMap 位移贴图会影响网格顶点的位置，与仅影响材质的光照和阴影的其他贴图不同，移位的顶点可以投射阴影，阻挡其他对象，以及充当真实的几何体。

.displacementScale 位移贴图对网格的影响程度（黑色是无位移，白色是最大位移）

接下来我们来给平面置换贴图，来增强其立体感

// 导入置换贴图
const doorHeightTexture = textureLoader.load('./textures/height.jpg')
......
// 材质（给材质添加置换贴图和影响程度）
const material = new THREE.MeshStandardMaterial({
    // map 为颜色贴图
    map: doorColorTexture,
    // alphaMap 为透明纹理
    alphaMap: doorAplhaTexure,
    // 透明
    transparent: true,
    // 渲染两面
    side: THREE.DoubleSide,
    // 增强视图效果
    aoMap: doorAoTexture,
    // 置换贴图
    displacementMap: doorHeightTexture,
    // 影响程度（5cm）
    displacementScale: 0.05
})
......
// 添加第三和第四个参数（平面的宽度分段数，平面高度分段数）
const planeGeometry = new THREE.PlaneBufferGeometry(1, 1, 200, 200)
......
// 稍微更改一下距离，更合适
plane.position.set(1.5, 0, 0)

---

接下来我们来给物体 cube 置换贴图，来增强其立体感

// 我们只需要给物体增加三个参数即可（长宽高的宽度分段数）
const cubeGeometry =  new THREE.BoxBufferGeometry(1, 1, 1, 100, 100, 100)

---

三、粗糙度与粗糙度贴图

1、粗糙度

.roughness 材质的粗糙程度。0.0 表示平滑的镜面反射，1.0 表示完全漫反射。默认值为 1.0。如果还提供 roughnessMap，则两个值相乘。

.roughnessMap 该纹理的绿色通道用于改变材质的粗糙度。

设置粗糙度，通过反射间接地观察面的光滑程度

const material = new THREE.MeshStandardMaterial({
    ......
    // 设置粗糙度
    roughness: 0
})

---

2、粗糙度贴图

粗糙度贴图，改变门上合页的粗糙度

// 导入粗糙度贴图
const roughnessTexture = textureLoader.load('./textures/roughness.jpg')
......
const material = new THREE.MeshStandardMaterial({
    ......
    // 设置粗糙度
    roughness: 1,
    // 改变材质的粗糙度
    roughnessMap: roughnessTexture
})

---

四、金属度与金属贴图

.metalness 材质与金属的相似度。非金属材质，如木材或石材，使用 0.0，金属使用 1.0。通常没有中间值。默认是 0.0。

0.0 - 1.0 之间的值可用于生锈金属的外观。

.metalnessMap 该纹理的蓝色通道用于改变材质的金属度。

我们给门上的合页添加金属贴图，让它更有金属的感觉

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上大数据知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

需要这份系统化资料的朋友，可以戳这里获取

C-1714262789257)]
[外链图片转存中…(img-mlc34tJZ-1714262789258)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上大数据知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

需要这份系统化资料的朋友，可以戳这里获取