Découvrez Tridiv, un éditeur 3D construit sur CSS3

Dans la lignée de mon article de mai sur la création de 3D uniquement en CSS, je voulais vous présenter un outil assez impressionnant pour créer de la 3D en CSS : Tridiv.

Tridiv

Créer de la 3D utilisant uniquement HTML/CSS3 avec Tridiv

Tridiv est un éditeur 3D en ligne gratuit et assez simple a prendre en main, qui sans surprise permet de… créer des objets en 3D.

Petite particularité du service, il génére les modèles sous la forme de code HTML/CSS3 ! Modèles que vous pourrez ensuite insérer dans vos sites ou exporter sur codepen ou github. Notez aussi que le code correspondant à votre création est assez clair et pourra vous permettre de mieux comprendre comment créer des objets complexes en CSS3.

Malheureusement, passons à la triste nouvelle : le projet semble abandonné. Il fonctionne toujours, mais ne risque pas de subir d'évolution avant très longtemps. Comme une mauvaise nouvelle n'arrive jamais seule, le projet n'est pas open source et n'est donc pas disponible sur Github, donc si vous pensiez le forker (mais si, c'est un verbe du premier groupe !) pour y ajouter quelques évolutions vous-même.

Néanmoins, le service est disponible gratuitement en ligne, tout à fait fonctionnelle et vraiment bien fait. Je vous conseille donc de ne surtout pas vous arrêter à cela et vite aller l'essayer.

Css cover

L'interface de création de Tridiv

L'interface est "relativement" simple, l'important est de bien comprendre l'arrangement des differents splits de l'ecran.

En haut a gauche vous retrouverez une preview de votre oeuvre actuelle, que vous pourrez faire tourner dans tout les sens, mais ne pourrez pas la manipuler.

Ecrans tridiv

Pour modifier ou créer des éléments, il faudra passer par un des trois autres splits, représentant chacun une vue où la camera est placée pile dans un des axes. Là, vous pourrez utiliser les différents outils et formes disponible tout en haut de l'écran.

Outils tridiv

Enfin, vous pourrez retrouver toutes les options de votre forme sélectionnée sur la droite.

Options tridiv