Babylonjs 基础教程与填坑①入门常用网址

入坑babylon.js一段时间了，现在项目上线了，整理一下基础的入坑姿势和部分填坑技巧，记录一下遇到过的一些问题。

babylonjs大法好，在webgl领域，国内社区活跃度还比不过three，入坑时好多东西只能自己研究。

 

目录

1.先说总结：

以下网址中，只是我先做一下简单概括笼统的整合网址链接，具体拓展放在之后章节（大概不咕）

2.常用网址（国内）4.1版本 非最新版本

可以在线运行和inspector调试，可以下载源码，最好还是在英文api官网通过查函数单词来找到别人写过的例子。

3.常用网址（国外） 4.2版本 doc、论坛、Playground（PG）很重要

调研期间可以查阅github的Exporters的资源，看看官方人员的fbx文件转成glb、gltf、babylon文件的区别

4.【playground搜索】通过搜索指定代码方法 查找别人的demo，非常有用

 https://doc.babylonjs.com/playground/?code=onPointerMoveObservable

playground页面也可以打开inspector

5.Stable version标准版js引用

（不想用js引入也可以看doc官方文档使用npm加载对应依赖包）

6.Preview version 预览版js引用

7.【非常重要】sandbox在线沙盒 https://sandbox.babylonjs.com/

隔壁threejs常用的两个沙盒查看器地址，用于查看模型是否出问题

8.【官方在线编辑器，个人不推荐，踩了一堆坑，还是深坑】

---

1.先说总结：

以下网址中，只是我先做一下简单概括笼统的整合网址链接，具体拓展放在之后章节（大概不咕）

零基础入门的同学先把中文网4.1版本的【基础课程babylon101】入门20节课过一遍，然后看看官方demo跑一跑，可以了解这个框架能支持什么样的效果。

之后进阶篇就是how to 或者feature...

（入门也可以通过官方4.2英文版本的文档进行学习，学习难度曲线和案例适合有耐心翻阅api文档的同学）

大致知道scene、mesh、Material、texture、light、camera这些类的用图和含义

（场景、模型、材质、贴图纹理、灯光、镜头视角）

 

 

想上手过一遍代码的同学，也可以直接下载three群主暮佬整理的babylon案例https://github.com/johnson2heng/Babylon.js_demo

基本功能实现都有，比如镜头动画、移动端镜头、加载模型、切换场景、鼠标事件等等，连sandbox暮佬都扒下来了（版本太早）

暮佬这个学习案例用的还是最简单的dom+js引用方式运行，不涉及npm、vue、react等打包框架

【运行时必须搭建web服务，而不是直接鼠标双击html文件进行运行，具体查阅搭建web服务章节】

 

国人也有最新制作的线上编辑器，同学们如果有类似u3d、ue4、3dmax、maya的操作经验则很容易上手。

https://mengshukeji.github.io/LuckyBabylonDemo/

这里的上手也是指了解babylonjs这个框架的大致功能。

 

我个人用官方原生的sandbox+inspector+playground，因为国人编辑器的参数是中文，如果通过UI界面配置参数时，再想改为代码设置时，查阅英文api有点不方便，

当然官方自己inspector的操作界面参数变量名和api的参数单词都不一致，例如Camera类的near plane对应minZ。

 

 

inspector也指代debuglayer

scene.debugLayer.show();//开启babylon场景调试器inspector

 

2.常用网址（国内）4.1版本 非最新版本

babylonjs中文网 https://cnbabylon.com/    4.1版本，官网已更新到4.2版本

babylon中文文档 https://doc.cnbabylon.com/ （文档汉化进度20%，有些未更新，例如3dmax插件）

babylonjs库 https://doc.cnbabylon.com/3-0-how-to-get-babylon-js/

 

 

babylon中文网的入门前20节基础教程

 

国人制作编辑器 https://mengshukeji.github.io/LuckyBabylonDemo/

编辑器教学视频 https://v.qq.com/x/page/g3163x5bltj.html

中文界面和各种选项，适合入门，但是中文转英文再到api文档查阅就要有相应基础才能查阅的到了

 

 

babylon中文网demo源码，持续更新中 https://example.cnbabylon.com/

 

