three.js欧拉角和四元数的使用方法


Posted in Javascript onJuly 26, 2020

前言

这篇郭先生就来说说欧拉角和四元数,欧拉角和四元数的优缺点是老生常谈的话题了,使用条件我就不多说了,我只说一下使用方法。

1. 欧拉角(Euler)

欧拉角描述一个旋转变换,通过指定轴顺序和其各个轴向上的指定旋转角度来旋转一个物体。下面我们开看看它的方法

1. set( x: number, y: number, z: number, order?: string ): Euler

x - 用弧度表示x轴旋转量。y - 用弧度表示y轴旋转量。z - 用弧度表示z轴旋转量。order - (optional) 表示旋转顺序的字符串。设置该欧拉变换的角度和旋转顺序 order。

2. clone(): this

返回一个与当前参数相同的新欧拉角。

3. copy( euler: Euler ): this

将 euler 的属性拷贝到当前对象。

4. setFromRotationMatrix( m: Matrix4, order?: string ): Euler

m - Matrix4 矩阵上面的3x3部分是一个纯旋转矩阵rotation matrix (也就是不发生缩放)order - (可选参数) 表示旋转顺序的字符串。使用基于 order 顺序的纯旋转矩阵来设置当前欧拉角。

var vector = new THREE.Vector3(0,0,1);
var matrix = new THREE.Matrix4().makeRotationAxis(vector, Math.PI/6)
var euler = new THREE.Euler().setFromRotationMatrix(matrix); // 返回Euler {_x: -0, _y: 0, _z: 0.5235987755982987, _order: "XYZ"}

5. setFromQuaternion( q: Quaternion, order?: string ): Euler

根据 order 指定的方向,使用归一化四元数设置这个欧拉变换的角度。

var vector = new THREE.Vector3(0,0,1);
var quaternion = new THREE.Quaternion().setFromAxisAngle(vector, Math.PI/6)
var euler = new THREE.Euler().setFromQuaternion(quaternion);// 返回Euler {_x: -0, _y: 0, _z: 0.5235987755982987, _order: "XYZ"}结果同上

6. setFromVector3( v: Vector3, order?: string ): Euler

设置 x, y and z 并且选择性更新 order。

var vector = new THREE.Vector3(0,0,Math.PI/6);
var euler = new THREE.Euler().setFromVector3(vector);/ 返回Euler {_x: -0, _y: 0, _z: 0.5235987755982987, _order: "XYZ"}结果同上

7. reorder( newOrder: string ): Euler

通过这个欧拉角创建一个四元数,然后用这个四元数和新顺序设置这个欧拉角。

8. equals( euler: Euler ): boolean

检查 euler 是否与当前对象相同。

9. fromArray( xyzo: any[] ): Euler

长度为3或4的一个 array 。array[3] 是一个可选的 order 参数。将欧拉角的x分量设置为 array[0]。将欧拉角的x分量设置为 array[1]。将欧拉角的x分量设置为 array[2]。将array[3]设置给欧拉角的 order 。可选。

10. toArray( array?: number[], offset?: number ): number[]

返回一个数组:[x, y, z, order ]。

11. toVector3( optionalResult?: Vector3 ): Vector3

以 Vector3 的形式返回欧拉角的 x, y 和 z。

var vector = new THREE.Vector3(0,0,Math.PI/6);
var euler = new THREE.Euler().setFromVector3(vector);
euler.toVector3(); //返回Vector3 {x: 0, y: 0, z: 0.5235987755982988}

2. 四元数

四元数对象Quaternion使用x、y、z和w四个分量表示。在三维空间中一个旋转由一个旋转轴、一个旋转角度和旋转方向来唯一确定。

假设我们默认为右手法则的旋转,则旋转方向为逆时针,旋转轴向量为v = (vx, vy, vz), 角度为旋转角度,那么该旋转就应该类似如下图所示:

three.js欧拉角和四元数的使用方法

其对应的四元数就是:

three.js欧拉角和四元数的使用方法

1. set( x: number, y: number, z: number, w: number ): Quaternion

设置该四元数的值。

2. clone(): this

克隆此四元数。

3. copy( q: Quaternion ): this

将q的值复制到这个四元数。

4. setFromEuler( euler: Euler ): Quaternion

用欧拉角指定的旋转来设置此四元数。

