three.js材质分类，网格基础材质MeshBasicMaterial属性介绍和使用(vue中使用three.js11)

一、材质的分类

我们知道材质结合几何体可以构建网格，材质就像物体的皮肤，决定了物体长什么样子，常用的材质主要有以下九种

1.1网格基础材质-MeshBasicMaterial

基础材质，可以用它赋予几何体一种简单的颜色，或者显示几何体的线框

1.2网格深度材质-MeshDepthMaterial

根据网格到相机的距离，这种材质决定如何给网格染色

1.3网格法向材质-MeshNormalMaterial

这是一种简单的材质，根据物体表面的法向量计算颜色

1.4网格面材质-MeshFaceMaterial

这是一个容器，可以在这个容器里为物体的各个表面指定不同的颜色

1.5网格朗伯材质-MeshLamberMaterial

这种材质会考虑光照的影响，可以用来创建颜色暗淡、不光亮的物体

1.6网格Phong材质-MeshPhongMaterial

这种材质也会考虑光照的影响，而且可以用来创建光亮的物体

1.7着色器材质-ShaderMaterial

这种材质允许使用自定义的着色器程序，直接控制顶点的放置方式和像素的着色方式

1.8直线基础材质-LineBasicMaterial

这种材质可以用于THREE.Line几何体，从而创建着色器直线

1.9虚线-LineDashedMaterial

这种材质跟直线基础材质一样，不过可以用来创建一种虚线效果

二、材质的共有属性

材质有一个基类THREE.Material，这个类列出了所有共有属性，我们把这些共有属性分为三类

2.1基础共性

属性	描述
id	标识符：用来标识材质，在创建时赋值
name	名称：可以通过此属性赋予材质名称
opacity	透明度：定义物体有多透明。与属性 transparent 一起使用才有效。取值范围是 0~1
transparent	是否透明：决定物体是否透明。如果设为 true，three.js 就会根据 opacity 的值来渲染物体；否则，这个物体就不透明
overdraw	过度绘制：当采用 THREE.CanvasRenderer （画布渲染器）进行渲染时，多边形会被渲染得稍大一点。即当使用这个渲染器画出来的物体有缝隙时，可以将此属性设置为 true
visible	是否可见：定义此材质是否可见。设为 false 时，那么在场景中就看不到该物体
side	侧面：通过此属性，可以决定在几何体的哪一面应用该材质。默认是 THREE.FrontSide （前面 或 外面）；还有 THREE.BackSide （后面 或 里面）；以及 THREE.DoubleSide （双面 或 双侧）
needsUpdate	是否刷新：对于材质的某些修改，需要告诉 three.js 材质已经改变了。如果这个属性设为 true，three.js 就会使用修改后的材质属性刷新它的缓存

2.2融合属性

名称	描述
blending	融合：决定物体上的材质如何跟背景融合。融合模式一般是 NormalBlending，在这种模式下只显示材质的上层
blendsrc	融合源： 除了使用标准融合模式外，还可以通过指定 blendsrc、blenddst 及 blendequation 三个属性来创建自定义的融合模式。此属性指定物体（源）如何跟背景（目标）相融合。默认值是 SrcAlphaFactor，即用 alpha（透明度）通道进行融合
blenddst	融合目标： 此属性定义融合时如何使用背景（目标），默认是 OneMinusSrcAlphaFactor，其含义是：目标也使用源的 alpha 通道进行融合，只是用的值是 1 （源的 alpha 通道值）
blendingequation	融合公式： 指定如何使用 blendsrc 和 blenddst 的值。默认方法是 AddEquation，即将两者颜色的值相加。使用这三个属性，就可以创建自定义的融合模式

2.3高级属性

属性	描述
depthTest	深度测试：这是一个高级WebGL属性，使用这个参数可以打开或关闭GL_DEPTH_TEST参数，该参数决定像素深度是否用来计算新的像素值，通常情况下不必修改这个属性，更多信息可以在OpenGL规范中找到
depthWrite	这是一个内部属性，可以用来决定这个材质是否影响WebGL的深度缓存，如果你将一个物体用作二维贴图时，应该将这个属性设置为false，一般不会修改这个属性
polygonOffset 、polygonOffsetFactor、polygonOffsetUnits	通过这些属性可以控制WebGL的POLYGON_OFFSET_FILL功能，一般不需要使用它们
alphaTest	这个属性的值是一个0~1的数字，表示如果某个像素的alpha值小于这个值，那么像素就不会显示出来

三、MeshBasicMaterial材质属性介绍

网格基础材质是一种非常简单的材质，这种材质不考虑光照的影响，该材质主要有以下属性