有playground基本表示就有源码了 这点非常非常关键，babylon这点个人在入门时感觉比three好非常多

可以在线运行和inspector调试，可以下载源码，最好还是在英文api官网通过查函数单词来找到别人写过的例子。

 

 

3.常用网址（国外） 4.2版本 doc、论坛、Playground（PG）很重要

国外官网 https://www.babylonjs.com/

教程api文档 https://doc.babylonjs.com/

官方PG案例 https://doc.babylonjs.com/examples/ 入门必备，图文整理篇有图包整理

官方论坛  https://forum.babylonjs.com/   有问题上论坛查阅相关资料

官方github账号 https://github.com/BabylonJS

Babylon.js源码 https://github.com/BabylonJS/Babylon.js

官方文档 https://github.com/BabylonJS/Documentation

官方API markdown https://github.com/BabylonJS/Documentation/tree/master/content

 

 

3dmax、maya、blender导出.babylon .gltf .glb插件 https://github.com/BabylonJS/Exporters

以3dmax导出.glb .gtlf .babylon文件举例，同事建模师踩过一个坑：如果3dmax加载插件报错，是directX啥的，直接搜索报错原因，可以找到b站教程，按视频操作流程改为direct3d即可，我顺手记录的，一般不会遇到，也有可能是我同事装了好多插件冲突导致的。

国内教程：https://www.babylonjs.com.cn/resources/3dsmax.html （未更新材质节点）

国外教程：https://doc.babylonjs.com/resources/3dsmax

调研期间可以查阅github的Exporters的资源，看看官方人员的fbx文件转成glb、gltf、babylon文件的区别

例如看看是多材质球、材质球的类是pbr材质还是standard材质；看看mesh是单独mesh还是合并mesh，以及fbx的动画

 

 

国外论坛 https://forum.babylonjs.com/

论坛可以查看官方人员提供的playground源码demo，后续做个论坛demo带截图的整理

 

 

4.【playground搜索】通过搜索指定代码方法 查找别人的demo，非常有用

 https://doc.babylonjs.com/playground/?code=onPointerMoveObservable

playground和sandbox区别：

pg是在线代码编写和查阅别人写的代码demo，可以打开inspector调试器

sandbox是把模型上传到网页，可以打开inspector调试器看看模型是否正常，也适用于建模师测试

4.1版本的查阅界面（国外官网已过时）

 

4.2版本的查阅界面，当前版本

playground页面也可以打开inspector

 

Inspector下载，可以右键另存为: https://cdn.babylonjs.com/inspector/babylon.inspector.bundle.js

代码调用：scene.debugLayer.show();

babylonjs库下载 https://doc.babylonjs.com/babylon101/how_to_get

https://github.com/BabylonJS/Babylon.js/tree/master/dist

https://github.com/BabylonJS/Babylon.js/trunk/dist SVN Checkout下载指定文件夹

 

 

5.Stable version标准版js引用

（不想用js引入也可以看doc官方文档使用npm加载对应依赖包）

npm： 官方教程文档 https://doc.babylonjs.com/divingDeeper/developWithBjs/npmSupport

• BabylonJS: https://cdn.babylonjs.com/babylon.js
• BabylonJS (unminified): https://cdn.babylonjs.com/babylon.max.js
• Inspector: https://cdn.babylonjs.com/inspector/babylon.inspector.bundle.js
• Loaders: https://cdn.babylonjs.com/loaders/xxx

• • xxx can be any file from /dist/loaders/

• Materials library: https://cdn.babylonjs.com/materialsLibrary/xxx

• • xxx can be any file from /dist/materialsLibrary/

• PostProcesses library: https://cdn.babylonjs.com/postProcessesLibrary/xxx

• • xxx can be any file from /dist/postProcessesLibrary/

• GUI: https://cdn.babylonjs.com/gui/babylon.gui.min.js
• Procedural Textures library: https://cdn.babylonjs.com/proceduralTexturesLibrary/xxx

• • xxx can be any file from /dist/proceduralTexturesLibrary/

• Serializers: https://cdn.babylonjs.com/serializers/xxx

• • xxx can be any file from /dist/serializers/

 

Example:

