babylon101

位置和旋转


位置,旋转和缩放

101课程仅考虑网格的位置,旋转和缩放的设置进一步阅读 将向您展示一系列方法,用于将网格平移和旋转给定量。

无论使用何种方法,它们都需要一个参考框架,一种描述位置,旋转或缩放的方法,以及一些有助于可视化应用这些方法的效果的方法。Pilot可以为构造不对称形状提供可视化。

The Pilot 飞行员

参考框架

Babylon.js使用两个参考框架,世界轴和局部轴。世界轴的起源永远不会改变。

在所有图表和操场中,X轴为红色,Y轴为绿色,Z轴为蓝色。

创建网格时,它们的中心位于世界轴的原点,它们的位置始终相对于世界轴。

该局部轴移动与网格。无论位置如何,局部轴的原点始终位于网格的创建中心。网格的旋转和放大中心位于局部轴的原点,但是通过使用TransformNode或矩阵来设置 轴心点可以将它们更改为该点。

矢量

所有位置,旋转和缩放都使用新的BABYLON.Vector3(x,y,z)作为3维向量给出,并且可以单独设置。

飞行员

在创建之后,飞行员的位置处于世界原点,所有轴的旋转为零,其缩放比为1,世界轴和飞行员的局部轴都重合

Creation of Pilot

位置

位置使用向量(x,y,z)参考世界轴放置飞行员。该局部轴移动与试点。

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

或个别组件

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

本地轴和世界轴保持相同的方向。

pilot position

回转

回转阅应用轮换约定BJS。.

在Babylon.js中使用旋转设置

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

要么

pilot.rotation.x  =  alpha; //rotation around x axis
pilot.rotation.y  =  beta;  //rotation around y axis
pilot.rotation.z  =  gamma; //rotation around z axis

其中alpha,beta和gamma是以弧度为单位测量的角度。

暂停思考:立即,由于三个不同的轴有三个旋转,你需要问一下 - “它们应该以哪种顺序应用哪个参考框架和哪个方向?”

以下两个约定中的任何一个都可以被认为是由Babylon.js中的旋转使用,因为两者都导致相同的结果。

第1号公约 - 本地轴

对于使用旋转的局部轴,使用围绕局部轴的 y,x,z轴的局部轴原点的旋转中心旋转网格。当沿正轴方向观察时,所有旋转都是逆时针方向。

下面的图像序列显示了飞行员的初始起始位置,然后围绕局部y轴旋转π/ 2,然后围绕局部x轴旋转π/ 2,最后围绕局部z轴旋转π/ 2。

start Y X Z

T较小的轴代表世界轴的方向。

第2号公约 - 世界轴

与惯例1相比,旋转中心不会改变旋转轴。

对于使用旋转的世界轴,将网格与轴的局部轴原点的旋转中心相对于平行于世界轴的轴排列z,x,y 。当沿正轴方向观察时,所有旋转都是逆时针方向。

下面的图像序列显示了飞行员的初始起始位置,然后围绕世界z轴旋转π/ 2,然后围绕世界x轴旋转π/ 2,最后围绕世界y轴旋转π/ 2。

start Y X Z

摘要

对于旋转无论怎样,你想想看,结果都是一样的。以下所有命令都会产生相同的结果:

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

pilot.rotation.x  =  alpha;
pilot.rotation.y  =  beta;
pilot.rotation.z  =  gamma;

pilot.rotation.z  =  gamma;
pilot.rotation.x  =  alpha;
pilot.rotation.y  =  beta;

pilot.rotation.y  =  beta;
pilot.rotation.z  =  gamma;
pilot.rotation.x  =  alpha;

顺序旋转

现在的问题是,如果你想要一个围绕x轴开始的旋转序列,然后绕y轴然后围绕z轴做什么怎么办?

对于世界轴,您可以使用 rotate方法对于关于局部轴的旋转,Babylon.js同时具有rotate方法和addRotation方法。

您可以使用addRotation链接一系列旋转。该方法提供关于一个轴的一个旋转值,其中一系列可以从第一个到最后一个应用,如以下示例所示。

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

下面的图像序列显示了为上述操场一个接一个地添加单个旋转的结果,从飞行员的初始位置开始,然后围绕局部x轴旋转π/ 2,然后是π/ 2。局部y轴,最后围绕局部z轴旋转π/ 2。

start X Y Z

较小的轴代表世界轴的方向。

一般而言mesh.addRotation(α,β,γ)需要至少两个α,β,γ是0,其中的α是一个有关本地x轴,旋转的β大约局部y轴和伽马约局部Z轴。

RotationQuaternions

_rotations的另一种选择是 rotationQuaternions 虽然它们使用起来很棘手但可以克服一些万向节锁定问题。在网格上使用两者都不可能看到警告

缩放

使用,设置沿x,y和z 局部轴的缩放

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

或单独使用

 mesh.scaling.y = 5;

下图显示了围绕z轴旋转并沿局部y轴缩放的单位立方体。

scaled

下一步

现在您知道如何在场景中创建和移动对象,但所有网格都具有相同的“皮肤”。不久,如果您阅读我们关于材料的下一个教程。

进一步阅读

旋转和翻译概述s