three.js 学习笔记之 混乱的矩阵
2015-04-26 18:16
549 查看
要搞清楚three.js 的矩阵变换,看官方的文档和例子是远远不够的,因为他们不够详细,还得看看threejs的源代码才能理解。
首先得整明白three.js 最核心的两个类Object3D 和Matrix4
Object3d里的方法相对于Matrix4更加高级,其实操作的还是矩阵中的方法,所以
先来看看Matrix4的结构
Matrix4.elements 是个大小为1*16的数组
[x1,x2,x3,x4,
y1,y2,y3,y4,
z1,z2,z3,z4,
px,py,pz,1]
剩下都是矩阵操作的方法,下面先列出Matrix4的常用函数
getInverse(m,throwOnInvertible)
设置自身的matrix为m的逆矩阵
setPosition(v)
分别设置elements[12],[13],[14] (即上面的px,py,pz)为v.x,v.y,v.z
multiplyMatrices(a,b)
设置自身的matrix为a,b的乘积
multiply(m)
相当于multiplyMatrices(this,m) 我经常误以为效果会是multiplyMatrices(m,this)
makeRotationFromQuaternion(q)
千万别以为是旋转自身的matrix 这里把我坑死了,实际上它相当于旋转初始矩阵,覆盖当前矩阵的操作,如果你希望旋转当前矩阵应该这么做
matrix.multiplyMatrices(new THREE.Matrix4().makeRotationFromQuaternion(q),matrix);
方法名带make的都是如此
makeRotationFromEuler(euler)
同样也是对初始矩阵的旋转
makeRotationX(angle) 同上
makeRotationY(angle) 同上
makeRotationZ(angle) 同上
makeRotationAxis(axis,angle)
同上
makeTranslation(x,y,z) 同样它相当于平移初始矩阵并且覆盖当前矩阵
makeScale(x,y,z) 同上
scale(v)
和上面的缩放不一样
它会对每个轴的分量分别相乘
x1*=v.x
x2*=v.x x3*=v.xx4*=v.x
y1*=v.yy2*=v.y
and so on
multiplyScalar(s)
对elements所有元素分别*=s。看到这里相信你一定已经绕晕了,实践一下慢慢熟悉他们
compose(position,quaternion,scale)
替换自身的matrix为 由object3d的position,quaternion,scale组成的matrix
decompose(position,quaternion,scale)
分解自身的matrix到这三个变量
transpose
转置矩阵
待续
首先得整明白three.js 最核心的两个类Object3D 和Matrix4
Object3d里的方法相对于Matrix4更加高级,其实操作的还是矩阵中的方法,所以
先来看看Matrix4的结构
Matrix4.elements 是个大小为1*16的数组
[x1,x2,x3,x4,
y1,y2,y3,y4,
z1,z2,z3,z4,
px,py,pz,1]
剩下都是矩阵操作的方法,下面先列出Matrix4的常用函数
getInverse(m,throwOnInvertible)
设置自身的matrix为m的逆矩阵
setPosition(v)
分别设置elements[12],[13],[14] (即上面的px,py,pz)为v.x,v.y,v.z
multiplyMatrices(a,b)
设置自身的matrix为a,b的乘积
multiply(m)
相当于multiplyMatrices(this,m) 我经常误以为效果会是multiplyMatrices(m,this)
makeRotationFromQuaternion(q)
千万别以为是旋转自身的matrix 这里把我坑死了,实际上它相当于旋转初始矩阵,覆盖当前矩阵的操作,如果你希望旋转当前矩阵应该这么做
matrix.multiplyMatrices(new THREE.Matrix4().makeRotationFromQuaternion(q),matrix);
方法名带make的都是如此
makeRotationFromEuler(euler)
同样也是对初始矩阵的旋转
makeRotationX(angle) 同上
makeRotationY(angle) 同上
makeRotationZ(angle) 同上
makeRotationAxis(axis,angle)
同上
makeTranslation(x,y,z) 同样它相当于平移初始矩阵并且覆盖当前矩阵
makeScale(x,y,z) 同上
scale(v)
和上面的缩放不一样
它会对每个轴的分量分别相乘
x1*=v.x
x2*=v.x x3*=v.xx4*=v.x
y1*=v.yy2*=v.y
and so on
multiplyScalar(s)
对elements所有元素分别*=s。看到这里相信你一定已经绕晕了,实践一下慢慢熟悉他们
compose(position,quaternion,scale)
替换自身的matrix为 由object3d的position,quaternion,scale组成的matrix
decompose(position,quaternion,scale)
分解自身的matrix到这三个变量
transpose
转置矩阵
待续
相关文章推荐
- three.js学习笔记 用Tween.js做动画
- Three.js学习笔记 – “我和小伙伴都惊呆了”的特效和Three.js初探
- Three.js学习笔记---我和小伙伴都惊呆了
- Three.js学习笔记 – “我和小伙伴都惊呆了”的特效和Three.js初探
- Three.js学习笔记 – “我和小伙伴都惊呆了”的特效和Three.js初探
- Three.js editor 学习笔记(一)
- three.js学习笔记 光和影
- three.js学习笔记 射线
- three.js学习笔记(二)-基础知识①
- THREE.js 学习笔记(前记)
- three.js学习笔记 太阳眩光
- three.js学习笔记 obj模型加载问题
- three.js学习笔记 为模型增添物理效果
- Three.js学习笔记——3dsmax 加载obj模型
- three.js学习笔记 相机控件
- three.js学习笔记 obj模型加载问题 (转)
- three.js学习笔记 基础1_1
- THREE.js 学习笔记(一)
- webgl+three.js,学习笔记,调用摄像头,做成纹理
- Three.js学习笔记 – “我和小伙伴都惊呆了”的特效和Three.js初探