Web 3D哪家强？

在Web3D百花齐放的今天，和大家简单探讨一下目前主流的3D库。

3D模型在线预览提供多种低代码平台3D模型在线预览解决方案，实现了将多种3D模型格式无缝集成到低代码业务表单中。这意味着用户可以在不离开低代码平台的情况下，直接查看和操作3D模型，极大地提升了数据可视化的效果和用户交互体验。

常见的3D库

01｜Egret

官方将Egret定位为一整套游戏开发的“游戏解决方案”，包括游戏开发框架、开发辅助工具，生态环境相对完善。基于TypeScript进行开发，支持Flash到Egret的高效转换、跨平台支持，可打包为HTML5，以及iOS 和Android平台原生app。

02｜Three.js

Three.js的定位是一个基于JavaScript 3D库，但无疑它非常的强大而轻量。从创建简单的3D动画到创建交互的3D游戏，通过暴露简单的API，将3D内容的开发复杂性降至最低。

03｜Pixi.js

Pixi与Three.js一样，定义为“2D WebGL renderer with canvas fallback”。它只是一款轻量的2D Webgl库，但同样可以根据它的API来开发游戏，将2D WebGL开发复杂性降到最低。

04｜Layabox

Layabox与白鹭一样，也是成熟的整套游戏开发的”游戏解决方案“，同时支持2D、3D、VR的H5引擎，专为高性能游戏而设计，支持ActionScript 3.0，TypeScript，JavaScript编程语言。开发一次，发布flash，HTML5，mobile。

05｜Hilo

Hilo 是阿里巴巴集团开发的一款HTML5跨终端游戏解决方案，它可以帮助开发者快速创建HTML5游戏,多种渲染方式, 提供DOM，Canvas，Flash，WebGL等多种渲染方案。

06｜Cocos2d

Cocos2d是老牌的游戏引擎，采用原生JavaScript语言，可发布到包括Web平台，iOS，Android，Windows Phone8，Mac，Windows等平台。

07｜厘米秀引擎

厘米秀引擎是QQ轻游戏使用的引擎bricks，为腾讯自研的游戏引擎，脚本层使用JavaScript。bricks引擎支持原生、WebGL，Canvas等多种渲染以及开发方式，开发者可以直接调用bricks引擎，也可以使用第三方游戏引擎封装的进行开发。

基本对比

我们对上述各个框架、引擎在2D Canvas、2D WebGL、3D WebGL、2D性能、3D性能等方面做一下对比，其大致数据如图所示：

可以发现，其中白鹭、Three.js、Pixi.js、Layabox、厘米秀性能最好，但本文主要探讨的是3D相关开发，所以我们选取Three.js、Layabox两个高性能库/引擎进行对比（Egret引擎过重暂不考虑）。所以接下来主要讨论Three.js、Layabox的各方面对比。

Three.js Vs Layabox

01｜库体积

首先我们对比下下这两个库体积，我们发现，Three.js在体积上远远优于Layabox，但Layabox极限精简Gzip后也仅有300K，也算比较轻量级。在JS资源体积这一点上Three.js得一分。

02｜模型体积

我们准备了两个模型，一个是比较简单的狼，另一个则是面较多的巨龙。如下图所示：

我们分别将其导出为Three.js、Layabox适用的文件，Three.js的模型采用的是json文件，而Layabox则是自己的二进制文件。我们将导出后的模型文件体积进行一下对比,可以发现在未Gzip之前，Layabox对比Three.js还是很有优势的，但是一旦开启Gzip，Three.js在模型体积就远远小于Layxbox了，而Layxbox导出的二进制模型文件无法Gzip比较吃亏，Three.js再得一分。

但在Three.js导出到json格式这一步中，踩坑无数。可能设计师做出来是这样子：

而你将这个模型导出到Blender中却成了这样：

为啥呢？？这不科学啊！

因为Three.js导出模型依赖于Blender，所以首先需要将模型导入到Blender中，这一步就非常依赖于设计师在构建模型时的构建方式，经过血与泪的洗礼，大概总结了有以下几点雷区：

控制模型面数

禁用第三方插件

