You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
418 lines
17 KiB
418 lines
17 KiB
<!DOCTYPE html>
|
|
<html lang="it">
|
|
<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">
|
|
Una classe che rappresenta una [link:https://en.wikipedia.org/wiki/Matrix_(mathematics) matrice] 4x4.<br /><br />
|
|
|
|
L'uso più comune di una matrice 4x4 nella grafica 3D è come una
|
|
[link:https://en.wikipedia.org/wiki/Transformation_matrix matrice di trasformazione].
|
|
|
|
Per un'introduzione alle matrici di trasformazione utilizzate in WebGL,
|
|
dai un'occhiata a [link:http://www.opengl-tutorial.org/beginners-tutorials/tutorial-3-matrices questo tutorial].<br /><br />
|
|
|
|
Ciò consente ad un [page:Vector3] che rappresenta un punto nello spazio 3D di subire trasformazioni come traslazione, rotazione
|
|
taglio, scala, riflessione, proiezione ortogonale o prospettica e così via, moltiplicandosi per la matrice.
|
|
Questo è noto come `applicare` la matrice al vettore.<br /><br />
|
|
|
|
Ogni [page:Object3D] ha tre Matrix4 associate:
|
|
<ul>
|
|
<li>
|
|
[page:Object3D.matrix]: Questo memorizza la trasfomazione locale dell'oggetto. Questa è la trasformazione dell'oggetto rispetto al suo genitore.
|
|
</li>
|
|
<li>
|
|
[page:Object3D.matrixWorld]: La trasformazione globale o world dell'oggetto. Se l'oggetto non ha un genitore, allora questo è identico
|
|
alla trasformazione locale memorizzata nella [page:Object3D.matrix matrix].
|
|
</li>
|
|
<li>
|
|
[page:Object3D.modelViewMatrix]: Questo rappresenta la trasformazione dell'oggetto rispetto al sistema di coordinate della telecamera.
|
|
Il modelViewMatrix dell'oggetto è il matrixWorld dell'oggetto pre-moltiplicato per il matrixWorldInverse della telecamera.
|
|
</li>
|
|
</ul>
|
|
|
|
Le [page:Camera Telecamere] hanno tre Matrix4 addizionali:
|
|
<ul>
|
|
<li>
|
|
[page:Camera.matrixWorldInverse]: La matrice di visualizzazione - l'inversa della [page:Object3D.matrixWorld matrixWorld] della telecamera.
|
|
</li>
|
|
<li>
|
|
[page:Camera.projectionMatrix]: Rappresenta le informazioni su come proiettare la scena nello spazio di ritaglio.
|
|
</li>
|
|
<li>
|
|
[page:Camera.projectionMatrixInverse]: L'inverso della projectionMatrix.
|
|
</li>
|
|
</ul>
|
|
Nota: [page:Object3D.normalMatrix] non è una Matrix4, ma una [page:Matrix3].
|
|
</p>
|
|
|
|
<h2>Una nota sull'ordine delle Row-Major (righe principali) e delle Column-Major (colonne principali)</h2>
|
|
<p>
|
|
Il metodo [page:set]() accetta gli argomenti in ordine
|
|
[link:https://en.wikipedia.org/wiki/Row-_and_column-major_order#Column-major_order row-major], mentre internamente
|
|
vengono memorizzati nell'array [page:.elements elements] nell'ordine column-major.<br /><br />
|
|
|
|
Ciò significa che la chiamata a
|
|
<code>
|
|
const m = new THREE.Matrix4();
|
|
|
|
m.set( 11, 12, 13, 14,
|
|
21, 22, 23, 24,
|
|
31, 32, 33, 34,
|
|
41, 42, 43, 44 );
|
|
|
|
</code>
|
|
risulterà nell'array [page:.elements elements] contenente:
|
|
<code>
|
|
m.elements = [ 11, 21, 31, 41,
|
|
12, 22, 32, 42,
|
|
13, 23, 33, 43,
|
|
14, 24, 34, 44 ];
|
|
</code>
|
|
e internamente tutti i calcoli vengono eseguiti utilizzando l'ordine column-major. Tuttavia, poiché l'ordine
|
|
effettivo non fa alcune differenza matematicamente e la maggior parte delle persone è abituata a pensare alle
|
|
matrici nell'ordine row-major, la documentazione di three.js mostra le matrici in ordine di row-major.
|
|
Tieni solo a mente che se stai leggendo il codice sorgente, dovrai prendere la [link:https://en.wikipedia.org/wiki/Transpose trasposizione]
|
|
di tutte le matrici qui descritte per dare un senso ai calcoli.
|
|
</p>
|
|
|
|
<h2>Estrazione della posizione, della rotazione e del ridimensionamento</h2>
|
|
<p>
|
|
Ci sono molte opzioni disponibili per l'estrazione della posizione, della rotazione e del ridimensionamento da una Matrix4.
|
|
<ul>
|
|
<li>
|
|
[page:Vector3.setFromMatrixPosition]: può essere utilizzato per estrarre il componente traslazione.
|
|
</li>
|
|
<li>
|
|
[page:Vector3.setFromMatrixScale]: può essere utilizzato per estrarre il componente ridimensionamento.
|
|
</li>
|
|
<li>
|
|
[page:Quaternion.setFromRotationMatrix], [page:Euler.setFromRotationMatrix] o [page:.extractRotation extractRotation]
|
|
può essere utilizzato per estrarre il componente rotazione da una matrice pura (non ridimensionata).
|
|
</li>
|
|
<li>
|
|
[page:.decompose decompose] può essere utilizzato per estrarre la posizione, la rotazione e il ridemsionamento tutti in uno.
|
|
</li>
|
|
</ul>
|
|
</p>
|
|
|
|
<h2>Costruttore</h2>
|
|
|
|
|
|
<h3>[name]()</h3>
|
|
|
|
<p>
|
|
Crea e inizializza [name] nella [link:https://en.wikipedia.org/wiki/Identity_matrix matrice] identità 4x4.
|
|
</p>
|
|
|
|
<h2>Proprietà</h2>
|
|
|
|
<h3>[property:Array elements]</h3>
|
|
<p>
|
|
Una lista di [link:https://en.wikipedia.org/wiki/Row-_and_column-major_order column-major]
|
|
di valori della matrice.
|
|
</p>
|
|
|
|
<h2>Metodi</h2>
|
|
|
|
<h3>[method:Matrix4 clone]()</h3>
|
|
<p>Crea una nuova Matrix4 con gli [page:.elements elementi] identici a questa.</p>
|
|
|
|
<h3>[method:this compose]( [param:Vector3 position], [param:Quaternion quaternion], [param:Vector3 scale] )</h3>
|
|
<p>
|
|
Imposta questa matrice sulla trasformazione composta da [page:Vector3 posizione],
|
|
[page:Quaternion quaternione] e [page:Vector3 ridimensionamento].
|
|
</p>
|
|
|
|
<h3>[method:this copy]( [param:Matrix4 m] )</h3>
|
|
<p>Copia gli [page:.elements elementi] della matrice [page:Matrix4 m] in questa matrice.</p>
|
|
|
|
<h3>[method:this copyPosition]( [param:Matrix4 m] )</h3>
|
|
<p>
|
|
Copia il componente traslazione della matrice [page:Matrix4 m] fornita nel componente
|
|
trasformazione di questa matrice.
|
|
</p>
|
|
|
|
<h3>[method:this decompose]( [param:Vector3 position], [param:Quaternion quaternion], [param:Vector3 scale] )</h3>
|
|
<p>
|
|
Decompone questa matrice nei suoi componenti [page:Vector3 posizione], [page:Quaternion quaternione] e [page:Vector3 ridimensionamento].<br/><br/>
|
|
Nota: Non tutte le matrici si possono scomporre in questo modo. Per esempio, se un oggetto ha un genitore ridimensionato non uniformemente,
|
|
allora la matrice del mondo dell'oggetto potrebbe non essere scomponibile e questo metodo potrebbe non essere appropriato.
|
|
</p>
|
|
|
|
<h3>[method:Float determinant]()</h3>
|
|
<p>
|
|
Calcola e restituisce il
|
|
[link:https://en.wikipedia.org/wiki/Determinant determinante] di questa matrice.<br /><br />
|
|
|
|
Sulla base del metodo [link:http://www.euclideanspace.com/maths/algebra/matrix/functions/inverse/fourD/index.htm qui] descritto.
|
|
</p>
|
|
|
|
<h3>[method:Boolean equals]( [param:Matrix4 m] )</h3>
|
|
<p>Restituisce true se questa matrice e [page:Matrix4 m] sono uguali.</p>
|
|
|
|
<h3>[method:this extractBasis]( [param:Vector3 xAxis], [param:Vector3 yAxis], [param:Vector3 zAxis] )</h3>
|
|
<p>
|
|
Estrae la [link:https://en.wikipedia.org/wiki/Basis_(linear_algebra) base] di questa matrice
|
|
nei tre vettori asse forniti. Se questa matrice è:
|
|
<code>
|
|
a, b, c, d,
|
|
e, f, g, h,
|
|
i, j, k, l,
|
|
m, n, o, p
|
|
</code>
|
|
allora [page:Vector3 xAxis], [page:Vector3 yAxis], [page:Vector3 zAxis] saranno impostate a:
|
|
<code>
|
|
xAxis = (a, e, i)
|
|
yAxis = (b, f, j)
|
|
zAxis = (c, g, k)
|
|
</code>
|
|
</p>
|
|
|
|
<h3>[method:this extractRotation]( [param:Matrix4 m] )</h3>
|
|
<p>
|
|
Estrae il componente rotazione della matrice [page:Matrix4 m] fornita nel componente rotazione di questa matrice.
|
|
</p>
|
|
|
|
<h3>[method:this fromArray]( [param:Array array], [param:Integer offset] )</h3>
|
|
<p>
|
|
[page:Array array] - l'array da cui leggere gli elementi.<br />
|
|
[page:Integer offset] - (opzionale) indice del primo elemento nell'array. Il valore predefinito è 0.<br /><br />
|
|
|
|
Imposta gli elementi di questa matrice in base ad un array nel formato
|
|
[link:https://en.wikipedia.org/wiki/Row-_and_column-major_order#Column-major_order column-major].
|
|
</p>
|
|
|
|
<h3>[method:this invert]()</h3>
|
|
<p>
|
|
Inverte questa matrice, utilizzando il [link:https://en.wikipedia.org/wiki/Invertible_matrix#Analytic_solution metodo analitico].
|
|
|
|
Non puoi invertire con un determinante zero. Se si tenta questo, il metodo produce invece una matrice zero.
|
|
</p>
|
|
|
|
<h3>[method:Float getMaxScaleOnAxis]()</h3>
|
|
<p>Ottiene il valore di ridimensionamento massimo dei 3 assi.</p>
|
|
|
|
<h3>[method:this identity]()</h3>
|
|
<p>Reimposta questa matrice alla [link:https://en.wikipedia.org/wiki/Identity_matrix matrice] identità.</p>
|
|
|
|
<h3>[method:this lookAt]( [param:Vector3 eye], [param:Vector3 target], [param:Vector3 up] )</h3>
|
|
<p>
|
|
Costruisce una matrice di rotazione, guardando dall'[page:Vector3 occhio] verso il [page:Vector3 target] orientato dal
|
|
vettore verso l'[page:Vector3 alto].
|
|
</p>
|
|
|
|
<h3>[method:this makeRotationAxis]( [param:Vector3 axis], [param:Float theta] )</h3>
|
|
<p>
|
|
[page:Vector3 axis] — Asse di rotazione, deve essere normalizzata.<br />
|
|
[page:Float theta] — Angolo di rotazione in radianti.<br /><br />
|
|
|
|
Imposta questa matrice come trasformazione di rotazione attorno all'[page:Vector3 asse] di [page:Float theta] radianti.<br />
|
|
|
|
Questa è un'alternativa alquanto controversa ma matematicamente valida alla rotazione tramite [page:Quaternion Quaternions].
|
|
Vedi la discussione [link:https://www.gamedev.net/articles/programming/math-and-physics/do-we-really-need-quaternions-r1199 qui].
|
|
</p>
|
|
|
|
<h3>[method:this makeBasis]( [param:Vector3 xAxis], [param:Vector3 yAxis], [param:Vector3 zAxis] )</h3>
|
|
<p>
|
|
Imposta questo sulla matrice di [link:https://en.wikipedia.org/wiki/Basis_(linear_algebra) base] composta dai tre
|
|
vettori di base forniti:
|
|
<code>
|
|
xAxis.x, yAxis.x, zAxis.x, 0,
|
|
xAxis.y, yAxis.y, zAxis.y, 0,
|
|
xAxis.z, yAxis.z, zAxis.z, 0,
|
|
0, 0, 0, 1
|
|
</code>
|
|
</p>
|
|
|
|
<h3>[method:this makePerspective]( [param:Float left], [param:Float right], [param:Float top], [param:Float bottom], [param:Float near], [param:Float far] )</h3>
|
|
<p>
|
|
Crea una matrice di [link:https://en.wikipedia.org/wiki/3D_projection#Perspective_projection proiezione prospettica].
|
|
Questa è utilizzata internamente da [page:PerspectiveCamera.updateProjectionMatrix]().
|
|
</p>
|
|
|
|
<h3>[method:this makeOrthographic]( [param:Float left], [param:Float right], [param:Float top], [param:Float bottom], [param:Float near], [param:Float far] )</h3>
|
|
<p>
|
|
Crea una matrice di [link:https://en.wikipedia.org/wiki/Orthographic_projection proiezione ortografica].
|
|
Questa è utilizzata internamente da [page:OrthographicCamera.updateProjectionMatrix]().
|
|
</p>
|
|
|
|
<h3>[method:this makeRotationFromEuler]( [param:Euler euler] )</h3>
|
|
<p>
|
|
Imposta il componente rotazione (la matrice 3x3 in alto a sinistra) di questa matrice sulla rotazione specificata dal dato [page:Euler Angolo di Eulero].
|
|
Il resto della matrice è impostato sull'identità. A seconda dell'[page:Euler.order ordine] di [page:Euler Eulero], ci sono sei possibili esisti.
|
|
Vedi [link:https://en.wikipedia.org/wiki/Euler_angles#Rotation_matrix questa pagina] per una lista completa.
|
|
</p>
|
|
|
|
<h3>[method:this makeRotationFromQuaternion]( [param:Quaternion q] )</h3>
|
|
<p>
|
|
Imposta il componente rotazinoe di questa matrice alla rotazione specificata da [page:Quaternion q], come
|
|
descritto [link:https://en.wikipedia.org/wiki/Rotation_matrix#Quaternion qui].
|
|
Il resto della matrice è impostato all'identità. Quindi, dato [page:Quaternion q] = w + xi + yj + zk, la matrice risultante sarà:
|
|
<code>
|
|
1-2y²-2z² 2xy-2zw 2xz+2yw 0
|
|
2xy+2zw 1-2x²-2z² 2yz-2xw 0
|
|
2xz-2yw 2yz+2xw 1-2x²-2y² 0
|
|
0 0 0 1
|
|
</code>
|
|
</p>
|
|
|
|
<h3>[method:this makeRotationX]( [param:Float theta] )</h3>
|
|
<p>
|
|
[page:Float theta] — Angolo rotazione in radianti.<br /><br />
|
|
|
|
Imposta questa matrice come una trasformazione rotazionale attorno all'asse X in radianti theta [page:Float theta] (θ).
|
|
La matrice risultante sarà:
|
|
<code>
|
|
1 0 0 0
|
|
0 cos(θ) -sin(θ) 0
|
|
0 sin(θ) cos(θ) 0
|
|
0 0 0 1
|
|
</code>
|
|
</p>
|
|
|
|
<h3>[method:this makeRotationY]( [param:Float theta] )</h3>
|
|
<p>
|
|
[page:Float theta] — Angolo rotazione in radianti.<br /><br />
|
|
|
|
Imposta questa matrice come una trasformazione rotazionale attorno all'asse Y in radianti theta [page:Float theta] (θ).
|
|
La matrice risultante sarà:
|
|
<code>
|
|
cos(θ) 0 sin(θ) 0
|
|
0 1 0 0
|
|
-sin(θ) 0 cos(θ) 0
|
|
0 0 0 1
|
|
</code>
|
|
</p>
|
|
|
|
<h3>[method:this makeRotationZ]( [param:Float theta] )</h3>
|
|
<p>
|
|
[page:Float theta] — Angolo rotazione in radianti.<br /><br />
|
|
|
|
Imposta questa matrice come una trasformazione rotazionale attorno all'asse Z in radianti theta [page:Float theta] (θ).
|
|
La matrice risultante sarà:
|
|
<code>
|
|
cos(θ) -sin(θ) 0 0
|
|
sin(θ) cos(θ) 0 0
|
|
0 0 1 0
|
|
0 0 0 1
|
|
</code>
|
|
</p>
|
|
|
|
<h3>[method:this makeScale]( [param:Float x], [param:Float y], [param:Float z] )</h3>
|
|
<p>
|
|
[page:Float x] - la quantità da scalare sull'asse X.<br />
|
|
[page:Float y] - la quantità da scalare sull'asse Y.<br />
|
|
[page:Float z] - la quantità da scalare sull'asse Z.<br /><br />
|
|
|
|
Imposta questa matrice come trasformazione di scala:
|
|
<code>
|
|
x, 0, 0, 0,
|
|
0, y, 0, 0,
|
|
0, 0, z, 0,
|
|
0, 0, 0, 1
|
|
</code>
|
|
</p>
|
|
|
|
<h3>[method:this makeShear]( [param:Float xy], [param:Float xz], [param:Float yx], [param:Float yz], [param:Float zx], [param:Float zy] )</h3>
|
|
<p>
|
|
[page:Float xy] - la quantità di taglio di X per Y.<br />
|
|
[page:Float xz] - la quantità di taglio di X per Z.<br />
|
|
[page:Float yx] - la quantità di taglio di Y per X.<br />
|
|
[page:Float yz] - la quantità di taglio di Y per Z.<br />
|
|
[page:Float zx] - la quantità di taglio di Z per X.<br />
|
|
[page:Float zy] - la quantità di taglio di Z per Y.<br /><br />
|
|
|
|
Imposta questa matrice come trasformata di taglio:
|
|
<code>
|
|
1, yx, zx, 0,
|
|
xy, 1, zy, 0,
|
|
xz, yz, 1, 0,
|
|
0, 0, 0, 1
|
|
</code>
|
|
</p>
|
|
|
|
<h3>[method:this makeTranslation]( [param:Float x], [param:Float y], [param:Float z] )</h3>
|
|
<p>
|
|
[page:Float x] - la quantità da translare sull'asse X.<br />
|
|
[page:Float y] - la quantità da translare sull'asse Y.<br />
|
|
[page:Float z] - la quantità da translare sull'asse Z.<br /><br />
|
|
|
|
Imposta questa matrice come una trasformata di traslazione:
|
|
<code>
|
|
1, 0, 0, x,
|
|
0, 1, 0, y,
|
|
0, 0, 1, z,
|
|
0, 0, 0, 1
|
|
</code>
|
|
</p>
|
|
|
|
<h3>[method:this multiply]( [param:Matrix4 m] )</h3>
|
|
<p>Post-moltiplica questa matrice per [page:Matrix4 m].</p>
|
|
|
|
<h3>[method:this multiplyMatrices]( [param:Matrix4 a], [param:Matrix4 b] )</h3>
|
|
<p>Imposta questa matrice a [page:Matrix4 a] x [page:Matrix4 b].</p>
|
|
|
|
<h3>[method:this multiplyScalar]( [param:Float s] )</h3>
|
|
<p>Moltiplica ogni componente della matrice per il valore scalare [page:Float s].</p>
|
|
|
|
<h3>[method:this premultiply]( [param:Matrix4 m] )</h3>
|
|
<p>Pre-moltiplica questa matrice per [page:Matrix4 m].</p>
|
|
|
|
<h3>[method:this scale]( [param:Vector3 v] )</h3>
|
|
<p>Moltiplica le colonne di questa matrice per il vettore [page:Vector3 v].</p>
|
|
|
|
<h3>[method:this set]( [param:Float n11], [param:Float n12], [param:Float n13], [param:Float n14], [param:Float n21], [param:Float n22], [param:Float n23], [param:Float n24], [param:Float n31], [param:Float n32], [param:Float n33], [param:Float n34], [param:Float n41], [param:Float n42], [param:Float n43], [param:Float n44] )</h3>
|
|
<p>
|
|
Imposta gli [page:.elements elementi] di questa matrice ai valori principali di row-major forniti [page:Float n11],
|
|
[page:Float n12], ... [page:Float n44].
|
|
</p>
|
|
|
|
<h3>[method:this setFromMatrix3]( [param:Matrix3 m] )</h3>
|
|
<p>Imposta gli elementi 3x3 superiori di questa matrice sui valori di Matrix3 [page:Matrix3 m].</p>
|
|
|
|
<h3>[method:this setPosition]( [param:Vector3 v] )</h3>
|
|
<h3>[method:this setPosition]( [param:Float x], [param:Float y], [param:Float z] ) // optional API</h3>
|
|
<p>
|
|
Imposta la componente posizione per questa matrice dal vettore [page:Vector3 v], senza influenzare
|
|
il resto della matrice - ovvero se la matrice è attulmente:
|
|
<code>
|
|
a, b, c, d,
|
|
e, f, g, h,
|
|
i, j, k, l,
|
|
m, n, o, p
|
|
</code>
|
|
Questa diventa:
|
|
<code>
|
|
a, b, c, v.x,
|
|
e, f, g, v.y,
|
|
i, j, k, v.z,
|
|
m, n, o, p
|
|
</code>
|
|
</p>
|
|
|
|
<h3>[method:Array toArray]( [param:Array array], [param:Integer offset] )</h3>
|
|
<p>
|
|
[page:Array array] - (opzionale) array per memorizzare il vettore risultante.<br />
|
|
[page:Integer offset] - (opzionale) offset nell'array in cui inserire il risultato.<br /><br />
|
|
|
|
Scrive gli elementi di questa matrice in una matrice in formato
|
|
[link:https://en.wikipedia.org/wiki/Row-_and_column-major_order#Column-major_order column-major].
|
|
</p>
|
|
|
|
<h3>[method:this transpose]()</h3>
|
|
<p>[link:https://en.wikipedia.org/wiki/Transpose Traspone] questa matrice.</p>
|
|
|
|
<h2>Source</h2>
|
|
|
|
<p>
|
|
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
|
|
</p>
|
|
</body>
|
|
</html>
|
|
|