083：vue+cesium 动态的水面3D特效

### Vue 和 Cesium 实现管线流动特效的解决方案 在 Vue 和 Cesium 的项目中实现管线流动特效，可以通过结合 `Cesium.CallbackProperty` 和自定义材质来完成。以下是详细的实现方法以及示例代码。 #### 解决方案概述 1. 使用 `Cesium.PolylineGeometry` 创建管线几何结构。 2. 利用 `Cesium.Material` 定义具有纹理偏移效果的材质，用于模拟流体的动态流动。 3. 将材质与几何结构绑定，并通过 `Cesium.Primitive` 或 `Entity` 渲染到场景中。 4. 在 Vue 组件中集成上述逻辑，确保 Cesium 场景能够正常初始化并与 Vue 生命周期协同工作。 --- #### 示例代码 以下是一个完整的 Vue+Cesium 管线流动特效实现： ```javascript <template> <div id="cesiumContainer"></div> </template> <script> import * as Cesium from "cesium"; export default { name: "FlowingPipeline", data() { return { viewer: null, }; }, mounted() { this.initViewer(); this.createFlowingPipeline(); }, methods: { initViewer() { const container = document.getElementById("cesiumContainer"); this.viewer = new Cesium.Viewer(container, { terrainProvider: Cesium.createWorldTerrain(), }); }, createFlowingPipeline() { const positions = [ Cesium.Cartesian3.fromDegrees(-75.0, 40.0), Cesium.Cartesian3.fromDegrees(-80.0, 40.0), Cesium.Cartian3.fromDegrees(-85.0, 40.0), // 注意这里有一个拼写错误，应改为 Cartian -> Cartesian ]; const flowMaterial = new Cesium.Material({ fabric: { type: "Flow", uniforms: { color: new Cesium.Color(0.0, 0.6, 1.0, 0.7), speed: 0.02, }, }, }); const pipelineInstance = new Cesium.GeometryInstance({ geometry: new Cesium.PolylineGeometry({ positions: positions, width: 5.0, }), attributes: { color: Cesium.ColorGeometryInstanceAttribute.fromColor( Cesium.Color.WHITE ), }, }); const primitive = new Cesium.Primitive({ geometryInstances: pipelineInstance, appearance: new Cesium.PerInstanceColorAppearance({ flat: true, translucent: false, }), asynchronous: false, }); this.viewer.scene.primitives.add(primitive); let timeOffset = 0; this.viewer.clock.onTick.addEventListener(() => { timeOffset += 0.01; // 控制流动速度 flowMaterial.uniforms.speed = timeOffset % 1.0; // 循环流动 }); }, }, }; </script> <style scoped> #cesiumContainer { width: 100%; height: 100vh; } </style> ``` --- #### 关键点解析 1. **材质定义** 自定义材质通过 `Cesium.Material` 构建，其中 `fabric.type` 设置为 `"Flow"` 表示流动效果[^1]。`uniforms.color` 定义了管线的颜色属性，而 `speed` 参数控制流动的速度。 2. **几何结构** 使用 `Cesium.PolylineGeometry` 创建管线几何形状，指定其位置数组和宽度参数[^1]。 3. **动态更新** 借助 `this.viewer.clock.onTick` 方法，在每一帧渲染时调整材质中的 `timeOffset` 属性，从而实现流畅的视觉效果[^3]。 4. **Vue 集成** 在 Vue 组件中初始化 Cesium 场景 (`initViewer`) 并调用管线创建函数 (`createFlowingPipeline`)，确保两者生命周期一致[^2]。 --- ###