cesium让相机飞到某个位置动态控制相机

CesiumJs yekong

cesium给视角一个飞过去的动画效果,我们可以通过flyTo这个方法来实现飞行动画效果。

cesium让相机飞到某个位置

cesium让相机飞到某个位置

viewer.camera.flyTo({
    // 指定相机的位置
    destination: cartesian3,
    orientation: {
      // 指定相机的朝向
      heading: Cesium.Math.toRadians(0),
      // 控制相机的俯仰角
      pitch: Cesium.Math.toRadians(-90),
      // 指定相机的滚转角
      roll: 0
    }
  })

通过按键移动相机

document.addEventListener("keydown", (e) => {
    var height = viewer.camera.positionCartographic.height;
    var moveRate = height / 100
    if (e.key == 'w') {
      // 设置相机向前移动
      viewer.camera.moveForward(moveRate)
    } else if (e.key == 's') {
      // 设置相机向后移动
      viewer.camera.moveBackward(moveRate);
    } else if (e.key == 'a') {
      // 设置相机向左移动
      viewer.camera.moveLeft(moveRate);
    } else if (e.key == 'd') {
      // 设置相机向右移动
      viewer.camera.moveRight(moveRate);
    } else if (e.key == 'q') {
      // 设置相机向左旋转
      viewer.camera.lookLeft(Cesium.Math.toRadians(0.1));
    } else if (e.key == 'e') {
      // 设置相机向右旋转
      viewer.camera.lookRight(Cesium.Math.toRadians(0.1));
    } else if (e.key == 'r') {
      // 设置相机向上旋转
      viewer.camera.lookUp(Cesium.Math.toRadians(0.1));
    }else if (e.key == 'f') {
      // 设置相机向下旋转
      viewer.camera.lookDown(Cesium.Math.toRadians(0.1));
    }else if (e.key == 'g') {
      // 设置相机逆时针翻滚
      viewer.camera.twistLeft(Cesium.Math.toRadians(0.1));
    }else if (e.key == 'h') {
      // 设置相机逆时针翻滚
      viewer.camera.twistRight(Cesium.Math.toRadians(0.1));
    }
  })

演示地址

演示地址:cesium让相机飞到某个位置动态控制相机

当前内容为观看threejs视频课程 Three.js可视化企业实战WEBGL课 课程-相机动画与相机动态交互-学习笔记

笔记汇总

Cesium学习笔记汇总

喜欢