在讲这篇之前,我们应该先了解一下坐标轴的含义。大家经常看到的坐标轴是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;
上面我们设置了网格模型沿三个轴都放大到了默认的五倍尺寸。