保姆级教程：用Cesium 1.91实现5个酷炫3D地图特效（含动态墙、雷达扫描、粒子系统）

Cesium 1.91视觉特效实战：5个让3D地图脱颖而出的高级技巧

在数字孪生和三维可视化领域，Cesium已成为WebGL地图开发的标杆工具。但大多数教程止步于基础功能实现，鲜少深入探讨如何通过视觉特效提升项目质感。本文将打破这一局限，通过五个具有视觉冲击力的特效案例，展示如何用Cesium 1.91打造专业级三维场景。这些技巧来自真实项目经验，每个效果都经过性能优化测试，可直接应用于智慧城市、应急指挥等对视觉效果要求严苛的场景。

1. 动态立体墙：建筑边界的光影魔术

动态立体墙效果常被用于突出显示重点区域边界。传统实现方式往往只做简单高度拉伸，缺乏细节表现力。以下方案通过材质动画和光照响应，创造出更具层次感的视觉效果：

// 创建动态墙实体 const wallEntity = viewer.entities.add({ wall: { positions: Cesium.Cartesian3.fromDegreesArray([ 116.3, 39.9, 116.31, 39.91, 116.305, 39.915 ]), maximumHeight: 500, minimumHeight: 0, material: new Cesium.StripeMaterialProperty({ evenColor: Cesium.Color.WHITE.withAlpha(0.7), oddColor: Cesium.Color.BLUE.withAlpha(0.3), repeat: 10, offset: new Cesium.CallbackProperty(function(time, result) { return time.secondsOfDay * 0.0005; }, false) }) } });

关键参数调优指南：

提示：使用CallbackProperty实现动态效果时，避免在回调函数中进行复杂计算，否则会导致性能下降。建议预先计算好参数变化曲线。

进阶技巧是为墙面添加边缘发光效果，这需要组合使用后处理管道：

const bloom = viewer.scene.postProcessStages.bloom; bloom.enabled = true; bloom.uniforms = { glowOnly: false, contrast: 128, brightness: -0.3, delta: 1.0, sigma: 3.78, stepSize: 5.0 };

2. 雷达扫描：军事级态势感知效果

雷达扫描效果在安防监控、气象预警等场景中具有重要应用价值。传统实现方式多采用平面圆形扫描，我们将其升级为带地形跟随的三维立体扫描：

// 创建雷达扫描材质 const radarMaterial = new Cesium.Material({ fabric: { type: 'RadarScan', uniforms: { color: new Cesium.Color(0.0, 1.0, 0.0, 1.0), speed: 5.0, center: new Cesium.Cartesian2(0.5, 0.5), radius: 0.3, width: 0.05 }, source: ` uniform vec4 color; uniform float speed; uniform vec2 center; uniform float radius; uniform float width; czm_material czm_getMaterial(czm_materialInput materialInput) { czm_material material = czm_getDefaultMaterial(materialInput); vec2 st = materialInput.st; float time = czm_frameNumber * speed / 1000.0; float dis = distance(st, center); float diff = abs(dis - radius); float ratio = 1.0 - fract(time); float angle = atan(st.y - center.y, st.x - center.x); float normalizedAngle = (angle + 3.1415926) / 6.2831852; float show = step(normalizedAngle, ratio) * step(ratio - 0.1, normalizedAngle); show *= 1.0 - step(width, diff); material.alpha = show * color.a; material.diffuse = color.rgb; return material; } ` } }); // 应用到椭圆实体 const radarEllipse = viewer.entities.add({ position: Cesium.Cartesian3.fromDegrees(116.39, 39.91), ellipse: { semiMinorAxis: 2000.0, semiMajorAxis: 3000.0, material: radarMaterial, height: 0, extrudedHeight: 500, stRotation: Cesium.Math.toRadians(45) } });

实现要点解析：

• 通过GLSL着色器实现高性能扫描动画
• czm_frameNumber驱动时间动画，避免直接依赖系统时间
• 调整semiMinorAxis和semiMajorAxis可控制扫描区域形状
• stRotation参数让扫描区域与地形走向保持一致

性能优化对比：

3. 粒子系统：打造逼真环境特效

Cesium的粒子系统常被低估，其实通过合理配置可以模拟多种自然现象。以下以火焰效果为例，展示如何突破基础烟尘效果：

