Depuis près d’ un an, les navigateurs comme Chrome, Firefox ou encore Safari redoublent d’efforts pour améliorer sensiblement la vitesse d’exécution du JavaScript, et ceci nous offre de nouvelles perspectives comme par exemple ajouter de la 3D dans nos pages.
Je vous propose de lire un article qui montre comment créer un petit moteur 3D en JavaScript et comment l’utiliser avec jQuery.
Ce moteur est composé de 3 classes:
- La scène
- La caméra
- L’objet 3D (qui est un cube dans cet article)
Ce moteur n’utilise pas la nouvelle technologie WebGL qui gère la 3D avec des balises canvas, mais simule simplement le rendu 3D en convertissant les points 3D définis (X,Y,Z), en 2D (X,Y), la profondeur est simulée via la taille et l’opacité d’un objet.
Le moteur n’utilise pas entièrement jQuery puisque les calculs de conversions (3D => 2D) sont déjà lourds et l’ajout de fonction jQuery au milieu de ces calculs ne ferait que ralentir l’ animation 3D; les fonctions natives comme getElementById() ont donc été préférées pour le cœur du moteur.
Pour lire l’article c’est ici.
Pour voir la démonstration c’est ici.
