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

Inspiration pour les intégrateurs #52 : Three.js ou CSS3 pour la 3D ?

par Benjamin SANCHEZle 10/09/2015

Petit changement au niveau des inspirations pour intégrateur avec une mise côte à côte de deux technologies permettant d'arriver à un résultat similaire : les 3D Transform CSS, ou la bibliothèque Javascript Three.js

L'objectif n'est évidemment pas de déterminer si l'un est mieux que l'autre, car les deux s'adressent évidemment à des publiques 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, et les intégrateurs se tourneront vers le CSS3 pour ajouter des effets intéressants pour leur web designs.

Mettre les deux côte à côte permet surtout de presenter les deux technologies, vous donner envie d'expérimenter avec la 3D sur le web, et 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 a la portee des intégrateurs sans aucune notion de Javascript.

Le premier exemple est la carte de Yoshi's Island. Les éléments sont tous des images 2D placees dans un environnement 3D, ce qui rend particulièrement bien avec l'animation de rotation que possède la carte.

Mes quatre autres exemples sont bien plus petits et donc bien plus simples à décortiquer ! Je vous conseille de vraiment jeter un oeil au deuxième exemple, une soucoupe volante projetant une ombre sur la "sphère" en dessous. Pas de Js, tout en CSS et en bonnes idées.

 

La 3D avec Three.js

Three.js est une ressource Javascript permettant de simplifier l'utilisation de Web Gl, et est un vrai moteur 3D dans votre navigateur. Cela permet par exemple de créée des modeles 3D dans Maya (ou tout autre logiciel de 3 D), puis de les importer dans votre navigateur. pour des résultats vraiment impressionnant, comme le prouve l'exemple suivant.

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. Le code ses déplace totalement de la partie CSS a la partie Javascript, avec une syntaxe proche de celle de l'utilisation du 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.

 

 

  • 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