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 分钟前
使用python的读取xml文件,简单的处理成元组数组
xml·开发语言·python·测试工具
sunbyte3 分钟前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | GoodCheapFast(Good - Cheap - Fast三选二开关)
前端·javascript·css·vue.js·tailwindcss
前端的日常4 分钟前
网页视频录制新技巧,代码实现超简单!
前端
前端的日常6 分钟前
什么是 TypeScript 中的泛型?请给出一个使用泛型的示例。
前端
ccc101810 分钟前
老师问我localhost和127.0.0.1,有什么区别?
前端
Struggler28117 分钟前
Chrome插件开发
前端
apihz24 分钟前
域名WHOIS信息查询免费API使用指南
android·开发语言·数据库·网络协议·tcp/ip
前端 贾公子29 分钟前
Monorepo + vite 怎么热更新
前端
coding随想38 分钟前
掌控网页的魔法之书:JavaScript DOM的奇幻之旅
开发语言·javascript·ecmascript
爱吃烤鸡翅的酸菜鱼1 小时前
IDEA高效开发:Database Navigator插件安装与核心使用指南
java·开发语言·数据库·编辑器·intellij-idea·database