Un rendu 3D dans le navigateur sans WebGL
PolyCSS se présente comme un moteur 3D fonctionnant entièrement avec les capacités CSS du navigateur. Chaque polygone d’un maillage est transformé en un élément DOM positionné via transform: matrix3d(...). Les triangles texturés sont regroupés dans des atlas de sprites générés dynamiquement, le navigateur se chargeant des effets de superposition 3D via son propre compositeur.
L’intérêt est qu’aucun contexte WebGL ni élément canvas global n’est nécessaire. La scène rendue est un arbre d’éléments DOM classiques, sans shadow DOM. Chaque polygone devient individuellement adressable, ce qui permet de lui attacher des gestionnaires de clic, des classes CSS ou des animations via transitions CSS.
Formats et frameworks supportés
PolyCSS accepte les formats de fichiers OBJ, glTF, GLB et MagicaVoxel VOX. Il gère les textures UV ainsi que les couleurs de matériaux. La bibliothèque est disponible en version vanilla JavaScript, avec des bindings spécifiques pour React et Vue. L’installation se fait via npm pour chaque variante – @layoutit/polycss, @layoutit/polycss-react, @layoutit/polycss-vue – ou par CDN avec le script https://esm.sh/@layoutit/polycss/elements.
Utilisation et exemples
Le projet fournit des éléments personnalisés (poly-camera, poly-scene, poly-mesh) ainsi qu’une API impérative (createPolyCamera, createPolyScene). Un composant poly-orbit-controls permet d’ajouter des contrôles de rotation, de zoom et d’animation. Un exemple simple avec un icosaèdre coloré est donné pour les trois environnements (vanilla JS, React, Vue).
Un projet open source
PolyCSS est publié sur GitHub sous le nom d’utilisateur LayoutitStudio. Le site officiel propose une documentation, une galerie et un constructeur en ligne.
