浅析前端各种3d技术ThreeJS， BabylonJS， SceneJS， ThingJS

一、国内前端目前3d技术现状

目前3d技术发展十分迅速，最初是WebGL，这是一种3d绘图协议，它将JavaScript和OpenGL ES 2.0结合在一起，通过增加OpenGL ES 2.0的一个JavaScript绑定，WebGL可以为HTML5 Canvas提供硬件3D加速渲染，这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了，还能创建复杂的导航和数据视觉化。

webGL给网页带来更多的可能性，但webGL的仅仅是提供了OpenGL（开放式图库）的接口，核心技术还是依托在OpenGL上，即便有文档查阅，但也大大超出了前端的知识领域访问。我们可以简单看一段github的源码。

const canvas = document.querySelector("#glcanvas")
// 初始化WebGL上下文
const gl = canvas.getContext("webgl")
// 创建着色器的方法
function createShader (gl, sourceCode, type) {
  var shader = gl.createShader( type );
  gl.shaderSource( shader, sourceCode );
  gl.compileShader( shader );

  if ( !gl.getShaderParameter(shader, gl.COMPILE_STATUS) ) {
    var info = gl.getShaderInfoLog( shader );
    throw "Could not compile WebGL program. \n\n" + info;
  }
  return shader;
}

var vertexShaderSource =
  "attribute vec4 position;\n"+
  "void main() {\n"+
  "  gl_Position = position;\n"+
  "}\n";

//从上面例子使用 createShader 函数。
var vertexShader = createShader(gl, vertexShaderSource, gl.VERTEX_SHADER)

var fragmentShaderSource =
  "void main() {\n"+
  "  gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);\n"+
  "}\n";

//从上面例子使用 createShader 函数。
var fragmentShader = createShader(gl, fragmentShaderSource, gl.FRAGMENT_SHADER)

复制代码

一开始画风还算正常，获取元素和初始化canvas元素，但后续的核心的着色器部分，连函数都是定义成字符串，然后传到createShader去调用，这种明显不是js的语法，而是属于的领域是GLSL着色语言，超纲了！

所以，单纯前端工程师一般都做不到直接用WebGL开发3d应用。

但是有dalao们啊，ThreeJS， BabylonJS， LayaboxJS， SceneJS 等等开源框架横空出世， 这些框架基本把WebGL通过JS进行了系统性的封装，提供了很多类与方法，可以直接使用，常用的类有Scene（场景）、Camera（相机）、Mesh（网格体）、Light（灯光）、renderer（渲染器）等等，基本涵盖了3d场景所需要的基本元素，让前端工程师不需要陷入WebGL本身的细节当中，而专注于3D应用的功能实现，这大大提高了工作效率、降低了工作难度。

二、对比各个3d技术

1、Three.js

（1）特点

开源，上手难度低，封装了很多3D 图形编程中常用的对象，
在开发中使用了很多图形引擎的高级技巧，提高了性能。
内置了很多常用对象和极易上手的工具，功能强大。
复制代码

（2）适用范围

小场景，可以做中小型的重表现的Web项目。Three.js以简单、
直观的方式封装了3D图形编程中常用的对象。更方便快捷地
完成光线、轮船纹理、海浪等的3D建模，从而带来最佳的呈现效果。
复制代码

（3）支持格式

stl,obj+mtl+png,FBX，gltf格式（主要格式，兼容性比较好）
复制代码

（4）优点

国内目前最流行的前端3d框架，国内用的人比较多，所以中文的资料也会比较多，
有比较系统的中文教程如从入门到精通。相关的qq群较多，群里的人也较多，
接触到的大牛应该也会比较多。在WebGL的引入前已经创建three.js独特方便的模块化
渲染接口，并在不用WebGL的情况下允许它使用SVG
和HTML5画布元素。近些年，浏览器的功能越来越强大，渐渐得成为了复杂应用
和图形的平台。同时，现有大多数浏览器实现了对 WebGL 的支持，但要直接使用 
WebGL 相关接口进行开发，则需要学习复杂的着色器语言，且开发周期长，不利于
项目的快速开发。　
面对这种情况，Three.js 应运而生，它不但对 WebGL 进行了封装，将复杂的接口
简单化，而且基于面向对象思维，将数据结构对象化，非常方便我们开发。
Three.js 的发展十分迅速，虽然配套的学习材料却比较匮乏，但至少文档比较是比较
齐全，大部分问题还是可以找到对应的解决方案，或者折中方案。
复制代码

