Nous contacter

  1. Accueil
  2. Blog
  3. Webdesign
  4. Du cube au FPS : jusqu’où peut aller la 3D en CSS ?

Du cube au FPS : jusqu’où peut aller la 3D en CSS ?

Le 12/07/2016

Dans Webdesign

Aujourd'hui, le Blog Du Webdesign vous propose un voyage au pays de la 3D en CSS, du simple cube à l'environnement complet en CSS.

Créer des cubes en CSS

Commençons en douceur avec la création de cubes 3Ds en CSS, probablement la tâche la plus simple que vous pourrez effectuer pour bien comprendre comment créer des volumes en CSS. Pour cela, la tâche est assez simple : il vous suffit de créer 6 divs, que vous placerez ensuite dans l'espace pour former votre cube. Un des meilleurs tutos que vous pourrez trouver pour cette réalisation est Intro to CSS 3D transforms : Cube (en anglais).

Créer des cubes en CSS

Pour aller un petit peu plus loin, je vous propose cet exemple de cube construit comme si les plans étaient "pliés" comme du papier, ainsi qu'une utilisation "pratique" avec VoxelCSS.

Voxel.css

Pour commencer, un peu de vocabulaire.

Le voxel (contraction de « volumetric pixel ») est un pixel en 3D. Il consiste à stocker une information colorimétrique avec ses coordonnées spatiales, voire temporelles, de positionnement ainsi que, facultativement, une taille relative à l'unité utilisée ou d'autres informations telles qu'une matière.

En quelques mots, Voxel.css est donc une lib permettant de créer et manipuler de manière très simple des cubes en CSS, et de profiter de tous les avantages de travailler avec le DOM : gestion très simple des interactions souris et tactile grâce au javascript, simplicité de mise en place et support navigateur très large (tous les navigateurs qui supportent les transformations 3D).

Voxel

Malheureusement, la création de cubes en CSS reste un détournement, et possède ses propres limites : chaque cube est fait de 6 plans (1 pour chaque face) que le navigateur va devoir dessiner, et ce en toutes situations. Que le cube soit visible ou non, que les faces soient dans le champ de la caméra ou non, les plans seront "dessinés" tant qu'ils ne sont pas display: none. Inutile donc d'essayer de créer un jeu complet avec cette ressource, les performances ne tiendront pas la route.

Voxel2

Créer des mondes 3D en CSS et HTML

Maintenant que vous avez créé votre premier cube, je vous propose de découvrir le travail de Keith Clark : un FPS en CSS. Comme vous pourrez le voir, tout est présent : gestion des textures, des ombres, mouvement fluide (même avec des petites configurations) et support du mobile.

Fps

Pour plus d'informations sur cette impressionnante création, je vous propose de lire l'article expliquant la création de cette démo : Creating 3D worlds with HTML and CSS (en anglais), ainsi que le reste des articles de l'auteur traitant de la gestion des ombres et des volumes en CSS. Ces articles ont certes 3 ans, mais vous trouverez difficilement mieux sur le sujet.

FPS en CSS

Si créer des objets complexes et des environnements en CSS vous intéresse, mais que vous ne vous voyez pas y passer plusieurs années, j'ai tout de même une solution pour vous : Tridiv.

Créer des formes 3D impressionnantes avec Tridiv

Pour réussir à créer des formes très complexes sans pour autant y passer des mois, il existe Trivid ! Ce service en ligne est un éditeur 3D en ligne dont la particularité est de générer les modèles sous la forme de code HTML/CSS3. 

Tridiv 1

L'interface est relativement simple bien que très complète et certains des résultats sont particulièrement impressionnants.

Nes tridiv