threejs 笔记 04 —— 网格材质对象

网格材质对象

对于一个成熟的3D模型来说，只有框架是远远不够的，要想展示出绚丽的3d效果，材质是必不可少的要素之一，比如模型是否可以受光照的影响，决定模型是否透明等等。

材质对象对比

 /**
   * 创建网格模型
   */
  var geometry = new THREE.SphereGeometry(35, 32, 32); // 球几何体
  // var geometry = new THREE.BoxGeometry( 70, 70, 70 );  创建一个立方体几何对象Geometry
  // var geometry = new THREE.TorusKnotGeometry( 10, 3, 100, 16 ); 创建一个扭曲几何对象Geometry

  //基础网格材质对象   不受光照影响  没有棱角感
  var BasicMaterial = new THREE.MeshBasicMaterial({
    color: 0x0000ff,
    // wireframe:true,//线条模式渲染
  });

  // 与光照计算  漫反射   产生棱角感
  var LambertMaterial = new THREE.MeshLambertMaterial({
    color: 0x00ff00,
  });

  // 与光照计算  高光效果（镜面反射）    产生棱角感
  var PhongMaterial = new THREE.MeshPhongMaterial({
    color: 0xff0000,
    specular: 0xffffff,
    shininess: 10,
  });

  // 深度基于相机远近平面。白色最近，黑色最远。
  var DepthMaterial = new THREE.MeshDepthMaterial({
    color: 0xff0000,
  });

  var mesh1 = new THREE.Mesh(geometry, BasicMaterial); //网格模型对象Mesh
  mesh1.position.setX(-80);
  scene.add(mesh1); //网格模型添加到场景中
  var mesh2 = new THREE.Mesh(geometry, LambertMaterial); //网格模型对象Mesh
  scene.add(mesh2); //网格模型添加到场景中
  var mesh3 = new THREE.Mesh(geometry, PhongMaterial); //网格模型对象Mesh
  mesh3.position.setX(80);
  scene.add(mesh3); //网格模型添加到场景中
  var mesh4 = new THREE.Mesh(geometry, DepthMaterial); //网格模型对象Mesh
  mesh4.position.setX(160);
  scene.add(mesh4); //网格模型添加到场景中

以上材质基类为Material

透明度 & 线条模式

线条模式

//基础网格材质对象   不受光照影响  没有棱角感
  var BasicMaterial = new THREE.MeshBasicMaterial({
    color: 0x0000ff,
    wireframe: true, //线条模式渲染
  });

半透明度

 // 与光照计算  漫反射   产生棱角感
  var LambertMaterial = new THREE.MeshLambertMaterial({
    color: 0x00ff00,
    transparent: true, //开启透明度
    opacity: 0.8, //设置透明度具体值
  });

.transparent : Boolean

定义此材质是否透明。这对渲染有影响，因为透明对象需要特殊处理，并在非透明对象之后渲染。 设置为true时，通过设置材质的opacity属性来控制材质透明的程度。 默认值为false。

.opacity : Float

在0.0 - 1.0的范围内的浮点数，表明材质的透明度。值0.0表示完全透明，1.0表示完全不透明。 如果材质的transparent属性未设置为true，则材质将保持完全不透明，此值仅影响其颜色。 默认值为1.0。

材质对象还有很多类型，在以后的学习中继续探索...

有一起学习的小伙伴，可以留言、关注一起探讨threejs