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;
  }
});
相关推荐
无敌最俊朗@17 分钟前
SQLite 约束 (Constraints) 面试核心知识点
java·开发语言·jvm
QX_hao32 分钟前
【Go】--接口(interface)
开发语言·后端·golang
yume_sibai1 小时前
TS 常用内置方法
前端·javascript·typescript
新知图书1 小时前
ArkTS语言、基本组成与数据类型
前端·javascript·typescript
西西学代码1 小时前
Flutter---个人信息(1)---实现简单的UI
开发语言·javascript·flutter
superman超哥1 小时前
仓颉语言中正则表达式引擎的深度剖析与实践
开发语言·后端·仓颉
嘗_1 小时前
手写自己的小型react
前端·javascript·react.js
在坚持一下我可没意见1 小时前
Java 网络编程:TCP 与 UDP 的「通信江湖」(基于UDP回显服务器)
java·服务器·开发语言·tcp/ip·udp·java-ee
嘀咕博客1 小时前
h5游戏免费下载:HTML5拉杆子过关小游戏
前端·游戏·html5
Moonbit1 小时前
MoonBit 推出 LLVM Debugger,核心用户数破十万
前端·编程语言·llvm