3D可视化

d9faa237-3ef13fc3f-f4b1-77e6af384494

本文中的图可视化由 G6 提供支持。
G6 —— 专业的图可视化引擎。让关系数据变得简单透明,让用户获得 Insight。
G6 官网:antv.alipay.com/zh-cn/g…。欢迎关注。
GitHub:github.com/antvis/g6。欢迎 Star。
G6 是一个图可视化引擎。它提供了图的绘制、布局、分析、交互、动画等图可视化的基础能力。旨在让关系变得透明,简单。让用户获得关系数据的 Insight。

https://github.com/antvis/G6/blob/master/README-zh_CN.md

https://zhuanlan.zhihu.com/p/94155959

使用webgl(three.js)搭建一个3D智慧园区、3D建筑,3D消防模拟,web版3D,bim管理系统——第四课(炫酷版一))

使用webgl(three.js)创建3D机房,3D机房微模块详细介绍(升级版二)
如何用webgl(three.js)搭建一个3D库房-第一课
如何用webgl(three.js)搭建一个3D库房,3D密集架,3D档案室,-第二课
使用webgl(three.js)搭建一个3D建筑,3D消防模拟——第三课
使用webgl(three.js)搭建一个3D智慧园区、3D建筑,3D消防模拟,web版3D,bim管理系统——第四课
如何用webgl(three.js)搭建不规则建筑模型,客流量热力图模拟
使用webgl(three.js)搭建一个3D智慧园区、3D建筑,3D消防模拟,web版3D,bim管理系统——第四课(炫酷版一)

TensorSpace 是一个基于 TensorFlow.js 、Three.js 和 Tween.js 开发,用于对神经网络进行 3D 可视化呈现的库。通过使用 TensorSpace,不仅能展示神经网络的结构,还可以呈现网络的内部特征提取、中间层的数据交互以及最终的结果预测等一系列过程。
通过使用 TensorSpace,可以更直观地观察并理解基于 TensorFlow、Keras 以及 TensorFlow.js 开发的神经网络模型。 从工业开发的角度来看,TensorSpace 降低了前端深度学习可视化相关应用的开发门槛。总的来说,TensorSpace 具有以下特性:

  • 交互 – 使用类 Keras 的 API,在浏览器中构建可交互的 3D 可视化模型。
  • 直观 – 观察并展示模型中间层预测数据,直观演示模型推测过程。
  • 集成 – 支持使用 TensorFlow、Keras 以及 TensorFlow.js 训练的模型。

基于HTML5和WebGL的三维可视立体动态流程图

基于 HTML5 的工业互联网 3D 可视化应用

echart.js
g2.js
d3.js
three.js

G6 —— 专业的图可视化引擎。让关系数据变得简单透明,让用户获得 Insight。

ECharts,
G2,F2,G6,
D3.js,
highchart
three.js
deck.gl,kepler.gl uber出的三维地理信息可视化库

像threeJS 、babylonJS等通用前端库应该是众所周知了,其他还有比如OSG.js、Openscenegraph、x3Dom等都可以看看。
不过,上面基本都是比较通用的3D库,当然门槛也还是有一些,如果只是想实现在web端的3D模型展示(尤其是对于如3D打印、制造业模型等场景),这里也推荐另外一个API开发包:EverAPI
https://evercraft.co/api/docs/evercraft/

EverAPI主要针对制造类模型的展示,比如结构树、剖切图等,支持常用的制造格式:stl、stp等。很适合普通开发者或者网站外包团队,因为最少只需要四五条代码就可以实现完整的功能。(像3D协作平台EverCraft,也是基于EverAPI开发的)。

https://evercraft.co/zh/
ThingJS - 物联网3D可视化PaaS平台
tensorspace.js
https://tensorspace.org/index_zh.html

http://www.thingjs.com/guide/
image.png

3D 可视化系统的小 demo
**网址:https://www.alwxkxk.xyz/
github 源码:https://github.com/alwxkxk/iot-visualization-examples
怕大家不会操作,所以还录了个小小的操作视频:操作视频网址

http://www.hightopo.com/
image.png

http://www.thingjs.com/guide/?m=sample&g=1