浅析目前各种3D技术（一）

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 开发经验即可上手

3D技术介绍

ThreeJS

Three.js是一种最著名的3D WebGL JavaScript库，成千上万的开发人员将其用于基于WebGL的游戏，模拟甚至网站。它具有简单的学习曲线，数百个演示和示例，丰富的教程库以及强大的社区。Three.js用作许多WebGL图形引擎和几个支持浏览器的游戏引擎的基础。它具有功能强大的轻量级在线编辑器。

功能特点

1. Three.js掩盖了3D渲染的细节：Three.js将WebGL原生API的细节抽象化，将3D场景拆解为网格、材质和光源(即它内置了图形编程常用的一些对象种类)
2. 面向对象：开发者可以使用上层的JavaScript对象，而不是仅仅调用JavaScript函数
3. 功能丰富：Three.js除了封装了WebGL原始API之外，Three.js还包含了许多实用的内置对象，可以方便地应用于游戏开发、动画制作、幻灯片制作、髙分辨率模型和一些特殊的视觉效果制作
4. 扩展性很强：为Three.js添加新的特性或进行自定义优化是很容易的事情。如果你需要某个特殊的数据结构，那么只需要封装到Three.js即可
5. 包含数学库：Three.js拥有一个强大易用的数学库，你可以在其中进行矩阵、投影和矢量运算
6. 内置文件格式支持：你可以使用流行的3D建模软件导出文本格式的文件，然后使用Three.js加载；也可以使用Three.js自己的JSON格式或二进制格式
7. 速度很快：Three.js采用了3D图形最佳实践来保证在不失可用性的前提下，保持极高的性能
8. 支持交互：WebGL本身并不提供拾取（picking)功能（即是否知道鼠标正处于某个物体上）。而Three.js则固化了拾取支持，这就使得你可以轻松为你的应用添加交互功能
9. 支持HTML5 Canvas：Three.js 不但支持 WebGL，而且还支持使用 Canvas2D、Css3D 和 SVG 进行渲染。在未兼容 WebGL 的环境中可以回退到其它的解决方案

优点

1. 国内目前最流行的前端3d框架，国内用的人比较多,目前中文资料也比较多
2. 上手难度低，封装了很多3D 图形编程中常用的对象

缺点

1. 官网文档非常粗糙，对于新手极度不友好
2. 国内的相关资源匮乏
3. 不是游戏引擎，一些游戏相关的功能没有封装在里面，如果需要相关的功能需要进行二次开发

应用场景

Three.js是一款基于原生WebGL封装通用Web 3D引擎，在小游戏、产品展示、物联网、数字孪生、智慧城市园区、机械、建筑、全景看房、GIS等各个领域基本上都有three.js的身影。

只要你有Web3D可视化的需求，基本上都可以首选学习Three.js。

BabylonJS

Babylon.js是一个javascript开源框架，用于为Web开发3D应用程序/视频游戏。要以游戏开发和易用性为主。

功能特点

1. 开源，免费
2. 强大，美观，简单和开放的3D渲染体验，支持JavaScript和TypeScript

优点

1. 功能较为全面,功能比较丰富、灵活、模型显示不失真
2. 有微软背景，有不少的demo，有较详细的api文档，有供测试的平台，有提供3dsmax转换模型的插件，比three.js
3. 成熟；几经更新与完善之后，Babylon.js已更新至1.12版本，相比之前的版本，除了不断的Bug修复之外，Babylon.js还新增了.许多非常牛叉的新特性，并对已有功能进行了完善。更方便快捷地完成光线、轮船纹理、海浪等的3D建模，从而带来最佳的呈现效果

缺点

1. 学习难度大、周期长，需要进行大量深入的学习与研究
2. 在模型文件较大或较多时，浏览器打开时会等待较长时间
3. 中文资料很少，没有系统的中文教程

应用场景

适合做中大型项目，尤其是多种媒体混杂的或者是游戏项目VR体验项目。

浅析目前各种3D技术 - 索引

浅析目前各种3D技术（一）

浅析目前各种3D技术（二）