【THREE源码解析篇】THREE.Matrix4源码详解

原创 已于 2022-02-09 16:01:43 修改 · 2.1k 阅读 · 5 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#矩阵 #线性代数

于 2021-06-24 12:39:15 首次发布
本文详细解析THREE.Matrix4类中的重要函数，包括copyPosition、makeTranslation、transpose、setPosition、getInverse、scale、旋转与缩放矩阵的构建，以及compose和decompose函数用于组合和分解矩阵。同时介绍了矩阵在三维空间中的应用，如平移、旋转和缩放变换。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

THREE.Matrix4源码详解

THREE.Matrix

数学上正常矩阵排列是

// 11 12 13 14
// 21 22 23 24
// 31 32 33 34
// 41 42 43 44

默认是单位矩阵构造如下所示（列优先）：

function Matrix4() {
	this.elements = [
		1, 0, 0, 0,  
		0, 1, 0, 0,
		0, 0, 1, 0,
		0, 0, 0, 1
	];
	// 实际存储元素编号如下所示
	// 11（0）   21（1）   31（2）   41（3）
	// 12（4）   22（5）   32（6）   42（7）
	// 13（8）   23（9）   33（10）  43（11）
	// 14（12）  24（13）  34（14）  44（15）
}

set函数：

set: function ( n11, n12, n13, n14, n21, n22, n23, n24, n31, n32, n33, n34, n41, n42, n43, n44 ) {
	var te = this.elements;
	te[ 0 ] = n11; te[ 4 ] = n12; te[ 8 ] = n13; te[ 12 ] = n14;
	te[ 1 ] = n21; te[ 5 ] = n22; te[ 9 ] = n23; te[ 13 ] = n24;
	te[ 2 ] = n31; te[ 6 ] = n32; te[ 10 ] = n33; te[ 14 ] = n34;
	te[ 3 ] = n41; te[ 7 ] = n42; te[ 11 ] = n43; te[ 15 ] = n44;
	return this;
}

可以证明THREE中矩阵存储方式是以列优先方式

copyPosition函数（重要）

copyPosition: function ( m ) {
		var te = this.elements, me = m.elements;
		te[ 12 ] = me[ 12 ];//从上面得知te[ 12 ]对应的是数学教材里面的 14
		te[ 13 ] = me[ 13 ];//从上面得知te[ 13 ]对应的是数学教材里面的 24
		te[ 14 ] = me[ 14 ];//从上面得知te[ 14 ]对应的是数学教材里面的 34
		// 对应数学上的矩阵是
		// 11 12 13 14（x平移量）
        // 21 22 23 24（y平移量）
        // 31 32 33 34（z平移量）
        // 41 42 43 44
		return this;
}

makeTranslation（得到平移矩阵）

makeTranslation: function ( x, y, z ) {

	this.set(

		1, 0, 0, x,
		0, 1, 0, y,
		0, 0, 1, z,
		0, 0, 0, 1

	);

	return this;

},

transpose（矩阵转置）

setPosition（设置平移参数）

setPosition: function ( x, y, z ) {

	var te = this.elements;

	if ( x.isVector3 ) {

		te[ 12 ] = x.x;
		te[ 13 ] = x.y;
		te[ 14 ] = x.z;

	} else {

		te[ 12 ] = x;
		te[ 13 ] = y;
		te[ 14 ] = z;

	}

	return this;

},

getInverse（矩阵求逆）

scale（矩阵*scale）

scale: function ( v ) {

	var te = this.elements;
	var x = v.x, y = v.y, z = v.z;

	te[ 0 ] *= x; te[ 4 ] *= y; te[ 8 ] *= z;
	te[ 1 ] *= x; te[ 5 ] *= y; te[ 9 ] *= z;
	te[ 2 ] *= x; te[ 6 ] *= y; te[ 10 ] *= z;
	te[ 3 ] *= x; te[ 7 ] *= y; te[ 11 ] *= z;

	return this;

},

