Techniques CSS pour la 3D : Maîtrisez les Ombres Dynamiques

Cet article est le troisième d’une série initiée avec l’article Maîtrisez l'art de la 3D en CSS : Techniques et inspirations pour intégrateurs. Si vous ne l’avez pas lu, allez donc y faire un petit tour avant 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 déjà fait, en commençant par Maîtriser les fondamentaux de la 3D en CSS.

Enfin, car le sujet actuel demande de bien comprendre le concept de récursivité en CSS, je vous conseille très fortement la lecture d’un tutoriel dédié 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.

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 fait 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 est à noter.

La partie Javascript en revanche est bien plus fournie, et composée de 4 fonctions que je vais pour une fois vous détailler maintenant.

createAssembly est une fonction dont le rôle 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 à 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 imaginant du CSS, et vous allez voir c’est bien moins compliqué que ce que vous pouvez imaginer ! Comme vous pouvez le voir, son rôle 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 (grâce à la fonction createAssembly), 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 très nombreuses formes, ici simplifiée par la création de fonction permettant de créer des « potions » réutilisables.

Maintenant que tout a été détaillé, nous pouvons enfin passer à l’étude de notre ombrage ! Pour simplifier le travail, j’ai retiré la texture sur notre 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.