cesium给视角一个飞过去的动画效果,我们可以通过flyTo这个方法来实现飞行动画效果。
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));
}
})
演示地址
当前内容为观看threejs视频课程 Three.js可视化企业实战WEBGL课 课程-相机动画与相机动态交互-学习笔记