Que faut-il utiliser entre Three.js et CSS3 pour des animations 3D ?

Le 10/09/2015

L'objectif n'est évidemment pas de déterminer si l'un est mieux que l'autre, car les deux s'adressent évidemment à des publics très différents, avec des besoins différents : les développeurs JavaScript avec de gros besoins 3Ds (jeux, interfaces totalement en 3D, ….) iront vers Three.js , et les intégrateurs se tourneront vers le CSS3 pour ajouter des effets intéressants pour leur web designs.

Mettre les deux en comparaison permet surtout de présenter les deux technologies et vous donner envie d'expérimenter avec la 3D sur le web mais également de nourrir votre inspiration pour vos prochaines expériences.

Les 3D Transform CSS3

Le CSS3 nous a apporté un très bel outil avec les transformations 3D. Simple d'utilisation une fois que la logique est là, cette technique est tout à fait à la portée des intégrateurs sans aucune notion de JavaScript.

Mes quatre exemples sont simples à décortiquer ! Je vous conseille de vraiment jeter un œil au premier exemple, une soucoupe volante projetant une ombre sur la "sphère" en dessous. Pas de JS, tout est en CSS et en bonnes idées.

La 3D avec Three.js

Mais pour essayer de comparer ce qui est comparable, j'ai essayé de limiter les exemples choisis à des pens créant leurs modèles en JavaScript. Comme vous pourrez le voir, le résultat est souvent plus fluide et plus simple à animer qu'en CSS3, mais aussi plus complexe à mettre en place. La syntaxe est proche de celle utilisée pour le Canvas.

Petite note : n'ouvrez pas tous les liens dans des onglets sauf si vous avez confiance en votre carte graphique, car il est possible que le moteur webgl de votre navigateur ne tienne pas le coup et plante.