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

这节课，我们继续啃 Primitive 的材质（Material） 。

上节只用了一个最基础的 'Color' 类型，今天把官方常备的"布料"全部铺开：图片、漫反射、网格、水面......

学会套路后，想换哪件换哪件，全程零着色器。

一、套路三步走

选类型：'Image'、'DiffuseMap'、'Grid'、'Water' ...
填参数：每个类型都有一堆 uniforms，照着文档键值对往里扔。
把材质实例塞给 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 即可。

六、常用材质速查表

类型	关键参数示例	适合场景
Color	color	快速纯色
Image	image, repeat	logo、照片贴图
DiffuseMap	image	PBR 流程的漫反射贴图
Grid	color, lineCount, cellAlpha	地块、棋盘、调试
Water	baseWaterColor, normalMap	海面、湖面、动态水面

七、下节预告

官方布料不够用？

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