一、Babylon是什么

1.简介

　　babylon.js是一个完整的 JavaScript 框架，可以用于构建 H5、WebGL、WebVR 和 Web Audio 等3D游戏和体验。

　　引擎官网：https://www.babylonjs.com/

2.几款主流Web3D开发方案的对比

　　ＷebGL：很原生，对于前端开发者来说学习成本比较大。
　　threeJS：纯渲染引擎，API很多，但文档相对太少，不稳定因素也不小。
　　babylonJS：游戏开发引擎，由微软提供完善的开发团队，文档完善且更新及时，支持 JavaScript 和 TypeScript 两种编程语言，相对稳定。

3.babylon.js的其他特点

　　a）基于WebGL的图形渲染框架，可直接运行在所有支持WebGL的浏览器上。

　　b）API高度封装，可操作性空间小，减少过分自由而产生坑的可能。

　　c）文档详细，支持TypeScript，适合做大型项目。

　　d）倾向于基于web的游戏开发，碰撞检测、抗锯齿等游戏特性支持较全面。

　　e）有做过优化处理的交互事件API。

　　f）Web、IOS、Android上的画面表现高度一致，是一款可以让美术只专注于模型，程序只专注于代码的Web3D引擎。程序员不再需要耗费过多的时间去处理模型在各个平台上的兼容性和画面表现，可以节省大量与美术的沟通时间。

　　g）开源、免费。

二、在可视环境中调试

1.Babylon官方工具简介

　　利用Babylon官方提供的几款工具，可以让我们用最少的代价完美复现出美术给过来的模型，整个复现过程不需要添加任何额外的兼容代码，真正做到美术和程序在画面表现上的统一。

2.Sandbox（美术和程序都可以使用）

　　Sandbox 用于预览模型，可以将3D模型直接拖到 Sandbox 中预览模型的效果，在程序不对模型属性做动态修改的情况下，在 Sandbox 中看到的效果就基本上是项目发布后的实际效果。

　　Sandbox 支持 gltf、glb、obj 和 babylon 等格式的3D文件。

　　Sandbox 地址：https://sandbox.babylonjs.com

　　点击 Sandbox 右下角的编辑按钮还可以以可视化的方式调整模型的部分属性，改变任何属性模型效果都会实时跟着变化，避免了程序“盲调”效果的时间风险，非常适合美术设计师和程序员在沟通项目效果时使用。

3.Playground（主要供程序员使用）

　　Playground是制作或测试场景最快捷、最简单的地方，程序员可以在这里以代码方式做出一个场景，觉得满意后再将相关代码用到项目上。使用 Playground 可以在一个“干净”的环境中测试模型效果，同时也是学习和体验 Babylon API 功能的极佳场所。而且也无需搭建和配置项目环境，打开即可直接使用 Babylon 的各种 API 了。

　　Playground 地址：https://www.babylonjs-playground.com

　　在 Playground 中创建一个3D场景的写法是固定的，将想要测试的代码写到 createScene 包体中就行，代码片段还可以保存并分享给其他人查看和下载。

　　上面 Playground 界面截图所对应的代码如下，其中包含有1个摄像机、2个光源和1个3D球体：

4.Editor（主要供美术使用）

　　Editor是 Babylon 的模型编辑器，美术设计师可以将在别的 IDE（如 3DS Max、Maya、Sketchfab）中制作的3D模型导入Editor中继续编辑，当然也可以使用 Editor 从零开始制作模型。

　　Editor 也是一个将别的模型文件转为.babylon模型文件的好工具，如果模型是由别的 IDE 所创作，并想将这些模型用到Babylon引擎中，强烈建议先将这些模型导入Editor，确认模型效果后再通过 Editor 导出模型文件给程序员使用，这样可以大大减少不同模型文件格式在Babylon引擎中的不兼容性。

　　Editor 地址：http://editor.babylonjs.com/

5.主要类库

5.1.核心库　　

