Comment ajouter le logo HTML5 animé en 3D à vos pages web grâce à <canvas>

Article
05/27/2011

Comment ajouter le logo HTML5 animé en 3D à vos pages web grâce à

Ce soir, j’avais envie de jouer avec la balise <canvas> pour faire un truc qui ne sert à rien : afficher le logo 3D animé d’HTML5 en haut à gauche d’une page de mon blog. C’est vrai quoi. Pourquoi n’aurais-je pas le droit de me changer un peu les idées en codant des trucs qui ne servent à rien ?!? Clignement d'œil

Figurez-vous que ce fut extrêmement simple. Je suis en effet tombé sur le site de Kevin Roast qui s’est amusé à faire un petit moteur 3D basé sur HTML5 <canvas>. Il s’est également amusé à générer et animer le logo HTML5 ici : https://www.kevs3d.co.uk/dev/html5logo/

Il ne m’a donc plus que fallu bidouiller tout ça pour obtenir le résultat que vous voyez sur cette page. Si vous navigateur ne supporte pas <canvas> voici ce que cela donne :

Je l’ai également inséré sur mes 2 premiers articles consacrés à SVG et Canvas :

- Introduction aux APIs graphiques d’HTML5: SVG & Canvas (1/4)
- Introduction aux APIs graphiques d’HTML5: SVG & Canvas (2/4)

Si vous naviguez dans la page, vous verrez que le petit logo suit votre niveau de scrolling vertical.

Si vous aussi vous voulez perturber le lecteur en affichant un machin qui tourne en 3D et qui ne sert à rien, copiez simplement ces 3 lignes de déclaration d’import de scripts à la fin de votre page :

 <script src="https://david.blob.core.windows.net/html5/mathlib-min.js"></script>
<script src="https://david.blob.core.windows.net/html5/k3d-min.js"></script>
<script src="https://david.blob.core.windows.net/html5/html5logo.js"></script>

Et le tour est joué !

Si vous souhaitez analyser un peu comment tout cela fonctionne, il vous suffit de presser la touche F12 pour faire apparaitre la barre de développement d’IE9. Ensuite, sélectionnez le fichier k3d-min.js dans lequel se trouve toute la logique principale pour gérer le moteur 3D avec Canvas. Vous constaterez que ce fichier est difficilement lisible car il a été réduit ou “minimisé”. IE9 propose une option pour reformater le code :

Ensuite, le fichier html5logo.js permet de brancher du code à la fin du chargement de votre page. Il créé un élément canvas par code qu’il ajoute à la fin du document et qu’il positionne ensuite via CSS in-line en haut à gauche de la page. Le code instancie ensuite le moteur k3d puis constitue le logo 3D d’HTML5 à l’aide 5 différentes faces.

Par exemple, le code de cette 1ère face :

 var obj1 = new K3D.K3DObject();
with (obj1)
{
   drawmode = "solid";
   shademode = "lightsource";
   sortmode = "unsorted";
   addphi = -0.5;
   abouty = OBJMOVEY;
   scale = OBJSCALE;
   perslevel = 1000;
   init(
      [{x:-80,y:180,z:0},{x:0,y:180,z:-80},{x:0,y:0,z:-80},{x:-80,y:20,z:0},{x:-50,y:150,z:-30},
       {x:0,y:150,z:-80},{x:0,y:130,z:-80},{x:-30,y:130,z:-50},{x:-28,y:110,z:-52},{x:0,y:110,z:-80},
       {x:0,y:90,z:-80},{x:-45,y:90,z:-35},{x:-44,y:80,z:-36},{x:-25,y:80,z:-55},{x:-22,y:66,z:-58},
       {x:0,y:60,z:-80},{x:0,y:40,z:-80},{x:-40,y:50,z:-40}],
      [],
      [{color:[227,76,38],vertices:[0,1,2,3,0]},{color:[235,235,235],vertices:[4,5,6,7,8,9,10,11,4]},
       {color:[235,235,235],vertices:[12,13,14,15,16,17,12]}]
   );
}
k3dmain.addK3DObject(obj1);

Donne le résultat suivant :

Voilà, vous savez tout maintenant. Allez, bon week-end !

David

Additional resources