简单介绍，无论是webgl程序员还是3D美术，都必须要学会用sandbox和inspector

提高团队效率的必备工具

例如模型师导出的gltf、glb模型，程序员通过代码加载模型，部署运行后才发现碎面破面、模型面出现闪烁、模型没有颜色、贴图反了等等bug，

很多小伙伴不知道如何定位bug是模型师还是程序员的锅，

这些bug有些是模型师的锅，比如模型面没有厚度、两个面贴太紧导致闪烁，法线反了导致模型黑色，uv贴错了导致贴图反了，

有些bug是因为pbr材质，程序没写hdr环境，所以模型黑了；程序创建贴图对象时的invertY参数没设置false导致贴图反了等等，

以上类似问题出现时，模型师和程序员都各自把glb、gltf、.babylon模型文件放到沙盒中查看，

沙盒内模型显示正常，那么部署运行出问题大概率就是程序的锅，如果在沙盒就有闪烁，那么大概就是模型师的锅。

快速debug复现定位到问题，才是解决问题的关键，而不是互相甩锅

正文：babylon官方推荐网站推荐位

playground 在线代码运行+inspector检查器

node Material editor 模仿UE4的蓝图材质节点编辑器

sandbox 在线查看模型+inspector检查器

本次模型用到glb资源可以从csdn下载或是访问原网址。

https://download.csdn.net/download/maki077/13061978

方便直接把.glb 丢到官方在线沙盒查看，或者是本地加载配合inspector调试。

如果不想下载，也可以查看官方在线运行地址：

模型分别为lightmap贴图案例、espilit官方vr展厅demo、烛光lightmap案例（自定义loading）

https://www.babylonjs-playground.com/#4AJ16M#5

https://www.babylonjs.com/demos/glowingespilit/

https://vernissage.phire.de/

sandbox在线沙盒 https://sandbox.babylonjs.com/

可以直接把.gltf .glb .obj .babylon拖拽进sandbox内，如果模型带图片资源记得全选后，拖拽放进沙盒后，右下角按钮即可打开inspector调试器。

记住：gltf+bin文件一起拖拽；babylon文件和多张图片资源一起拖拽；

沙盒显示的环境自带默认的hdr的skybox天空盒和camera弧形轨道镜头，

简单说就是沙盒的pbr材质默认有效，代码写pbr材质如果少写hdr环境配置就导致模型没有颜色。

官方操作文档Display and Use the Inspector，末尾有拓展进阶链接 https://doc.babylonjs.com/how_to/debug_layer

小技巧1：可以在左边node节点，鼠标右键新建freecamera，进行上下左右移动。

创建freecamera后，再点亮图中射线机icon，表示切换为自由镜头，就可以↑↓↔控制视角了

小技巧2：沙盒场景中的鼠标事件，拖拽、旋转、拉伸、显示边框、选中模型开关【最重要，必定要会】

选中模型开关打开后，鼠标点击场景内的模型后，左侧目录栏就会自动定位到该模型所在列表位置，

配合拖拽使用，可以移动模型位置，如图所示，显示出模型的xyz坐标轴

篇幅所限，做为小技巧先试着使用一番，详细操作下一章模型材质贴图类讲解

小技巧3：左侧菜单栏mesh目录展开过多，滚动条样式隐藏，【快速复位】左侧布局、搜索、切换鼠标点击事件

当创建instance过多且未设置其father节点时，左侧列表长度就过长，

而且开启鼠标事件后，鼠标点击场景内的模型，左侧列表就自动定位到对应模型所在列表位置，

这个小技巧可以用弹出/复位浮动层来重置左侧UI布局，进行开关切换鼠标事件

小技巧4：使用点光源来估算模型的大小

和创建freecamera一样，在左侧目录栏node节点鼠标右键新建point light，开启鼠标事件的拖拽和拾取功能

（playground也是可以开启inspector的，非常好用，查别人demo代码，程序员必须要学会使用）

用官方这个动画例子举例，这个动画中的模型人物有多高？

https://playground.babylonjs.com/#SFW46K#1

图中点光源，开启拖拽功能，显示出xyz坐标系（左手坐标系），当前坐标向量（0,0,0）

