返回列表 发新帖

babylonjs教程(20)-定位,旋转,平移和空间

[复制链接]

138

主题

171

帖子

2564

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
2564
发表于 2016-6-20 17:12:33 | 显示全部楼层 | 阅读模式
目录

  • 定位和旋转方法
    • 定位
    • 旋转
  • 平移和旋转
    • 平移
      • 世界空间
      • 本地空间
    • 旋转
      • 世界空间
      • 本地空间
    • 结合平移和旋转
      • 要是你想旋转之后在本地坐标系平移该怎么办?

图1中的简单生物是我们的飞行员(一个网格)通过世界位置,旋转,平移和空间在Babylon.js中。

fig1.png Fig 1

注意-当一个网格被创建它的位置和旋转角度都被设置为(0,0,0)

在所有图形中X轴是红色的,Y轴是绿色的,Z轴是蓝色的。

定位和旋转方法
定位
将飞行员放入世界最简单的方法是pilot.position = new BABYLON.Vector3(x, y, z);,它等价于:
  1. pilot.position.x  =  x;
  2. pilot.position.y  =  y;
  3. pilot.position.z  =  z;
复制代码

查看例子1

对于数学家和游戏设计者,这种情况是允许的:
  1. pilot.position = new BABYLON.Vector3(3, 3, 3);
  2. pilot.position = new BABYLON.Vector3(2, 4, 1);
复制代码

如图2所示,飞行员被定位到向量 (2,4,1),因为这是代码最后设置的位置。

fig2.jpg Fig 2

旋转

将飞行员在世界中旋转最简单的方法是pilot.rotation = new BABYLON.Vector3(alpha, beta, gamma),它等价于:
  1. pilot.rotation.x  =  alpha;
  2. pilot.rotation.y  =  beta;
  3. pilot.rotation.z  =  gamma;
复制代码

其中alpha, beta和gama都是弧度为单位的角,当从每个轴正方向看去,让物体沿着x,y,z轴的各自的方向逆时针旋转。

这是数学家开始有点担心。旋转是不可交换所以他们执行的顺序很重要,但这个方法并没有给出任何顺序。更多的在后面,目前值考虑使用pilot.rotation。

沿Y轴旋转PI/2,通过pilot.rotation = new BABYLON.Vector3(0, Math.PI/2, 0)实现。

查看例子2和图3。

fig3.jpg Fig 3

首先要注意到的事情是,旋转发生在飞行员的本地坐标系,从模拟真实世界的感受是有道理的,因为我们观察物体旋转通常是以它们本身的坐标系来的。例如观看摩天轮或者矫直照片。

什么会发生,下面的代码被应用?
  1. pilot.rotation = new new BABYLON.Vector3(0, Math.PI/2, 0);
  2. pilot.rotation = new new BABYLON.Vector3(Math.PI/2, 0, 0);
复制代码

你得到同样的结果
  1. pilot.rotation = new new BABYLON.Vector3( Math.PI/2, 0, 0);
复制代码

可以在例子3中看到。 通过依次注释掉pilot.rotation行。

正如pilot.position设置了一个位置向量基于世界原点(0,0,0),也就是说,pilot.rotation设置了一个方向向量开始于匹配世界方向(0,0,0)的本地方向。它是实现了最后的旋转设置。

下面三组代码设置alpha,beta,gamma是等价的。

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

  2. pilot.rotation.x  =  alpha;
  3. pilot.rotation.y  =  beta;
  4. pilot.rotation.z  =  gamma;

  5. pilot.rotation.x  =  beta;
  6. pilot.rotation.z  =  gamma;
  7. pilot.rotation.y  =  alpha;
复制代码

因为渲染完成在角度设置之后。换句话说设置rotations的x,y,z的顺序是不重要的。


展示一个具有alpha = beta = gamma = PI/2的例子,结果在图4。

fig4.jpg Fig 4

注释掉不同组的代码在例子4中

表明,设置rotation的x,y,z顺序不影像结果。真实旋转顺序是y最先,然后是x,在然后是z.

要看到旋转是围绕本地坐标轴的,在例子4中

和注释掉所有旋转,

步骤1注释掉所有旋转步骤2注释掉所有旋转除了下面
  1. pilot.rotation.y = Math.PI/2;
复制代码

步骤3注释掉所有旋转除了下面
  1. pilot.rotation.y = Math.PI/2;
  2. pilot.rotation.x = Math.PI/2;
复制代码

步骤4注释掉所有旋转除了下面
  1. pilot.rotation.y = Math.PI/2;
  2. pilot.rotation.x = Math.PI/2;
  3. pilot.rotation.z = Math.PI/2;
复制代码

1,2,3,4步骤的结果是图5a,b,c,d

fig5a.jpg fig5b.jpg fig5c.jpg fig5d.jpg
Fig 5a Fig 5b Fig 5c Fig 5d

开始于

图5a应用旋转围绕这本地(=世界)y轴(绿色)来获得。

图5b应用旋转围绕这本地x轴(红色)来获得。

图5c应用旋转围绕这本地z轴(蓝色)来获得。

图5d

平移和旋转