const particleSystem = viewer.scene.primitives.add( new Cesium.ParticleSystem({ image: getFireParticleImage(), // 自定义粒子纹理 startColor: Cesium.Color.ORANGE.withAlpha(0.7), endColor: Cesium.Color.RED.withAlpha(0.0), startScale: 1.0, endScale: 3.0, minimumParticleLife: 1.0, maximumParticleLife: 3.0, minimumSpeed: 1.0, maximumSpeed: 3.0, imageSize: new Cesium.Cartesian2(25, 25), emissionRate: 30.0, lifetime: 16.0, emitter: new Cesium.CircleEmitter(5.0), emitterModelMatrix: computeEmitterModelMatrix(), updateCallback: applyPhysics }) ); function getFireParticleImage() { const canvas = document.createElement('canvas'); canvas.width = 20; canvas.height = 20; const context = canvas.getContext('2d'); // 绘制渐变粒子纹理... return canvas; } function computeEmitterModelMatrix() { const position = Cesium.Cartesian3.fromDegrees(116.4, 39.9); const modelMatrix = Cesium.Matrix4.fromTranslation(position); // 添加旋转变换... return modelMatrix; } function applyPhysics(particle, dt) { // 实现物理模拟：重力、湍流等 particle.velocity = Cesium.Cartesian3.add( particle.velocity, new Cesium.Cartesian3(0.0, 0.0, dt * 2.0), // 上升力 particle.velocity ); // 添加随机扰动... }

粒子效果组合方案：

1. 火灾模拟：

   • 基础火焰（如上代码）
   • 叠加烟雾粒子系统
   • 添加热浪后处理效果

2. 雨雪天气：

   • 快速下落的小粒子模拟雨滴
   • 缓慢飘落的大粒子模拟雪花
   • 地面湿润/积雪材质变化

3. 爆炸效果：

   • 初始高发射率短时爆发
   • 冲击波环扩散
   • 残留烟雾持续上升

注意：粒子数量超过2000个时，建议启用scene.farToNearRatio优化深度排序，避免粒子闪烁问题。

4. 昼夜交替：不只是简单的光照变化

真实的昼夜过渡需要考虑大气散射、人工光源渐显等细节。以下实现方案远超基础的光照开关：

// 配置动态日光 viewer.clock.onTick.addEventListener(function() { const date = viewer.clock.currentTime; const isDay = isDaytime(date); // 动态调整光照强度 viewer.scene.light = new Cesium.DirectionalLight({ direction: Cesium.Cartesian3.fromDegrees( isDay ? -90 : 90, isDay ? 30 : -10 ), intensity: isDay ? 2.0 : 0.1 }); // 调整大气效果 viewer.scene.skyAtmosphere.hueShift = isDay ? 0.0 : -0.8; viewer.scene.skyAtmosphere.saturationShift = isDay ? 0.0 : -0.7; viewer.scene.skyAtmosphere.brightnessShift = isDay ? 0.0 : -0.3; // 控制城市灯光 setBuildingLights(!isDay); }); // 建筑物灯光控制函数 function setBuildingLights(show) { const tileset = viewer.scene.primitives.get(0); if (tileset && tileset.is3DTiles) { tileset.style = new Cesium.Cesium3DTileStyle({ color: { conditions: [ ["${showLight} === true", "color('#FFD700', 0.8)"], ["true", "color('#FFFFFF', 0.2)"] ] }, showLight: show }); } }

昼夜效果增强技巧：

• 曙光过渡：在日出日落前后30分钟，逐渐调整大气参数
• 月光模拟：夜间添加微弱的蓝色方向光
• 动态云层：根据时间调整云层密度和移动速度
• 车流光线：夜间显示道路上的动态车灯轨迹

实现逼真昼夜效果的关键是避免突然变化，所有参数都应通过缓动函数平滑过渡：

function smoothTransition(startVal, endVal, duration, currentTime) { const t = Math.min(currentTime / duration, 1.0); // 使用三次贝塞尔曲线缓动 return startVal + (endVal - startVal) * (t * t * (3 - 2 * t)); }

5. 流动水面：水文可视化专业方案

水利、海洋等行业应用需要展示水流的动态效果。以下实现方案支持流速、流向可视化：

// 创建动态水面材质 const waterMaterial = new Cesium.Material({ fabric: { type: 'Water', uniforms: { baseWaterColor: new Cesium.Color(0.2, 0.3, 0.6, 1.0), blendColor: new Cesium.Color(0.0, 0.1, 0.4, 1.0), normalMap: 'assets/waterNormals.jpg', frequency: 1000.0, animationSpeed: 0.05, amplitude: 5.0, specularIntensity: 0.8, flowDirection: new Cesium.Cartesian2(1.0, 0.0) } } }); // 应用到大面积水面 const waterSurface = viewer.entities.add({ polygon: { hierarchy: Cesium.Cartesian3.fromDegreesArray([ 116.2, 39.8, 116.3, 39.8, 116.25, 39.9 ]), material: waterMaterial, height: 50, extrudedHeight: 45, perPositionHeight: true } });

高级水面效果参数矩阵：

水面效果的真实性很大程度上取决于法线贴图的选择。推荐使用2048x2048的无缝衔接法线贴图，并配合以下着色器修改增强细节：

vec3 normal = texture2D(normalMap, fract(v_textureCoordinates * frequency)).xyz; normal = normalize(normal * 2.0 - 1.0); normal = mix(vec3(0.0, 0.0, 1.0), normal, 0.8); // 控制法线强度

在移动端等性能受限环境，可以通过降低frequency值和简化着色器计算来优化渲染效率。一个实用的技巧是根据相机距离动态调整水面细节级别：

viewer.scene.preUpdate.addEventListener(function() { const distance = Cesium.Cartesian3.distance( viewer.camera.position, waterSurface.position ); const lodFactor = Math.min(distance / 1000, 1.0); waterMaterial.uniforms.frequency = 1000 * lodFactor; });