3 Babylonjs基础入门 设置位置、旋转和缩放

坐标轴

在讲这篇之前，我们应该先了解一下坐标轴的含义。大家经常看到的坐标轴是2d坐标轴，就是定义了一个原点，横向x轴，纵向y轴。而在3d坐标系内，我们需要增加第三个轴Z轴。之前了解过Three.js的朋友应该知道，Three.js是使用的右手坐标系，向右方向为X轴正方向，向上为Y轴正方向，指向屏幕的方向为Z轴正方向。而Babylonjs使用的坐标系是左手坐标系，刚好和Three.js 的Z轴正方向相反。（对着理论还不理解的大家可以查一下左手坐标系和右手坐标系）

在所有图表和场景中，X轴为红色，Y轴为绿色，Z轴为蓝色。
坐标系分为世界坐标和局部坐标。世界坐标的原点是恒定不变的，局部坐标是通过转换出来的单独的坐标系。

向量

在Babylonjs中，我们需要通过 new BABYLON.Vector3(x, y, z)的对象来表示模型网格的位置、旋转以及缩放。

默认位置

所有的模型在创建之后，它们的默认位置都是出于世界坐标原点，所有轴的旋转为0，缩放为1

设置位置

我们可以一次性设置模型网格所有轴的位置：

pilot.position = new BABYLON.Vector3(2, 3, 4);

或者对单个轴的坐标设置

pilot.position.x  =  2;
pilot.position.y  =  3;
pilot.position.z  =  4;

设置旋转

我们可以一次性设置沿所有轴的旋转

pilot.rotation = new BABYLON.Vector3(alpha, beta, gamma);

或者单独设置沿某个轴旋转：

pilot.rotation.x  =  alpha; //沿着X轴旋转
pilot.rotation.y  =  beta;  //沿着Y轴旋转
pilot.rotation.z  =  gamma; //沿着Z轴旋转

以上三个轴的旋转书写顺序没有先后，无论怎么设置，模型旋转在世界坐标系都是按ZYX顺序旋转。
其中alpha，beta和gamma是以弧度为单位测量的角度。即2π为沿当前旋转轴旋转一周360度的值。

自定义顺序旋转

现在问题来了，Babylongjs旋转顺序是固定的，如果你想自已定义自己的渲染顺序，可以使用网格方法addRotation。
比如，如果你想先沿X轴旋转，再沿Y轴旋转，最后进行Z轴旋转：

mesh.addRotation(Math.PI/2, 0, 0).addRotation(0, Math.PI/2, 0).addRotation(0, 0, Math.PI/2);

设置缩放

模型网格默认缩放都为1，就是不缩放。缩放值不能小于等于0，小于1将比默认尺寸缩小，大于1将按倍数缩放。
我们可以通过实例化一个三维向量进行设置所有轴的缩放：

mesh.scaling = new BABYLON.Vector3(scale_x, scale_y, scale_z);

或者单独定义某个轴的缩放：

mesh.scaling.x = 5;
mesh.scaling.y = 5;
mesh.scaling.z = 5;

上面我们设置了网格模型沿三个轴都放大到了默认的五倍尺寸。