three.js 源码注释(八)Math/Matrix3.js

商域无疆 (http://blog.csdn.net/omni360/)

本文遵循“署名-非商业用途-保持一致”创作公用协议

转载请保留此句:商域无疆 -  本博客专注于 敏捷开发及移动和物联设备研究:数据可视化、GOLANG、Html5、WEBGL、THREE.JS否则,出自本博客的文章拒绝转载或再转载,谢谢合作。


以下代码是THREE.JS 源码文件中Math/Matrix3.js文件的注释.

更多更新在 : https://github.com/omni360/three.js.sourcecode/blob/master/Three.js


// File:src/math/Matrix3.js

/**
 * @author alteredq / http://alteredqualia.com/
 * @author WestLangley / http://github.com/WestLangley
 * @author bhouston / http://exocortex.com
 */
///Matrix3对象的构造函数.用来创建一个3x3矩阵.Matrix3对象的功能函数采用
///定义构造的函数原型对象来实现,实际就是一个数组.
///
///	用法: var m = new Matrix3(11, 12, 13, 21, 22, 23, 31, 32, 33)
///	创建一个3x3的矩阵,其实就是一个长度为9的数组,将参数(11, 12, 13, 21, 22, 23, 31, 32, 33)传递给数组用来初始化.
///	NOTE: 参数 n11, n12, n13, n21, n22, n23, n31, n32, n33 代表3x3矩阵中的元素的值,n11表示矩阵的第一行,第一列的元素值
///
///Matrix3
///n11第 1 行,第 1 列的元素值
///n12第 1 行,第 2 列的元素值
///n13第 1 行,第 3 列的元素值
///n21第 2 行,第 1 列的元素值
///n22第 2 行,第 2 列的元素值
///n23第 2 行,第 3 列的元素值
///n31第 3 行,第 1 列的元素值
///n32第 3 行,第 2 列的元素值
///n33第 3 行,第 3 列的元素值
///返回新的3x3矩阵
THREE.Matrix3 = function ( n11, n12, n13, n21, n22, n23, n31, n32, n33 ) {

	this.elements = new Float32Array( 9 );	//创建一个长度为9的数组

	var te = this.elements;	

	//将参数 n11, n12, n13, n21, n22, n23, n31, n32, n33复制给数组中的元素,如果参数没有定义,将矩阵的11,22,33元素初始化为1,其他元素初始化为0.
	te[ 0 ] = ( n11 !== undefined ) ? n11 : 1; te[ 3 ] = n12 || 0; te[ 6 ] = n13 || 0;
	te[ 1 ] = n21 || 0; te[ 4 ] = ( n22 !== undefined ) ? n22 : 1; te[ 7 ] = n23 || 0;
	te[ 2 ] = n31 || 0; te[ 5 ] = n32 || 0; te[ 8 ] = ( n33 !== undefined ) ? n33 : 1;

};

/****************************************
****下面是Euler对象提供的功能函数.
****************************************/
THREE.Matrix3.prototype = {

	constructor: THREE.Matrix3,	//构造器

	/*
	///set方法用来从新设置Matrix3(3x3矩阵)的元素值.并返回新的坐标值的Euler(欧拉角).
	/// TODO:修改set方法,兼容n11, n12, n13, n21, n22, n23, n31, n32, n33参数省略支持多态.
	*/
	///set
	///n11第 1 行,第 1 列的元素值
	///n12第 1 行,第 2 列的元素值
	///n13第 1 行,第 3 列的元素值
	///n21第 2 行,第 1 列的元素值
	///n22第 2 行,第 2 列的元素值
	///n23第 2 行,第 3 列的元素值
	///n31第 3 行,第 1 列的元素值
	///n32第 3 行,第 2 列的元素值
	///n33第 3 行,第 3 列的元素值
	///返回新的3x3矩阵
	set: function ( n11, n12, n13, n21, n22, n23, n31, n32, n33 ) {

		var te = this.elements;

		te[ 0 ] = n11; te[ 3 ] = n12; te[ 6 ] = n13;
		te[ 1 ] = n21; te[ 4 ] = n22; te[ 7 ] = n23;
		te[ 2 ] = n31; te[ 5 ] = n32; te[ 8 ] = n33;

		return this;	//返回新的3x3矩阵

	},

	/*
	///identity方法用来获得一个3x3矩阵的单位矩阵
	///
	/// NOTE:在矩阵的乘法中,有一种矩阵起着特殊的作用,如同数的乘法中的1,我们称这种矩阵为单位矩阵
	/// 	 它是个方阵,从左上角到右下角的对角线(称为主对角线)上的元素均为1以外全都为0。
	/// 	 对于单位矩阵,有AE=EA=A
	*/
	///identity
	///返回3x3矩阵的一个单位矩阵	
	identity: function () {

		this.set(

			1, 0, 0,
			0, 1, 0,
			0, 0, 1

		);

		return this;	//返回3x3矩阵的一个单位矩阵

	},

	/*
	///copy方法用来复制3x3矩阵的元素值.并返回新的Matrix3(3x3矩阵).
	*/
	///copy
	///Euler(欧拉角)
	///返回新的Matrix3(3x3矩阵)	
	copy: function ( m ) {

		var me = m.elements;

		this.set(

			me[ 0 ], me[ 3 ], me[ 6 ],
			me[ 1 ], me[ 4 ], me[ 7 ],
			me[ 2 ], me[ 5 ], me[ 8 ]

		);

		return this;	//返回新的Matrix3(3x3矩阵)

	},

	/*
	///multiplyVector3方法用来将3x3矩阵和一个Vector3(三维向量)相乘.并返回新的3x3矩阵.
	/// NOTE:multiplyVector3方法已经被删除使用vector.applyMatrix3( matrix )方法替换,这里保留是为了向下兼容.
	/// NOTE:multiplyVector3方法经常用来应用某种变换.
	*/
	///multiplyVector3
	///三维向量
	///并返回新的3x3矩阵
	multiplyVector3: function ( vector ) {

		//multiplyVector3方法已经被删除使用vector.applyMatrix3( matrix )方法替换
		console.warn( 'THREE.Matrix3: .multiplyVector3() has been removed. Use vector.applyMatrix3( matrix ) instead.' );
		return vector.applyMatrix3( this );	//调用vector.applyMatrix3()方法,并将Matrix3对象本身传递过去,应用变换后,返回新的Matrix3(3x3矩阵)

	},

	/*
	///multiplyVector3Array方法用来将数组a和一个Vector3(三维向量)相乘.并返回新的数组对象.
	/// NOTE:multiplyVector3Array方法已经被删除使用matrix.applyToVector3Array( array )方法替换,这里保留是为了向下兼容.
	/// NOTE:multiplyVector3Array方法经常用来应用某种变换.
	*/
	///multiplyVector3Array
	///数组对象
	///并返回新的数组对象
	multiplyVector3Array: function ( a ) {

		//multiplyVector3Array方法已经被删除使用matrix.applyToVector3Array( array )方法替换
		console.warn( 'THREE.Matrix3: .multiplyVector3Array() has been renamed. Use matrix.applyToVector3Array( array ) instead.' );
		return this.applyToVector3Array( a );	//调用matrix.applyToVector3Array()方法,并将Matrix3对象本身传递过去,应用变换后,返回新的Matrix3(3x3矩阵)

	},

	/*
	///applyToVector3Array方法用来将数组a和一个Vector3(三维向量)相乘.并返回新的数组对象.
	/// NOTE:multiplyVector3Array方法经常用来应用某种变换.参数offset和参数length可以省略.
	*/
	///multiplyVector3Array
	///数组对象
	///偏移量,可以省略,如果省略为0.
	///长度,可以省略,如果省略值为数组长度
	///并返回新的数组对象
	applyToVector3Array: function () {

		var v1 = new THREE.Vector3();

		return function ( array, offset, length ) {

			if ( offset === undefined ) offset = 0;
			if ( length === undefined ) length = array.length;

			for ( var i = 0, j = offset, il; i < length; i += 3, j += 3 ) {

				v1.x = array[ j ];
				v1.y = array[ j + 1 ];
				v1.z = array[ j + 2 ];

				v1.applyMatrix3( this );	//调用vector.applyMatrix3()方法,并将Matrix3对象本身传递过去,应用变换后,返回新的Matrix3(3x3矩阵)

				array[ j ]     = v1.x;
				array[ j + 1 ] = v1.y;
				array[ j + 2 ] = v1.z;

			}

			return array;	//返回应用变换后的新数组对象.

		};

	}(),

	/*
	///multiplyScalar方法用来将Matrix3(3x3矩阵)的元素直接与参数s相乘.并返回新的Matrix3(3x3矩阵).
	/// NOTE:这里传递的参数s是一个标量.
	*/
	///multiplyScalar
	///与当前Matrix3(3x3矩阵)对象的值相乘的标量,数值
	///返回新的Matrix3(3x3矩阵)
	multiplyScalar: function ( s ) {

		var te = this.elements;

		te[ 0 ] *= s; te[ 3 ] *= s; te[ 6 ] *= s;
		te[ 1 ] *= s; te[ 4 ] *= s; te[ 7 ] *= s;
		te[ 2 ] *= s; te[ 5 ] *= s; te[ 8 ] *= s;

		return this;		//返回新的Matrix3(3x3矩阵)

	},

	/*
	///determinant方法用来将Matrix3(3x3矩阵)的行列式
	/// NOTE:通过求解行列式值的方式来判断矩阵的逆矩阵是否存在(行列式的值不等于0,表示该矩阵有逆矩阵).
	*/
	///determinant
	///返回Matrix3(3x3矩阵)的三阶行列式
	determinant: function () {

		var te = this.elements;

		var a = te[ 0 ], b = te[ 1 ], c = te[ 2 ],
			d = te[ 3 ], e = te[ 4 ], f = te[ 5 ],
			g = te[ 6 ], h = te[ 7 ], i = te[ 8 ];

		return a * e * i - a * f * h - b * d * i + b * f * g + c * d * h - c * e * g;	//返回Matrix3(3x3矩阵)的三阶行列式

	},

	/*
	///getInverse方法用来获得Matrix3(3x3矩阵)的逆矩阵.
	/// NOTE:逆矩阵与当前矩阵相乘得到单位矩阵.
	*/
	///multiplyScalar
	///THREE.Matrix4
	///异常标志
	///返回Matrix3(3x3矩阵)的逆矩阵.
	getInverse: function ( matrix, throwOnInvertible ) {

		// input: THREE.Matrix4
		// 输入参数Matrix是一个4x4矩阵
		// ( based on http://code.google.com/p/webgl-mjs/ )

		var me = matrix.elements;
		var te = this.elements;

		te[ 0 ] =   me[ 10 ] * me[ 5 ] - me[ 6 ] * me[ 9 ];
		te[ 1 ] = - me[ 10 ] * me[ 1 ] + me[ 2 ] * me[ 9 ];
		te[ 2 ] =   me[ 6 ] * me[ 1 ] - me[ 2 ] * me[ 5 ];
		te[ 3 ] = - me[ 10 ] * me[ 4 ] + me[ 6 ] * me[ 8 ];
		te[ 4 ] =   me[ 10 ] * me[ 0 ] - me[ 2 ] * me[ 8 ];
		te[ 5 ] = - me[ 6 ] * me[ 0 ] + me[ 2 ] * me[ 4 ];
		te[ 6 ] =   me[ 9 ] * me[ 4 ] - me[ 5 ] * me[ 8 ];
		te[ 7 ] = - me[ 9 ] * me[ 0 ] + me[ 1 ] * me[ 8 ];
		te[ 8 ] =   me[ 5 ] * me[ 0 ] - me[ 1 ] * me[ 4 ];

		var det = me[ 0 ] * te[ 0 ] + me[ 1 ] * te[ 3 ] + me[ 2 ] * te[ 6 ]; 	//获得参数matrix行列式的值

		// no inverses
		// 没有逆矩阵

		if ( det === 0 ) {

			var msg = "Matrix3.getInverse(): can't invert matrix, determinant is 0";	//提示用户该矩阵没有逆矩阵

			if ( throwOnInvertible || false ) {

				throw new Error( msg );

			} else {

				console.warn( msg );

			}

			this.identity();	//获得一个单位矩阵

			return this;	//返回单位矩阵

		}

		this.multiplyScalar( 1.0 / det );	//除以行列式得到逆矩阵

		return this;	//返回Matrix3(3x3矩阵)的逆矩阵.

	},

	/*
	///transpose方法用来获得Matrix3(3x3矩阵)的转置矩阵.
	/// NOTE:一个mxn的矩阵的转置矩阵式nxm矩阵,就是矩阵的行和列交换.
	/// 	例如:
	///			 
	///				--     -- 		--     -- T
	///				| 1 2 3 |		| 1 4 7 |
	///	matrix A =	| 4 5 6 |  = 	| 2 5 8 |
	///				| 7 8 9 |		| 3 6 9 |
	///				--     --		--     --
	*/
	///transpose
	///返回Matrix3(3x3矩阵)的转置矩阵.
	transpose: function () {

		var tmp, m = this.elements;

		tmp = m[ 1 ]; m[ 1 ] = m[ 3 ]; m[ 3 ] = tmp;
		tmp = m[ 2 ]; m[ 2 ] = m[ 6 ]; m[ 6 ] = tmp;
		tmp = m[ 5 ]; m[ 5 ] = m[ 7 ]; m[ 7 ] = tmp;

		return this;	//返回Matrix3(3x3矩阵)的转置矩阵.

	},

	/*
	///flattenToArrayOffset方法通过参数offset指定偏移量,将矩阵展开到数组(参数array)中,返回新的数组.
	/// NOTE:flattenToArrayOffset方法可以用在将3x3矩阵变换成4x4矩阵中.
	///				--     --
	///				| 1 2 3 |
	///	matrix A =	| 4 5 6 |  => flattenToArrayOffset(arrary,3) => array(0,0,0,0,1,2,3,0,0,0,0,4,5,6,0,0,0,0,7,8,9)
	///				| 7 8 9 |
	///				--     --
	*/
	///multiplyScalar
	///Array数组对象
	///偏移量
	///返回包含矩阵元素的数组
	flattenToArrayOffset: function ( array, offset ) {

		var te = this.elements;

		array[ offset     ] = te[ 0 ];
		array[ offset + 1 ] = te[ 1 ];
		array[ offset + 2 ] = te[ 2 ];

		array[ offset + 3 ] = te[ 3 ];
		array[ offset + 4 ] = te[ 4 ];
		array[ offset + 5 ] = te[ 5 ];

		array[ offset + 6 ] = te[ 6 ];
		array[ offset + 7 ] = te[ 7 ];
		array[ offset + 8 ] = te[ 8 ];

		return array;	//返回包含矩阵元素的数组

	},

	/*
	///getNormalMatrix方法用来获得Matrix4(4x4矩阵)的正规矩阵.
	/// NOTE:当前矩阵的逆矩阵的转置矩阵就是当前矩阵的正规矩阵.
	*/
	///getNormalMatrix
	///THREE.Matrix4
	///参数m的正规矩阵.
	getNormalMatrix: function ( m ) {

		// input: THREE.Matrix4
		// 输入是一个Matrix4(4x4矩阵)对象

		this.getInverse( m ).transpose();	//当前矩阵的逆矩阵的转置矩阵就是当前矩阵的正规矩阵

		return this;	//参数m的正规矩阵

	},

	/*
	///transposeIntoArray方法用来将当前矩阵的转置矩阵存储到一个数组中.然后返回数组.
	/// NOTE:transposeIntoArray方法有点多余,matrix对象本身就是一个数组呀.
	*/
	///transposeIntoArray
	///THREE.Matrix4
	///参数m的转置矩阵.
	transposeIntoArray: function ( r ) {

		var m = this.elements;

		r[ 0 ] = m[ 0 ];
		r[ 1 ] = m[ 3 ];
		r[ 2 ] = m[ 6 ];
		r[ 3 ] = m[ 1 ];
		r[ 4 ] = m[ 4 ];
		r[ 5 ] = m[ 7 ];
		r[ 6 ] = m[ 2 ];
		r[ 7 ] = m[ 5 ];
		r[ 8 ] = m[ 8 ];

		//TODO:返回的为啥是this?
		return this;	//参数m的转置矩阵	

	},

	/*fromArray方法
	///fromArray方法将存储Matrix3(3x3矩阵)元素值的数组赋值给当前Matrix3(3x3矩阵)对象
	*/
	///fromArray
	///Matrix3(3x3矩阵)元素值的数组array
	///返回新的Matrix3(3x3矩阵)	
	fromArray: function ( array ) {

		this.elements.set( array );		//调用set方法,将数组赋值给当前Matrix3(3x3矩阵)对象

		return this;	//返回新的Matrix3(3x3矩阵)

	},

	/*toArray方法
	///toArray方法将当前Matrix3(3x3矩阵)的元素值赋值给数组array.返回一个数组对象.
	*/
	///toArray
	///返回含有Matrix3(3x3矩阵)元素值的数组array	
	toArray: function () {

		var te = this.elements;

		return [
			te[ 0 ], te[ 1 ], te[ 2 ],
			te[ 3 ], te[ 4 ], te[ 5 ],
			te[ 6 ], te[ 7 ], te[ 8 ]
		];										//返回含有Matrix3(3x3矩阵)元素值的数组array

	},

	/*clone方法
	///clone方法克隆一个Matrix3(3x3矩阵)对象.
	*/
	///clone
	///返回克隆的Matrix3(3x3矩阵)对象	
	clone: function () {

		var te = this.elements;

		return new THREE.Matrix3(

			te[ 0 ], te[ 3 ], te[ 6 ],
			te[ 1 ], te[ 4 ], te[ 7 ],
			te[ 2 ], te[ 5 ], te[ 8 ]

		);			//返回克隆的Matrix3(3x3矩阵)对象

	}

};


商域无疆 (http://blog.csdn.net/omni360/)

本文遵循“署名-非商业用途-保持一致”创作公用协议

转载请保留此句:商域无疆 -  本博客专注于 敏捷开发及移动和物联设备研究:数据可视化、GOLANG、Html5、WEBGL、THREE.JS否则,出自本博客的文章拒绝转载或再转载,谢谢合作。


以下代码是THREE.JS 源码文件中Math/Matix3.js文件的注释.

更多更新在 : https://github.com/omni360/three.js.sourcecode/blob/master/Three.js

你可能感兴趣的:(webgl,three.js,javascript,THREE.JS源码注释,web3d,javascript,three.js,webgl,源码)