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

最新推荐文章于 2025-06-14 23:05:05 发布

原创最新推荐文章于 2025-06-14 23:05:05 发布 · 1.5k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#cesium

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

效果

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

前言

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

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

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

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

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

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