three.js材质-联合材质介绍和使用(vue中使用three.js13)

1.联合材质介绍

MeshDepthMaterial没有一个属性来设置物体的颜色，都是由材质的默认属性决定的，但是three.js库提供了一种方法，通过创建联合材质来给深度材质设置颜色
实现步骤

1. 创建两种材质，第二种材质MeshBasicMaterial需要把transparent属性设置为true，设置为true物体颜色就会和背景色进行融合

  // 定义网格材质
  const cubeMaterial = new THREE.MeshDepthMaterial()
  const colorMaterial = new THREE.MeshBasicMaterial({
    color: 0x00ff00,
    transparent: true,
    blending: THREE.MultiplyBlending
  })
  const meshMaterial = [colorMaterial, cubeMaterial]

2. 创建联合网格对象，通过createMultiMaterialObject创建的网格对象，是一个网格组，两个几何对象一样的mesh对象，不过一个是基础材质一个是深度材质

  const cube = new SceneUtils.createMultiMaterialObject(cubeGeometry,meshMaterial)
  cube.children[1].scale.set(0.99, 0.99, 0.99) // 缩小 cubeMaterial 的网格对象，避免闪烁问题

注：在更新完相机的属性far和near后要调用camera.updateProjectionMatrix()

2.demo说明

此demo通过联合材质创建出的绿色的方块
如上图，该示例支持以下功能

1. 调整相机near属性
2. 调整相机far属性
3. 可以通过addCube和removeCube按钮新增和删除方块
4. 调整speed来控制方块旋转速度
5. 调整near和far属性后通过鼠标滚动，观察方块消失的速度

3.demo代码

<template>
  <div>
    <div id="container"></div>
    <div class="controls-box">
      <section>
        <el-row>
          <div v-for="(item,key) in properties" :key="key">
            <div v-if="item&&item.name!=undefined">
              <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-button type="primary" class="controls-button" size="mini" @click="addCube">addCube</el-button>
          <el-button type="primary" class="controls-button" size="mini" @click="removeCube">removeCube</el-button>
        </el-row>

      </section>

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

<script>
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
import { SceneUtils } from 'three/examples/jsm/utils/SceneUtils.js'

export default {
  components: {},
  data () {
    return {
      properties: {
        near: {
          name: 'near',
          value: 66,
          min: 0,
          max: 500,
          step: 1
        },
        far: {
          name: 'far',
          value: 230,
          min: 50,
          max: 1000,
          step: 1
        },
        speed: {
          name: 'speed',
          value: 0.02,
          min: 0,
          max: 0.5,
          step: 0.01
        }
      },
      defaultCubeNum: 0,
      camera: null,
      scene: null,
      renderer: null,
      controls: null
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    formatTooltip (val) {
      return val
    },

    // 初始化
    init () {
      this.createScene() // 创建场景
      this.createLight() // 创建光源
      this.createCamera() // 创建相机
      this.createRender() // 创建渲染器
      this.createControls() // 创建控件对象
      this.render() // 渲染
      this.initCube() // 初始化方块
    },
    // 创建场景
    createScene () {
      this.scene = new THREE.Scene()
    },

    // 创建光源
    createLight () {
      // 环境光
      const ambientLight = new THREE.AmbientLight(0x000000) // 创建环境光
      this.scene.add(ambientLight) // 将环境光添加到场景
    },
    // 创建相机
    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(45, k, 20, 1000)
      this.camera.position.set(-80, 60, 40) // 设置相机位置
      this.camera.lookAt(new THREE.Vector3(0, 0, 0)) // 设置相机方向
      this.scene.add(this.camera)
    },
    initCube () {
      while (this.defaultCubeNum < 100) {
        this.addCube()
        this.defaultCubeNum++
      }
    },
    removeCube () {
      const allChildren = this.scene.children
      const lastObject = allChildren[allChildren.length - 1]
      if (lastObject instanceof THREE.Mesh) {
        this.scene.remove(lastObject)
      }
    },
    addCube () {
      const cubeSize = Math.ceil(3 + Math.random() * 3)
      const cubeGeometry = new THREE.BoxGeometry(cubeSize, cubeSize, cubeSize)
      // 定义网格材质
      const cubeMaterial = new THREE.MeshDepthMaterial()
      const colorMaterial = new THREE.MeshBasicMaterial({
        color: 0x00ff00,
        transparent: true,
        blending: THREE.MultiplyBlending
      })
      const meshMaterial = [colorMaterial, cubeMaterial]
      // 定义 cube 网格
      const cube = new SceneUtils.createMultiMaterialObject(
        cubeGeometry,
        meshMaterial
      )
      cube.children[1].scale.set(0.99, 0.99, 0.99) // 缩小 cubeMaterial 的网格对象，避免闪烁问题
      cube.castShadow = true
      cube.position.x = -60 + Math.round(Math.random() * 100)
      cube.position.y = Math.round(Math.random() * 10)
      cube.position.z = -100 + Math.round(Math.random() * 150)
      // 默认加入 cube
      this.scene.add(cube)
    },
    addCube1 () {
      const cubeSize = Math.ceil(3 + Math.random() * 3)
      const cubeGeometry = new THREE.BoxGeometry(cubeSize, cubeSize, cubeSize)

      const cubeMaterial = new THREE.MeshLambertMaterial({
        color: 0xffffff
      })

      this.cube = new THREE.Mesh(cubeGeometry, cubeMaterial)

      this.cube.castShadow = true
      this.cube.updateMatrix()

      // 设置方块位置
      this.cube.position.x = -50 + Math.round(Math.random() * 100)
      this.cube.position.y = Math.round(Math.random() * 10)
      this.cube.position.z = -120 + Math.round(Math.random() * 150)

      // 将方块添加到场景
      this.scene.add(this.cube)
    },
    // 创建渲染器
    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.setClearColor(0x000000, 1) // 设置背景颜色
      element.appendChild(this.renderer.domElement)
    },

    // 更新属性
    updateFun () {
      this.camera.near = this.properties.near.value
      this.camera.far = this.properties.far.value

      this.camera.updateProjectionMatrix()
      const THIS = this
      THIS.scene.traverse(e => {
        if (e instanceof THREE.Mesh) {
          e.rotation.x += THIS.properties.speed.value
          e.rotation.y += THIS.properties.speed.value
          e.rotation.z += THIS.properties.speed.value
        }
      })
    },
    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 = new THREE.Vector3(0, 0, 0)
    }
  }
}
</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>