cesium键盘控制模型

效果:

由于对添加模型和更新位置api进行二次了封装,下面提供思路

1.添加模型

javascript 复制代码
const person = reactive({
  modelTimer: null,
  position: {
    lon: 104.07274,
    lat: 30.57899,
    alt: 1200,
    heading: 0,
    pitch: 0,
    roll: 0,
  },
});  
window.swpcesium.addEntity.addModel({
    id: "model",
    position: person.position,
    config: {
      url: "./model/f18.gltf",
      minSize: 200,
      maxSize: 300,
    },
  });

2.监听键盘事件并更新模型位置

javascript 复制代码
// 添加键盘监听事件
document.addEventListener("keydown", function (e) {
  switch (e.keyCode) {
    // 抬头
    case 38:
      person.position.pitch += 5;
      window.swpecesium.addEntity.transform({
        id: "model",
        position: person.position,
      });
      console.log("抬头");
      break;
    // 低头
    case 40:
      person.position.pitch -= 5;
      window.swpecesium.addEntity.transform({
        id: "model",
        position: person.position,
      });
      console.log("低头");
      break;

    // 左转
    case 37:
      person.position.heading -= 5;
      window.swpecesium.addEntity.transform({
        id: "model",
        position: person.position,
      });
      console.log("左转");
      break;
    // 右转
    case 39:
      person.position.heading += 5;
      window.swpecesium.addEntity.transform({
        id: "model",
        position: person.position,
      });
      console.log("右转");
      break;
    // 顺时针
    case 96: // 0
      person.position.roll += 5;
      window.swpecesium.addEntity.transform({
        id: "model",
        position: person.position,
      });
      console.log("顺时针翻滚");
      break;

    // 逆时针
    case 110:
      person.position.roll -= 5;
      window.swpecesium.addEntity.transform({
        id: "model",
        position: person.position,
      });
      console.log("逆时针翻滚");
      break;

    default:
      break;
  }
});
相关推荐
Vallelonga19 分钟前
Rust 中的数组和数组切片引用
开发语言·rust
Kiri霧20 分钟前
Rust模式匹配详解
开发语言·windows·rust
white-persist1 小时前
Python实例方法与Python类的构造方法全解析
开发语言·前端·python·原型模式
千里马-horse1 小时前
Async++ 源码分析8--partitioner.h
开发语言·c++·async++·partitioner
新中地GIS开发老师2 小时前
Cesium 军事标绘入门:用 Cesium-Plot-JS 快速实现标绘功能
前端·javascript·arcgis·cesium·gis开发·地理信息科学
Superxpang2 小时前
前端性能优化
前端·javascript·vue.js·性能优化
左手吻左脸。2 小时前
解决el-select因为弹出层层级问题,不展示下拉选
javascript·vue.js·elementui
李白的故乡2 小时前
el-tree-select名字
javascript·vue.js·ecmascript
Rysxt_2 小时前
Element Plus 入门教程:从零开始构建 Vue 3 界面
前端·javascript·vue.js
隐含2 小时前
对于el-table中自定义表头中添加el-popover会弹出两个的解决方案,分别针对固定列和非固定列来隐藏最后一个浮框。
前端·javascript·vue.js