Cesium快速入门21：Primitive材质类型与设置

这节课，我们继续啃Primitive 的材质（Material）。
上节只用了一个最基础的'Color'类型，今天把官方常备的“布料”全部铺开：图片、漫反射、网格、水面……
学会套路后，想换哪件换哪件，全程零着色器。

一、套路三步走

1. 选类型：'Image'、'DiffuseMap'、'Grid'、'Water'…

2. 填参数：每个类型都有一堆 uniforms，照着文档键值对往里扔。

3. 把材质实例塞给 Appearance，再挂到 Primitive 上——收工。

二、贴图材质：把 logo 铺到地球上

/* 1. 图片材质：水平竖直各重复 1 次，整幅图刚好铺满矩形 */ const ImgMaterial = new Cesium.Material.fromType('Image', { image: './imgs/logo.png', repeat: new Cesium.Cartesian2(1, 1) });

要让纹理正常显示，得把顶点格式改成支持 UV 的格式：

• 椭球体 →EllipsoidSurfaceAppearance.VERTEX_FORMAT

• 矩形 → 同样用EllipsoidSurfaceAppearance.VERTEX_FORMAT

/* 椭球体示例 */ new Cesium.EllipsoidGeometry({ radii: new Cesium.Cartesian3(5000, 5000, 10000), vertexFormat: Cesium.EllipsoidSurfaceAppearance.VERTEX_FORMAT }) /* 矩形示例 */ new Cesium.RectangleGeometry({ rectangle: Cesium.Rectangle.fromDegrees(113.3, 23.0, 113.4, 23.2), height: 0, extrudedHeight: 500, vertexFormat: Cesium.EllipsoidSurfaceAppearance.VERTEX_FORMAT })

UV 对不上就会花屏或全白，改完格式立刻正常。
性能小贴士：大批量“贴地”模型尽量用EllipsoidSurfaceAppearance，顶点属性预计算，帧率更稳。

三、漫反射贴图：跟图片材质几乎同名

/* 漫反射贴图，参数更少，只留图片路径即可 */ const diffuseMapMaterial = new Cesium.Material.fromType('DiffuseMap', { image: './imgs/logo.png' });

效果跟Image类似，但内部走的是 PBR 漫反射通道，后面想加高光、法线时更统一。

四、网格材质：自带“豆腐块”线条

const gridMaterial1 = new Cesium.Material.fromType('Grid', { color: Cesium.Color.YELLOW, // 线条颜色 cellAlpha: 0.2, // 格子填充透明度 lineCount: new Cesium.Cartesian2(8, 8), // 横竖各 8 条线 lineThickness: new Cesium.Cartesian2(2.0, 2.0) // 线宽（像素） });

参数一目了然：

• lineCount越大格子越小；

• lineThickness越粗越“黑客帝国”。

五、水面材质：一波三折的动效

const waterMaterial = new Cesium.Material.fromType('Water', { baseWaterColor: Cesium.Color.BLUE.withAlpha(0.5), // 水体基色 specularIntensity: 0.5, // 镜面反射强度 normalMap: './Assets/Textures/waterNormals.jpg' // 法线贴图（Cesium 自带） });

只要路径指到 Cesium 官方资源包的waterNormals.jpg，就能立刻看到：

• 波纹自动滚动；

• 颜色、波速、波纹大小、反射强度都能在参数里调。
  想再“青”一点？改baseWaterColor即可。

六、常用材质速查表

七、下节预告

官方布料不够用？
下节课我们直接上手自定义 Material + Fabric 语法，自己写 uniform、写 shader，让水面闪金光、让地面冒火焰，全程可控。