关注公众号 前端界，回复“加群”
加入我们一起学习，天天进步
一、发展
3D或者说三维数字化技术，是基于电脑/网络/数字化平台的现代工具性基础共用技术，包括3D软件的开发技术、3D硬件的开发技术，以及3D软件、3D硬件与其他软件硬件数字化平台/设备相结合在不同行业和不同需求上的应用技术。
随着电脑技术的快速发展，3D技术的发展十分迅速。我们最初了解的3D技术就是WebGL（全写Web Graphics Library），它是一种3D绘图协议，这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起，通过增加OpenGL ES 2.0的一个JavaScript绑定，WebGL可以为HTML5 Canvas提供硬件3D加速渲染，这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了，还能创建复杂的导航和数据视觉化。
「WebGL」地解决了现有的Web交互式三维动画的两个问题：第一，它通过HTML脚本本身实现Web交互式三维动画的制作，无需任何浏览器插件支持;第二，它利用底层的图形硬件加速功能进行的图形渲染，是通过统一的、标准的、跨平台的OpenGL接口实现的。
WebGL 原生 API 是一种非常低级的接口，而且还需要一些数学和图形学的相关技术。对于没有相关基础的人来说，从而衍生了很多3d开发应用。
接下来我们将介绍「ThreeJS」， 「BabylonJS」， 「LayaboxJS」， 「SceneJS」、「Cesium」、「ThingJS」，这些框架很大一部分是将WebGL通过JS进行了系统的封装，提供了众多类和方法，方便前端工程师使用使用，让前端工程师不需要陷入WebGl的细节当中，专注于功能的实现，这样大大提高了工作效率，降低了工作难度。
three.js 是一个基于 WebGL 的 Javascript 3D 图形库
BabylonJS：是一个完整的JavaScript框架，用于构建HTML5，WebGL，WebVR和Web Audio的3D游戏和体验
SceneJS：是一个基于 JavaScript 时间轴的动画库，用于创建动画网站，作为一个动画时间轴库，它允许你创建对象的移动和位置的时间顺序。
Cesium：是国外一个基于JavaScript编写的使用WebGL的地图引擎。Cesium支持3D,2D,2.5D形式的地图展示，可以自行绘制图形，高亮区域，并提供良好的触摸支持，且支持绝大多数的浏览器和mobile
ThingJS：基于 HTML5 和 WebGL 技术，可方便地在主流浏览器上进行浏览和调试，支持 PC 和移动设备。ThingJS为可视化应用提供了简单、丰富的功能，只需要具有基本的 Javascript 开发经验即可上手。
二、技术介绍
2.1 ThreeJS
官网：threejs.org/
中文官网：www.webgl3d.cn/
「Three.js」是此种最著名的3D WebGL JavaScript库，成千上万的开发人员将其用于基于WebGL的游戏，模拟甚至网站。它具有简单的学习曲线，数百个演示和示例，丰富的教程库以及强大的社区。Three.js用作许多WebGL图形引擎和几个支持浏览器的游戏引擎的基础。它具有功能强大的轻量级在线编辑器。
功能特点
「Three.js掩盖了3D渲染的细节」：Three.js将WebGL原生API的细节抽象化，将3D场景拆解为网格、材质和光源(即它内置了图形编程常用的一些对象种类)。
「面向对象」：开发者可以使用上层的JavaScript对象，而不是仅仅调用JavaScript函数。
「功能丰富」：Three.js除了封装了WebGL原始API之外，Three.js还包含了许多实用的内置对象，可以方便地应用于游戏开发、动画制作、幻灯片制作、髙分辨率模型和一些特殊的视觉效果制作。
「扩展性很强」：为Three.js添加新的特性或进行自定义优化是很容易的事情。如果你需要某个特殊的数据结构，那么只需要封装到Three.js即可。
「包含数学库」：Three.js拥有一个强大易用的数学库，你可以在其中进行矩阵、投影和矢量运算。
「内置文件格式支持」：你可以使用流行的3D建模软件导出文本格式的文件，然后使用Three.js加载；也可以使用Three.js自己的JSON格式或二进制格式。
「速度很快」：Three.js采用了3D图形最佳实践来保证在不失可用性的前提下，保持极高的性能。
「支持交互」：WebGL本身并不提供拾取（picking)功能（即是否知道鼠标正处于某个物体上）。而Three.js则固化了拾取支持，这就使得你可以轻松为你的应用添加交互功能。
「支持HTML5 Canvas」：Three.js 不但支持 WebGL，而且还支持使用 Canvas2D、Css3D 和 SVG 进行渲染。在未兼容 WebGL 的环境中可以回退到其它的解决方案。
优点
国内目前最流行的前端3d框架，国内用的人比较多,目前中文资料也比较多
上手难度低，封装了很多3D 图形编程中常用的对象。
缺点
官网文档非常粗糙，对于新手极度不友好。
国内的相关资源匮乏。
不是游戏引擎，一些游戏相关的功能没有封装在里面，如果需要相关的功能需要进行二次开发。
应用场景
Three.js是一款基于原生WebGL封装通用Web 3D引擎，在小游戏、产品展示、物联网、数字孪生、智慧城市园区、机械、建筑、全景看房、GIS等各个领域基本上都有three.js的身影。
只要你有Web3D可视化的需求，基本上都可以首选学习Three.js。
2.2 BabylonJS
官网：www.babylonjs.com/
中文官网：www.cnbabylon.com/
Babylon.js是一个javascript开源框架，用于为Web开发3D应用程序/视频游戏。要以游戏开发和易用性为主。
功能特点
开源，免费
强大，美观，简单和开放的3D渲染体验，支持JavaScript和TypeScript。
优点
功能较为全面,功能比较丰富、灵活、模型显示不失真。
有微软背景，有不少的demo，有较详细的api文档，有供测试的平台，有提供3dsmax转换模型的插件，比three.js
成熟；几经更新与完善之后，Babylon.js已更新至1.12版本，相比之前的版本，除了不断的Bug修复之外，Babylon.js还新增了.许多非常牛叉的新特性，并对已有功能进行了完善。更方便快捷地完成光线、轮船纹理、海浪等的3D建模，从而带来最佳的呈现效果。
缺点
学习难度大、周期长，需要进行大量深入的学习与研究。
在模型文件较大或较多时，浏览器打开时会等待较长时间。
中文资料很少，没有系统的中文教程。
应用场景
适合做中大型项目，尤其是多种媒体混杂的或者是游戏项目VR体验项目。
2.3 SceneJS
官网：daybrush.com/scenejs/
GitHub:github.com/daybrush/sc…
SceneJS 是一款基于 WebGL 的 JavaScript 库，专门用于创建复杂的 3D 场景。它提供了一种易于使用的方式来描述场景，并支持高度定制化，包括灯光、阴影、纹理等等。您可以使用 SceneJS 来创建各种类型的场景，从简单的物体到复杂的城市景观
功能特点
「支持JavaScript和CSS播放方法」：支持两种播放方式：javascript和css动画。在使用过程中感受不到差异
「完全控制时间」，准确地显示当前时间的移动情况
「可同时控制多个元素」
「支持各种值类型」
「提供 CSS 使用的缓动」
「支持各种效果预设」
相关内容可参照官网
优点
提供了一个基于流水线的架构，使其在大型场景中表现出非常好的性能
可以很容易地在网格之间进行交互，并且对于场景的动态变化处理起来也很方便
支持灯光、阴影、纹理、透明度等丰富的效果，并具有可定制性
缺点
相关社群几乎没有，中国很少人用。
缺少碰撞检测等功能。
加载大模型时速度较慢 。
需提供正在载入信息提示，尽可能提高用户体验。
应用场景
2.4 ThingJS
官网：www.thingjs.com/guide/
功能特点
「强大的3D引擎」：hingJS平台的3D引擎核心是由优锘科技的核心3D研发团队依托多年3D基础算法研究和积累，通过潜心研发，完成底层H5、3D运行基础库架构，并经持续优化、封装、测试逐步完善而成。
「移动端可访问」：ThingJS平台采用浏览器原生的WebGL方式实现3D能力封装，不仅兼容IE11 ，Edge ，Chrome，Firefox等浏览器，而且还可以在手机、PAD等移动端访问，甚至微信扫码也可以直接访问
「简化模型制作」：ThingJS平台提供面向普通用户（而非3D设计师）的快速3D场景搭建工具ThingBuilder，可让用户在无需专业3D设计师情况下低成本完成3D场景搭建
「提高开发效率」：开发者可登录官方网站直接开始在线开发，还提供各类简化开发者开发工作的功能，比如，开发者右键自动生成基础代码。
「在线开发部署」：ThingJS平台推荐将在线开发调试完成的3D可视化应用直接使用在线SaaS方式部署，省去用户本地安装调试等环节，降低成本，提升交付效率
「支持离线部署」：用ThingJS平台开发的项目也可以离线部署，支持Linux（CentOS，Ubuntu， Debian，FreeBSD）和Windows（Window Ser ver）服务器平台。
优点
入门简单，在线开发具备JS基础即可，不需要3D开发技能
支持移动端访问
缺点
非开源
对个人开发者大部分功能都是免费的， 但如果是企业或者商用，则需要购买服务
ThingJS不 适合做场景细节要求高的应用
应用场景
物联网可视化Paas平台，主要针对以一栋或多栋建筑组成的园区级别 的场景，可以用于数据中心、仓储、学校、医院、城市、设备等多种领域。
2.5 Cesium
官网：www.cesium.com/
中文官网：cesium.xin/wordpress/
Cesium 是国外一个基于 JavaScript 编写的使用 WebGL 的地图引擎，支持 3D、2D、2.5D 形式的地图展示，可以自行绘制图形，高亮区域
特点
跨平台、跨浏览器
Cesium 使用 WebGL 来进行硬件加速图形，不需要任何插件支持
Cesium 是基于 Apache2.0 许可的开源程序，可免费用于商业和非商业用途
应用场景
支持2D,2.5D,3D 形式的地理（地图）数据展示
可以绘制各种几何图形、高亮区域，支持导入图片，甚至三维模型等多种数据可视化展示
可用于动态数据可视化并提供良好的触摸支持，支持绝大多数的浏览器和移动端浏览器
支持基于时间轴的动态流式数据展示
三、总结
前端3D技术汇聚着各种各样的方法，除了上面写的这些，还有很多迷人的技术，欢迎大家来补充。
工作过程中也要根据企业的情况来正确选择
市面上也有一些技术更成熟的数据可视化平台，但很多需要提前调研，如果预算充足的话，可以使用
最后
关注福利，关注公众号后，在首页：
回复「简历」获取精选的简历模板
回复「思维图」获取完整 JavaScript 相关思维图
回复「电子书」可下载我整理的大量前端资源，包含面试、Vue实战项目、CSS和JavaScript电子书等。
回复「Node」获取简历制作建议
最后不要忘了点个赞再走噢