makeRotationX（传入角度得到绕X轴的旋转矩阵和备注不一样）

makeRotationX: function ( theta ) {

	var c = Math.cos( theta ), s = Math.sin( theta );

	this.set(

		1, 0, 0, 0,
		0, c, - s, 0,
		0, s, c, 0,
		0, 0, 0, 1

	);

	return this;

},

makeRotationY（传入角度得到绕Y轴的旋转矩阵和备注一样）

makeRotationY: function ( theta ) {

	var c = Math.cos( theta ), s = Math.sin( theta );

	this.set(

		 c, 0, s, 0,
		 0, 1, 0, 0,
		- s, 0, c, 0,
		 0, 0, 0, 1

	);

	return this;

},

makeRotationZ（传入角度得到绕Z轴的旋转矩阵和备注不一样）

makeRotationZ: function ( theta ) {

		var c = Math.cos( theta ), s = Math.sin( theta );

		this.set(

			c, - s, 0, 0,
			s, c, 0, 0,
			0, 0, 1, 0,
			0, 0, 0, 1

		);
		//计算得到如下，和下面一样和备注不一样
		//cos -sin 0  0
		//sin cos  0  0
		//0   0    1  0 
		//0   0    0  1

		return this;

	}

makeRotationAxis（传入参数得到旋转矩阵）

makeRotationAxis: function ( axis, angle ) {

	// Based on http://www.gamedev.net/reference/articles/article1199.asp

	var c = Math.cos( angle );
	var s = Math.sin( angle );
	var t = 1 - c;
	var x = axis.x, y = axis.y, z = axis.z;
	var tx = t * x, ty = t * y;

	this.set(

		tx * x + c, tx * y - s * z, tx * z + s * y, 0,
		tx * y + s * z, ty * y + c, ty * z - s * x, 0,
		tx * z - s * y, ty * z + s * x, t * z * z + c, 0,
		0, 0, 0, 1

	);
	//假如是绕x轴，计算得到如下，和备注里面的好像不一样
	// 1    0      0       0  
	// 0    cos   -sin     0
	// 0    sin   cos      0    
	// 0    0      0       1

	 return this;

}

makeScale（传入参数得到缩放矩阵）

makeScale: function ( x, y, z ) {

	this.set(

		x, 0, 0, 0,
		0, y, 0, 0,
		0, 0, z, 0,
		0, 0, 0, 1

	);

	return this;

}

compose（重要）（传入position, quaternion, scale构建矩阵）

compose: function ( position, quaternion, scale ) {

	var te = this.elements;

	var x = quaternion._x, y = quaternion._y, z = quaternion._z, w = quaternion._w;
	var x2 = x + x,	y2 = y + y, z2 = z + z;
	var xx = x * x2, xy = x * y2, xz = x * z2;
	var yy = y * y2, yz = y * z2, zz = z * z2;
	var wx = w * x2, wy = w * y2, wz = w * z2;

	var sx = scale.x, sy = scale.y, sz = scale.z;

	te[ 0 ] = ( 1 - ( yy + zz ) ) * sx;
	te[ 1 ] = ( xy + wz ) * sx;
	te[ 2 ] = ( xz - wy ) * sx;
	te[ 3 ] = 0;

	te[ 4 ] = ( xy - wz ) * sy;
	te[ 5 ] = ( 1 - ( xx + zz ) ) * sy;
	te[ 6 ] = ( yz + wx ) * sy;
	te[ 7 ] = 0;

	te[ 8 ] = ( xz + wy ) * sz;
	te[ 9 ] = ( yz - wx ) * sz;
	te[ 10 ] = ( 1 - ( xx + yy ) ) * sz;
	te[ 11 ] = 0;

	te[ 12 ] = position.x;
	te[ 13 ] = position.y;
	te[ 14 ] = position.z;
	te[ 15 ] = 1;

	return this;

}

decompose（获取矩阵中的position, quaternion, scale信息）

