Babylonjs 基础教程与填坑②editor在线编辑器操作教程【不推荐使用】

先说总结：【不推荐】使用这个editor编辑器；【推荐】使用inspector

可以看看本编的题外话内容，算是踩坑小总结

babylon官方编辑器 （我用的时候是4.1版本，以下吐槽部分皆为v3网页版本，v4客户端版本目前依旧不是完成品）

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、nodematerialeditor（nme 材质节点编辑器，写shader用）

然后这个编辑器是一个官方人员在闲暇时间鼓捣出来的...在逛bjs论坛时看到这句话时，惊了，怪不得4.1官网没推荐，现在4.2有个exe版本，依旧不好用。

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
 

网页版本：http://editor.babylonjs.com/v3/           ps.下文截图时为客户端版本未发行时截图的，所以网址是http://editor.babylonjs.com/

 

本地客户端编辑器版本 下载地址：http://editor.babylonjs.com/

 

editor基础操作方法

1、打开贴图窗口 view→texture viewer ，初始页面时是被默认关闭

因为scene、mesh、material、texture、camera，这几个参数最为关键，webgl入门贴图仔，就在进行模型找材质指定贴图，图片上传，图片引用的操作

（题外话：材质中的lightmap等贴图通道参数，在gltf标准打包时是不带的，所以需要通过代码指定，或者通过editor和inspector先手动指定一下贴图，看看演示效果）

2、打开材质窗口 view→Material Viewer 初始页面是被默认关闭

3、模型直接从文件夹拖拽放到中央的场景框内，如果是gltf格式，记得和bin文件一起全选后拖拽丢进scene，否则缺失报错。

如果只拖拽gltf，就因为找不到文件，报错加载bin文件失败。

4、可以鼠标点击场景选中模型，也可以右边列表点击选择模型名字，再点击上方的移动、旋转、放大

（

   ps.题外话补充：右侧的add可以添加脚本模块，在线脚本编写这个坑我没空去踩，感觉像是未完成品，官网也没有教程和推荐使用...

   不确定是否和ue4或者u3d一样，一个模型挂载脚本，然后把模型放在场景内就能执行脚本；

   用UE4的说法就是写好一个门的蓝图actor，蓝图中带门的模型和鼠标点击时的开门动作蓝图代码，把门actor放在关卡场景内，就可以直接方便调用了；

 

   babylonjs纯代码就是，loader加载门的模型，在回调成功的函数内，再编写鼠标点击事件actionevent，然后封装成模块，

但是如何管理这些模块脚本，在编辑器中没有很好的看到，以及调试使用、代码迭代、打包后的场景代码.scene文件的使用，官方文档在最初4.1版本时也没有写。

还不如自己用node写项目，cmd标准或者amd标准搞起，同样是各个模块脚本，比界面上找按钮，以及怀疑官方功能未实现好多了

）

红绿蓝对应 xyz，可以看出bjs默认使用左手坐标系+y-up标准

左手大拇指-红x；左手食指-绿y；左手中指-蓝z

（ps题外话①：gltf、glb的从3dmax打包出来时，可能已经是y-up了，但是放到场景scene内，是右手坐标系，

获取glb模型的坐标时，有position和absolutePosition，分别为右手坐标系的值和左手坐标系，遇到问题时position.x*-1可以解决）

（ps题外话②：很多同学问，加载模型后，用模型对象的position.x 修改坐标没用，那是因为3dmax导出的gltf、glb的模型，是四元素quaternion格式标准的

解决方法为quaternion设置为null，或者给position一个新的3维向量值new Babylon.Vector3(x,y,z)

）

5、模型mesh 材质Material 贴图texture

缺点：这个官方editor编辑器，选中的模型可以快速链接到材质，但是材质使用的贴图就需要手动去找。贴图uv通道不能直接在界面勾选(sandbox、inspector可以)，估计需要脚本设置，等官方更新。

1.选中模型，左侧出现对应属性值

2.mesh使用的材质球为Wood，类型为StandardMaterial

3.材质使用的固有色贴图 albedo.png

4.需要自己在贴图窗口找到这图

5.点击选中右边的贴图，左侧inspector显示贴图属性，只有UVScale，没有UV通道设置，没有 UVoffset，等官方更新，或者自己在编辑器内写脚本。

【第5点严重劝退我了，现在4.2的exe版本的编辑器有这个功能，但是整体依旧不完善...】

6.金属、玻璃反光可以使用PBR材质，如果代码实现使用PBR材质没有效果，请添加天空盒。

API中就有PBRMaterial。

PBR材质选项多于StandardMaterial标准材质球。

（在sandbox的inspector详解部分）

（题外话：Standard材质的固有色贴图通道为DiffuseTexture；PBR材质的固有色贴图通道为AlbedoTexture 有小伙伴不看api就给材质赋予贴图通道，说为啥图片不显示）

 

7、场景可以选择两种camera进行控制

free camera自由镜头（universalCamera已过时）可以上下左右移动，类似fps cs:go操作。

arc rotate camera，弧形旋转摄像头，控制视角绕着中心点进行轨道绕圈，类似月亮是摄像头，绕着地球转圈。

 

8、场景保存可以导出.glb .gltf .obj .babylon

.babylon文件把镜头，甚至脚本写好的镜头动画和按钮绑定监听都可以一起放在.babylon文件，

例如官方例子Espilit，可以查doc文档看到这个例子或者github查看源码，就只加载了espilit.babylon文件，wasd按键绑定都一起实现调用好了。

但是editor编辑器在迭代、多人同步协作代码管理方面的操作就很不理想，

.babylon文件也可以通过代码打包出来，所以编辑器现阶段的版本真的不推荐使用，版本不强势，就不要虐待自己了。

9、工程管理保存模板，需要配合微软的OneDrive云使用。

导出.scene文件，

工程管理需要梯子，就不适用了。