浏览代码

Core: Add Matrix2 class (#28923)

* Add Matrix2 class to examples

* Update "set" function body formatting

* Add Matrix2 to core

* Update WebGPU build

* docs
Garrett Johnson 1 年之前
父节点
当前提交
b59ac414ef
共有 5 个文件被更改,包括 189 次插入0 次删除
  1. 132 0
      docs/api/en/math/Matrix2.html
  2. 1 0
      docs/list.json
  3. 1 0
      src/Three.WebGPU.js
  4. 1 0
      src/Three.js
  5. 54 0
      src/math/Matrix2.js

+ 132 - 0
docs/api/en/math/Matrix2.html

@@ -0,0 +1,132 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<base href="../../../" />
+		<script src="page.js"></script>
+		<link type="text/css" rel="stylesheet" href="page.css" />
+	</head>
+	<body>
+		<h1>[name]</h1>
+
+		<p class="desc">
+			A class representing a 2x2
+			[link:https://en.wikipedia.org/wiki/Matrix_(mathematics) matrix].
+		</p>
+
+		<h2>Code Example</h2>
+		<code>
+const m = new Matrix2(); 
+		</code>
+
+		<h2>A Note on Row-Major and Column-Major Ordering</h2>
+		<p>
+			The constructor and [page:set]() method take arguments in
+			[link:https://en.wikipedia.org/wiki/Row-_and_column-major_order#Column-major_order row-major] 
+			order, while internally they are stored in the [page:.elements elements] 
+			array in column-major order.<br /><br />
+
+			This means that calling
+			<code>
+m.set( 11, 12,
+       21, 22 );
+		</code>
+			will result in the [page:.elements elements] array containing:
+			<code> 
+m.elements = [ 11, 21,
+			   12, 22 ];
+			</code>
+			and internally all calculations are performed using column-major ordering.
+			However, as the actual ordering makes no difference mathematically and
+			most people are used to thinking about matrices in row-major order, the
+			three.js documentation shows matrices in row-major order. Just bear in
+			mind that if you are reading the source code, you'll have to take the
+			[link:https://en.wikipedia.org/wiki/Transpose transpose] of any matrices
+			outlined here to make sense of the calculations.
+		</p>
+
+		<h2>Constructor</h2>
+
+		<h3>[name]( [param:Number n11], [param:Number n12],
+			[param:Number n21], [param:Number n22] )</h3>
+		<p>
+			Creates a 2x2 matrix with the given arguments in row-major order. If no arguments are provided, the constructor initializes
+			the [name] to the 3x3 [link:https://en.wikipedia.org/wiki/Identity_matrix identity matrix].
+		</p>
+
+		<h2>Properties</h2>
+
+		<h3>[property:Array elements]</h3>
+		<p>
+			A [link:https://en.wikipedia.org/wiki/Row-_and_column-major_order column-major] list of matrix values.
+		</p>
+
+		<h2>Methods</h2>
+
+		<h3>
+			[method:this fromArray]( [param:Array array], [param:Integer offset] )
+		</h3>
+		<p>
+			[page:Array array] - the array to read the elements from.<br />
+			[page:Integer offset] - (optional) index of first element in the array.
+			Default is `0`.<br /><br />
+
+			Sets the elements of this matrix based on an array in
+			[link:https://en.wikipedia.org/wiki/Row-_and_column-major_order#Column-major_order column-major] format.
+		</p>
+
+		<h3>[method:this identity]()</h3>
+		<p>
+			Resets this matrix to the 2x2 identity matrix:
+		</p>
+
+		<math display="block">
+			<mrow>
+				<mo>[</mo>
+				<mtable>
+					<mtr>
+						<mtd><mn>1</mn></mtd>
+						<mtd><mn>0</mn></mtd>
+					</mtr>
+					<mtr>
+						<mtd><mn>0</mn></mtd>
+						<mtd><mn>1</mn></mtd>
+					</mtr>
+				</mtable>
+				<mo>]</mo>
+			</mrow>
+		</math>
+
+		<h3>
+			[method:this set]( [param:Float n11], [param:Float n12], [param:Float n21], [param:Float n22] )
+		</h3>
+		<p>
+			Sets the 2x2 matrix values to the given
+			[link:https://en.wikipedia.org/wiki/Row-_and_column-major_order row-major]
+			sequence of values:
+		</p>
+
+		<math display="block">
+			<mrow>
+				<mo>[</mo>
+				<mtable>
+					<mtr>
+						<mtd><mi>n11</mi></mtd>
+						<mtd><mi>n12</mi></mtd>
+					</mtr>
+					<mtr>
+						<mtd><mi>n21</mi></mtd>
+						<mtd><mi>n22</mi></mtd>
+					</mtr>
+				</mtable>
+				<mo>]</mo>
+			</mrow>
+		</math>
+
+		<h2>Source</h2>
+
+		<p>
+			[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
+		</p>
+	</body>
+</html>

+ 1 - 0
docs/list.json

@@ -241,6 +241,7 @@
 				"Interpolant": "api/en/math/Interpolant",
 				"Line3": "api/en/math/Line3",
 				"MathUtils": "api/en/math/MathUtils",
+				"Matrix2": "api/en/math/Matrix2",
 				"Matrix3": "api/en/math/Matrix3",
 				"Matrix4": "api/en/math/Matrix4",
 				"Plane": "api/en/math/Plane",

+ 1 - 0
src/Three.WebGPU.js

@@ -121,6 +121,7 @@ export { Sphere } from './math/Sphere.js';
 export { Ray } from './math/Ray.js';
 export { Matrix4 } from './math/Matrix4.js';
 export { Matrix3 } from './math/Matrix3.js';
+export { Matrix2 } from './math/Matrix2.js';
 export { Box3 } from './math/Box3.js';
 export { Box2 } from './math/Box2.js';
 export { Line3 } from './math/Line3.js';

+ 1 - 0
src/Three.js

@@ -120,6 +120,7 @@ export { Sphere } from './math/Sphere.js';
 export { Ray } from './math/Ray.js';
 export { Matrix4 } from './math/Matrix4.js';
 export { Matrix3 } from './math/Matrix3.js';
+export { Matrix2 } from './math/Matrix2.js';
 export { Box3 } from './math/Box3.js';
 export { Box2 } from './math/Box2.js';
 export { Line3 } from './math/Line3.js';

+ 54 - 0
src/math/Matrix2.js

@@ -0,0 +1,54 @@
+export class Matrix2 {
+
+	constructor( n11, n12, n21, n22 ) {
+
+		Matrix2.prototype.isMatrix2 = true;
+
+		this.elements = [
+			1, 0,
+			0, 1,
+		];
+
+		if ( n11 !== undefined ) {
+
+			this.set( n11, n12, n21, n22 );
+
+		}
+
+	}
+
+	identity() {
+
+		this.set(
+			1, 0,
+			0, 1,
+		);
+
+		return this;
+
+	}
+
+	fromArray( array, offset = 0 ) {
+
+		for ( let i = 0; i < 4; i ++ ) {
+
+			this.elements[ i ] = array[ i + offset ];
+
+		}
+
+		return this;
+
+	}
+
+	set( n11, n12, n21, n22 ) {
+
+		const te = this.elements;
+
+		te[ 0 ] = n11; te[ 2 ] = n12;
+		te[ 1 ] = n21; te[ 3 ] = n22;
+
+		return this;
+
+	}
+
+}