La 3D envahit le Web : découvrez les outils pour créer des expériences immersives
Publié le 03 mars 2025
La 3D sur le Web représente une véritable révolution dans notre façon d'interagir avec le contenu en ligne. Longtemps limité à des images statiques et du texte, le Web s'ouvre désormais à une nouvelle dimension qui transforme radicalement l'expérience utilisateur. Imaginez pouvoir visualiser un produit sous tous ses angles avant de l'acheter, explorer un appartement virtuel depuis votre canapé, ou même jouer à des jeux immersifs directement dans votre navigateur sans rien installer. Ces possibilités, autrefois réservées aux applications natives, sont maintenant accessibles à tous grâce aux technologies 3D Web.
Cette évolution répond à plusieurs besoins concrets :
- Une UX plus immersive et engageante qui capture l'attention et prolonge le temps passé sur un site, cette page pour le Black Friday 2024 par Shopify par exemple, cette présentation de David Whyte ou encore le site de champagne Charlotte-Taillet.
- La visualisation et configuration de produits en temps réel, un atout majeur pour l'e-commerce. Comme cette démo réalisée en quelques heures par moi-même ou encore ce configurateur, plus poussé, créé récemment par Lacoste
- La création de mondes virtuels interactifs pour le divertissement, la formation ou des présentations innovantes. L'exemple le plus parlant est l’impressionnant jeu Coastal World ou le Choo-Choo World.
Mais comment cette magie opère-t-elle dans nos navigateurs ? La réponse tient en un mot : WebGL.
WebGL : le moteur qui a rendu la 3D possible sur le Web
WebGL (Web Graphics Library) est une API JavaScript qui a révolutionné le Web en permettant de créer des graphismes 3D directement dans le navigateur. Mais qu'est-ce que cela signifie concrètement ?
En termes simples, WebGL est un pont entre votre navigateur et la carte graphique (GPU) de votre appareil. Cette connexion est cruciale, car elle permet d'exploiter la puissance de calcul du GPU pour afficher des graphismes complexes sans ralentir votre navigation.
Voici comment fonctionne WebGL, expliqué simplement :
- Il dessine des triangles, BEAUCOUP de triangles : Tous les objets 3D que vous voyez sont en réalité composés de milliers de petits triangles assemblés. WebGL excelle dans le rendu rapide de ces triangles.
- Il utilise la puissance de votre GPU : Contrairement au JavaScript classique qui s'exécute sur le processeur principal (CPU), WebGL délègue les calculs graphiques intensifs à votre carte graphique.
- Il travaille avec des "shaders" : Ce sont de petits programmes qui déterminent comment chaque pixel doit être affiché à l'écran, gérant l'éclairage, les ombres et les textures.
Avant WebGL, créer des expériences 3D dans un navigateur nécessitait des plugins comme Flash ou Java, souvent lourds et sources de problèmes de sécurité. WebGL a changé la donne en intégrant nativement ces capacités dans les navigateurs modernes. Mais il y a un hic : WebGL reste complexe à utiliser directement. Écrire du code WebGL pur pour afficher un simple cube peut nécessiter des centaines de lignes de code et une bonne compréhension des mathématiques 3D. C'est pourquoi des bibliothèques comme Three.js ont vu le jour, pour simplifier considérablement ce processus.
Three.js : le pilier de la 3D sur le Web
Si WebGL est le moteur qui permet à la 3D de fonctionner dans le navigateur, Three.js est le volant qui vous permet de le conduire sans avoir à comprendre toute la mécanique sous le capot. Cette bibliothèque JavaScript s'est imposée comme la référence incontournable pour quiconque souhaite créer des expériences 3D sur le Web.
Three.js est une bibliothèque open source qui agit comme une couche d'abstraction au-dessus de WebGL.
// Exemple simplifié de création d'un cube avec Three.js
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = 5;
function animate() {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();Avec ce code relativement simple, vous obtenez déjà un cube vert qui tourne dans votre navigateur. En WebGL brut, la quantité de code aurait été bien plus grande !
Créée par Mr.doob, Three.js bénéficie aujourd'hui d'une communauté mondiale de développeurs qui contribuent à son amélioration. Cette communauté produit constamment des tutoriels et même des formations comme l'excellente Three.js Journey.
Grâce à cette communauté, Three.js évolue au rythme d'environ une mise à jour par mois, intégrant constamment de nouvelles fonctionnalités, des optimisations de performances et des corrections de bugs.
Dernier atout majeur, mais le plus important de tous : la documentation de Three.js. Elle combine références techniques, exemples interactifs et tutoriels pas à pas, ce qui en fait une mine d'or d'informations.
Si vous souhaitez explorer Three.js, n'hésitez pas à explorer le site officiel threejs.org, il regorge de sites réalisés avec cette librairie et d'exemples avec leur code source.
Three.js a démocratisé la 3D sur le Web en la rendant accessible aux développeurs JavaScript sans expertise préalable en graphisme 3D. Mais l'écosystème continue d'évoluer, et de nouvelles approches émergent pour intégrer la 3D dans les frameworks modernes. C'est là qu'intervient React Three Fiber.
React Three Fiber : La 3D pour les développeurs React
React Three Fiber est une adaptation élégante qui marie la puissance de Three.js avec la philosophie déclarative et la gestion d'état efficace de React.
Il est bien plus rapide de créer des projets 3D à l'aide de cette librairie, j'ai d'ailleurs réalisé une série d'articles pour introduire la création de jeu avec celle-ci, vous pouvez retrouver le premier à cette adresse.
React Three Fiber (ou R3F) est une bibliothèque JavaScript qui sert de wrapper React pour Three.js, facilitant la création de graphiques 3D dans les applications React. Elle permet d'utiliser la syntaxe déclarative de React pour construire et manipuler des scènes 3D complexes, au lieu d'utiliser l'API impérative traditionnelle de Three.js.
Cette bibliothèque créée par le collectif de développeurs “Poimandres” est complètement open source.
// Exemple de cube tournant avec React Three Fiber
const RotatingCube = () => {
const meshRef = useRef();
useFrame(() => {
meshRef.current.rotation.x += 0.01;
meshRef.current.rotation.y += 0.01;
});
return (
<mesh ref={meshRef}>
<boxGeometry />
<meshStandardMaterial color="hotpink" />
</mesh>
);
}
const Scene = () => {
return (
<Canvas>
<ambientLight intensity={0.5} />
<pointLight position={[10, 10, 10]} />
<RotatingCube />
</Canvas>
);
}
- Intégration fluide avec l'écosystème React : R3F s'intègre parfaitement dans l'écosystème React. Vous pouvez utiliser tous les hooks React que vous connaissez (useState, useEffect, useContext, etc.) pour gérer l'état de votre scène 3D. Cette intégration permet de créer des interfaces mixtes 2D/3D de manière cohérente.
- Approche déclarative et composants réutilisables : L'un des plus grands atouts de R3F est sa nature déclarative. Au lieu de manipuler impérativement des objets Three.js, vous décrivez ce que vous voulez voir apparaître. Cette approche rend le code plus prévisible et plus facile à maintenir.
De plus, vous pouvez encapsuler des éléments 3D complexes dans des composants réutilisables, exactement comme vous le feriez avec des composants React classiques.
Pour mieux comprendre l'impact de R3F, comparons la création d'une scène simple dans les deux approches :
Three.js "vanilla" :
// Configuration initiale
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// Création de l'éclairage
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(ambientLight);
const pointLight = new THREE.PointLight(0xffffff, 1);
pointLight.position.set(10, 10, 10);
scene.add(pointLight);
// Création du cube
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshStandardMaterial({ color: 0xff69b4 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
// Positionnement de la caméra
camera.position.z = 5;
// Boucle d'animation
function animate() {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();
// Gestion du redimensionnement
window.addEventListener('resize', () => {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
});
React Three Fiber :
function App() {
const meshRef = useRef();
useFrame(() => {
meshRef.current.rotation.x += 0.01;
meshRef.current.rotation.y += 0.01;
});
return (
<Canvas>
<ambientLight intensity={0.5} />
<pointLight position={[10, 10, 10]} />
<mesh ref={meshRef}>
<boxGeometry />
<meshStandardMaterial color="hotpink" />
</mesh>
</Canvas>
);
}
La différence est frappante : R3F élimine une grande partie du code de configuration et vous permet de vous concentrer sur ce qui compte vraiment - la structure et le comportement de votre scène 3D.
R3F ne vient pas seul. Il s'accompagne d'un écosystème riche créé par le même collectif qui étend encore ses capacités :
- Drei : Une collection de helpers et de composants utilitaires qui simplifient les tâches courantes
- Zustand : Un gestionnaire d'état minimaliste qui s'intègre parfaitement avec R3F
- React Spring : Pour des animations fluides basées sur la physique
- react-three-rapier : Pour intégrer facilement des simulations physiques avec la bibliothèque Rapier
La 3D dans les autres frameworks
React n'est pas le seul framework à bénéficier d'intégrations 3D modernes. D'autres frameworks populaires ont également leurs propres solutions pour travailler avec Three.js de manière plus intuitive.
Threlte apporte à Svelte ce que React Three Fiber apporte à React : une façon élégante et déclarative de créer des expériences 3D. Avec la réactivité native de Svelte et sa syntaxe concise, Threlte offre une expérience de développement particulièrement fluide. Voici un exemple donné par la documentation :
<script>
import { Canvas, T, useTask } from '@threlte/core'
import { interactivity } from '@threlte/extras'
import { Spring } from 'svelte/motion'
interactivity()
const scale = new Spring(1)
let rotation = 0
useTask((delta) => {
rotation += delta
})
</script>
<Canvas>
<T.PerspectiveCamera
makeDefault
position={[10, 10, 10]}
oncreate={(ref) => {
ref.lookAt(0, 1, 0)
}}
/>
<T.DirectionalLight
position={[0, 10, 10]}
castShadow
/>
<T.Mesh
rotation.y={rotation}
position.y={1}
scale={scale.current}
onpointerenter={() => {
scale.target = 1.5
}}
onpointerleave={() => {
scale.target = 1
}}
castShadow
>
<T.BoxGeometry args={[1, 2, 1]} />
<T.MeshStandardMaterial color="hotpink" />
</T.Mesh>
<T.Mesh
rotation.x={-Math.PI / 2}
receiveShadow
>
<T.CircleGeometry args={[4, 40]} />
<T.MeshStandardMaterial color="white" />
</T.Mesh>
</Canvas>
Threlte tire parti de la simplicité de Svelte et de son système de réactivité pour créer une expérience de développement 3D particulièrement agréable.
TresJS est l'équivalent pour Vue.js, offrant une approche déclarative pour créer des scènes Three.js dans des applications Vue. Il s'intègre parfaitement avec le système de réactivité et de composants de Vue. Voici un exemple donné par la documentation :
<script setup lang="ts">
import { TresCanvas } from '@tresjs/core';
</script>
<template>
<TresCanvas clear-color="#82DBC5" window-size>
<TresPerspectiveCamera
:position="[3, 3, 3]"
:fov="45"
:look-at="[0, 0, 0]"
/>
<TresMesh>
<TresTorusGeometry :args="[1, 0.5, 16, 32]" />
<TresMeshBasicMaterial color="orange" />
</TresMesh>
<TresAmbientLight :intensity="1" />
</TresCanvas>
</template>
Bien que React Three Fiber bénéficie actuellement de la communauté la plus large et de l'écosystème le plus mature, les solutions pour Svelte et Vue progressent rapidement. Chaque framework apporte ses propres avantages. Le choix entre ces solutions dépendra souvent du framework que vous utilisez déjà pour votre projet.
L'avenir de la 3D sur le Web
WebGPU représente la prochaine évolution majeure après WebGL. Cette nouvelle API offre un accès plus direct et plus efficace aux capacités modernes des GPU, permettant des performances nettement supérieures tout en simplifiant certains aspects du développement. Les applications 3D pourront exploiter pleinement la puissance des cartes graphiques récentes, avec un meilleur support du calcul parallèle et des techniques de rendu avancées.
Three.js a déjà commencé à intégrer le support de WebGPU et des démos existent déjà que vous pouvez déjà tester si votre navigateur vous le permet, comme cette simulation d’océan de matsuoka-601.
Notamment avec un nouveau langage pour les shaders : TSL (Three.js Shading Language), qui transforme automatiquement du code JavaScript en code GLSL pour le WebGL (format utilisé pour les shaders habituellement) ou WGSL pour le WebGPU, et ce de façon transparente. Ceci permet d'adapter dynamiquement le rendu aux capacités matérielles de l'utilisateur : si celui-ci possède une carte graphique compatible WebGPU, il bénéficiera de performances nettement supérieures, tandis que le même code fonctionnera également sur des configurations plus modestes via WebGL.
Il est important de noter que TSL est une technologie très récente (introduite en 2023) et son support n'est pas encore complet. Certaines fonctionnalités avancées de shading ne sont pas encore disponibles, et la documentation reste en développement. Néanmoins, cette approche représente une avancée majeure pour simplifier l'écriture de shaders tout en préparant la transition vers WebGPU et sera, je pense, l'avenir du shader très prochainement.
L'API WebXR ouvre la porte à des expériences de réalité augmentée et virtuelle directement dans le navigateur. Les frameworks comme React Three Fiber intègrent déjà des composants WebXR qui simplifient considérablement la création d'expériences immersives compatibles avec différents appareils, des casques VR aux simples smartphones.
Ces dernières années, nous pouvons voir l'émergence d'outils qui rendent la création 3D accessible aux non-programmeurs. Spline, par exemple, propose une interface intuitive de design 3D qui permet d'exporter directement vers Three.js ou React Three Fiber. Les designers peuvent ainsi créer des scènes complexes sans écrire une seule ligne de code, tandis que les développeurs peuvent facilement intégrer ces créations dans leurs applications.
Conclusion
La 3D sur le Web a parcouru un chemin impressionnant, passant d'une curiosité technique à un élément fondamental de l'expérience Web moderne. Des fondations posées par WebGL aux abstractions élégantes offertes par React Three Fiber et ses équivalents, les devs disposent aujourd'hui d'un arsenal complet pour créer des expériences immersives accessibles à tous. Avec l'arrivée de WebGPU, l'évolution de WebXR et la démocratisation des outils de création, nous ne sommes qu'au début d'une nouvelle ère pour le Web. Une ère offrant des possibilités créatives sans précédent.
Que vous soyez dev expérimenté·e ou un·e novice curieux·se, il n'y a jamais eu de meilleurs moments pour explorer la 3D sur le Web. Les outils sont plus accessibles que jamais, la seule limite est désormais votre imagination. Vous souhaitez donner vie à un projet où la 3D s'inviterait ? N'hésitez pas à prendre contact avec notre équipe d'experts !