属性	描述
color	颜色： 设置材质的颜色
wireframe	线框： 当此属性设为 true 时，物体将显示为线框。这对调试非常有利
wireframeLinewidth	线框宽度： 线框模式下，此属性设置线框的宽度。由于WebGLRenderer 不支持该属性，所以无论如何设置该值，线宽始终为1。
wireframeLinecap	线框线端点： 此属性定义线框模式下，顶点间线段的断点如何显示。可选的值有 round（圆）、butt（平）和square（方）三种。默认是 round。对于这个属性的修改结果在实际使用中很难看出来。WebGLRenderer 不支持该属性
wireframeLinejoin	线框连接： 此属性定义线框模式下，线段的连接点如何显示。可选的值有 round（圆）、bevel（斜角）和 miter（尖角）三种。默认是 round。WebGLRenderer 不支持该属性
shading	着色： 此属性定义如何着色。可选的值有 THREE.SmoothShading 和 THREE.FlatShading 两种
vertexColors	顶点颜色： 可以通过此属性为每一个顶点定义不同的颜色。CanvasRenderer 不支持该属性
fox	雾化：此属性指定当前材质是否会受全局雾化效果设置的影响。如果设置成 false，那么全局的雾化效果设置就不会影响当前物体的渲染

四、demo说明

如上图，该示例支持以下功能

1. 通过mesh下拉选择创建正方体、球体或平面
2. 调整材质是否可见
3. 调整材质的颜色
4. 调整是否透明属性和透明度
5. 调整是否显示边框线
6. 调整side属性

五、demo代码

<template>
  <div>
    <div id="container"></div>
    <div class="controls-box">
      <section>
        <el-row>
          <el-col :span="8" class="label-col"><label>mesh</label></el-col>
          <el-col :span="16">
            <el-select v-model="properties.selectMesh" placeholder="请选择">
              <el-option v-for="item in selectMeshOptions" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-col>
        </el-row>
        <el-row>
          <el-checkbox v-model="properties.visible">是否可见</el-checkbox>
        </el-row>
        <el-row>
          <el-col :span="8" class="label-col"><label> 材质颜色</label></el-col>
          <el-col :span="16">
            <div @click="inputClick">
              <el-input :value="properties.color"></el-input>
            </div>
            <div v-show="isShowColors" class="color-select-layer">
              <sketch-picker v-model="properties.color" @input="colorChange"></sketch-picker>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-checkbox v-model="properties.transparent">是否透明</el-checkbox>
        </el-row>
        <el-row>
          <el-checkbox v-model="properties.wireframe">是否渲染为线框</el-checkbox>
        </el-row>
        <el-row>
          <div v-for="(item,key) in properties" :key="key">
            <div v-if="item&&item.name!=undefined&&(item.name=='opacity'&&properties.transparent)||(item.name=='linewidth'&&properties.wireframe)">
              <el-col :span="8">
                <span class="vertice-span">{{item.name}}</span>
              </el-col>
              <el-col :span="13">
                <el-slider v-model="item.value" :min="item.min" :max="item.max" :step="item.step" :format-tooltip="formatTooltip"></el-slider>
              </el-col>
              <el-col :span="3">
                <span class="vertice-span">{{item.value}}</span>
              </el-col>
            </div>
          </div>

        </el-row>
        <el-row>
          <el-col :span="8" class="label-col"><label>side</label></el-col>
          <el-col :span="16">
            <el-select v-model="properties.side" placeholder="请选择">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-col>
        </el-row>

      </section>

    </div>
  </div>
</template>

