尧图网站建设 尧图网络
  • 首页
  • 关于我们
  • 服务项目
  • 案例展示
  • 建站流程
  • 资讯中心
  • 联系我们
首页/资讯中心/详情

Cesium快速入门16:Primitive多个实体与颜色修改

Cesium快速入门16:Primitive多个实体与颜色修改
📅 发布时间:2026/6/20 19:15:32

上一节课,我们初步认识了 Cesium 的图元(Primitive),当时只放了一个几何体。
其实,一个 Primitive 可以同时塞进多个几何实例(GeometryInstance)。
这样做的好处很明显:

  • 一次合并,一次绘制调用,性能更高;

  • 每个实例还能单独改颜色、显隐,灵活性不减。

今天就把“多实例”和“动态改色”两件事一次讲透。


一、一个图元,多个实例

需求:把“矩形”和“椭球”一起塞进同一个 Primitive,一次搞定。

  1. 先保留上节的矩形实例(instance)。

  2. 再新建一个椭球实例,给它的 radii、位置、颜色都安排上。

  3. 最后把两个实例用数组形式丢进 Primitive。

代码如下,每一步都写了注释,照着抄就能跑。

/* 1. 椭球几何实例:长半轴 5 km,短半轴 5 km,高 10 km */ const ellipsoidInstance = new Cesium.GeometryInstance({ geometry: new Cesium.EllipsoidGeometry({ radii: new Cesium.Cartesian3(5000.0, 5000.0, 10000.0), // 三轴半径 vertexFormat: Cesium.VertexFormat.POSITION_AND_NORMAL // 只要位置和法线,省内存 }), /* 2. 把椭球放到东经 114°、北纬 23.03883°、离地 5 km 的位置 */ modelMatrix: Cesium.Matrix4.multiplyByTranslation( Cesium.Transforms.eastNorthUpToFixedFrame( Cesium.Cartesian3.fromDegrees(114, 23.03883) ), new Cesium.Cartesian3(0.0, 0.0, 5000.0), new Cesium.Matrix4() ), id: 'ellipsoid', // 给实例起个名字,后面改色要用 attributes: { color: Cesium.ColorGeometryInstanceAttribute.fromColor( Cesium.Color.RED) // 初始红色 } }); /* 3. 把两个实例一起塞进同一个图元 */ const rectPrimitive = new Cesium.Primitive({ geometryInstances: [instance, ellipsoidInstance], // 数组形式,想塞几个塞几个 appearance: appearance // 仍用之前的 PerInstanceColorAppearance }); /* 4. 加入场景 */ viewer.scene.primitives.add(rectPrimitive);

刷新页面,你会看到:

  • 绿色矩形——上一节留下的;

  • 红色椭球——刚加的;

  • 它们同属一个 Primitive,却保持各自颜色、各自位置。


二、运行中随时改颜色

想让椭球每 2 秒随机换个颜色?
只要抓住“实例属性”这把钥匙,一行代码就能改,不需要重新创建 Primitive。

套路分两步:

  1. 用getGeometryInstanceAttributes('id')拿到对应实例的属性包;

  2. 直接改属性包里的color,Cesium 下一帧就会自动生效。

/* 每 2 秒给椭球随机换一个半透明颜色 */ setInterval(() => { rectPrimitive .getGeometryInstanceAttributes('ellipsoid') // 通过 id 找到椭球 .color = Cesium.ColorGeometryInstanceAttribute.toValue( Cesium.Color.fromRandom({ alpha: 0.5 }) // 随机颜色,固定 0.5 透明度 ); }, 2000);

注意:

  • 改色只改“属性”,不动“几何”,所以性能开销极小。

  • 如果想改矩形颜色,同理给它也起个 id,再用同样套路即可。


三、小结

  • 一个 Primitive ≈ 一个“合并批次”,里面可放任意数量实例。

  • 实例各自带 id、颜色、矩阵,后期想改就改,灵活又高效。

  • 今天只演示了“改颜色”,其实改显隐、改矩阵、换材质也一样,套路都是“先拿属性包,再改字段”。

把这套组合拳吃透,后面做海量建筑、批量模型、动态高亮,就能既流畅又省事。

相关新闻

  • C语言实现堆排序(附带源码)
  • 后台任务与WebSocket实时应用
  • SQL分析函数`ROW_NUMBER`的兼容性与深度解析

最新新闻

  • 嵌入式GUI多语言支持实战:emWin资源管理与驱动适配详解
  • Django Models 深度解析:从字段设计到迁移执行的工程实践
  • 终极揭秘:如何用FModel轻松解锁游戏资源提取神器
  • B站会员购抢票实战:如何用Python自动化工具突破抢票限制?
  • Gemma 4 12B QAT+MTP小显存部署实战指南
  • 嵌入式GUI图像显示优化:emWin中JPEG/GIF/PNG内存管理与解码实战

日新闻

  • Visual C++运行库修复终极指南:5分钟快速解决Windows软件启动错误
  • 手把手教你构建统计局地区经济数据爬虫:从环境搭建到数据持久化全指南
  • 2026多Agent深度解析:用AI团队替代单一模型,四种架构实战落地

周新闻

  • Visual C++运行库修复终极指南:5分钟快速解决Windows软件启动错误
  • 手把手教你构建统计局地区经济数据爬虫:从环境搭建到数据持久化全指南
  • 2026多Agent深度解析:用AI团队替代单一模型,四种架构实战落地

月新闻

  • 【总结】入门篇:50句话让你记住架构核心概念
  • WeChatMsg技术方案解析:实现Mac微信数据自主管理的完整解决方案
  • WeChatMsg:革新性微信数据备份方案,打造你的专属数字记忆库

关于尧图

  • 公司简介
  • 团队介绍
  • 企业文化
  • 荣誉资质

服务项目

  • 定制开发
  • 电商建站
  • UI 设计
  • 运维服务

快速链接

  • 案例展示
  • 建站流程
  • 常见问题
  • 资讯中心

联系方式

  • 📍北京市朝阳区互联网产业园 A 座 10 层
  • 📞400-888-8888
  • ✉️contact@rkmt.cn
  • 🕐周一至周日 9:00-21:00

© 2024 北京尧图网络科技有限公司 版权所有 | 京 ICP 备 XXXXXXXX 号