news 2026/6/23 21:13:13

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

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
Cesium快速入门18:Entity材质设置

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


一、Entity 材质入口:material 属性

以矩形为例,只要在配置项里写一行material: ...就能换皮肤。
既可以直给颜色,也能塞一个正式的 MaterialProperty 对象。

rectangle: { coordinates: Cesium.Rectangle.fromDegrees(...), material: Cesium.Color.RED.withAlpha(0.5) // 直接写颜色,底层会自动包成 ColorMaterialProperty }

二、MaterialProperty 是什么?

MaterialProperty是所有材质属性的“老祖宗”,一个抽象基类,不能直接 new
它只规定派生类必须实现哪些方法和属性。
我们真正用的是它的那群“子子孙孙”——
名字统一以***MaterialProperty结尾,随手一搜就能找到。


三、官方常备“布料”清单

下面 4 种最常用,无需自己写着色器,直接配参数即可。

  • 纯色布料(ColorMaterialProperty)

    和直接写颜色等效,写不写都行。

const material = new Cesium.ColorMaterialProperty( Cesium.Color.RED.withAlpha(0.5) );
  • 棋盘格(CheckerboardMaterialProperty)

    黑白格子,可改颜色、可改密度。

const material = new Cesium.CheckerboardMaterialProperty({ evenColor: Cesium.Color.WHITE, // 偶数格 oddColor: Cesium.Color.BLACK, // 奇数格 repeat: new Cesium.Cartesian2(4, 4) // 横向、纵向各重复 4 次 });
  • 条纹布(StripeMaterialProperty)

    横条 or 竖条,随你挑。

const stripMaterial = new Cesium.StripeMaterialProperty({ evenColor: Cesium.Color.WHITE, oddColor: Cesium.Color.BLACK, repeat: 32, // 条纹数量 offset: 0.0, // 起始偏移 orientation: Cesium.StripeOrientation.HORIZONTAL // 或 VERTICAL });
  • 网格布(GridMaterialProperty)

    把面切成“豆腐块”,适合画地块、棋盘。

const gridMaterial = new Cesium.GridMaterialProperty({ color: Cesium.Color.YELLOW, // 网格线颜色 cellAlpha: 0.2, // 格子填充透明度 lineCount: new Cesium.Cartesian2(8, 8), // 横、竖各 8 条线 lineThickness: new Cesium.Cartesian2(2.0, 2.0) // 线宽(像素) });

四、把布料穿到矩形上

无论哪种材质,最后都交给material字段即可。

const redRectangle = viewer.entities.add({ name: "Red translucent rectangle", rectangle: { coordinates: Cesium.Rectangle.fromDegrees(114.0, 23.4, 114.4, 23.6), extrudedHeight: 30000.0, // 挤出高度,单位米 material: material, // 上面任意一种材质 }, });

小结一句话

Entity 换皮肤 = 找***MaterialProperty→ 配参数 → 扔给material
官方给的“布料”不够炫?后面我们教你亲手写着色器,想怎么酷就怎么酷。

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

第十章 for循环

1.数学平均成绩 输入 第一行1个整数n,代表学生数量 第二行n个整数,代表每个同学的成绩 输出 成绩平均值样例 输入复制 3 90 100 90 输出复制 932.英语优等生 输入 第一行1个整数n,代表学生数量 第二行n个整数,代表每个同学的成绩 …

作者头像 李华
网站建设 2026/6/23 21:28:35

WebRTC 是什么?能做什么?(概览篇)

WebRTC 是什么?能做什么?(概览篇) 本文是 WebRTC 系列专栏的第一篇,旨在帮助读者建立对 WebRTC 的整体认知,了解其发展历程、核心能力、主要组件以及优势与局限。 目录 WebRTC 的发展历史WebRTC 能解决什么…

作者头像 李华
网站建设 2026/6/23 21:28:11

Dubbo学习(三):深入 Remoting

深入 Remoting:Dubbo 的“搬运工” —— 网络通信与线程模型 请关注公众号【碳硅化合物AI】 摘要 如果说 RPC 是 Dubbo 的大脑,那么 Remoting 就是 Dubbo 的四肢。它负责把 RPC 层生成的调用请求(Invocation)变成二进制流&…

作者头像 李华
网站建设 2026/6/23 17:51:27

AI设计新突破:QWEN溶图LoRA模型助力品牌视觉创作升级

AI设计新突破:QWEN溶图LoRA模型助力品牌视觉创作升级 【免费下载链接】Fusion_lora 项目地址: https://ai.gitcode.com/hf_mirrors/dx8152/Fusion_lora 在人工智能技术迅猛发展的当下,AI绘图领域正经历着前所未有的变革。各类创新模型层出不穷&a…

作者头像 李华
网站建设 2026/6/23 17:47:38

突破实时视频生成瓶颈:Krea Realtime 14B模型革新文本到视频技术

突破实时视频生成瓶颈:Krea Realtime 14B模型革新文本到视频技术 【免费下载链接】krea-realtime-video 项目地址: https://ai.gitcode.com/hf_mirrors/krea/krea-realtime-video 在人工智能驱动的内容创作领域,文本到视频生成技术正经历着从实验…

作者头像 李华
网站建设 2026/6/23 1:36:36

【项目实战】Vercel 是一个让你的网站“瞬间上线”的云平台。Vercel 现在确实是技术圈的“当红炸子鸡”,尤其是在个人博客和前端开发领域。

Vercel 现在确实是技术圈的“当红炸子鸡”,尤其是在个人博客和前端开发领域。简单来说,Vercel 是一个让你的网站“瞬间上线”的云平台。 传统的服务器 (阿里云/腾讯云) 就像是给你一块生肉和一套厨具。你想吃牛排,得自己切、自己腌、自己煎,还要负责洗碗(运维、配置环境、…

作者头像 李华