大家好,我是日拱一卒的攻城师不浪,致力于技术与艺术的融合。这是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;
}
这个函数的作用主要是想让线段最终渲染成圆形管廊
。
圆角效果
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(备注来意),也欢迎数字孪生可视化领域
的交流合作。