• A la une
  • Catégories
  • Dossiers
  • +

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

par Benjamin SANCHEZle 16/05/2017

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.

  • Partager l'article en 1 clic !

    N'hésitez pas à aider le BlogDuWebdesign
Avatar_thumbAuteur : Benjamin voir son blog

Développeur autodidacte depuis quelques années, déjà, je suis le développeur du blog du webdesign, où mon rôle est de concretiser les différentes idées et maquettes.

Devenez membre !

Rejoignez la communauté des créatifs du web !
- Partagez vos créations
- Gagnez en visibilité
- Créez votre blog facilement
> En savoir plus

Créer mon compte
twitter birdtwitter birdtwitter birdtwitter birdtwitter bird
twitter bird
Ouvrir