点光源拖拽到人物头顶，下方详细参数可以看到当前坐标（0,17.95,0），这个人物模型高度接近18米

所以模型看过去小，不是真的小，是因为没有参照系！！

另外一个混合动画的demo里面的小白（蓝）人模型，各位同学可以尝试操作这个小人有多高（ue4的叫法小白人，高度也近似）

https://playground.babylonjs.com/#BCU1XR#0

小技巧5：babylon创建模型左手坐标系；导入的glb模型大部分为右手坐标系【切记多观察】

因为涉及到3dmax 和 babylon，从z-up 变成 y-up，然后还有左右手坐标系问题，涉及instance内存优化，uv贴图代码设置和shader相关xyz值的计算，

没啥好方法，就是丢到sandbox看看这个模型是什么坐标系坐标值，

也可以代码获取glb模型的position（右手坐标系）和absolutePosition（左手坐标系）的值，右手坐标系模型的absolutePosition就是position.x值乘-1即可。

（拖动x轴，沿x轴箭头方法移动，虽然position.x值都会增加，但是具体absoluteposition值还是需要根据左右手坐标系计算，

比如babylon的camera，lookat某个glb的postion，是否需要postion.x乘-1，多尝试两下就记住了）

【下图注意，右下角的为右手坐标系，其余为左手坐标系】

题外补充①：lookat函数调用，A lookat B，表示A的z轴方向朝向B坐标值，如果B为右手坐标系，就调整目标B的position.x值

meshA.lookat(meshB.position.x*-1,meshB.position.y,meshB.position.z)

题外补充②当然不想修改代码的小伙伴，可以要求模型师设置模型的x轴，scale的x值为-1，就可以反向x，这时候导出的glb模型在沙盒就是左手坐标系了

【题外补充②的这个方法不确定代码计算坐标值时是否正常，暂未验证】

左右手坐标系判断图，右手的图请自行绕y轴转180°

大拇指-红x，食指-绿y，中指-蓝z

Sandbox和inspector操作方法基础教程

1、全选拖拽所有模型资源到sandbox内，例如.glb已经包含图片；.gltf+xx.bin；.babylon+xx.jpg；

以虚拟展厅espilit为例子（官方源码可从gihub下载，或是访问上文demo链接）：

额外补充：espilit展厅案例很特殊，因为官方把wasd和↑↓↔控制镜头移动、lightmap的二套UV贴图、Reflection反射贴图都已经整合到scene.babylon，

如果通过inspector网页导出.glb文件，再丢回sandbox，会有部分材质丢失，比如lightmap。所以导出glb和babylon文件转换需要格外小心

这是因为glb基于gltf的格式标准，gltf标准的一个坑是导出时，材质的部分贴图通道被遗弃，另一个坑是1 mesh = 1 Material，就是一个模型对应一个材质，如果在3dmax中实现了复合材质球，导出的glb gltf就各种问题了。可以通过代码实现mutiMaterial。

（邪道玩法，因为我的项目只导出裸glb，贴图是通过代码动态配置的，用于优化先小图加载，靠近再加载大图，

这时模型如果是多mesh的group，导出glb会发现没有子mesh，所以解决方法是在3dmax每个子mesh都赋予材质导出glb后，这时导出的glb就有子mesh，

导出的glb可以放到sandbox，在inspector的左侧列表看到是否有加号，能否展开看到子msh

以上邪道操作是我听模型师说的，可能有误，不确定maya和blender是否有同样的问题）

所以估计官方才用自己.babylon，参数不丢失。网页导出babylon文件，和图片一起丢回sandbox正常

gltf标准：https://github.com/KhronosGroup/glTF/blob/master/specification/2.0/README.md

espilit这个demo的scene.babylon文件和所引用的图片资源全选后拖拽到sandbox内。

2、点击图中右下角的按钮icon，显示inspector，为左右两侧黑色面板。

3、Camera-操作技巧、Camera类的参数说明（FreeCamera）

新建free camera（非常好用）

