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;
  }
});
相关推荐
Jacob0234几秒前
JavaScript 模块系统二十年:混乱、分裂与出路
前端·javascript
qianbo_insist2 分钟前
c++ python 共享内存
开发语言·c++·python
独立开阀者_FwtCoder5 分钟前
Vite Devtools 要发布了!期待
前端·面试·github
独立开阀者_FwtCoder6 分钟前
国外最流行的 UI 组件库!适配 Vue、React、Angular!
前端·vue.js·后端
CodeSheep13 分钟前
小米汽车这薪资是认真的吗?
前端·后端·程序员
今天背单词了吗98016 分钟前
算法学习笔记:8.Bellman-Ford 算法——从原理到实战,涵盖 LeetCode 与考研 408 例题
java·开发语言·后端·算法·最短路径问题
白白李媛媛18 分钟前
上传Vue3+vite+Ts组件到npm官方库保姆级教程
前端·arcgis·npm
CoderPractice22 分钟前
C#控制台小项目-飞行棋
开发语言·c#·小游戏·飞行棋
晴殇i27 分钟前
前端内容保护:如何有效防止用户复制页面内容?
前端·javascript·css
Coding小公仔30 分钟前
LeetCode 151. 反转字符串中的单词
开发语言·c++·算法