6.Preview version 预览版js引用

 

• BabylonJS: https://preview.babylonjs.com/babylon.js
• BabylonJS (unminified): https://preview.babylonjs.com/babylon.max.js
• Inspector: https://preview.babylonjs.com/inspector/babylon.inspector.bundle.js
• Loaders: https://preview.babylonjs.com/loaders/xxx

• • xxx can be any file from /dist/preview release/loaders/

• Materials library: https://preview.babylonjs.com/materialsLibrary/xxx

• • xxx can be any file from /dist/preview release/materialsLibrary/

• PostProcesses library: https://preview.babylonjs.com/postProcessesLibrary/xxx

• • xxx can be any file from /dist/preview release/postProcessesLibrary/

• GUI: https://preview.babylonjs.com/gui/babylon.gui.min.js
• Procedural Textures library: https://preview.babylonjs.com/proceduralTexturesLibrary/xxx

• • xxx can be any file from /dist/preview release/proceduralTexturesLibrary/

• Serializers: https://preview.babylonjs.com/serializers/xxx

• • xxx can be any file from /dist/preview release/serializers/

 

Example:

babylon官方常用的案例 https://doc.babylonjs.com/resources/meshes_to_load

截图中的是光照烘焙图的调用例子，后续章节讲解

 

7.【非常重要】sandbox在线沙盒 https://sandbox.babylonjs.com/

可以直接把.gltf .glb .obj .babylon拖拽进sandbox内，如果带图片资源记得全选后放进沙盒。

沙盒自带默认的hdrskybox天空盒和camera弧形轨道镜头，

小技巧：可以在左侧节点上，鼠标右键新建freecamera，切换镜头就可以从正交轨道环绕镜头改为进行上下左右移动镜头。

如果左侧列表项特别多，比如1000个模型，想快速往上滑动到搜索选项，可以点击×号左边的小窗口，就可以快速重置层级显示。

具体操作教程查阅之后的章节：

 

隔壁threejs常用的两个沙盒查看器地址，用于查看模型是否出问题

https://gltf-viewer.donmccurdy.com/
https://threejs.org/editor/

 

 

 

 

8.【官方在线编辑器，个人不推荐，踩了一堆坑，还是深坑】

babylon官方编辑器 （我用的时候是4.1版本，以下吐槽部分皆为v3网页版本）

http://editor.babylonjs.com/v3/     4.1版本 网页版本

http://editor.babylonjs.com/    4.2版本，目前最新版，为本地下载客户端版本

缺点：1.未完善，贴图的uv通道属性不能页面设置，api查询coordinatesIndex 可以代码设置。

2.作为工程管理时，场景模型上传下载需要配合微软的OneDrive使用，就需要科学上网。

3.我还是在 https://github.com/BabylonJS/Editor 官方github资源库找到这个，填了一堆坑发现

babylon官网里面就没有editor的推荐位置，都在推荐sandbox、playground、inspector

4.y-up z-up 左手坐标系 右手坐标系的问题，因为各方都不统一（babylon是y-up，y轴朝上），只能导出时设置。例如从3dmax导出glb等文件时设置y-up，再把glb放到在线编辑器时，glb模型的材质再动态加载其他贴图，可能上下颠倒，就需要修改UV，然后网页编辑器没有uv修改的选项，inspector可以设置2套uv显示

 

优点：1.UI界面清晰，有3dmax，maya，blender，u3d，ue4等操作经验，更易于上手入门。

2.基础操作，在场景scene内添加 模型、材质（标准材质、PBR材质）、贴图、光源（点光源、平行光、聚光灯、半球光）；

3.进阶操作添加粒子特效，材质节点编写（类似UE4蓝图），代码脚本编写，添加光影LightMap贴图（但是不能设置二套UV）等等

 

竟然坑都填了，还是简单介绍一下官方editor操作方法，万一以后官方更新完善

现在版本还不如国人做得在线编辑器好用https://mengshukeji.github.io/LuckyBabylonDemo/

https://www.v2ex.com/t/717803#reply0

 

官方在线编辑器网页版editor界面：

 

官方本地客户端editor界面

 

 

https://www.nunustudio.org/

隔壁threejs的在线编辑器