De La 3D Dans Vos Pages Web - Éditions D-BookeR

 

Comment mettre des images 3D interactives sur une page web ? Quelles solutions techniques pour qu'elles soient visibles par un maximum d'internautes, autrement dit supportées par un large éventail de navigateurs ? Comment les mettre en œuvre ?

Les solutions proposées ici ne requièrent pas l'installation d'un plug-in ni d'un outil spécifique côté utilisateur. Elles sont aujourd'hui supportées par la plupart des navigateurs.

 

Sketchfab... pour les non développeurs

Indiscutablement, la solution la plus simple, la plus efficace, est de recourir à Sketchfab, qui est aux contenus 3D ce qu'est YouTube ou Vimeo à la vidéo.

Vous importez votre fichier dans son format natif et le service se charge de l'affichage sur Internet. Vous pouvez ensuite le publier, le partager et l'intégrer à vos pages web. Le service se fonde sur le standard WebGL doublé d'une solution alternative pour les internautes dont la configuration matérielle ne serait pas encore compatible.

Sketchfab propose également la visualisation en réalité virtuelle aussi bien pour les cardboards que des casques avancés (Oculus Rift, HTC Vive, etc.) et des fonctionnalités de réalité augmentée.

 

Van gogh Room by ruslans3d on Sketchfab

 

> Interview avec le YouTube de la 3D (3D Natives, 2013)

> Sketchfab, le spécialiste du partage de contenu 3D, passe la barre du milliard de pages vues de Julien Bergounhoux (Usine Digitale, 2018)

 

Les transformations CSS 3D

Les CSS présentent dans leur version 3 des propriétés de transformations 3D avancées qui permettent de créer des objets ou des scènes 3D interactives. La plupart des navigateurs aujourd'hui les supportent (voir Can I use CSS3 3D). Simplement avec les CSS, vous pouvez déjà obtenir des résultats bluffants, mais cela relève de l'exercice de style. Un peu de JavaScript en plus facilite la tâche et permet d'aller plus loin.

Classiquement, les CSS 3D vont plutôt être utilisées pour créer des effets d'interactivité.

> Exemple d'un cube 3D (codepen)

> Transformations CSS (MDN docs)

> The Mine: un exemple de jeu sans la moindre ligne de JS + d'autres exemples du même développeur sur codepen

 

Three.JS

Three.JS est une bibliothèque et une API JavaScript qui facilite la création de scène 3D dans un navigateur web. Elle permet de tirer parti de WebGL sans avoir à le manipuler directement ni entrer dans ses aspects trop techniques. C'est en quelque sorte une surcouche.

> Des exemples d'effets (site officiel)