decompose: function ( position, quaternion, scale ) {

		var te = this.elements;

		var sx = _v1.set( te[ 0 ], te[ 1 ], te[ 2 ] ).length();//11 21 31
		var sy = _v1.set( te[ 4 ], te[ 5 ], te[ 6 ] ).length();//12 22 32
		var sz = _v1.set( te[ 8 ], te[ 9 ], te[ 10 ] ).length();//13  23 33

		// if determine is negative, we need to invert one scale
		var det = this.determinant();//暂时没看懂
		if ( det < 0 ) sx = - sx;//暂时没看懂

		position.x = te[ 12 ];//14
		position.y = te[ 13 ];//24
		position.z = te[ 14 ];//34

		// scale the rotation part
		_m1.copy( this );

		var invSX = 1 / sx;
		var invSY = 1 / sy;
		var invSZ = 1 / sz;

		_m1.elements[ 0 ] *= invSX;
		_m1.elements[ 1 ] *= invSX;
		_m1.elements[ 2 ] *= invSX;

		_m1.elements[ 4 ] *= invSY;
		_m1.elements[ 5 ] *= invSY;
		_m1.elements[ 6 ] *= invSY;

		_m1.elements[ 8 ] *= invSZ;
		_m1.elements[ 9 ] *= invSZ;
		_m1.elements[ 10 ] *= invSZ;

		quaternion.setFromRotationMatrix( _m1 );
		scale.x = sx;
		scale.y = sy;
		scale.z = sz;
		
		return this;
	}

makePerspective函数（构建透视投影矩阵）

makeOrthographic函数（构建平视投影矩阵）

备注

1.glsl中mat的使用

mat4 mattest = mat4(1,0,0,0,0,1,0,0,0,0,1,0,0.5,0.5,0.0,1.0);// 列优先
vec4 mvPosition = projectionMatrix * viewMatrix * mattest *  modelMatrix *  vec4( position, 1.0 );

mat4 matrix4 = mat4(
1.1,2.1,3.1,4.1,
1.2,2.2,3.2,4.2,
1.3,2.3,3.3,4.3,
1.4,2.4,3.4,4.4
);
// 访问矩阵matrix4的第二列
vec4 v4 = matrix4[1];//返回值vec4(1.2,2.2,3.2,4.2)
// 访问矩阵matrix4的第三列第四行对应的元素
float f = matrix4[2][3];//返回4.3

2.平移变化

//声明一个四维向量pos，xyz的坐标是0.8,3.2,6.8，假设表示一个顶点位置坐标
vec4 pos = vec4(0.0,3.2,6.8,1.0);
//创建平移矩阵(表示沿x轴平移-0.4)
//1   0   0  -0.4
//0   1   0    0
//0   0   1    0
//0   0   0    1
mat4 m4 = mat4(1,0,0,0,  0,1,0,0,  0,0,1,0,  -0.4,0,0,1);
//平移矩阵m4左乘顶点坐标pos(vec4类型数据可以理解为线性代数中的nx1矩阵，即列向量)
// 顶点位置坐标pos进行平移变换
vec4 newPos= m4*pos;//平移后结果：newPos = vec4(-0.4,3.2,6.8,1.0)

3.旋转变换

// 顶点齐次坐标pos
vec4 pos = vec4(0.0,3.2,6.8,1.0);
float radian = radians(30.0);//角度转弧度
float cos = cos(radian);//求解旋转角度余弦值
float sin = sin(radian);//求解旋转角度正弦值
//旋转矩阵mx，创建绕x轴旋转矩阵
//1      0      0     0
//0      cos    sin   0
//0     -sin    cos   0
//0      0      0     1
mat4 mx = mat4(1,0,0,0,  0,cos,-sin,0,  0,sin,cos,0,  0,0,0,1);