<script>
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
import { Sketch } from 'vue-color'
export default {
  components: {
    'sketch-picker': Sketch
  },
  data () {
    return {
      options: [
        {
          value: 'front',
          label: 'front'
        },
        {
          value: 'back',
          label: 'back'
        },
        {
          value: 'double',
          label: 'double'
        }
      ],
      selectMeshOptions: [
        {
          value: 'cube',
          label: 'cube'
        },
        {
          value: 'sphere',
          label: 'sphere'
        },
        {
          value: 'plane',
          label: 'plane'
        }
      ],
      properties: {
        opacity: {
          name: 'opacity',
          value: 0.3,
          min: 0,
          max: 1,
          step: 0.1
        },
        wireframeLinewidth: {
          name: 'linewidth',
          value: 5,
          min: 0,
          max: 20,
          step: 1
        },
        selectMesh: 'cube',
        side: 'front',
        transparent: false,
        wireframe: true,
        visible: true,
        color: '#ccffcc'
      },
      isShowColors: false,
      cube: null,
      sphere: null,
      plane: null,
      meshMaterial: null,
      camera: null,
      scene: null,
      renderer: null,
      controls: null
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    formatTooltip (val) {
      return val
    },
    inputClick () {
      this.isShowColors = !this.isShowColors
    },
    colorChange (val) {
      this.properties.color = val.hex
    },
    // 初始化
    init () {
      this.createScene() // 创建场景
      this.createMesh() // 创建网格模型
      this.createCubeAndSphere() // 创建方块和球
      this.createLight() // 创建光源
      this.createCamera() // 创建相机
      this.createRender() // 创建渲染器
      this.createControls() // 创建控件对象
      this.render() // 渲染
    },
    // 创建场景
    createScene () {
      this.scene = new THREE.Scene()
    },
    // 创建网格模型
    createMesh () {
      const planeGeometry = new THREE.PlaneGeometry(100, 100, 4, 4) // 创建一个平面对象PlaneGeometry
      const planeMaterial = new THREE.MeshLambertMaterial({
        color: 0x777777
      }) // 材质对象Material
      const plane = new THREE.Mesh(planeGeometry, planeMaterial)
      plane.receiveShadow = true

      // 设置平面位置
      plane.rotation.x = -0.5 * Math.PI
      plane.position.set(0, -20, 0)

      // 平面对象添加到场景中
      this.scene.add(plane)
    },
    // 创建方块和球
    createCubeAndSphere () {
      const sphereGeometry = new THREE.SphereGeometry(14, 20, 20)
      const cubeGeometry = new THREE.BoxGeometry(15, 15, 15)
      const planeGeometry = new THREE.PlaneGeometry(14, 14, 4, 4)

      this.meshMaterial = new THREE.MeshBasicMaterial({
        color: 0x7777ff
      })

      this.sphere = new THREE.Mesh(sphereGeometry, this.meshMaterial)
      this.cube = new THREE.Mesh(cubeGeometry, this.meshMaterial)
      this.plane = new THREE.Mesh(planeGeometry, this.meshMaterial)

      this.sphere.position.set(-12, 3, 2)

      this.cube.position = this.sphere.position
      this.plane.position = this.sphere.position

      this.scene.add(this.cube)
    },

    // 创建光源
    createLight () {
      // 环境光
      const ambientLight = new THREE.AmbientLight(0xffffff, 0.1) // 创建环境光
      this.scene.add(ambientLight) // 将环境光添加到场景

      const spotLight = new THREE.SpotLight(0xffffff) // 创建聚光灯
      spotLight.position.set(-40, 60, -10)
      spotLight.castShadow = true
      this.scene.add(spotLight)
    },
    // 创建相机
    createCamera () {
      const element = document.getElementById('container')
      const width = element.clientWidth // 窗口宽度
      const height = element.clientHeight // 窗口高度
      const k = width / height // 窗口宽高比
      // PerspectiveCamera( fov, aspect, near, far )
      this.camera = new THREE.PerspectiveCamera(35, k, 0.1, 1000)
      this.camera.position.set(-80, 60, 40) // 设置相机位置

      this.camera.lookAt(new THREE.Vector3(10, 0, 0)) // 设置相机方向
      this.scene.add(this.camera)
    },
    // 创建渲染器
    createRender () {
      const element = document.getElementById('container')
      this.renderer = new THREE.WebGLRenderer()
      this.renderer.setSize(element.clientWidth, element.clientHeight) // 设置渲染区域尺寸
      this.renderer.shadowMap.enabled = true // 显示阴影
      this.renderer.shadowMap.type = THREE.PCFSoftShadowMap
      this.renderer.setClearColor(0x3f3f3f, 1) // 设置背景颜色
      element.appendChild(this.renderer.domElement)
    },
    updateMesh (selectMesh) {
      this.scene.remove(this.plane)
      this.scene.remove(this.cube)
      this.scene.remove(this.sphere)

      switch (selectMesh) {
        case 'cube':
          this.scene.add(this.cube)
          break
        case 'sphere':
          this.scene.add(this.sphere)
          break
        case 'plane':
          this.scene.add(this.plane)
          break
      }
    },
    updateSide (side) {
      switch (side) {
        case 'front':
          this.meshMaterial.side = THREE.FrontSide
          break
        case 'back':
          this.meshMaterial.side = THREE.BackSide
          break
        case 'double':
          this.meshMaterial.side = THREE.DoubleSide
          break
      }
      this.meshMaterial.needsUpdate = true
    },
    // 更新属性
    updateFun () {
      this.meshMaterial.color.setStyle(this.properties.color)
      this.meshMaterial.opacity = this.properties.opacity.value
      this.meshMaterial.wireframeLinewidth = this.properties.wireframeLinewidth.value
      this.meshMaterial.transparent = this.properties.transparent
      this.meshMaterial.wireframe = this.properties.wireframe
      this.meshMaterial.visible = this.properties.visible

      this.updateMesh(this.properties.selectMesh)
      this.updateSide(this.properties.side)
    },
    render () {
      this.updateFun()
      this.renderer.render(this.scene, this.camera)
      requestAnimationFrame(this.render)
    },
    // 创建控件对象
    createControls () {
      this.controls = new OrbitControls(this.camera, this.renderer.domElement)
      this.controls.target.copy(this.plane.position)
    }
  }
}
</script>

<style>
#container {
  position: absolute;
  width: 100%;
  height: 100%;
}
.controls-box {
  position: absolute;
  right: 5px;
  top: 5px;
  width: 300px;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #c3c3c3;
}
.label-col {
  padding: 8px 5px;
}
.color-select-layer {
  position: relative;
  left: -20px;
  padding: 15px 0;
}
.vertice-span {
  line-height: 38px;
  padding: 0 2px 0 10px;
}
</style>