cesium键盘控制模型

最新推荐文章于 2024-04-01 15:15:41 发布

m0_63701303

最新推荐文章于 2024-04-01 15:15:41 发布

阅读量717

点赞数 9

分类专栏： cesium 文章标签：前端 javascript 开发语言

本文链接：https://blog.youkuaiyun.com/m0_63701303/article/details/135403984

版权

文章介绍了如何在React中封装Cesium库，实现实体模型（如F18.gltf）的动态添加，并通过监听键盘事件控制模型的位置（包括位置、旋转）。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果：

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

1.添加模型

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.监听键盘事件并更新模型位置

// 添加键盘监听事件
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(