//旋转矩阵my，创建绕y轴旋转矩阵
//cos    0     sin    0
//0      1     0      0
//-sin   0     cos    0
//0      0     0      1
mat4 my = mat4(cos,0,-sin,0,  0,1,0,0,  sin,0,cos,0,  0,0,0,1);


//旋转矩阵mz，创建绕z轴旋转矩阵
//cos    sin    0     0
//-sin   cos    0     0
//0      0      0     0
//0      0      0     1
mat4 mz = mat4(cos,0,-sin,0,  0,1,0,0,  sin,0,cos,0,  0,0,0,1);
//三个旋转矩阵、顶点齐次坐标连乘
vec4 newPos = mx*my*mz*pos;

4.缩放变换（简单）

three.js矩阵（Matrix4）之生成按任意中心、任意轴、任意角度的旋转矩阵
记录工作，分享技术。
04-29 159
​​平移回原位置​​：将中心点移回原位置（+center）​​平移对象​​：将中心点移动到原点（-center）​​执行旋转​​：绕指定轴旋转指定角度。T 是平移矩阵（将中心点移到原点）T−1是逆平移矩阵（移回原位置）R 是旋转矩阵（绕轴旋转）
ThreeJS入门（076）：THREE.Matrix4 知识详解，示例代码
最新发布
大剑师兰特的GIS世界
10-02 1390
`THREE.Matrix4` 是 Three.js 中用于表示三维空间中的变换矩阵的一个类，通常用于描述三维空间中的各种变换，如旋转、缩放、平移等。它是一个 `4x4` 的矩阵，可以表示三维空间中的任何仿射变换。`THREE.Matrix4` 是 Three.js 中最常用的矩阵类之一，因为它可以全面地描述三维空间中的变换。
threejs 源码解析_threejs海面模拟
weixin_39875675的博客
12-19 1471
源码：作者：john hollen最终效果不是特别漂亮，但作者给出了详细的笔记，这就是收录这项源码的原因。记笔记：TNM084，是Linköping University 的图像处理课程，github上有20有关多个项目，容易学习。以下是对原作者笔记的翻译。项目介绍该项目由JohnHollén(johho982)在LinköpingUniversity的TNM084-图像处理课程中完成。 最初的计...
three.js 源码
11-08
three.js 源码，web 3d开发，学习简单，可以做3d库房，3d游戏。
three.js 源码包
05-09
three.js源码包
Three.js源码解析：关键类Object3D详解
在Three.js框架中，Object3D类是至...阅读Three.js的Object3D源码笔记，有助于理解3D对象在Three.js中是如何组织和管理的，包括位置、旋转、缩放和变换矩阵的处理，这对于深入学习和开发基于Three.js的3D应用至关重要。
ThreeJs学习笔记——渲染(render)分析
weixin_34357928的博客
04-10 7430
一、前言 ThreeJs 封装了 WebGL 进行渲染时所涉及到的相关概念，如光照，材质，纹理以及相机等。除此之外，其还抽象了场景(Scene)以及用于渲染的渲染器(WebGLRenderer)。这些相关概念都被封装成了一个对象，那么它们是如何协作的呢，关系又是如何呢？这篇文章主要就是来分析一下 ThreeJs 中核心中的核心，即场景，物体，光照，材质，纹理以及相机这些对象是如何渲染的。 下面截取...
deepsort源码详解
qq_52053775的博客
01-18 2039
由于我们需要使用yolov5/yolov8获得人的检测框，因此，环境与yolov5的环境保持一致即可。YOLOv5/yolo v8的权重时单独训练的，通过参数进行指定:yolov8m.pt...ReID特征为行人重识别任务，用于deepsort的级联匹配中，也需要提前训练好，通过进行指定:...还可以指定追踪的对象，YOLO预训练权重是在coco数据集上进行训练，可以指定coco数据集的类别，也可以自己在另外的数据集上进行训练，并指定类别可以指定格式进行追踪，支持图片视频等。
Rasa 3.X 微服务框架源代码解析
大模型与Agent智能体
03-01 644
Rasa 3.X 微服务框架源代码解析 import logging from rasa_sdk import utils from rasa_sdk.endpoint import create_argument_parser, run from rasa_sdk.constants import APPLICATION_ROOT_LOGGER_NAME def main_from_args(args): """Run with argument
NDT 公式推导及源码解析（1）
u013794793的博客
04-15 9591
NDT 公式推导及源码解析（1） NDT 的论文在去年就看了，代码的话也零零散散看了一些，但直到最近才决定抽出时间把 NDT 的论文和代码重新整理记录一下，方便日后学习。本文主要参考的论文有 [1,2,3]，其中 [1] 是 NDT 被首次提出时发表的论文，如论文名所指出的——NDT 是一种 laser scan matching 方法。[2] 则是 Magnusson 等人将 NDT 从 2D ...
threejs源码(threejs知识点：1.模型分析)
11-09
threejs源码(threejs知识点：1.模型分析)threejs源码(threejs知识点：1.模型分析)threejs源码(threejs知识点：1.模型分析)threejs源码(threejs知识点：1.模型分析)threejs源码(threejs知识点：1.模型分析)
three.js 源码及各种插件
08-11
three.js 及其各种插件源码
threejs 源码和demo示例
05-06
threejs 是轻量级的开发3d web模型网页程序的javascript类库，资源中包含了threejs的源码和demo示例。demo中包含了几十个js示例程序。是开发3d 程序最好的入门材料
ThreeJS 中文注释源码
04-18
对ThreeJS的中文注释源码 可以用JavaDoc生成相应API文档 对《WebGLRenderer.js》的函数做了详细注释，希望对源码核心感兴趣的同学有帮助
4个threejs实战的demo项目源码
02-17
4个threejs实战的项目-资料来源于网络-不喜勿喷
【THREE.js源码系列】初级篇01：Object3D
09-21 1087
例如，对于一个旋转臂，包括了大臂和小臂，当我们转动大臂的时候，大臂和小臂会一起绕着大臂关节旋转，而转动小臂的时候，大臂不动，小臂绕着肘关节旋转。如果没有父子间关系，那我们实现这一功能的时候，在旋转大臂的时候，还要去找其对应的小臂，然后根据旋转点去计算小臂的旋转角度，才能完成这一操作。而有了父子间关系后，我们将小臂视为大臂的子节点，当大臂（父节点）旋转的时候，旋转操作会同时传递给小臂（子节点），从而完成一系列操作。一般情况下，矩阵的变换是自动的，每当物体有变换时，都会执行更新操作，计算最新的矩阵。
ThreeJS入门（075）：THREE.Matrix3 知识详解，示例代码
大剑师兰特的GIS世界
10-02 1211
`THREE.Matrix3` 是 Three.js 中用于表示三维空间中的变换矩阵的一个类，但它通常用于处理二维变换或特定类型的三维变换，如切变变换。这个类提供了一组方法来创建、操作和查询 `3x3` 矩阵。由于它不包含第四行和第四列，因此它通常不用于表示完整的三维变换（如平移或缩放），但对于某些特定的应用场景（如纹理坐标变换、切变变换等）非常有用。
ThreeJS实现3D可视化机房
05-17
作者：Gvonte，关键技术点：效果合成器EffectComposer实现部分辉光效果，加入抗锯齿，高级效果组合器 MaskPass。
Web 3D工厂--智慧数字可视化工厂HTML5+WebGL(ThreeJS)烧脑巨作
热门推荐
chengwei5337的博客
08-27 1万+
随着IT信息技术和移动端的发展，Html5+3D(Webgl)技术已经悄然崛起，而3D工厂厂房在数字化的今天，已经被越来越多的公司和企业应用，三维数字工厂模型的应用，加快了工厂厂房，设备，传感器、管道罐体输送、监测控制等各个环节的效率。 对工厂园区的园区、大楼、生产车间、生产设备、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值