Cesium实现相机360度环绕固定点旋转

最新推荐文章于 2024-07-01 09:59:55 发布

dragonrxl

最新推荐文章于 2024-07-01 09:59:55 发布

阅读量2.4k

点赞数 2

分类专栏： cesium webgl web

本文链接：https://blog.csdn.net/dragonrxl/article/details/117111297

版权

web 同时被 3 个专栏收录

12 篇文章 1 订阅

订阅专栏

cesium

4 篇文章 0 订阅

订阅专栏

webgl

4 篇文章 0 订阅

订阅专栏

目前使用cesium开发项目，使用到相机环绕固定点的技术，面对百度编程的习惯，找了下发现别人写的不对，在这里写个简单的案例，其实就是根据时间不断的改变偏航角，位置变化是由lookAt函数自己实现的。为了方便像我一样的懒人，资源链接：https://download.csdn.net/download/dragonrxl/18930399

代码很简单，如下所示：

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Use correct character set. -->
    <meta charset="utf-8" />
    <!-- Tell IE to use the latest, best version. -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
    />
    <title>Hello World!</title>
    <script src="./Build/Cesium/Cesium.js"></script>
    <style>
      @import url(./Build/Cesium/Widgets/widgets.css);
      html,
      body,
      #cesiumContainer {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;
      }
    </style>
  </head>
  <body>
    <div id="cesiumContainer"></div>
    <script>
      var viewer = new Cesium.Viewer("cesiumContainer");
      rotateCamera({lng:116.404125, lat:39.914714, pitch: -35, height: 400});
      // 相机绕点环绕飞行
      function rotateCamera(options){
          var position = Cesium.Cartesian3.fromDegrees(options.lng, options.lat, 0.0);
          // 相机看点的角度，如果大于0那么则是从地底往上看，所以要为负值，这里取-30度
          var pitch = Cesium.Math.toRadians(options.pitch);
          // 给定飞行一周所需时间，比如30s, 那么每秒转动度数
          var angle = 360 / 30;
          // 给定相机距离点多少距离飞行
          var distance = options.height;
          var startTime = Cesium.JulianDate.fromDate(new Date());

          var stopTime = Cesium.JulianDate.addSeconds(startTime, 30, new Cesium.JulianDate());

          viewer.clock.startTime = startTime.clone();  // 开始时间
          viewer.clock.stopTime = stopTime.clone();     // 结速时间
          viewer.clock.currentTime = startTime.clone(); // 当前时间
          viewer.clock.clockRange = Cesium.ClockRange.CLAMPED; // 行为方式
          viewer.clock.clockStep = Cesium.ClockStep.SYSTEM_CLOCK; // 时钟设置为当前系统时间; 忽略所有其他设置。
          // 相机的当前heading
          var initialHeading = viewer.camera.heading;
          var Exection = function TimeExecution() {
              // 当前已经过去的时间，单位s
              var delTime = Cesium.JulianDate.secondsDifference(viewer.clock.currentTime, viewer.clock.startTime);
              // 根据过去的时间，计算偏航角的变化
              var heading = Cesium.Math.toRadians(delTime * angle) + initialHeading;

              viewer.camera.lookAt(position, new Cesium.HeadingPitchRange(heading, pitch, distance));

              if (Cesium.JulianDate.compare(viewer.clock.currentTime, viewer.clock.stopTime) >= 0) {
                  viewer.clock.onTick.removeEventListener(Exection);
              }
          };
          viewer.clock.onTick.addEventListener(Exection);
      }
    </script>
  </body>
</html>