无需建模！Cesium根据数据直接生成管道模型！

大家好，我是日拱一卒的攻城师不浪，致力于技术与艺术的融合。这是2024年输出的第37/100篇文章。
可视化&Webgis交流群+V：brown_7778（备注来意）

效果

前言

三维开发过程中，程序开发者经常需要与建模工程师相配合，相辅相成，三维场景中，模型占据着非常重要的一环，通常场景的美术效果非常依赖于建模质量。

例如前阵子爆火的黑神话悟空，多数玩家都被其中的逼真场景所折服，而场景的真实性离不开建模师的功劳。

但有的时候，像我们在智慧城市业务开发中，这种大场景通常需要配备大量的模型，这就往往会出现一个问题：建模人手不够。

所以，作为程序员，我们能不能通过代码去生成一些模型结构简单，但重复量特别大的模型呢？

例如城市地下管廊这类模型，我们通过数据去用代码生成管道模型，去为建模师减负！

PolylineVolumeGraphics

Cesium中提供了PolylineVolumeGraphics大类，它是用来绘制折线体的，我们可以通过这个大类去根据数据自动生成我们所需要的管廊模型。

我们可以直接用Entity加载。

const addPolylineVolumes = () => {
    
    
  const redTube = viewer.entities.add({
    
    
    name: "Red tube with rounded corners",
    polylineVolume: {
    
    
      positions: Cesium.Cartesian3.fromDegreesArray([
        -85.0,
        32.0,
        -85.0,
        36.0,
        -89.0,
        36.0,
        -87.84,
        42.49
      ]),
      shape: computeCircle(60000.0),
      material: Cesium.Color.RED,
      cornerType: Cesium.CornerType.ROUNDED
    },
  });
  viewer.zoomTo(redTube);
}

positions：线段的轨迹，[经度，纬度，经度，纬度…]
shape：线段要拉伸的形状；
material：线段材质，可以自定义颜色等；
cornerType：线段拐角形状；

这里主要看下shape参数，这个参数主要定义线段最终渲染的形状，我们这里看下computeCircle函数的定义：

const computeCircle = (radius) => {
    
    
  const positions = [];
  for (let i = 0; i < 360; i++) {
    
    
    const radians = Cesium.Math.toRadians(i);
    positions.push(
      new Cesium.Cartesian2(
        radius * Math.cos(radians),
        radius * Math.sin(radians)
      )
    );
  }
  return positions;
}

这个函数的作用主要是想让线段最终渲染成圆形管廊。

圆角效果

Cesium.CornerType.ROUNDED

直角效果

Cesium.CornerType.MITERED

切角效果

Cesium.CornerType.BEVELED

最后

只要你有管道的数据，你就可以生成任意样式的管道效果，这在地下管廊专项业务中可以极大的提高研发效率。

【源码地址】：https://github.com/tingyuxuan2302/cesium-vue3-vite

如果认为有帮助，希望可以给我们一个免费的star，激励我们持续开源更多代码。

作者的Cesium系列课程《Cesium从入门到实战》，将Cesium的知识点进行串联，让不了解Cesium的小伙伴拥有一个完整的学习路线，学完后直接上手做项目，课程细节联系作者：brown_7778（备注来意）。

另外有需要进可视化&Webgis交流群可以加我：brown_7778（备注来意），也欢迎数字孪生可视化领域的交流合作。