　　BabylonJS主程序脚本：https://cdn.babylonjs.com/babylon.js

　　BabylonJS的未压缩版：https://cdn.babylonjs.com/babylon.max.js

5.2.加载器

　　模型加载使用这个就可以满足大部分需求了：https://preview.babylonjs.com/loaders/babylonjs.loaders.min.js

　　更多的模型加载器可以在这里寻找：https://github.com/BabylonJS/Babylon.js/tree/master/dist/loaders

5.3.其他工具类

　　Babylon.js 提供：Inspector、Materials、PostProcesses、GUI、Procedural Textures、Serializers 等类库，详见：https://doc.babylonjs.com/babylon101/how_to_get

三、快速上手

1.环境搭建

　　Babylon的开发环境搭建起来是很简单的，只需要引入2个脚本文件即可：babylon.js主程序脚本和模型加载器。

　　此外在使用官方示例时经常会遇到这2个类库：cannon.js 和 pep.js。这两个不是Babylon项目必需的，视项目需求而定。

　　cannon.js 是一款优秀的3D物理引擎，完全使用JavaScript编写，包含简单的碰撞检测、各种形状的摩擦力、弹力、约束等功能。
　　pep.js 是一个管理指针事件的脚本，可以统一指针事件在不同浏览器上的表现。

2.HTML的配置

　　Babylon的HTML也是相对简洁的，只需要用到一个canvas。

3.创建场景（1/6）：获取canvas并启动引擎

　　首先我们需要用一个canvas来启动Babylon引擎。

4.创建场景（2/6）：创建场景

　　其次需要创建一个场景，模型需要被添加到场景中才可以被渲染出来。

5.创建场景（3/6）：创建摄像机

　　Babylon提供多种预设摄像机，下例代码中的 ArcRotateCamera 是一个朝向指定目标位置的摄像机，可以控制它环绕指定位置移动及旋转，我们就是通过摄像机来观看3D场景的。

　　camera.attachControl 可以用于激活对摄像机的控制，调用后可以通过手指或鼠标来控制摄像机的移动和旋转。

6.创建场景（4/6）：创建光源

　　在 Sandbox 中预览模型时，如果模型包不带有任何光源，Sandbox 会创建一个适应模型的默认光源，所以只要模型包不报错，在 Sandbox 中就总是可以看到模型。但如果是自己手写代码则情况不一样，手写代码时 Babylon 不会创建默认光源，如果不给场景指定光源，则整个场景将是黑的。

 　　Babylon 提供了多种光源，以上我们创建了1个半球形光源和1个点光源，此 API 的第三个参数 scene 表示光源会被添加到这个指定的 scene 场景中。

7.创建场景（5/6）：创建网格

　　网格可以说是最简单的3D模型，通过 MeshBuilder 可以快速创建出很多种 Babylon 预设的网格模型，开发者不再需要从零去编写诸如长方体、球体等常见的网格了。

　　MeshBuilder 可以创建的网格一览：https://doc.babylonjs.com/api/classes/babylon.meshbuilder

　　以上示例中我们创建了1个球体网格，并把它添加到 scene 中，与光源一样，可以通过 API 的第三个参数直接指定网格要被添加到的场景。

8.创建场景（6/6）：渲染场景

　　最后我们需要让引擎不断地去绘制场景，这样我们才能看到一个实时变化着的3D场景。通过 Engine 的 runRenderLoop 可以很方便的启动一个渲染循环，可以指定一个渲染循环来执行场景的绘制，如下例所示。

　　Babylon 是支持添加多个渲染循环的，不用时可以通过 Engine 的 stopRenderLoop 将渲染循环从循环队列中移除。

四、结尾

　　至此，使用 Babylon 引擎制作 Web3D 场景的常规流程就介绍完毕了，对 Web3D 感兴趣但不知从何入手的同学可以尝试一下这个引擎，用得好绝对可以有事半功倍的效果。