threejs——无人机概念切割效果

主要技术采用着色器的切割渲染，和之前写的风车可视化的文章不同，这次的切割效果是在着色器的基础上实现的，并新增了很多可调节的变量，兄弟们，走曲儿~

线上演示地址，点击体验

源码下载地址，点击下载

---

正文

从图中大概可以看出以下信息，一个由线组成的无人机模型，一个由粒子组成的无人机模型，那么这些粒子、线都是从一个无人机的gltf模型中提取出来的，无人机模型由很多个小的Mesh组成的一个大的group，那么为了着色器的效果好处理，我们将所有的顶点信息收集起来，文中不讲加载gltf模型的内容哦~不了解的童鞋可以参考博主之前的文章。

收集点位信息

收集点位信息主要应用到threejs提供的实用工具BufferGeometryUtils中的mergeGeometriesAPI，将所有的geometry合并为同一个BufferGeometry。

...
let geometries: BufferGeometry[] = [];
gltf.scene.traverse((child: any) => {
   
   
if (child.isMesh) {
   
   
  geometries.push(child.geometry);
}
});

let combinedGeometry = BufferGeometryUtils.mergeGeometries(geometries);
...

这样我们就得到一个新的geometry: BufferGeometry，但是里面包含了所有无人机的零部件。这样就可以统一处理这些信息了

创建线条模型和点阵模型

代码中封装了一个创建线条的方法（也包含了创建点阵的方法，这里不细介绍），代码主要逻辑：拿到顶点信息，通过边缘几何体（EdgesGeometry）计算相邻面和法线角度判断当前顶点信息是否需要渲染，也是过滤顶点信息，减缓浏览器渲染压力，得到一个过滤后的geometry，再将顶点信息渲染为 线段（LineSegments），这里有同学要问哦，同样都是接受一个geometry为啥需要用边缘几何体处理呢？那我们在这里做一个对比，左图是未经过处理的，右图是经过处理的，从左面的图可以看出来，原模型组成面的三角线也都被渲染出来了，所以导致线条特别凌乱。而且渲染的内容越多，对浏览器的压力也越大。