Web三维可视化项目示例总结

1,189 阅读1分钟

写在前面的话:研究生阶段基本上都在接触数字孪生的相关项目,不过数字孪生这个概念太过宽泛,所以我更愿意把我目前所做的叫做Web三维可视化,这篇博客主要是将我在实际项目开发中把项目中的功能给单独抽离出来,就当是自己做一个备份总结,以可提供给大家一起学习讨论。

  • 本文含大量GIF图片,网页比较卡顿,请点开图片查看。
  • GIF多次压缩导致画面噪点较多,真实效果高清流畅。
  • 技术栈:three.js、webgl、vue.js、javascript,cesium、blender

1、智慧楼宇楼层分层+HDR效果: 楼层HDR+分层效果.gif

2、室内视频融合(图三 cesium)+室外视频融合(图四)(视频投影): 哨兵视频投影.gif

室外视频投影.gif

3、场景漫游:带2D导航图,带射线检测,键盘鼠标控制移动 2.gif

4、模型配置:

5、目标监控: 接收监控目标的实时位置,在三维模型中实时渲染出来(含轨迹线) 人物追踪.gif

6、粒子系统&精灵图: 粒子系统.gif

7、视频卡片:

视频卡片.gif

8、模型动画: 烘干机.gif

9、室内导航: 根据Dijkstra的最优路径寻迹 室内导航.gif

这篇文章会不定期更新项目中的新功能(ง •_•)ง,最后感谢组里前辈们对技术的沉淀,让我能够站在他们的肩上看的更远。

其他地方找到我:
知乎:www.zhihu.com/people/berl…
博客园:www.cnblogs.com/berlinss/