three.js之高级几何体-凸面体ConvexGeometry(vue中使用three.js30)

1.ConvexGeometry几何体介绍

ConvexGeometry可以在一组点的外面建立一个凸包，所谓凸包就是包围着组点的最小图形。创建ConvexGeometry几何体时，只需要传入一个存放一组坐标的数组即可。如下代码所示：

const points = []
for (let i = 0; i < 20; i++) {
  const randomX = -15 + Math.round(Math.random() * 30)
  const randomY = -15 + Math.round(Math.random() * 30)
  const randomZ = -15 + Math.round(Math.random() * 30)

  points.push(new THREE.Vector3(randomX, randomY, randomZ))
}

// 创建凸面体
const hullGeometry = new ConvexGeometry(points)

2.demo说明

如上图，该示例可以通过reDraw按钮，随机生成20个点创建一个凸面体

3.demo代码

<template>
  <div>
    <div id="container"></div>
    <div class="controls-box">
      <section>
        <el-row>
          <el-button type="primary" class="controls-button" size="mini" @click="reDraw">reDraw</el-button>
        </el-row>
      </section>
    </div>
  </div>
</template>

<script>
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
import { ConvexGeometry } from 'three/examples/jsm/geometries/ConvexGeometry.js'
import { SceneUtils } from 'three/examples/jsm/utils/SceneUtils.js'
export default {
  data() {
    return {
      step: 0.01,
      pointSGroup: null,
      mesh: null,
      camera: null,
      scene: null,
      renderer: null,
      controls: null
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    reDraw() {
      this.scene.remove(this.pointSGroup)
      this.scene.remove(this.mesh)
      this.createMesh()
    },
    // 初始化
    init() {
      this.createScene() // 创建场景
      this.createMesh() // 创建网格模型
      this.createLight() // 创建光源
      this.createCamera() // 创建相机
      this.createRender() // 创建渲染器
      this.createControls() // 创建控件对象
      this.render() // 渲染
    },
    // 创建场景
    createScene() {
      this.scene = new THREE.Scene()
    },
    // 创建网格模型
    createMesh() {
      //随机生成20个点
      const points = []
      for (let i = 0; i < 20; i++) {
        const randomX = -15 + Math.round(Math.random() * 30)
        const randomY = -15 + Math.round(Math.random() * 30)
        const randomZ = -15 + Math.round(Math.random() * 30)

        points.push(new THREE.Vector3(randomX, randomY, randomZ))
      }

      this.pointSGroup = new THREE.Group()
      const material = new THREE.MeshBasicMaterial({
        color: 0xff0000,
        transparent: false
      })
      points.forEach(point => {
        const spGeom = new THREE.SphereGeometry(0.2)
        const spMesh = new THREE.Mesh(spGeom, material)
        spMesh.position.copy(point)
        this.pointSGroup.add(spMesh)
      })
      // 将顶点添加到场景
      this.scene.add(this.pointSGroup)

      // 创建凸面体
      const hullGeometry = new ConvexGeometry(points)
      // 创建材质数组
      const meshMaterialArr = [
        new THREE.MeshBasicMaterial({
          color: 0x00ff00,
          transparent: true,
          opacity: 0.2,
          side: THREE.DoubleSide
        }),
        new THREE.MeshBasicMaterial({ wireframe: true })
      ]
      // 创建组合材质的几何体
      this.mesh = SceneUtils.createMultiMaterialObject(
        hullGeometry,
        meshMaterialArr
      )

      // 网格对象添加到场景中
      this.scene.add(this.mesh)
    },

    // 创建光源
    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({ antialias: true, alpha: true })
      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)
    },

    // 更新属性
    updateFun() {
      this.pointSGroup.rotation.y = this.step
      this.mesh.rotation.y = this.step += 0.01
    },
    render() {
      this.updateFun()
      this.renderer.render(this.scene, this.camera)
      requestAnimationFrame(this.render)
    },
    // 创建控件对象
    createControls() {
      this.controls = new OrbitControls(this.camera, this.renderer.domElement)
    }
  }
}
</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;
}
</style>