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

官方给的"布料"不够炫?后面我们教你亲手写着色器,想怎么酷就怎么酷。

相关推荐
做cv的小昊13 小时前
结合代码读3DGS&世界模型论文(3)——3DGS & 世界模型新工作GaussianDream论文及代码解读
3d
用户61595868000221 天前
Cesium 入门系列(四):区域高亮显示的两种实现方案
cesium
用户61595868000221 天前
Cesium 入门(三):BaseLayerPicker 底图切换与国产地图接入
cesium
用户61595868000221 天前
Cesium 入门(二):Geocoder 搜索框参数详解与天地图搜索接入
cesium
lilian2331 天前
HarmonyOS 7 新特性(十三)|3DGS 模型加载、交互与性能回退
3d·交互·harmonyos
Highcharts.js1 天前
Highcharts 渲染方式解析:SVG 默认渲染与 Boost 模块的 WebGL 加速,以及它与其他可视化库的不同
svg·webgl·可视化·canvas·highcharts·渲染方式
DolitD1 天前
云流技术深度剖析:单服务器下如何实现3D应用的多实例并发?
java·服务器·前端·3d·云原生·云计算
Liudef061 天前
腾讯混元Hunyuan3D-Part:重新定义3D部件生成的革命性架构
人工智能·3d·架构·腾讯混元hunyuan3d
学着改变2752 天前
2026电磁流量计选型全维度指南:励磁技术、衬里材质与工况适配深度解析
大数据·人工智能·科技·产品运营·能源·材质
2601_967659892 天前
大学实训室网络仿真环境搭建:Ranplan 3D射线跟踪双版本技术解析
网络·3d