如果导入时的默认camera是arc rotate camera弧形轨道镜头，使用鼠标滚轴控制远近距离有限制，就不能近距离查看大模型内的细节。

用freeCamera就可以上下左右自由移动了。

(1)在左侧面板的节点Nodes位置，鼠标右键新建FreeCamera

(2)新建的freeCamera，点击摄像头图标，点亮后表示选择该摄像头为主视角。

(3)摄像头距离场景太远，可以修改position，场景位置可以通过查看模型的position来设置。

（也有可能是模型太小，可通过上述小技巧大致查看模型的宽高；

太远看不到就是列表所示nearplane和farplane，对应到代码就是camera.minz和maxz【这个坑，UI和api文案不统一】）

(4)对比展厅自带的camera参数，参数说明

eslipit展厅自带Camera的id Camera04，新建的freeCamera改名Camera06，排列靠近好对比

1.UniversalCamera是babylon老版本的自由镜头类

2.near plane 和 far plane 画面成像位置。nearplane为1时如果靠墙太近就看到墙后的画面，仿佛穿墙挂

面板参数对应api的位置 near plane → minZ far plane →maxZ（这个特殊）

camera.minZ=0.05;//near plane

https://doc.babylonjs.com/api/classes/babylon.freecamera 在freecamera的父类TargetCamera

near plane 和 far plane 图文说明（摘自论坛）

3.inertia 惯性，移动惯性默认0.9即可

camera.inertia =0.8;

4.layerMask 和摄像机进行位与计算 A&B的值不为0，就显示。类似u3d的，每一位都是一种状态。

所以默认值为0xFFFFFFF0，16进制除了个位所有值都为1，位与计算后不为0，则显示。

API：限制摄像机查看具有相同 layerMask 的对象。

layerMask为1的摄像机将渲染mesh.layerMask & camera.layerMask!==0。

API：Restricts the camera to viewing objects with the same layerMask. A camera with a layerMask of 1 will render mesh.layerMask & camera.layerMask!== 0

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

https://forum.babylonjs.com/t/layermask-issue/3499

5.Mode→Perspective透视法，类似画人物、画建筑时讲究透视画法，简单说就是拍照视角

Mode→orthographic 正投影的显示

6.Field of view ，fov 摄像机景深值，手机拍照的fov值大概在45~55

代码中常用的fov值为弧度（0~π），inspector面板为角度（0~179.93°）

camera.fov = Math.PI / 4; // 换算为45°camera.fov = 1; // 换算为57.3°camera.fov = 0.8; // 换算为45.84° 系统默认值

fov成项计算公式摘自论坛

https://forum.babylonjs.com/t/set-camera-viewport-to-match-plane/9756

7.transform camera的和Mesh的不一样，

camera为Target 朝向、Position 位置、 Rotation 旋转；

camera.setTarget(BABYLON.Vector3.Zero());
camera.setTarget(new BABYLON.Vector3(-1, 1.43, 1));
camera.position = new BABYLON.Vector3(0, 2, 70);
camera.rotation = new BABYLON.Vector3(0, 2, 70);

8.Angular sensitivity 角灵敏度默认2000，鼠标旋转灵敏度

camera.angularSensibility = 2000;

9.Speed 相机移动速度米每秒 m/s

camera.speed=0.3;

10.Check collisions 是否允许碰撞

camera.checkCollisions = true;

场景也要允许碰撞

scene.collisionsEnabled = true;

11.Apply gravity 是否允许体现重力，

camera.applyGravity = true;

重力值的设定在场景类中

scene.gravity = new BABYLON.Vector3(0, -0.09, 0);

额外补充：inspector的场景重力调试，点击左侧面板的scene，右面板显示场景内的对应参数

12.Ellipsoid 摄像机椭圆胶囊体的大小设置

camera.ellipsoid = new BABYLON.Vector3(0.2, 0.9, 0.2);

y-up，所以y值是高度，0.9表示这个胶囊体的中心位置，所以视线高度为0.9x2=1.8米

额外补充：官方设置的重力-0.09，向下0.09的force力，非常小，配合胶囊体的宽0.4米，

官方这个espilit虚拟展厅上楼梯时非常平滑，

