Série d'articles graphiques "retro".
Bonjour,
L'axonométrie (projection axonométrique, projection parallèle) s'utilise principalement en dessin technique et en architecture.
Elle a la particularité de conserver le parallélisme des droites, et correspond approximativement à une perspective centrale (ou conique) où l'œil est placé très loin (comme par exemple avec un téléobjectif très puissant).
La programmation de l'axonométrie est plus simple que celle de la perspective:
function Axono(az,ax) {// az,ax: en degrés (°)
var rz=az*0.01745329252,rx=ax*-0.01745329252; // en rad
var sa=Math.sin(rz),ca=Math.cos(rz),sb=Math.sin(rx),cb=Math.cos(rx);
this.xx=ca; this.xy=-sa;
this.zx=sb*sa; this.zy=sb*ca; this.zz=cb;
}
// Projection (x,y,z) --> (U,V) avec p = new Axono(...):
//
// U = x' = p.xx*x + p.xy*y;
// V = z' = p.zx*x + p.zy*y + p.zz*z;
En fait, après la rotation et le basculement, on laisse simplement tomber une des coordonnées (ici y').
Le code proposé ici est une adaptation de celui de l'article
Retro-A: Scène et perspective.
Remarque: Sur l'image de capture, il n'est pas aisé de voir que les bords opposés du damier sont vraiment parallèles !
Testé avec les dernières versions des navigateurs:
Chrome, Firefox, Opera, Safari
Liens:
Coordonnées cartésiennes ,
Matrice de rotation
Perspective axonométrique
Retro-A: Scène et perspective
Slider bar (barre de défilement, curseur) horizontal et vertical
Canvas: Move et Zoom avec la Souris
Bonne lecture ...
Vous n'êtes pas encore membre ?
inscrivez-vous, c'est gratuit et ça prend moins d'une minute !
Les membres obtiennent plus de réponses que les utilisateurs anonymes.
Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.
Le fait d'être membre vous permet d'avoir des options supplémentaires.