Use vue to learn advanced geometry of three.js-ConvexGeometry

1. Introduction to ConvexGeometry

ConvexGeometry can build a convex hull outside a group of points. The so-called convex hull is the smallest figure surrounding the group of points. When creating a ConvexGeometry geometry, you only need to pass in an array that stores a set of coordinates. As shown in the following code:

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 description

As shown in the figure above, this example can use the reDraw button to randomly generate 20 points to create a convex body

3.demo code

<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>