news 2026/5/1 9:13:02

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

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
Cesium快速入门16:Primitive多个实体与颜色修改

上一节课,我们初步认识了 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、颜色、矩阵,后期想改就改,灵活又高效。

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

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

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/4/24 13:13:44

25、Linux Mint系统升级与MATE版本使用指南

Linux Mint系统升级与MATE版本使用指南 1. Linux Mint版本选择与升级考量 在商业和企业环境中,建议使用支持5年的LTS版本。系统管理员若所在公司采用Linux Mint系统,使用非LTS版本会带来大量不必要的工作,因为版本过时后需要大规模重新安装。LTS版本适用于需要稳定且持久运…

作者头像 李华
网站建设 2026/5/1 7:24:28

Cesium快速入门18:Entity材质设置

前面的课程里,我们先后讲了 Entity(实体)和 Primitive(图元)这两种“物体”。 它们都能贴材质,只不过用法有简有繁。 今天先集中火力把 Entity 的材质系统 撸一遍,看看 Cesium 到底给我们备好了…

作者头像 李华
网站建设 2026/5/1 9:07:21

《安卓逆向这档事》demo2----正己大佬

demo2 第二关 文本定位 首先,观察界面,查看文字,任务要求是获取硬币并一键三连。主要的两个分别是 获取硬币​ 和 一键三连​,回到 MT 管理器,搜索(PS:MT 管理器如何提取安装包定位位置就不细…

作者头像 李华
网站建设 2026/5/1 9:07:17

SolidWorks特征工具设计思维介绍

SolidWorks 的特征工具是其参数化建模的核心,其设计思维深度融合了参数化设计理念、工程实践需求和用户操作直觉。理解特征工具的本质,需要从“特征是什么”“为何这样设计”“如何高效使用”三个维度展开,最终掌握“用特征表达设计意图”的能…

作者头像 李华
网站建设 2026/4/30 21:20:41

SolidWorks异形孔的类型介绍

一、核心理解:“异形孔向导”是什么它不是一个简单的“画孔”工具,而是一个基于标准的参数化特征生成器。其核心价值在于:标准化:内置了ISO、GB(国标)、ANSI、DIN、JIS等多种主流标准,确保设计的…

作者头像 李华
网站建设 2026/5/1 8:25:34

Python asyncio:解锁异步编程的魔法钥匙

一、引言:异步编程的奇妙世界在传统的同步编程中,程序就像一个按部就班的执行者,会顺序执行每一行代码,在遇到 I/O 操作(如文件读写、网络请求等)时,会老老实实等待该操作完成,才会继…

作者头像 李华