WEBGL学习笔记(二):矩阵变换

游戏已经做好,但是博客园不能支持哈,我在我的独立博客里面加入了这个游戏。

 

加载时候会黑屏,等待数秒即可,点击这里体验试玩:FlappyBird3d游戏试玩

 

 

Three.js 使用矩阵 matrices进行3D变换---位置(position)平移, 旋转rotations, 和缩放scaling. 每一个Object3D实例都存储一个矩阵保存位置,旋转和缩放信息.

 

这一页描述了 如何更新对象的变换

方便的属性和矩阵自动更新(Convenience properties and matrixAutoUpdate)

 

 

 

有两种方法更新3d物体(object)矩阵的变换:

  1. 修改对象的位置position, 四元quaternion, 和 缩放scale 属性, 让Three.js 根据这些属性的值重新计算对象的矩阵信息 :
    object.position.copy(start_position);
    object.quaternion.copy(quaternion);

     

    默认的,  matrixAutoUpdate 属性设置为true, 会自动的重新计算矩阵. 如果对象是静态的,或者你希望当再计算发生时可以手动控制,可以通过设置object.matrixAutoUpdate = false;来获得更好的性能,改变这些属性之后,手动更新矩阵matrix: object.updateMatrix();
  2. 直接修改对象的矩阵. 矩阵4的类有很多种方法来修改矩阵,
    object.matrix.setRotationFromQuaternion(quaternion); 
    object.matrix.setPosition(start_position);
    object.matrixAutoUpdate = false;

     

    请注意这种情况下matrixAutoUpdate 必须设置为 false ,同时你也确保别去调用updateMatrix. 调用 updateMatrix 将会干扰手动设置的结果。(你懂得)

对象和世界矩阵(Object and world matrices)

 

 

 

对象的矩阵存储了对象的变换信息,这些变化是相对于他的parent的(我理解为容器)。为了获得对象在世界坐标系下的变换,你必须获得对象Object3D.matrixWorld.

不管parent或者child的变换transformation如何改变, 你都能用过updateMatrixWorld()来更新child。

旋转和四元(Rotation and Quaternion

 

 

 

Three.js提供了两种方法进行3D 旋转:欧拉角Euler angles和四元Quaternions, 同时两者可以互相转换.

欧拉角都受到了所谓的“万向节锁定”,其中某些配置可以失去一个自由度(防止被绕一个轴的对象)的问题。出于这个原因,对象旋转总是存储在对象的四元数。(谷歌翻译的,实在是...下面是这句话原文)

Euler angles are subject to a problem called "gimbal lock," where certain configurations can lose a degree of freedom (preventing the object from being rotated about one axis). For this reason, object rotations are always stored in the object's quaternion.

(翻译到这感觉这节没什么大用,先到这吧~翻译也要找有价值的!)

posted @ 2016-07-07 12:58  早一步是财富  阅读(...)  评论(...编辑  收藏