需提供展 UV 贴图

当然这三点仅仅是雷区中的一点点，更多的是需要前端开发者与设计师一起对模型进行磨合，因为1000个设计师有1000中建模方法，所以还是要在实践中不断的磨合、踩坑，才能最终导出完美的模型。

而Layaxbox借助于Untiy可以轻松的将模型导出来，所以Layabox在模型导出这里得1分。

03｜实现难度

这一步就是要将3D模型展示在网页中了，Three.js与、Layabox都提供了相对应的接口与方法，能够让我们快速的将导出的数据展示在页面上。

ThreeJS中提供了许多种类的Loader，分别针对不同的使用需求。比如，JSONLoader针对的是.json格式的模型，OBJLoader针对的是.obj格式的模型等等。翻阅网上资料的时候还可以看到SceneLoader的踪影，这就是用来加载整个场景的.json格式文件的。可是在ThreeJS的新版本中，SceneLoader已经被废弃，取而代之的是更为智能的ObjectLoader。ObjectLoader可以判断导出的模型到底是什么种类，从而将它们转化为ThreeJS中的对应对象便于开发者使用。

当然Json格式无疑是最为轻量最为简洁的导出格式，并且可以很好的支持骨骼动画，下图为我们为狼模型编写的Three.js  js代码：

而Layzbox则简便很多，按照官方给出的Api，直接传入对应的ls文件，就可以加载之前导出的场景。ls文件包含了整个3D场景：模型、材质、贴图、动画、光照贴图等等，可以理解与上述Three.js文件导出的Json相同，仅仅是文件的结构不同。

综合这两段代码可以看出，Three.js需要手动的创建3D场景中的光源、场景、摄像机等等，但通过Layxbox通过Unity导出的模型仅仅通过导出的配置文件即可创建光源、场景、摄像机。但如果你想对3D场景做更多的定制化、提高场景可控性的话，Layabox也需要手动的添加场景、光源，但与Three.js不同的是，Layabox提供完整的中文Api参考与实例参考，而Three.js 的最新Api则是英文，并且个别Api文档会存在不适用的情况（因为Three.js更新的太快了，某些调整导致Api变更却又没有更新Api文档），所以单纯就易上手一点来看，Layabox再得一分，对新手快速开发会更友好一点。

04｜性能对比

性能恐怕是开发者们最为看重的一点了，通过上面的简单对比我们可以知道，Three.js与Layabox在3D WebGL中的得分都为满分10分，那么都为10分的他们是否也存在细微的差异？现在我们仔细对比下两款框架/引擎在Web中的性能表现吧。

1. 帧率

首先对比下这它们在Web的帧率，Three.js我们借助stats.js来检测帧率，而Layabox自带帧率监控工具。

因为是性能测试，所以我们测试模型最复杂的龙模型，通过工具可以看到它们的帧率都可以稳定在60FPS，而60FPS无疑是一个非常棒的帧率。

2. 内存占用

内存占用同样也是一个非常重要的指标，因为手机不比PC电脑，内存资源比较有限，如果内存占用的越少则意味着它在更多的手机上能流畅的展示，我们通过Chrome工具与Android studio模拟器检测页面的内存占用。

首先是Chrome任务管理器（打开方式：浏览器右上角选项卡→更多工具→任务管理器），通过这个工具我们可以观察两个页面占用的内存情况，从图中我们可以发现，Three.js与Layabox的内存占用都在84M左右，差距可以忽略。

然后我们在进入Android studio开启一个全新的Android模拟器，使用原生的Web view打开上述两个页面，数据如下，我们可以发现他们内存仅有3M差距。

综合上面两次测试，我们可以发现Three.js与Layabox在Web中帧率、内存占用差距都不大，并且性能都不错，足以满足日常的轻量3D开发。所以Three.js与Layabox各得1分。

总结

经过上面一系列的分析，Three.js与Layabox其最后比分为3:3持平，各有优劣。对于轻量的3D开发，它们开发门槛都不算高，其中Three.js整体的资源体积小于Layabox，而Layabox在模型导出侧优于Three.js。条条大路通罗马，大家可以根据各自需求来具体选择。