（5）缺点

  没有提供基础建模的插件。
  
  大文件加载速度慢，性能差，基本大于7、80m之后，加载就基本就特别慢，这个
  慢体现在每次加载的时候，不仅仅是首次加载，每次如果摧毁了重载，页面也会
  因为模型加载的变得卡顿。模型的精细程度会和文件大小成正比。这种属于浏览器
  性能问题。（100m以上模型，有可能加载失败）
  
  缺少碰撞检测。
  
  没有提供模型切片的工具。
  
  射线类选中物体有偏差。（网上有不少修正的方案，但实际使用起来的还是会有偏差）
  
  等等问题存在，有些问题也不好解决，国内也没有相关资料
  
复制代码

2、Babylon.js

（1）特点

 开源，强大，美观，简单和开放的3D渲染体验，支持ts。
复制代码

（2）适用范围

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

（3）支持格式

glTF，OBJ，STL，.babylon (常用格式)
复制代码

（4）优点

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

（5）缺点

   学习难度大、周期长，需要进行大量深入的学习与研究。另外，在模型文件较大或较多时，浏览器打开时会等待较长时间（属于是这类3d软件的通病了）;中文资料很少，没有系统的中文教程，如从入门到精通都可以给你讲一遍系统的教程，论坛也会被墙，相关的qq群较少，群里的人也不多，所以能真正指导我们的大牛也比较少。国内资料基本没有。同Three.js类似，Firefox浏览器在本地同时打开多个较大模型时，会提示浏览器性能不足问题。另外，模型在100M以上时可能存在无法加载的现象。.babylon模型预览，可以通过官方提供的沙盒地址，通过拖放.babylon文件进行查看。经过测试，发现个别.babylon模型仍难以打开。
复制代码

3、SceneJS

（1）特点

它是针对计算机辅助设计的要求。 开源的JavaScript3D引擎，特别适合需要高精度细
节的模型需求，比如工程学和医学上常用的高精度模型。
复制代码

（2）适用范围 　　

  它是针对计算机辅助设计的要求。 开源的JavaScript3D引擎，特别适合需要高精度
  细节的模型需求，比如工程学和医学上常用的高精度模型。
复制代码

（3）支持格式 　　

模型预览：http://sandbox.babylonjs.com/
格式解析： https://github.com/h53d/babylonjs-doc-cn/blob/master/target/generals/General/File_Format_Map_(.babylon).md
http://doc.babylonjs.com/generals/file_format_map_(.babylon)
编辑工具：http://materialeditor.raananweber.com/
Shader在线查看(GLSL语言编写：Vertex Shader和Pixel Shader)：http://cyos.babylonjs.com/
复制代码

（4）优点 　　

  专门用于快速绘制大量单独连接的对象，而没有像阴影、反射等游戏引擎效果。
  SceneJS的API和JSON相似,它学习起来很简单。
复制代码

（5）缺点

  相关社群几乎没有，中国很少人用。缺少碰撞检测等功能。加载大模型时速度较慢
  。需提供正在载入信息提示，尽可能提高用户体验。（可用工具可以将.babylon文件
  转换成几个文件，缓式加载以提高显示速度。）Firefox浏览器在本地同时打开多个较
  大模型时，会提示浏览器性能不足问题。另外，模型在100M以上时可能存在无法加载
  的现象。
复制代码

4、ThingJS

