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.
79 lines
3.7 KiB
79 lines
3.7 KiB
3 years ago
|
<!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>Trasformazioni di matrici ([name])</h1>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
Three.js utilizza le `matrici` per codificare le trasformazioni 3D, traslazioni (posizione), rotazioni e ridimensionamento. Ogni istanza di [page:Object3D]
|
||
|
|
ha una [page:Object3D.matrix matrice] che memorizza la posizione, la rotazione e il ridimensionamento. Questa pagina descrive come aggiornare la trasformazione
|
||
|
|
di un oggetto.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<h2>Proprietà di convenienza e `matrixAutoUpdate`</h2>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
Ci sono due modi per aggiornare la trasformazione di un oggetto:
|
||
|
|
</p>
|
||
|
|
<ol>
|
||
|
|
<li>
|
||
|
|
Modificare le proprietà `position`, `quaternion` e `scale` dell'oggetto e lasciare che three.js ricalcoli la
|
||
|
|
matrice dell'oggetto da queste proprietà:
|
||
|
|
<code>
|
||
|
|
object.position.copy( start_position );
|
||
|
|
object.quaternion.copy( quaternion );
|
||
|
|
</code>
|
||
|
|
Per impostazione predefinita, la proprietà `matrixAutoUpdate` è impostata su true e la matrice viene ricalcolata automaticamente.
|
||
|
|
Se l'oggetto è statico, o desideri controllare manualmente quando avviene il ricalcolo, è possibile ottenere prestazioni migliori se la
|
||
|
|
proprietà è impostata a false.
|
||
|
|
<code>
|
||
|
|
object.matrixAutoUpdate = false;
|
||
|
|
</code>
|
||
|
|
E dopo aver modificato le proprietà, aggiornare manualmente la matrice:
|
||
|
|
<code>
|
||
|
|
object.updateMatrix();
|
||
|
|
</code>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
Modificare direttamente la matrice dell'oggetto. La classe [page:Matrix4] possiede vari metodi per modificare la matrice:
|
||
|
|
<code>
|
||
|
|
object.matrix.setRotationFromQuaternion( quaternion );
|
||
|
|
object.matrix.setPosition( start_position );
|
||
|
|
object.matrixAutoUpdate = false;
|
||
|
|
</code>
|
||
|
|
Nota che, in questo caso, `matrixAutoUpdate` <em>deve</em> essere impostata a `false`, e devi essere sicuro di <em>non</em> chiamare `updateMatrix`.
|
||
|
|
La chiamata di `updateMatrix` eliminerà le modifiche manuali apportate alla matrice, ricalcolando la matrice da `position`, `scale`, e così via.
|
||
|
|
</li>
|
||
|
|
</ol>
|
||
|
|
|
||
|
|
<h2>Oggetto e matrici del mondo (world matrices)</h2>
|
||
|
|
<p>
|
||
|
|
La [page:Object3D.matrix matrice] dell'oggetto memorizza la trsformazione dell'oggetto <em>relativa</em> al [page:Object3D.parent genitore] dell'oggetto:
|
||
|
|
per ottenere la trasformazione dell'oggetto nelle coordinate del <em>mondo</em>, è necessario accedere alla [page:Object3D.matrixWorld] dell'oggetto.
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
Quando la trasformazione dell'oggetto padre o dell'oggetto figlio cambia, puoi richiedere che la [page:Object3D.matrixWorld matrixWorld] dell'oggetto
|
||
|
|
figlio venga aggiornata chiamando il metodo [page:Object3D.updateMatrixWorld updateMatrixWorld]().
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<h2>Rotazione e Quaternione</h2>
|
||
|
|
<p>
|
||
|
|
Three.js fornisce due modi per rappresentare le rotazioni 3D: [page:Euler angoli di Eulero] e [page:Quaternion Quaternioni],
|
||
|
|
nonché metodi per la conversione tra i due. Gli angoli di Eulero sono soggetti ad un problema chiamato "gimbal lock", in cui alcune
|
||
|
|
configurazioni possono perdere un grado di libertà (impedendo all'oggetto di essere ruotato su un asse). Per questo motivo, le
|
||
|
|
rotazioni degli oggetti sono <em>sempre</em> memorizzate nei [page:Object3D.quaternion quaternioni] dell'oggetto.
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
Le versioni precedenti della libreria includevano una proprietà `useQuaternion` che, se impostata a false, faceva si che la
|
||
|
|
[page:Object3D.matrix matrix] dell'oggetto fosse calcolata da un angolo di Eulero. Questa pratica è deprecata, si deve invece
|
||
|
|
usare il metodo [page:Object3D.setRotationFromEuler setRotationFromEuler], il quale aggiornerà il quaternione.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|