平移和旋转改变沿着给定的向量或者坐标轴使用世界或者网格的本地坐标系来改变网格的位置和方向。

平移

你可以使用pilot.translate(vector, distance, space)来移动pilot,在方向向量中移动给定距离,在世界或者本地空间。

世界空间

世界空间的设置通过使用BABYLON.Space.WORLD


使用向量(3, 3, 3)和(2, 4, 1)有为1的距离展示世界空间的pilot.translate行为像pilot.position设置这个向量。

对距离的实验表面飞行员移动距离是向量的长度。

如果给定的向量是单位向量,这样移动的距离正是给定的距离,这通常是十分有用的。

对于给定的 V = new BABYLON.Vector3(x, y, z) 在这个方向上的单位矢量是V.normalize()。 V.length()会给出这个向量的长度。

为了方便,在x,y,z轴的正方向的单位向量是预先定义好的常量,分别是BABYLON.Axis.X, BABYLON.Axis.Y和BABYLON.Axis.Z。

本地空间

本地空间的设置通过使用BABYLON.Space.LOCAL。

本地空间的平移行为将作为一个数学平移。也就是说,一系列的平移是方向向量的累积,而不是position向量的设置。


显示了,平移(3,3,3),接着平移(2,4,1)的结果是(5,7,4)。

旋转

注意
  • 本地坐标轴 意味着轴局部于pilot,它保持pilot原有的方向,即pilot转动局部坐标轴就会转动自己。
  • 世界本地坐标意味这轴局部于piLot,它停留在世界轴的方向,不误pilot的方向是什么。

世界空间

旋转发生是围绕着世界本地坐标轴并且是累加的。可以在例子7中看到

评论正确的行在例子7

按照图 6a, b, c, d顺序给出
    fig6a.jpg fig6b.jpg fig6c.jpg fig6d.jpg
Fig 6a Fig 6b Fig 6c Fig 6d

从这里开始

图6a绕世界本地坐标轴y获得

图6b绕世界本地坐标轴y获得

图6c绕世界本地坐标轴x获得

图6d

本地空间


旋转发生是围绕着本地坐标轴并且是累加的。舞台展示了图7a,b,c,d,e
   fig7a.jpg fig7b.jpg fig7c.jpg fig7d.jpg fig7e.jpg
Fig 7a Fig 7b Fig 7c Fig 7d Fig 7e

从这里开始

图7a绕本地坐标轴y获得

图7b绕本地坐标轴y获得

图7c绕本地坐标轴x获得

图7d绕本地坐标轴z获得

图7e

结合平移和旋转

无论是在世界空间旋转pilot或者在本地空间应用pilot.translate在世界空间中本质上等价于应用pilot.position。

那么在旋转之后pilot.translate应用到本地空间会发生什么?

首先当在世界空间旋转的时候,世界本地轴应用于旋转,然后这些也应用于 pilot.translate(vector, distance, BABYLON.Space.LOCAL),看图 8a,b


可以应用于尝试世界旋转然后是本地平移。

描述

描述
fig8b.jpg

Fig 8a Fig 8b

从这里开始

图8a本地平移,沿着世界本地坐标轴的z轴平移-2获得

图8b在本地空间旋转,本地轴应用于旋转,并且世界本地轴仍然应用于pilot.translate(vector, distance, BABYLON.Space.LOCAL)。

图9展示了平移(0, 0, -2)任然沿着世界本地坐标轴的z轴,因为它也在图8b中。

fig9.jpg



可以应用于尝试世界旋转然后是本地平移。

要是你想旋转之后在本地坐标系平移该怎么办?
你可以使用pilot.locallyTranslate(vector),其中向量是 BABYLON.Vector3用来提供需要的平移量。


可以应用于尝试世界旋转然后是本地平移。

图10 a, b, c和d展示pilot沿着世界本地坐标轴旋转。

图11显示了最终结果如同图10所示但用的是本地坐标.

图12展示了应用两个平移的结果,第一个沿着本地z轴距离是3和第二个沿着本地y轴距离是3

   fig10a.jpg fig10b.jpg fig10c.jpg fig10d.jpg

Fig 10a Fig 10b Fig 10c Fig 10d

从这里开始

图10a绕世界本地坐标轴y旋转获得

图10b绕世界本地坐标轴y旋转获得

图10c绕世界本地坐标轴x旋转获得

图10d
fig11.jpg



图11

fig12.jpg


图12


可以应用于尝试世界旋转然后是本地平移。

图13 a, b, c和d展示pilot沿着本地坐标轴旋转。

图14显示了最终结果如同图10所示但用的是本地坐标.

图15展示了应用两个平移的结果,第一个沿着本地z轴距离是3和第二个沿着本地y轴距离是3
    fig13a.jpg fig13b.jpg fig13c.jpg fig13d.jpg

Fig 13a Fig 13b Fig 13c Fig 13d

从这里开始

图13a绕本地坐标轴y旋转获得

图13b绕本地坐标轴y旋转获得

图13c绕本地坐标轴x旋转获得

图13d

fig14.jpg



图14


fig15.jpg

图15

fig9.jpg
回复

使用道具 举报

发表回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表