--- layout: layouts/page.njk title: Projection isométrique date: Last Modified --- La perspective isométrique est une méthode de représentation en perspective (3D) dans laquelle les trois directions de l'espace sont représentées avec la même importance, d'où le terme. Les lignes parallèles le restent il n'y a pas de point de fuite comme dans la perspective cavalière. ### Méthode 1 1ère étape : **Rotation de 45°** 2e étape : **Déformation** Pièce|X %|Y % ---|--:|--: Rouge|100|57.73 Bleu|57.73|100 Vert|57.73|100 Il faut prendre soin d'appliquer la transformation depuis le centre des pièces. Sachant qu'après la rotation de 45°, ce sont les diagonales qui sont suivant les axes de X et Y.\ Le centre est situé à côté * √2 / 2 3e étape : **Rotation** Pièce|Angle ---|--: Rouge|0 ° Bleu|-30 ° Vert|30 ° La encore il faut choisir avec soin l'origine de la transformation. il faut sélectionner les points en commun avec 2 côtés. ```svg ``` http://www.enjoythisbeautifulday.com/how-to/isometric/ ### Méthode 2 Cette méthode est un peu plus simple car il n'y a qu'une seule origine pour toute les transformations. 1ère étape : **Déformation** de 86.603% (cos(30°)) en hauteur 2e étape : **cisaillement** de 30° Pièce|Angle ---|--: Rouge|-30 ° Bleu|30 ° Vert|-30 ° 3e étape : **rotation** Pièce|Angle ---|--: Rouge|30 ° Bleu|30 ° Vert|-30 ° ```svg ``` https://nicoguaro.github.io/posts/isometric_inkscape2/ ### Méthode 3 En combinant les transformations successives dans une matrice résultantes matrix(1 0.5 -1 0.5 0 -50)\ matrix(1 0.5 0 1 -100 -100)\ matrix(1 -0.5 0 1 -100 100) ```svg ``` https://bl.ocks.org/helderdarocha/8b28505082bf1c81977d7dec797686c7 https://design.tutsplus.com/tutorials/how-to-create-advanced-isometric-illustrations-using-the-ssr-method--vector-1058 https://design.tutsplus.com/fr/tutorials/quick-tip-how-to-create-an-isometric-grid-in-less-than-2-minutes--vector-3831