网页3D展示-WebGL开源框架的选择

明宇码海游
2019-04-13

最近项目需要在web平台实现三维效果的展示(在网页绘制三维轮廓、点线面等几何对象、外部3D模型的显示)以及基本的三维场景交互(鼠标事件、缩放平移、视角切换等)。从网上搜集资料找到以下几个WebGL框架(Three.js、babylon.js),基本能满足需求。

babylonJs: 是由微软发布,其官网的介绍是:WebGL. Simple. Powerful. A complete JavaScript framework for building 3D games and experiences with HTML5, WebGL, WebVR and Web Audio。基于WebGL,功能强大易用,用于构建3D游戏和HTML5、WebGL、WebVR和Web音频体验。

Three.js: 由居住在西班牙程序员Mr.doob开发的,Three.js以简单、直观的方式封装了3D图形编程中常用的对象。其官网介绍:The aim of the project is to create an easy to use, lightweight, 3D library with a default WebGL renderer. The library also provides Canvas 2D, SVG and CSS3D renderers in the examples。

babylon.Js 与 Three.js比较:

综合比较babylon.Js/Three.js 最终选择了Three.js,首先2个框架的功能基本相似,从功能上来说个人感觉babylon.Js还要强大些,比如模型碰撞检测、WebVR、模型鼠标点击事件(射线拾取方面),另外还支持TypeScript在大型JS项目维护很有优势。

但考虑到项目需求只是简单进行3D展示和模型点击等,另外Three.js完全社区推动,有完整的中文API文档,国内使用的人比较多,可以百度到的资料和示例也比babylonJs要多的多,所以最终还是选择了three.js。ThreeJs文档示例等均可以从github获取

 github three.js代码
 three.js api文 可以中英文切换)
 three.js 示例

另外WebGL 3D还有白鹭引擎egret、Layabox、Blend4Web(开源和商业版)等,效果也还不错,适合不同场景,选择合适自己的就好。


分享