分享每一天-创建你的3D世界，前端开发之3d利器-Babylon.js

前端技术 2359 0 创建时间：2020-11-21 16:46:55

3d利器 Babylon.js

#### 1. Babylon简介
babylon.js是一个JavaScript框架，可以用于构建H5、WebGL、WebVR 和3D游戏和体验。可用于品牌营销、游戏开发、工业控制领域可视化数据展示等

官网地址：www.babylonjs.com

![](http://www.seedblog.cn/uploads/article/2020-11-21/bMb0FWxdWjVARIZk3t9f2hH2GCGXHpIN5QI9hHjv.jpeg)

#### 特点
由微软开发，文档完善且更新维护及时，支持 JavaScript 和 TypeScript 两种编程语言，对于用于前端开发3d非常合适。

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

创建你的3D世界，前端开发之3d利器-Babylon.js
2. API接口封装完善且丰富，大大减少开发3d效果的难度。

3. 文档详细，微软团队维护，支持TypeScript，适合做大型项目。

4. 具备齐全的交互相关的API接口，例如 手机触摸屏事件、鼠标事件、陀螺仪事件等，减少开发者的开发成本。

5. Web、IOS、Android上的画面表现几乎相同，可以让美术设计只专注于模型，开发者只专注于代码的Web3D引擎，可以节省大量人员的沟通时间。

6. 最重要一点是开源、免费。

#### Babylon官方提供的几款工具

我们可以直接预览和调整美术提供的模型，在不需要编写代码的情况下，对模型进行处理。为后续代码开发提前处理异常情况，加快了开发速度。下面是 官方提供的几个工具

1. sandbox

官方地址：https://sandbox.babylonjs.com

美术和程序员都可以使用该工具，主要用于预览3D模型，可以将3d模型直接拖动到sandbox中预览，与最终发布的效果基本相同。支持格式有：gltf、glb、obj 和 babylon格式。

以下是 我的世界3d模型 导入到babylon的sandbox中

2. Playground

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

主要是程序员使用，是一个集成babylon开发框架和接口的web环境界面，

程序员可以直接在playground中编写代码，调试效果，不用自己搭建开发环境，打开即用。

创建你的3D世界，前端开发之3d利器-Babylon.js

3. Editor

官方地址：http://editor.babylonjs.com/

主要是美术设计人员使用的。editor其实 babylon的模型编辑器，可以将3D max等软件中的模型，导入并进行编辑，也可以将模型导出为babylon格式，这样可以减少不同格式之间的兼容问题。

创建你的3D世界，前端开发之3d利器-Babylon.js
关于babylon.js的入门指南，今天就分享到这里，下期将为大家带来，程序员使用babylon.js的方式和方法。