携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第17天，点击查看活动详情 >
MeshNormalMaterial
如图所示,为一个球体设置了MeshNormalMaterial材质,网格中的的每一面所渲染的颜色都稍有不同,而且在球体旋转时,颜色也基本保持在原来的位置;之所以这样是因为每一面所渲染的颜色都是由从该面向外指的法向量计算得到的;
法向量是指与面垂直的向量,在ThreeJS中有广泛的引用,他可以用来决定光的反射,有助于将纹理映射在三维模型中,并提供有关如何计算光照,阴影及表面像素着色的信息而这些计算,Threejs库会处理,并在内部使用;
// MeshNormalMaterial
const material = new THREE.MeshNormalMaterial();
// 定义材质是否使用平面着色进行渲染 设置该属性后,我们的曲面变的平坦
material.flatShading = true
MeshMatcapMaterial
mapcap图像文件编码了烘焙过的光照，因此MeshMatcapMaterial 不对灯光作出反应。 它将会投射阴影到一个接受阴影的物体上(and shadow clipping works)，但不会产生自身阴影或是接受阴影。假设我们场景中有多个路灯,当路灯数量较少时我们可以对路灯添加光源,但当场景中路灯过多时,添加太多的光源消耗太大,所以我们将光效烘焙后直接引入可以节省消耗,也可以获得比较好的光源效果;
MeshDepthMaterial
深度网格材质,一种按照深度绘制几何体的材质,深度基于相机的远近,白色最近,黑色最远,当我们设置这个材质后发现模型看不见,那可能就是由于距离相机过远导致材质变黑,可以应用于雾化等效果的实现;
MeshLambertMaterial
一种非光泽表面的材质,没有镜面高光,但可以很好的模拟屋里表面;当我们为场景中添加了灯光后,可以根据灯光产生变化
const material = new THREE.MeshLambertMaterial()
// 添加环境光
const ambientLight = new THREE.AmbientLight(0xff0000,0.5)
scene.add(ambientLight)
// 添加点光源
const pointLight = new THREE.PointLight(0x0000ff,0.5)
pointLight.position.x=0;
pointLight.position.y=0;
pointLight.position.x=5;
scene.add(pointLight)
MeshPhongMaterial
一种用于具有镜面高光的光泽表面的材质;这种材质与MeshLambertMaterial的效果感觉很相似,但他的效果比MeshLambertMaterial更加光滑,更具有光泽感;我的图太糊了,所以上传后估计效果看不出差距,就不做另外加图片演示了;
// 高亮的程度，越高的值越闪亮。默认值为 30
material.shininess = 100;
// 高光颜色
material.specular = new THREE.Color('blue')
本想这一篇把材质写完,发现越写越多,还是一篇一篇来吧 如果有哪里描述不准确或者有问题,欢迎大佬指正!
(≖ᴗ≖)✧