（1）特点

 强大的3d引擎，简化模型制作，提高开发效率，在线开发部署，支持离线部署。
 
 ThingJS面向物联网的3D可视化PaaS开发平台.基于WebGL兼容各种浏览器及移动设备。
 
 零门槛、高效率、低成本开发各类3D应用。
 
 基于 Koa 2.x，兼容 middleware；
 
 内核小巧，支持 Extend、Adapter 等插件方式；
 
 性能优异，单元测试覆盖程度高；内置自动编译、自动更新机制，方便快速开发；
 
 使用更优雅的 async/await 处理异步问题，不再支持 */yield；
 
 从 3.2 开始支持 TypeScript。
复制代码

（2）适用范围

 thingJS是面向物联网可视化开发的js库，主要针对以一栋或多栋建筑组成的园区级别
 的场景，可以用于数据中心、仓储、学校、医院、城市、设备等多种领域。而且这些层
 次的对象在thingJS的场景加载完成后（首次加载会慢点，后续thingJS有自研的
 **浏览器常规临时缓存持久化技术**，能大幅度提升加载速度），是以JS对象的方法
 暴露给用户使用的，简单又方便。
 
复制代码

（3）支持格式

  .tjs (专用格式)
  
  .gltf (因为通用3D模型格式输出需ThingJS云服务器转换支持，故这类格式不是实时
  的，需待云服务器转换完成后同不回CB客户端。同时，因为需要云服务器资源消耗，
  且通用3D模型格式导出并非服务于ThingJS体系，故相关转换导出功能并非免费
  （具体收费以CB实际显示收费标准为准）。
复制代码

（4）优点

ThingJS 基于 HTML5 和 WebGL 技术，可方便地在主流浏览器上进行浏览和调试，支持
PC 和移动设备。ThingJS 为可视化应用提供了简单、丰富的功能，只需要具有基本的
Javascript 开发经验即可上手；ThingJS 提供了对场景的加载、分层级的浏览，对象
的访问、搜索、以及对象的多种控制方式和丰富的效果展示，可以通过绑定事件进行各
种交互操作，还提供了摄像机视角控制、点线面效果、温湿度云图、界面数据展示、粒
子效果等等各种可视化功能。在功能接口提供的粒度上，ThingJS和其他开发工具相比，
站在了更高的封装层面， 用尽可能简洁的接口，直接提供了场景的加载与展示、物联网
设备的创建与特效；还提供了信息点、线路、管线、区域、热图、粒子、动画等丰富功
能；提供了摄影机控制、第一人称行走、寻路导航和视点线路工具；可扩展的界面、头
顶信息牌、内嵌视频监控等丰富的信息展示方式。这些接口大部分已经在在线例子中可
以找到，可以边改参数边看到效果；帮助用户以最快的速度 学习、开发与部署。
复制代码

（5）缺点

非开源  （划重点！）

对个人开发者大部分功能都是免费的， 但如果是企业或者商用，则需要购买服务。（还挺贵）

ThingJS所定位的物联网可视化应用，侧重宏观场景表现，并不针对局部细节的效果，
而且由于WebGL技术的性能局限，在性能上不能和Unity等原生程序相比，ThingJS不
适合做场景细节要求高的应用。

复制代码

三、小结

1、目前的浏览器3d框架普遍存在性能问题，这是受浏览器限制，对大文件加载不够友
   好。可以通过模型切片、压缩、或者读取缓存等等方式，尽可能提升用户体验感。

2、如果打算开发3d场景，尽量选择主流的threeJS或者BabylonJS，个人开发者还可以
   用ThingJS，这几个文档资料比较多，使用人数也不少，遇到问题的时候也大概率网
   上论坛等地方能找到相似的情况的，能不能解决就另说了。
   
3、企业开发，在有预算的情况下，可以了解一下市面上的3d可视化开发平台，如、
   51world（基于虚幻引擎UE4）、UINO优锘数字孪生可视化平台（基于ThingJS）、
   凡拓数创平台（全自研平台FT-E *Fast Tempo Engine*）等等，这类数字孪生平
   台，技术上有更成熟的方案，就是需要提前调研，还需要比较充足的预算，毕竟服务不便宜。
   
   
复制代码

ps: 刚好最近需要整理一份3d技术的文档，就在掘金整理了，有点流水账，博客园备份。

作者：地霊殿__三無
链接：https://juejin.cn/post/7121918970533249037