Threejs入门之十二：认识Threejs中的材质_three.backside

材质是描述对象的外观，Threejs中提供了很多材质的API，今天我们来了解几个常用的材质类API
1.Material
Material是所有材质的基类，所有继承自Material的材质都基础了Material的属性和方法，Material常用的属性有：
alphaTest：控制透明度的alpha值，默认值为0，如果设置不透明度(opacity)低于此值，则不会渲染材质。
depthTest：是否在渲染此材质时启用深度测试。默认为 true
depthWrite : 渲染此材质是否对深度缓冲区有任何影响。默认为true
id : 材质实例的唯一编号
needsUpdate：指定需要重新编译材质
opacity : 在0.0 - 1.0的范围内的浮点数，表明材质的透明度。值0.0表示完全透明，1.0表示完全不透明。如果材质的transparent属性未设置为true，则材质将保持完全不透明，此值仅影响其颜色。 默认值为1.0。
side：定义材质将要渲染哪一面 (正面，背面或两面)。 默认为THREE.FrontSide(正面)。另外两个选项为THREE.BackSide(背面)和THREE.DoubleSide(两面)
transparent :定义材质是否透明,默认为false
visible: 材质是否可见。默认为true
2.MeshBasicMaterial
MeshBasicMaterial，基础网格材质，我们在前面已经用过好多次了，这种材质不受光照的影响，没有阴影；但是可以给它设置颜色、不透明度

const material = new THREE.MeshBasicMaterial({
  color:0xff0000,//设置颜色
  transparent:true,//开启透明
  opacity:0.5//设置透明度
})
1
2
3
4
5

效果

3.MeshLambertMaterial
Lambert网格材质，一种非光泽表面的材质，没有镜面高光。受光照的影响，它可以很好地模拟一些表面（例如未经处理的木材或石材），但不能模拟具有镜面高光的光泽表面（例如涂漆木材），我们之前的例子中也使用过这种材质

const material = new THREE.MeshLambertMaterial({
  color:0x00ffff,//设置颜色  
})
1
2
3

效果

4.MeshNormalMaterial
MeshNormalMaterial：法线网格材质，一种把法向量映射到RGB颜色的材质。它会根据面的法线使用不同的颜色来渲染

const cubeGeom = new THREE.BoxGeometry(35,35,35)
const cubeMaterial = new THREE.MeshNormalMaterial( ) 
const cubeMesh = new THREE.Mesh(cubeGeom,cubeMaterial)
scene.add(cubeMesh)
1
2
3
4

效果

5.MeshPhongMaterial
MeshPhongMaterial：Phong网格材质，一种用于具有镜面高光的光泽表面的材质。与MeshLambertMaterial中使用的Lambertian模型不同，该材质可以模拟具有镜面高光的光泽表面（例如涂漆木材），其常用属性如下
emissive : 材质的放射（光）颜色，基本上是不受其他光照影响的固有颜色。默认为黑色。
specular : 材质的高光颜色。默认值为0x111111（深灰色）的颜色Color
shininess : .specular高亮的程度，越高的值越闪亮。默认值为 30
fog : 材质是否受雾影响。默认为true
combine : 如何将表面颜色的结果与环境贴图（如果有）结合起来
选项为THREE.MultiplyOperation（默认值），THREE.MixOperation， THREE.AddOperation。如果选择多个，则使用.reflectivity在两种颜色之间进行混合。
MultiplyOperation 它将环境贴图和物体表面颜色进行相乘
MixOperation 使用反射率来混和两种颜色
AddOperation 用于对两种颜色进行相加
reflectivity : 环境贴图对表面的影响程度;默认值为1，有效范围介于0（无反射）和1（完全反射）之间
refractionRatio : 空气的折射率（IOR）（约为1）除以材质的折射率。它与环境映射模式THREE.CubeRefractionMapping 和THREE.EquirectangularRefractionMapping一起使用，折射率不应超过1。默认值为0.98

const cubeMaterial = new THREE.MeshPhongMaterial( {
  color:0x049ef4, 
  shininess:85,
  fog:true,
  combine:THREE.MultiplyOperation,
  reflectivity:0.1,
  refractionRatio:0.98
}) 
1
2
3
4
5
6
7
8

效果

以上就是Threejs中常用材质的介绍，想了解更多材质，请参考官方文档