Matrix-transformations.html 3.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970
  1. <!DOCTYPE html>
  2. <html lang="pt-br">
  3. <head>
  4. <meta charset="utf-8">
  5. <base href="../../../" />
  6. <script src="page.js"></script>
  7. <link type="text/css" rel="stylesheet" href="page.css" />
  8. </head>
  9. <body>
  10. <h1>Transformações de matriz</h1>
  11. <p>
  12. Three.js usa `matrizes` para codificar transformações 3D --- translações (posição), rotações e dimensionamento.
  13. Cada instância de [page:Object3D] tem uma [page:Object3D.matrix matriz] (matrix) que armazena a
  14. posição, rotação e escala. Esta página descreve como atualizar a transformação de um objeto.
  15. </p>
  16. <h2>Propriedades de conveniência e `matrixAutoUpdate`</h2>
  17. <p>
  18. Existem duas maneiras de atualizar a transformação de um objeto:
  19. </p>
  20. <ol>
  21. <li>
  22. Modifique as propriedades `position`, `quaternion` e `scale` do objeto e deixe o three.js recalcular
  23. a matriz do objeto a partir destas propriedades:
  24. <code>
  25. object.position.copy( start_position );
  26. object.quaternion.copy( quaternion );
  27. </code>
  28. Por padrão, a propriedade `matrixAutoUpdate` é definida como verdadeira e a matriz será recalculada automaticamente.
  29. Se o objeto é estático, ou você deseja controlar manualmente quando ocorre o recálculo, um melhor desempenho pode ser obtido configurando a propriedade false:
  30. <code>
  31. object.matrixAutoUpdate = false;
  32. </code>
  33. E depois de alterar qualquer propriedade, atualize manualmente a matriz:
  34. <code>
  35. object.updateMatrix();
  36. </code>
  37. </li>
  38. <li>
  39. Modifique a matriz do objeto diretamente. A classe [page:Matrix4] tem vários métodos para modificar a matriz:
  40. <code>
  41. object.matrix.setRotationFromQuaternion( quaternion );
  42. object.matrix.setPosition( start_position );
  43. object.matrixAutoUpdate = false;
  44. </code>
  45. Observe que `matrixAutoUpdate` <em>deve</em> ser definido como `false` neste caso, e você deve ter certeza de <em>não</em> chamar `updateMatrix`. Chamar `updateMatrix` irá destruir as alterações manuais feitas na matriz, recalculando a matriz de `position`, `scale` e assim por diante.
  46. </li>
  47. </ol>
  48. <h2>Objeto e matrizes mundo (world matrices)</h2>
  49. <p>
  50. A [page:Object3D.matrix matriz] (matrix) de um objeto armazena a transformação do objeto <em>relativa</em> ao objeto [page:Object3D.parent pai] (parent); para obter a transformação do objeto em coordenadas <em>mundo</em>, deve-se acessar a [page:Object3D.matrixWorld] do objeto.
  51. </p>
  52. <p>
  53. Quando a transformação do objeto pai ou filho muda, você pode solicitar que a [page:Object3D.matrixWorld matrixWorld] do objeto filho seja atualizada chamando [page:Object3D.updateMatrixWorld updateMatrixWorld]().
  54. </p>
  55. <h2>Rotação e Quaternion</h2>
  56. <p>
  57. Three.js fornece duas maneiras de representar rotações 3D: [page:Euler Euler angles] e [page:Quaternion Quaternions], bem como métodos para converter entre os dois.
  58. Os ângulos de Euler estão sujeitos a um problema chamado "gimbal lock", onde certas configurações podem perder um grau de liberdade (impedindo que o objeto seja girado em torno de um eixo). Por esta razão,
  59. as rotações do objeto são <em>sempre</em> armazenadas no objeto [page:Object3D.quaternion quaternion].
  60. </p>
  61. <p>
  62. As versões anteriores da biblioteca incluíam uma propriedade `useQuaternion` que, quando definida como false, faria com que a [page:Object3D.matrix matrix] do objeto fosse calculada a partir de um ângulo de Euler. Essa prática está obsoleta --- em vez disso, você deve usar o método [page:Object3D.setRotationFromEuler setRotationFromEuler], que atualizará o quaternion.
  63. </p>
  64. </body>
  65. </html>