教程)
动态围墙(简易版) ·dynamicWall Simple· ▶ 在线运行案例案例合集三维可视化功能案例threehub.cn开源仓库github地址https://github.com/z2586300277/three-cesium-examples400个案例代码:网盘链接你将学到什么Scene / Camera / Renderer 标准渲染管线搭建案例完整源码结构与可复用初始化模板效果说明本案例演示动态围墙(简易版)效果创建动态围墙效果。建议先打开文首在线案例查看动态画面再对照下方源码逐步理解。核心概念Viewer聚合 Scene、Camera、Clock 与渲染循环是 Cesium 应用入口。阅读下方完整源码时建议从init/load/animate三条主线入手再深入 shader 与工具函数。实现步骤创建 Viewer配置地形/影像若案例需要并设置初始相机在requestAnimationFrame循环中更新状态并 renderCesium 为viewer.render或自动渲染代码要点import * as Cesium from cesium// 获取Cesium容器元素 const box document.getElementById(box)// 初始化Cesium Viewer const viewer new Cesium.Viewer(box, { // 禁用动画控件左下角仪表 animation: false, // 禁用图层选择器右上角图层选择按钮 baseLayerPicker: false, // 设置基础影像图层为ArcGIS影像服务 baseLayer: Cesium.ImageryLayer.fromProviderAsync(Cesium.ArcGisMapServerImageryProvider.fromUrl(https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer)), // 禁用全屏按钮右下角全屏选择按钮 fullscreenButton: false, // 禁用时间轴控件 timeline: false, // 禁用信息框 infoBox: false, })// 启用地形深度检测使墙体能够贴合地形 viewer.scene.globe.depthTestAgainstTerrain true // 隐藏Cesium Logo viewer._cesiumWidget._creditContainer.style.display none; // 定义围墙的经纬度坐标和高度数据 const positions [ 115.6434, 28.76762, 115.6432, 28.76762, 115.6432, 28.76756, 115.6434, 28.76756, 115.6434, 28.76762, ]// 设置相机视角定位到围墙位置 viewer.camera.setView({ // 相机目标位置经度、纬度、高度 destination: Cesium.Cartesian3.fromDegrees(115.6433, 28.7674, 30), orientation: { // 偏航角朝向正北为0度 heading: Cesium.Math.toRadians(0), // 俯仰角-90度为垂直向下看 pitch: Cesium.Math.toRadians(-45), // 翻滚角0为不翻滚 roll: 0 } }) // 调用函数创建动态围墙 addWalls(positions, 10) /**创建动态围墙效果param {Array } positionLonLat - 围墙顶点的经纬度坐标数组param {number} height - 围墙的高度*/ function addWalls(positionLonLat, height) {// 自定义着色器代码实现动态流动效果 const mySource czm_material czm_getMaterial(czm_materialInput materialInput) { czm_material material czm_getDefaultMaterial(materialInput); vec2 st materialInput.st; // 通过时间变量czm_frameNumber实现动态流动效果 vec4 colorImage texture(image, vec2(fract(st.trep - speedczm_frameNumber0.005), st.trep)); material.alpha colorImage.a * color.a; material.diffuse colorImage.rgb; return material; }// 创建围墙几何体实例 const wallInstance new Cesium.GeometryInstance({ geometry: new Cesium.WallGeometry({ // 将经纬度坐标数组转换为笛卡尔坐标 positions: Cesium.Cartesian3.fromDegreesArray(positionLonLat), // 围墙顶部高度数组所有顶点使用相同的最大高度值 maximumHeights: new Array(positionLonLat.length / 2).fill(height), // 围墙底部高度数组所有顶点使用相同的最小高度值 minimumHeights: new Array(positionLonLat.length / 2).fill(0), }), })// 创建围墙材质外观 const wallAppearance new Cesium.MaterialAppearance({ material: new Cesium.Material({ fabric: { // 材质参数配置 uniforms: { // 围墙颜色设置为橙红色 color: new Cesium.Color.fromCssColorString(rgba(238, 85, 34, 1)), // 流动效果使用的纹理图片路径 image: HOST files/images/colors.png, // 动画流动速度 speed: 3, // 纹理重复次数 rep: 4, }, // 使用自定义着色器代码 source: mySource, }, }), })// 创建围墙图元对象 const primitive new Cesium.Primitive({ // 关联几何体实例 geometryInstances: wallInstance, // 设置外观材质 appearance: wallAppearance, // 保留几何体实例数据以便后续可能的重用 releaseGeometryInstances: false, })// 将围墙添加到场景中 viewer.scene.primitives.add(primitive) }完整源码GitHub小结本文提供动态围墙(简易版)完整 Cesium.js 源码与在线 Demo建议先运行案例再改 uniform/参数做二次实验更多 Cesium.js 实战案例见 three-cesium-examples 合集 与 GitHub 开源仓库