var euler = new THREE.Euler(0,0,Math.PI/6);
var quaternion = new THREE.Quaternion().setFromEuler(euler) //返回Quaternion {_x: 0, _y: 0, _z: 0.25881904510252074, _w: 0.9659258262890683}

5. setFromAxisAngle( axis: Vector3, angle: number ): Quaternion

使用由轴和角度指定的旋转来设置此四元数。axis 应该是归一化的,angle 的单位是弧度。

var vector1 = new THREE.Vector3(0,0,1);
var vector2 = new THREE.Vector3(0,0,2);
var quaternion1 = new THREE.Quaternion().setFromAxisAngle(vector1, Math.PI/6); //返回Quaternion {_x: 0, _y: 0, _z: 0.25881904510252074, _w: 0.9659258262890683}
var quaternion2 = new THREE.Quaternion().setFromAxisAngle(vector2, Math.PI/6); //返回Quaternion {_x: 0, _y: 0, _z: 0.5176380902050415, _w: 0.9659258262890683}

可见axis是否归一化对四元数的x、y和z值的影响是线性的。

6. setFromRotationMatrix( m: Matrix4 ): Quaternion

从m的旋转分量来设置该四元数。使用很简单就不多说了。

7. setFromUnitVectors( vFrom: Vector3, vTo: Vector3 ): Quaternion

通过从向量vFrom到vTo所需的旋转来设置这四元数。vFrom 和 vTo 应该是归一化的。我们来看一下

var vector1 = new THREE.Vector3(1,1,0);
var vector2 = new THREE.Vector3(0,1,0);
var quaternion = new THREE.Quaternion().setFromUnitVectors(vector1, vector2); //相当于绕z轴旋转了Math.PI/4

8. angleTo( q: Quaternion ): number

返回这个四元数到q的角度

var quaternion1 = new THREE.Quaternion().setFromEuler(new THREE.Euler(0,0,Math.PI/3));
var quaternion2 = new THREE.Quaternion().setFromEuler(new THREE.Euler(0,0,Math.PI/6));
quaternion1.angleTo(quaternion2); // 返回0.5235987755982987

9. rotateTowards( q: Quaternion, step: number ): Quaternion

将此四元数按给定的step旋转到定义的四元数q。该方法确保最终四元数不会超出q。那么是什么意思呢?

var quaternion1 = new THREE.Quaternion().setFromEuler(new THREE.Euler(0,0,Math.PI/3)); //{_x: 0, _y: 0, _z: 0.49999999999999994, _w: 0.8660254037844387}
var quaternion2 = new THREE.Quaternion().setFromEuler(new THREE.Euler(0,0,Math.PI/6)); //{_x: 0, _y: 0, _z: 0.25881904510252074, _w: 0.9659258262890683}
quaternion1.rotateTowards( quaternion2, 0); //{_x: 0, _y: 0, _z: 0.49999999999999994, _w: 0.8660254037844387}
quaternion1.rotateTowards( quaternion2, 0.5); //{_x: 0, _y: 0, _z: 0.2701980971440553, _w: 0.9628047508709812}
quaternion1.rotateTowards( quaternion2, 1); //{_x: 0, _y: 0, _z: 0.25881904510252074, _w: 0.9659258262890683}

可以看出其内部使用了quaternion.slerp()方法。当step为0时,rotateTowards方法返回就是当前四元数。当step为1时,rotateTowards方法返回就是参数q的四元数。当step为0~1之间时,rotateTowards方法返回就是当前四元数和参数q的四元数之间的插值。

10. inverse(): Quaternion

转置此四元数-计算共轭。假设四元数具有单位长度。

var quaternion = new THREE.Quaternion().setFromEuler(new THREE.Euler(Math.PI/6,Math.PI/6,Math.PI/6)); //初始四元数Quaternion {_x: 0.30618621784789724, _y: 0.17677669529663687, _z: 0.30618621784789724, _w: 0.8838834764831845}
quaternion.inverse(); //返回Quaternion {_x: -0.30618621784789724, _y: -0.17677669529663687, _z: -0.30618621784789724, _w: 0.8838834764831845}

由此可知计算共轭之后,x、y和z分别取复制,而w值不变。

11. conjugate(): Quaternion