或者模型师建立一个隐藏的的斜坡放在楼梯上，斜坡作为碰撞体，摄像机在斜坡上下移动时也可以实现平滑移动。

鼠标选中楼梯，开启inspector的debug选项中的线框模式

13.Ellipsoid offset 摄像机椭圆胶囊体偏移量

最终碰撞位置对的计算方式如下所示：

最终碰撞位置finalPosition = 碰撞位置position - vec3(ellipsoid.x, ellipsoid.y, ellipsoid.z) + ellipsoidOffset

额外补充：代码设置camera时，如果要操纵相机，就要绑定，

如果多机位，动态设置camera的postion即可

如果多视角，需要创建两个camera进行展示，例如俯瞰小地图

var camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(-1, 1.8, 2), scene);
// 相机事件绑定到画布上面
camera.attachControl(canvas, true);

旋转轨道镜头arc rotate camera ，旋转角度限制，例如仰角多少，不能看模型底部，api就有，后续再补充

Babylonjs 基础教程与填坑③sandbox沙盒、inspector调试器操作教程【新手必看】和Camera类详解相关推荐

Babylonjs 基础教程与填坑④sandbox+inspector面板中的Mesh类
目录 inspector基本操作 1.在场景想要通过鼠标点击选中模型 2.鼠标点击场景内的小桌子,选中模型后,可以通过左边的眼睛开关,确认是否选择正确. 3.inspector左侧面板的上方的可以单选 ...
自媒体运营教程：关于百家号内容质量的一些解析，新手必看！
自媒体和传统媒体是有区别的,我们在写文章的时候,不要用"小编"这两字,用自己的昵称,这样给人的感觉是,作者是鲜活的.传统媒体给人的一种距离感,因此我们需要拉近作者和读者之间的距 ...
Babylonjs 基础教程与填坑①入门常用网址
入坑babylon.js一段时间了,现在项目上线了,整理一下基础的入坑姿势和部分填坑技巧,记录一下遇到过的一些问题. babylonjs大法好,在webgl领域,国内社区活跃度还比不过three,入坑 ...
gmod找不到好友服务器,Garry’s Mod|Gmod服务器架设教程（二）架设沙盒模式服务器...
上一篇给大家介绍了gmod服务器端的下载与更新,准备好服务器端后我们就可以开始架设gmod最基本的游戏模式沙盒(Sandbox)了. 1.使用GUI模式启动服务器端我们进入服务器端的目录,找到src ...
简单了解 sandbox 沙盒
1.操作系统和浏览器层面的沙盒: 操作系统层面的沙盒的含义就是操作系统对进程的可访问的内存地址所做的限制,限制进程可访问的内存在其被分配的内存地址区间内,而不允许操作其他的内存地址,从而提供安全层面的 ...
Android基础入门教程——8.3.1 三个绘图工具类详解
Android基础入门教程--8.3.1 三个绘图工具类详解标签(空格分隔): Android基础入门教程本节引言: 上两小节我们学习了Drawable以及Bitmap,都是加载好图片的,而本节我 ...
zbrush次世代零基础新手必看入门教程第一部分：建模
zbrush零基础新手必看入门教程.在第一部分中,将向您展示了如何建模...... 欢迎阅读zbrush零基础新手必看入门教程的第一部分.这部分将带您直接开始,并向您展示如何从头开始创建一个吸引人的角 ...
zbrush零基础新手必看入门教程第三部分：构成
zbrush零基础新手必看入门教程,在第三部分,如何构建模型并修复任何变形...... 第01步:打破对称性在你开始构图之前,了解你想要角色的位置是很重要的,特别是如果你在讲故事.姿势将赋予你的角色 ...
nnUNet保姆级使用教程！从环境配置到训练与推理（新手必看）
文章目录写在前面 nnUNet是什么? 一.配置虚拟环境二.安装nnUNet框架 1.安装nnUNet 这一步我遇到的两个问题: 2.安装隐藏层hiddenlayer(可选) 三.数据集准备 nn ...

Babylonjs 基础教程与填坑③sandbox沙盒、inspector调试器操作教程【新手必看】和Camera类详解