cesium实现上下移动的光锥动画

上一节我们学习了:cesium编写着色器实现滚动光环特效今天我们要学习的是cesium实现上下移动的光锥动画。

动态效果

引入glb文件

import pyramid from '../model/pyramid.glb';

添加模型

// 添加模型到场景中
this.model = viewer.scene.primitives.add(
  // 使用Cesium.Model.fromGltf方法创建新的模型实例
  new Cesium.Model.fromGltf({
    url: pyramid, // 模型的GLTF文件路径
    show: true, // 是否显示模型
    // 设置模型的缩放比例
    scale: 200,
    minimumPixelSize: 12, // 最小像素尺寸，用于屏幕空间大小剪裁
    maximumScale: 20000, // 最大缩放比例
    debugShowBoundingVolume: false, // 是否显示模型的包围体积，用于调试
    debugWireframe: false, // 是否以线框模式显示模型，用于调试
    color: Cesium.Color.YELLOW.withAlpha(0.5), // 模型的初始颜色和透明度
    // 设置颜色的混合模式
    colorBlendMode: Cesium.ColorBlendMode.MIX,
    // 设置模型的位置矩阵
    modelMatrix: this.modelMatrix,
  })
);

设置模型坐标

//   设置模型位置矩阵
this.modelMatrix = Cesium.Transforms.headingPitchRollToFixedFrame(
  // 位置
  Cesium.Cartesian3.fromDegrees(113.3191, 23.109, this.params.height),
  // 模型旋转情况
  new Cesium.HeadingPitchRoll(this.params.degress, 0, 0)
);

使用gsap补间插件添加动画

// 定义一个名为animate的函数
animate() {
  // 使用gsap库创建一个动画
  gsap.to(this.params, {
    height: 800, // 目标高度
    degress: Math.PI, // 目标角度，以弧度为单位
    yoyo: true, // 动画完成后是否需要返回到初始状态
    repeat: -1, // 重复次数，-1表示无限重复
    duration: 1, // 动画持续时间，以秒为单位
    ease: "power1.inOut", // 缓动函数
    // 每次动画更新时执行的回调函数
    onUpdate: () => {
      // 更新模型的位置矩阵
      this.model.modelMatrix = Cesium.Transforms.headingPitchRollToFixedFrame(
        // 设置模型的新位置（经度、纬度、高度）
        Cesium.Cartesian3.fromDegrees(113.3191, 23.109, this.params.height),
        // 设置模型的新旋转（偏航角、俯仰角、翻滚角）
        new Cesium.HeadingPitchRoll(this.params.degress, 0, 0)
      );
    },
  });
}

实例演示地址

cesium实现上下移动的光锥动画

当前内容为观看threejs视频 Three.js可视化企业实战WEBGL课课程-cesium实现上下移动的光锥动画-实践的学习笔记

当前学习笔记实例代码下载

代码运行环境：vue3 + vite + js nodejs 14