学习threejs，THREE.ConvexGeometry凸包高级几何体

news2024/10/22 20:11:37

👨‍⚕️ 主页： gis分享者
👨‍⚕️ 感谢各位大佬点赞👍 收藏⭐ 留言📝 加关注✅!
👨‍⚕️ 收录于专栏：threejs gis工程师

文章目录

一、🍀前言
- 1.1 ☘️THREE.ConvexGeometry凸包高级几何体概念
二、🍀生成THREE.ConvexGeometry凸包高级几何体
- 1. ☘️实现思路
- 2. ☘️代码样例

一、🍀前言

本文详细介绍如何基于threejs在三维场景中实现生成THREE.ConvexGeometry凸包高级几何体，亲测可用。希望能帮助到您。一起学习，加油！加油！

1.1 ☘️THREE.ConvexGeometry凸包高级几何体概念

THREE.ConvexGeometry，它可以围绕一组点创建一个凸包，所谓凸包就是包围这组点得最小图形。也就是所有的点都在当前模型的体内，而且当前图形还是实现的体积最小的一个模型。
创建方法：
一个保存顶点（类型是THREE.Vector3）的数组是THREE.ConvexGeometry构造函数的唯一参数。

var convexGeometry = new THREE.ConvexGeometry(points);

二、🍀生成THREE.ConvexGeometry凸包高级几何体

1. ☘️实现思路

1、初始化renderer渲染器
2、初始化Scene三维场景
3、初始化camera相机，定义相机位置 camera.position.set
4、初始化THREE.AmbientLight环境光源，scene场景加入环境光源，初始化THREE.DirectionalLight平行光源，设置平行光源位置，scene添加平行光源。
5、加载几何模型：创建THREE.Vector3 数组points，根据points生成THREE.ConvexGeometry凸包高级几何体，使用THREE.MeshBasicMaterial材质渲染该THREE.ConvexGeometry凸包高级几何体，scene中加入THREE.ConvexGeometry凸包高级几何体
6、创建旋转动画，执行旋转动画，加入stats监控器，监控帧数信息。

2. ☘️代码样例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>learn22(高级几何体THREE.ConvexGeometry)</title>
    <script src="lib/threejs/127/three.js-master/build/three.js"></script>
    <script src="lib/threejs/127/three.js-master/examples/js/utils/SceneUtils.js"></script>
    <script src="lib/threejs/127/three.js-master/examples/js/geometries/ConvexGeometry.js"></script>
    <script src="lib/threejs/127/three.js-master/examples/js/math/ConvexHull.js"></script>
    <script src="lib/threejs/127/three.js-master/examples/js/controls/OrbitControls.js"></script>
    <script src="lib/threejs/127/three.js-master/examples/js/libs/stats.min.js"></script>
    <script src="lib/threejs/127/three.js-master/examples/js/libs/dat.gui.min.js"></script>
</head>
<style>
    body {
        margin: 0;
    }

    canvas {
        width: 100%;
        height: 100%;
        display: block;
    }
</style>
<body onload="draw()">
</body>
<script>
  var renderer
  var initRender = () => {
    renderer = new THREE.WebGLRenderer({antialias: true})
    renderer.setSize(window.innerWidth, window.innerHeight)
    document.body.appendChild(renderer.domElement)
  }
  var scene
  var initScene = () => {
    scene = new THREE.Scene()
  }
  var camera
  var initCamera = () => {
    camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000)
    camera.position.set(0, 0, 600)
  }
  var light
  var initLight = () => {
    scene.add(new THREE.AmbientLight(0x404040))
    light = new THREE.DirectionalLight(0xffffff)
    light.position.set(1, 1, 1)
    scene.add(light)
  }
  var initModel = () => {
    var points = []
    for (var i = 0; i < 20; i++) {
      //xyz轴的坐标点的位置会随机生成在+-150以内
      var randomX = -150 + Math.round(Math.random() * 300)
      var randomY = -150 + Math.round(Math.random() * 300)
      var randomZ = -150 + Math.round(Math.random() * 300)
      //创建一个坐标点并添加到数组当中
      points.push(new THREE.Vector3(randomX, randomY, randomZ))
    }
    var spGroup = new THREE.Object3D()
    var material = new THREE.MeshBasicMaterial({color: 0xff0000, transparent: false})
    points.forEach(point => {
      var spGeom = new THREE.SphereGeometry(2)
      var spMesh = new THREE.Mesh(spGeom, material)
      spMesh.position.copy(point) //将当前小球的位置设置为当前点的坐标
      scene.add(spMesh)
    })
    scene.add(spGroup)
    var hullGeometry = new THREE.ConvexGeometry(points)
    var hullMesh = createMesh(hullGeometry)
    scene.add(hullMesh)
  }
  var createMesh = (geom) => {
    // 实例化一个绿色的半透明的材质
    var meshMaterial = new THREE.MeshBasicMaterial({color: 0x00ff00, transparent: true, opacity: 0.2})
    meshMaterial.side = THREE.DoubleSide //将材质设置成正面反面都可见
    var wireFrameMat = new THREE.MeshBasicMaterial()
    wireFrameMat.wireframe = true//把材质渲染成线框
    // 将两种材质都赋给几何体
    var mesh = THREE.SceneUtils.createMultiMaterialObject(geom, [meshMaterial, wireFrameMat])
    return mesh
  }
  var stats
  var initStats = () => {
    stats = new Stats()
    document.body.appendChild(stats.dom)
  }
  var controls
  var initControls = () => {
    controls = new THREE.OrbitControls(camera, renderer.domElement)
    controls.enableDamping = true
    controls.autoRotate = true
  }
  var render = () => {
    renderer.render(scene, camera)
  }
  var onWindowResize = () => {
    camera.aspect = window.innerWidth / window.innerHeight
    camera.updateProjectionMatrix()
    render()
    renderer.setSize(window.innerWidth, window.innerHeight)
  }
  var animate = () => {
    render()
    stats.update()
    controls.update()
    requestAnimationFrame(animate)
  }
  var draw = () => {
    initRender()
    initScene()
    initCamera()
    initLight()
    initModel()
    initStats()
    initControls()

    animate()
    window.onresize = onWindowResize
  }
</script>
</html>