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;
  }
});
相关推荐
周胡杰1 分钟前
鸿蒙arkts使用关系型数据库,使用DB Browser for SQLite连接和查看数据库数据?使用TaskPool进行频繁数据库操作
前端·数据库·华为·harmonyos·鸿蒙·鸿蒙系统
31535669132 分钟前
ClipReader:一个剪贴板英语单词阅读器
前端·后端
玲小珑4 分钟前
Next.js 教程系列(十一)数据缓存策略与 Next.js 运行时
前端·next.js
qiyue7719 分钟前
AI编程专栏(三)- 实战无手写代码,Monorepo结构框架开发
前端·ai编程
纨妙22 分钟前
python打卡day59
开发语言·python
轻语呢喃23 分钟前
React智能前端:从零开始的识图学单词项目(一)
javascript·react.js·aigc
断竿散人23 分钟前
JavaScript 异常捕获完全指南(下):前端框架与生产监控实战
前端·javascript·前端框架
Danny_FD25 分钟前
Vue2 + Vuex 实现页面跳转时的状态监听与处理
前端
小飞悟25 分钟前
别再只会用 px 了!移动端适配必须掌握的 CSS 单位
前端·css·设计
安思派Anspire26 分钟前
LangGraph + MCP + Ollama:构建强大代理 AI 的关键(一)
前端·深度学习·架构