返回此四元数的旋转共轭。四元数的共轭。表示旋转轴在相反方向上的同一个旋转。经过我的测试这个方法和inverse()方法是一样的,来看看inverse的源码

inverse: function () {
  // quaternion is assumed to have unit length
  return this.conjugate();
},

12. dot( v: Quaternion ): number

计算四元数v和当前四元数的点积。众所周知点积得到的是一个数字。很简单

13. lengthSq(): number

计算四元数的平方长度。就是各个值平方求和。

14 length(): number

计算此四元数的长度。也就是各个值平方求和,然后在开根号。

15. normalize(): Quaternion

归一化该四元数。开看下源码

normalize: function () {
  var l = this.length();
  if ( l === 0 ) { //如果四元数参length为0,那么this._x、this._y和this._z都设置为0,this._w设置为1
   this._x = 0;
   this._y = 0;
   this._z = 0;
   this._w = 1;
  } else { //如果四元数参length为l,那么四元数的各个参数乘以l的倒数。
   l = 1 / l;
   this._x = this._x * l;
   this._y = this._y * l;
   this._z = this._z * l;
   this._w = this._w * l;
  }
  return this;
 },

16. multiply( q: Quaternion ): Quaternion

把该四元数和q相乘。具体怎么相乘。稍后再说。

17. premultiply( q: Quaternion ): Quaternion;

使用q左乘以(pre-multiply)该四元数。同样稍后再说。

18. multiplyQuaternions( a: Quaternion, b: Quaternion ): Quaternion

四元数a乘以四元数b,我们说一下四元数的乘法。

multiplyQuaternions: function ( a, b ) {
  var qax = a._x, qay = a._y, qaz = a._z, qaw = a._w;
  var qbx = b._x, qby = b._y, qbz = b._z, qbw = b._w;
  this._x = qax * qbw + qaw * qbx + qay * qbz - qaz * qby;
  this._y = qay * qbw + qaw * qby + qaz * qbx - qax * qbz;
  this._z = qaz * qbw + qaw * qbz + qax * qby - qay * qbx;
  this._w = qaw * qbw - qax * qbx - qay * qby - qaz * qbz;
  return this;
},

19. equals( v: Quaternion ): boolean;

比较v和这个四元数的各个分量,以确定两者是否代表同样的旋转。不多说。

20. slerp( qb: Quaternion, t: number ): Quaternion

处理四元数之间的球面线性插值。t 代表quaternionA(这里t为0)和quaternionB(这里t为1)这两个四元数之间的旋转量。quaternion 被设置为结果。rotateTowards的底层同样使用了slerp方法。

var quaternion1 = new THREE.Quaternion().setFromEuler(new THREE.Euler(0,0,Math.PI/6));
var quaternion2 = new THREE.Quaternion().setFromEuler(new THREE.Euler(0,0,Math.PI/2));
quaternion1; //quaternion1的值为{_x: 0, _y: 0, _z: 0.25881904510252074, _w: 0.9659258262890683}
quaternion2; //quaternion2的值为{_x: 0, _y: 0, _z: 0.7071067811865475, _w: 0.7071067811865476}
quaternion1.slerp(quaternion2, 0) //返回的结果和quaternion1相同
quaternion1.slerp(quaternion2, 1) //返回的结果和quaternion2相同
quaternion1.slerp(quaternion2, 其他值) //返回quaternion1到quaternion2的插值,当然这个t也是可以大于1的
//看一下rotateTowards的部分源码
rotateTowards: function ( q, step ) {
  var angle = this.angleTo( q );
  if ( angle === 0 ) return this;
  var t = Math.min( 1, step / angle );
  this.slerp( q, t );
  return this;
}

21. static slerp: functistatic slerp(qa: Quaternion, qb: Quaternion, qm: Quaternion, t: number): Quaternionon
这是slerp的静态方法,无需动态设置。同样使用了slerp方法。

slerp: function ( qa, qb, qm, t ) {
  return qm.copy( qa ).slerp( qb, t );
}

关于欧拉角四元数要说的差不多就这些,还需要平时多多应用才能记熟。

总结

