Découvrez Tridiv, un éditeur 3D construit sur CSS3
Notez cet article

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.

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 !

Si la creation d'objets 3D en CSS vous interesse et que vous voulez apprendre la technique sous-jascente a Tridiv, je vous propose de decouvrire la serie d'articles initiee avec l'article Inspirations et techniques pour intégrateurs : De la 3D en CSS ! #1

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. 

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.

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