经纬志
首页 / Cesium / 使用示例

立方体建筑群

九个立方体摆成一片楼群,尺寸、颜色、棱线各不相同,用来观察 dimensions 与 position 高度之间的关系。

CesiumJS 1.121 · 更新 2026-10-28
源码与运行效果
运行效果

尺寸与落点

box.dimensions 给的是完整的长宽高,不是半长。立方体的中心 与 position 重合,所以想让底面落在地面,高度要写成总高的一半。 示例里每栋楼的高度取自数组,position 直接用它除以二。

位置用 Cesium.Cartesian3.fromDegrees 给出,第三个参数就是离地高度。 省略时默认为 0,立方体中心会正好卡在地表,看起来像被埋了一半。

棱线怎么来

outline: true 会额外绘制十二条棱,颜色由 outlineColor 决定。 棱线和面是两套绘制,给面加透明度不会让棱线一起变淡, 因此半透明楼体配浅色棱线的组合读起来更清楚。

可调参数

位置改什么效果
BUILDINGS 数组增删行或改数值楼群布局与高度
material去掉 withAlpha楼体变成不透明
outlineWidth调到 3棱线更粗,部分平台会忽略该值
地面参考板的 dimensions缩小到 1200 × 900底板不再包住整个楼群

数量上去之后换写法。几十个立方体用 Entity 没有问题, 上千个时建议改成 Primitive 加 GeometryInstance 批量提交, 每个实例只带一个颜色属性,绘制调用会少很多。