使用three.js/webgl开发智慧城市场景的一些总结

最近在做自己的地图引擎，基于three.js，站在巨人的肩膀上，稍等补充地址出来，大家有兴趣的可以体验一下，在线地址。
城市场景、小场景，我觉得是未来三维可视化的重点方向，市场上基于three.js的三维引擎也不少，比如蜂鸟云地图、thing.js、木棉树，本篇博客主要介绍一些基本场景的实现方式，目的是让初学者只使用three.js也能轻松构建简易的城市场景。
一、城市建筑
城市建筑是城市场景中不可缺少的部分，城市建筑因为其海量性的特点，因此只能批量生成。我们需要先获取城市的建筑面数据，即底部为任意多边形，包含高度属性的面数据，大部分的做法是面数据保存于geojson（地理格式的json）中，然后前端进行解析。
我们根据基础面数据和高度，构建底部面、侧面以及顶部面，并使用earcut将底面、侧面、顶面切成一个个绘制需要的三角形的顶点和索引的组合，关于方法，我此前已经做过介绍，需要补充的是城市建筑常会进行贴图展示，所以我们计算三角面的时候需要对三角面的纹理坐标uv（用于映射贴图到多边形中的位置）进行计算，最终赋值到Geometry的faceVertexUvs[0]中。

var geometry = new THREE.Geometry();
geometry.vertices = vertices;
geometry.faces = faces;
geometry.faceVertexUvs[0] = uvs;

随着mesh越来越多，场景中每帧的绘制次数也越来越多，为了减少绘制的次数，提高性能，我们需要将mesh进行合并，THREE.Geometry中提供了merge方法给我们使用，如果是THREE.BufferGeometry，我们可以直接将绘制数据进行合并。

二、浮动标注
关于浮动标注的实现方式，这里有两种，分别说一下优劣点。
1.以THREE.Sprite类创建
根据标注内容生成Sprite的贴图，优点是具有深度信息，缺点是样式不够灵活，只能整体鼠标交互。
2.以dom创建
即以dom创建，然后浮动在地图容器上，优点是方便、样式灵活多变，缺点是需要实时更新dom浮动的位置，且没有深度信息（没有近大远小）。

三、图标告警闪烁
three.js中，顶点颜色、材质颜色和透明度、纹理采样颜色三者是相辅相成的，三者rgba相乘为最终的颜色，我们只需要更改材质的颜色，就可以实现THREE.Sprite类颜色的更改，如果逐帧更改图标颜色，既可以达到闪烁的效果。

四、城市流光
流光可以表达城市中的车辆轨迹等，这里我采用了宽线+纹理的方式，组织两份线顶点数据，其中一份向当前拐点的法向量正方向偏移，另一份向当前拐点的法向量反方向偏移，偏移距离为当前地图分辨率下，像素长度为半个线宽的距离。
关于数据处理和计算过程，可以参考THREE.js的MeshLine
基于此，我们可以做交通导航线、流光等效果。

五、区域轮廓
在场景中，区域轮廓我们可以构建类似于墙的几何来表达，通过墙的构造点以及高度信息，构造出所有的三角面片。

六、告警动画圈

七、热力图
后续会补充三维热力图

八、后期泛光

九、扫描效果
扫描效果在webgl中简单的方法就是在每个片元着色器中追加扫描着色器片段，判断每个片元的世界坐标与扫描中心点的距离，然后根据距离给与不同的着色。我这边的方法是使用后期处理的方式实现，即不需要更改材质的着色器片段，适用于场景中的所有图层，所有的扫描相关的着色器片段，都在帧缓冲中进行，并最终输出到屏幕。

 十、其他待续

使用three.js/webgl开发智慧城市场景的一些总结相关推荐

我国智慧城市场景中物联网终端评测与认证体系研究
摘要在智慧城市建设过程中,物联网终端是设施智能化和管理精细化的必备要素,物联网终端产品的质量则是保障智慧城市应用可靠性的关键.然而,物联网终端具有种类杂.技术协议多.互操作性差.场景差异大的特点,这 ...
北京3d可视化建模,数字孪生智慧工厂3D模型开发,智慧城市园区三维模型
北京3d可视化建模,数字孪生智慧工厂3D模型开发,智慧城市园区三维模型.无论是工业4.0还是中国制造2025,智能工厂是实现以上目标的载体,更是中国制造业企业未来的发展方向.面对许多智能制造设备.生产 ...
兰州3d可视化建模,数字孪生智慧工厂3D模型开发,智慧城市园区三维模型
兰州3d可视化建模,数字孪生智慧工厂3D模型开发,智慧城市园区三维模型.兰州在3D智慧工厂数字化建模的基础上,得出一套符合生产领域发展的定向数字化工厂建设路径.3D工厂数字化建模的基础,工厂数字化的发 ...
芜湖3d可视化建模,数字孪生智慧工厂3D模型开发,智慧城市园区三维模型
芜湖3d可视化建模,数字孪生智慧工厂3D模型开发,智慧城市园区三维模型.随着5G时代物联网数字孪生3D可视化的发展,芜湖3d可视化建模,数字孪生智慧工厂3D模型开发,智慧城市园区三维仿真模型在场景应用 ...
南京3d可视化建模,数字孪生智慧工厂3D模型开发,智慧城市园区三维模型
南京3d可视化建模,数字孪生智慧工厂3D模型开发,智慧城市园区三维模型.伴随我国工业转型数字化的不断推进,企业厂区以智能制造为核心的智慧厂房计划正不断加速落地实施,越来越多的制造企业逐步加入工业数字化 ...
深圳3d可视化建模,数字孪生智慧工厂3D模型开发,智慧城市园区三维模型
深圳3d可视化建模,数字孪生智慧工厂3D模型开发,智慧城市园区三维模型.纸箱机械生产工艺流程三维建模可视化,能清楚的展示出瓦楞纸板的生产,纸板印刷工艺和纸箱成型工艺的各个环节及运行原理.造纸厂生产的卷 ...
临沂3d可视化建模,数字孪生智慧工厂3D模型开发,智慧城市园区三维仿真模型
临沂3d可视化建模,数字孪生智慧工厂3D模型开发,智慧城市园区三维仿真模型.智慧工厂数字化工厂建模工厂模型是对工厂布局和设备的抽象形容,智慧工厂3D设备可视化数字工厂是使用数字技术进行建模,将对智慧工 ...
智慧城市java开发_智慧城市主界面开发使用eclipse开发智慧城市APP源码 - 下载 - 搜珍网...
压缩包 : f69a7cfe27aa77afc50f989fcade435.zip 列表 AndroidDemo2_7/ AndroidDemo2_7/.DS_Store AndroidDemo2_7 ...
Vue3+Three.js+antvG2实战项目智慧城市(三)
前言在网上找了很久都没有找到使用Three.js开发智慧城市的免费文章或者免费视频,自己花了一点时间做了一个纯前端的智慧城市项目. 技术栈都是最新的:vue3+vite+typeScript+Thr ...

使用three.js/webgl开发智慧城市场景的一些总结

使用three.js/webgl开发智慧城市场景的一些总结相关推荐

最新文章

热门文章