Inspirations et techniques pour intégrateurs : De la 3D en CSS ! #4

Dernier article du dossier sur la 3D en CSS, avec l’étude des ombres dynamiques

De la 3D en CSS : Les ombres

Cet article le troisième d’une série initiée avec l’article Inspirations et techniques pour intégrateurs : De la 3D en CSS ! #1. Si vous ne l’avez pas lu, allez donc y faire un petit tour avant la fin de continuer cet article.

Comme pour tous les dossiers de cette série, nous ne reprendrons pas les bases de l’intégration, et il est important d’avoir de bonnes notions de HTML et CSS.

De plus, l’article d’aujourd’hui étant la suite vraiment très directe des deux articles précédents, je vous conseille de les lire avant de continuer si ce n’est pas encore fait, en commençant par De la 3D en CSS : Les bases. 

Enfin, car le sujet actuelle demande de bien comprendre le concept de recursivite en CSS, je vous conseille tres fortement la lecture d’un article dedie au sujet : Comprendre et appliquer la récursivité en CSS

Maintenant que tout est dit et que vous, attaquons au dernier sujet de ce dossier : L’ombrage.

3D objects in CSS with shading par Keith Clark

Pour illustrer ce dernier article sur le sujet, j’ai donc décidé de prendre ce pen par Keith Clark, représentant un des objets fair par ce dernier lors de la création de son FPS 3D entièrement en CSS. Si vous ne l’avez pas vu, je vous conseille vraiment d’y jeter un oeil.

Le pen représente donc un tonneau issu du FPS ci-dessus. Notez aussi qu’il ne pointe pas sur celui de l’auteur, ce dernier ayant un petit problème de SSL, mais je n’ai strictement rien changé si ce n’est le lien du fichier de texture.

See the Pen 3D objects in CSS with shading by Benjamin SANCHEZ (@B_Sanchez) on CodePen.

Comme vous pouvez le voir, les parties HTML et CSS ne sont vraiment pas folles, rien n’est à noter.

La partie Javascript en revanche est bien plus fournie, et composee de 4 fonctions que je vais pur une fois vous detailler maintenant.

createAssembly est une fonction dont le role est de créer une div et lui ajouter les classes threedee et assembly. Pourquoi ne pas créer cette div simplement en HTML ? je pense que cela doit avoir à voir avec la création du FPS complet, car il n’y a aucune raison en l’état.

createFace peut sembler très complexe si vous n’avez pas de connaissances en Javascript, mais essayez de le lire en immaginant du CSS, et vous allez voir c’est bien moins compliqué que ce que vous pouvez immaginer ! Comme vous pouvez le voir, son role est assez semblable à celui de createAssembly : créer une div et y ajouter beaucoup de CSS, sur lequel nous reviendrons sur la dernière partie.

Maintenant que nous avons toutes nos « pièces », createTube va se charger d’une bonne partie de l’assemblage, en créant un assembly (grace à la fonction create Assembly), puis en créant toutes les faces nécessaires en cercle.

createBarrel enfin, est une fonction dont le rôle est de créer un tube (avec la fonction createTube, et y ajouter les deux parties rondes en haut et en bas.

Notez qu’il serait tout à fait possible de se passer complètement du Javascript avec un usage judicieux de Sass et d’un moteur de templating permettant l’usage de boucles pour le HTML, vu que ce dernier ne sert qu’a créer des éléments HTML et les styler. Néanmoins, il aurait été bien plus fastidieux de gérer la création de tres nombreuses formes, ici simplifiée par la création de fonction permettant de créer des « potions » réutilisables.

La gestion de l’ombre

Maintenant que tout a été détaillé, nous pouvons enfin passer à l’étude de notre ombrage ! Pour simplifier le ravail, j’ai retiré la texture sur note tonneau, de façon à ne garder que l’ombre.

See the Pen 3D objects in CSS with shading – no texture by Benjamin SANCHEZ (@B_Sanchez) on CodePen.

Les lignes intéressantes en premier lieu sont les lignes 11 et 12, qui permettent de créer un gradient, que nous insérons ensuite dans le background de notre face (vous ne pouvez plus le voir sur cette version, mais l’usage d’un deuxième background permettait ensuite d’insérer la texture). La ligne 11 faits usage de ‘rx’ et ‘ry’, qui sont l’emplacement de la face dans l’espace, et donc au point de lumière.