当前位置: 首页 > news >正文

使用EvoMap/Three.js模拟无人机灯光秀

一、创建地图对象

首先我们需要创建一个EM.Map对象,该对象代表了一个地图实例,并设置id为"map"的文档元素作为地图的容器。

    let map = new EM.Map("map",{zoom:22.14,center:[8.02528, -29.27638, 0],pitch:71.507,roll:2.01,maxPitch:90,skyImages:[ '../public/imgs/night/posx.jpg', '../public/imgs/night/negx.jpg', '../public/imgs/night/posy.jpg','../public/imgs/night/negy.jpg','../public/imgs/night/negz.jpg','../public/imgs/night/posz.jpg']})map.setLightIntensity(0.1);

在地图的构造参数中,可以使用一系列选项来配置地图的初始状态。其中包括:

  • zoom:设置地图的缩放级别为22.14,这决定了地图的显示比例尺。
  • center:设置地图的中心点坐标为[8.02528, -29.27638, 0],这是一个三维坐标值,表示地图的中心点位置。
  • pitch:设置地图的俯视角度为71.507度,表示地图在垂直方向上的倾斜角度。
  • roll:设置地图的方位角,表示地图围绕Y轴正方向的旋转角度。
  • maxPitch:设置地图的最大俯视角度为90度,限制了地图在垂直方向上的最大倾斜程度。
  • skyImages:设置地图的天空图片,使用了一组图片路径来指定天空的上、下、前、后、左、右六个方向的图片。

接下来的代码调用了 map.setLightIntensity(0.1) 方法,用于设置地图的光照强度设置为默认值的0.1,以降低地图中的光照效果。

二、加载场景

EM.model.Model 是一个用于加载和渲染 3D 模型的类,可以通过传入 URL 参数来加载不同的模型文件,并通过设置坐标、旋转和缩放等参数来放置到地图上。在代码中,我们使用 EM.model.Model 加载了 pudong 模型,并将其添加到了地图上,用于展示具体的建筑物。

    let pudong = new EM.model.Model({url:"../public/model/shanghai/pudong.gltf",coordinate:[0,0,3.7],rotate:[90,35,0],scale:[10,10,10]})map.addModel(pudong);pudong.on("loaded",function(){let loadingBar = document.getElementsByClassName("loadingBar")[0];loadingBar.parentNode.removeChild(loadingBar);});

EM.mesh.Water 是一个用于创建水面效果的类,可以通过指定位置、宽度和高度等参数来创建一个水面,具有类似于真实水面的波动效果。在这里,我们创建了一个 EM.mesh.Water 对象,并设置其位置和大小,以在地图上显示出水面的效果。

    let water = new EM.mesh.Water({position:[0,0,0],width:100,height:100})map.addMesh(water);

EM.effect.Bloom 是一个用于创建全屏泛光特效的类。该特效可以通过设置不同的参数,来控制高光的强度、半径和阈值等属性,从而创建出逼真的光影效果。在这里,我们创建了一个 EM.effect.Bloom 对象,并将其添加到地图中,以提升整个场景的视觉效果。

    let bloom = new EM.effect.Bloom({strength:1.5,radius:1.2,threshold:0.1});map.addEffect(bloom);

三、加载无人机灯光秀模拟数据

3.1.准备数据

我们需要提前需要提前编排无人机轨迹和颜色数据,让无人机按照既定的轨迹和亮度运行,以下是一条模拟数据。

{
"speed":0.5,
"color":["#f00", "#33f"],
"coordinates":[[2.6268,-30.9000,3.6048],[0.6030,-30.9000,3.1729]
]
}

这是一组具有速度、颜色和坐标的无人机灯光秀模拟数据,上图的示例数据表示该无人机点位以0.5m/s的速度,位置由[2.6268,-30.9000,3.6048]变化到[0.6030,-30.9000,3.1729],颜色由"#f00"变化到"#33f"。

3.2 添加数据到地图

数据准备完成后,我们可以使用 EM.marker.DynamicPoints类将数据添加到地图中。EM.marker.DynamicPoints 是一个表示动态点图层的类。使用这个类可以快速创建一个具有动态效果的点图层,可用于展示飞机轨迹、交通流量等动态信息。

let points = new EM.marker.DynamicPoints({datas:datas,globalTimeInterval:true,loop:false,pointSize:10,blending:"additive"});map.addObject(points);

以下是EM.marker.DynamicPoints每个参数的作用:

a. datas:数据源,用于对接3.1步骤中准备 的数据。

b. globalTimeInterval:全局时间间隔,用于指定动态点的更新速率。如果设置为 true,则所有动态点将以相同的速率更新;否则可以设置每个点的更新速率。

c. loop:循环播放,用于指定动态点是否循环播放。

d. pointSize:点的大小,用于指定每个动态点的大小。

e. blending:混合模式,用于指定动态点的颜色混合模式,可以是 additive(加法混合)或 normal(正常混合)。

四、在线预览

在线预览地址icon-default.png?t=N7T8http://111.231.31.134/evomap/demo/cases/uavShow.html

 

http://www.lryc.cn/news/224218.html

相关文章:

  • 11.9存储器实验总结(单ram,双ram,FIFO)
  • linux(ubuntu)安装并使用scrcpy
  • linux rsyslog安装配置
  • 美国Embarcadero公司正式发布2023 RAD Studio Delphi C++ Builder 12 Athens
  • 树莓派4B的测试记录(CPU、FFMPEG)
  • 物联网AI MicroPython学习之语法 二进制与ASCII转换
  • 学之思项目的搭建部署 打jar包失败的解决方法
  • [100天算法】-定长子串中元音的最大数目(day 67)
  • Elastic Observability 8.11:ES|QL、APM 中的通用分析和增强的 SLOs
  • TexGen简单模型对应inp文件简单梳理-2
  • VUE获取当前日期的周日和周六
  • K8S篇之k8s containerd模式fail to pull image certificate signed by unknown authority
  • 算法进阶指南图论 最优贸易
  • 【Android】Debug时禁用主线程ANR限制
  • P6入门:项目初始化1-项目详情介绍
  • 进行 “最佳价格查询器” 的开发
  • Brain Teaser概率类 - 三局两胜制
  • 在现实生活中传感器GV-H130/GV-21的使用
  • 海康Visionmaster-全局脚本:通过通讯触发快速匹配 模块换型的方法
  • 什么是闭包
  • sql6(Leetcode1387使用唯一标识码替换员工ID)
  • qt-C++笔记之Qt中的时间与定时器
  • 【C++】复杂的多继承及其缺陷(菱形继承)
  • esp32-rust-no_std-examples-blinky
  • GitHub上的开源工业软件
  • Centos7安装配置中文输入法
  • 【OJ比赛日历】快周末了,不来一场比赛吗? #11.11-11.17 #12场
  • 提取当前文件夹下多文件夹中的数据
  • 深度学习(生成式模型)——Classifier Free Guidance Diffusion
  • C语言 每日一题 11.9 day15