到此这篇关于three.js欧拉角和四元数的使用方法的文章就介绍到这了,更多相关three.js欧拉角和四元数内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
在网页中控制wmplayer播放器
Jul 01 Javascript
浅说js变量
May 25 Javascript
在iframe里的页面编写js,实现在父窗口上创建动画效果展开和收缩的div(不变动iframe父窗口代码)
Dec 20 Javascript
Javascript 按位与赋值运算符 (&=)使用介绍
Feb 04 Javascript
js网页滚动条滚动事件实例分析
May 05 Javascript
jquery插件ajaxupload实现文件上传操作
Dec 09 Javascript
浅谈js中用$(#ID)来作为选择器的问题(id重复的时候)
Feb 14 Javascript
深入理解vue.js中的v-if和v-show
Jun 22 Javascript
基于 Vue.js 2.0 酷炫自适应背景视频登录页面实现方式
Jan 17 Javascript
webpack vue项目开发环境局域网访问方法
Mar 20 Javascript
vue数据传递--我有特殊的实现技巧
Mar 20 Javascript
解决vue项目本地启动时无法携带cookie的问题
Feb 06 Vue.js
Element Collapse 折叠面板的使用方法
Jul 26 #Javascript
Element Input输入框的使用方法
Jul 26 #Javascript
解决vuex数据页面刷新后初始化操作
Jul 26 #Javascript
Angular利用HTTP POST下载流文件的步骤记录
Jul 26 #Javascript
vue中keep-alive、activated的探讨和使用详解
Jul 26 #Javascript
关于angular浏览器兼容性问题的解决方案
Jul 26 #Javascript
Vue生命周期activated之返回上一页不重新请求数据操作
Jul 26 #Javascript
You might like
php实现统计网站在线人数的方法
2015/05/12 PHP
php使用Jpgraph绘制复杂X-Y坐标图的方法
2015/06/10 PHP
php提交表单时保留多个空格及换行的文本样式的方法
2017/06/20 PHP
php调用云片网接口发送短信的实现方法
2017/10/25 PHP
php 替换文章中的图片路径,下载图片到本地服务器的方法
2018/02/06 PHP
thinkphp5.1 文件引入路径问题及注意事项
2018/06/13 PHP
iframe 自适应高度[在IE6 IE7 FF下测试通过]
2009/04/13 Javascript
有关JavaScript的10个怪癖和秘密分享
2011/08/28 Javascript
全面解析JavaScript里的循环方法之forEach,for-in,for-of
2020/04/20 Javascript
基于JS代码实现当鼠标悬停表格上显示这一格的全部内容
2016/06/12 Javascript
JS添加或修改控件的样式(Class)实现方法
2016/10/15 Javascript
js实现可旋转的立方体模型
2016/10/16 Javascript
jQuery实现加入收藏夹功能(主流浏览器兼职)
2016/12/24 Javascript
jquery validation验证表单插件
2017/01/07 Javascript
vue2.0实现分页组件的实例代码
2017/06/22 Javascript
如何使node也支持从url加载一个module详解
2018/06/05 Javascript
JS中Promise函数then的奥秘探究
2018/07/30 Javascript
深入理解Vue router的部分高级用法
2018/08/15 Javascript
微信小程序实现简单表格
2019/02/14 Javascript
layui table 列宽百分比显示的实现方法
2019/09/28 Javascript
vue 中的 render 函数作用详解
2020/02/28 Javascript
vue 项目软键盘回车触发搜索事件
2020/09/09 Javascript
[32:17]完美世界DOTA2联赛循环赛LBZS vs Forest第二场 10月30日
2020/10/31 DOTA
Python装饰器decorator用法实例
2014/11/10 Python
python PIL和CV对 图片的读取,显示,裁剪,保存实现方法
2019/08/07 Python
python 实现保存最新的三份文件,其余的都删掉
2019/12/22 Python
利用python实现平稳时间序列的建模方式
2020/06/03 Python
eBay英国购物网站:eBay.co.uk
2019/06/19 全球购物
小学生开学第一课活动方案
2014/03/27 职场文书
企业指导教师评语
2014/04/28 职场文书
环境整治工作方案
2014/05/18 职场文书
个人投资合作协议书
2014/10/12 职场文书
退货证明模板
2015/06/23 职场文书
2016年七夕情人节宣传语
2015/11/25 职场文书
关于感恩的素材句子(38句)
2019/11/11 职场文书
MySQL中IF()、IFNULL()、NULLIF()、ISNULL()函数的使用详解
2021/06/26 MySQL