修改基础材质为标准网格材质
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%以上大数据知识点,真正体系化!
由于文件比较多,这里只是将部分目录截图出来,全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频,并且后续会持续更新