Three.js : la 3D dans ton navigateur, le guide pour pimper ton site gaming
T’as toujours rêvé d’intégrer des animations 3D qui en jettent sur ton site ou ton webzine gaming, mais à chaque fois que tu lis le mot « WebGL », ton cerveau menace de faire un bluescreen ? On connaît ça. Heureusement, il existe un véritable cheat code pour éviter de plonger dans les abysses du code graphique bas niveau : Three.js. C’est une bibliothèque JavaScript qui agit comme un traducteur universel entre tes idées et la carte graphique de tes visiteurs, te permettant de créer des scènes 3D interactives sans te faire des nœuds au cerveau. Allez, viens, on t’explique comment ça marche.
C’est quoi ce machin, Three.js ?
Pour faire simple, WebGL est une API surpuissante qui permet d’afficher de la 3D dans un navigateur. Le problème, c’est que l’utiliser directement, c’est un peu comme vouloir construire une maison en commençant par fondre le métal pour forger tes propres clous. C’est faisable, mais long et douloureux.
Three.js, c’est ta caisse à outils de luxe qui contient déjà les clous, le marteau, et même des murs préfabriqués. C’est une surcouche à WebGL qui simplifie tout : au lieu d’écrire des centaines de lignes de code pour afficher un simple cube, tu utilises des fonctions claires et logiques. [developer.mozilla.org](https://developer.mozilla.org/fr/docs/Glossary/Three_js) L’énorme avantage, c’est que tout s’exécute directement dans le navigateur du joueur, sans nécessiter le moindre plugin. La 3D devient aussi simple à intégrer qu’une image GIF de chat qui tombe.
La caisse à outils du démiurge 3D
Créer une scène avec Three.js, c’est comme monter un diorama ou préparer une partie de jeu de plateau. Tu as besoin de plusieurs éléments clés qui travaillent ensemble. [www.s3dengineering.net](https://www.s3dengineering.net/blog/3d-three-js/) Voici ton arsenal de départ :
- Scene : C’est ton champ de bataille, le plateau de jeu vide où tu vas placer tous tes éléments.
- Camera : Ton œil, ton point de vue. C’est elle qui décide ce que le joueur verra à l’écran. Une caméra perspective imite la vision humaine, tandis qu’une caméra orthographique est parfaite pour une vue de dessus, façon RTS.
- Renderer : Le grand artificier. Il prend tout ce que tu as mis dans ta scène, regarde à travers ta caméra, et dessine le résultat final à l’écran. C’est le moteur qui transforme ton code en une image.
- Meshes : Ce sont tes figurines, tes unités, tes bâtiments. Un « mesh » est l’association d’une géométrie (la forme, comme un cube ou une sphère) et d’un matériau (son apparence, sa couleur, sa texture).
- Lights : Sans lumière, même la plus belle des scènes reste un grand trou noir. Les lumières définissent l’ambiance, créent des ombres et donnent vie à tes objets.
- Materials : C’est le camouflage ou l’armure de tes objets. Est-ce qu’il est en métal brillant ? En plastique mat ? Recouvert d’une texture de pierre ? C’est le matériau qui s’en charge.
Pour y voir plus clair, voici un petit résumé :
| Composant | Rôle | Analogie Gaming |
|---|---|---|
| Scene | Conteneur global pour les objets 3D | La carte du jeu |
| Camera | Définit le point de vue du joueur | La vue FPS/TPS ou la caméra stratégique |
| Renderer | Affiche le résultat à l’écran | Le moteur graphique |
| Meshes | Les objets visibles dans la scène | Les personnages, décors et props |
| Lights | Éclaire la scène et crée des ombres | Le soleil, les torches, les effets de sort |
| Materials | Définit l’apparence des objets | Les shaders, les textures, le skin de l’arme |
Atelier pratique : Ton premier cube qui tourne (et qui obéit)
Assez parlé, passons à l’action. On va monter une scène basique avec un cube vert qui tourne sur lui-même. Tu vas voir, c’est pas sorcier.
1. Préparer le terrain
Crée un fichier HTML tout bête et inclus la bibliothèque Three.js. Ensuite, on initialise nos trois piliers : la scène, la caméra et le renderer.
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);// On recule un peu la caméra pour voir l'objetcamera.position.z = 5;2. Invoquer un cube
On définit une forme (BoxGeometry) et une apparence (MeshBasicMaterial, qui n’est pas affecté par les lumières), on combine les deux dans un Mesh, et on l’ajoute à la scène.
const geometry = new THREE.BoxGeometry(1, 1, 1);const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); // Un beau vert pétantconst cube = new THREE.Mesh(geometry, material);scene.add(cube);3. Donner vie au cube
Un cube statique, c’est triste. On va créer une boucle de rendu avec requestAnimationFrame pour l’animer à chaque frame.
function animate() { requestAnimationFrame(animate); // On fait tourner le cube cube.rotation.x += 0.01; cube.rotation.y += 0.01; // On fait le rendu de la scène renderer.render(scene, camera);}animate(); // On lance la boucleEt voilà ! Tu as un cube 3D qui tourne dans ton navigateur. Tu peux retrouver ce genre d’exemple simple sur des sites comme CodePen pour expérimenter. [1min30.com](https://1min30.com/developpement-web/apprenez-a-faire-de-la-3d-avec-three-js-1287460335)
Optimisation : Fais pas ramer la machine !
Afficher un cube, c’est facile. Afficher une armée d’orques dans une forteresse assiégée, c’est une autre histoire. Pour que ton expérience reste fluide (on vise 60 FPS, le standard du confort), il faut optimiser.
- Nombre de polygones : Chaque forme 3D est composée de polygones (des triangles). Plus il y en a, plus le GPU souffre. Pense à un jeu de stratégie : tu préfères 10 unités ultra-détaillées qui rament, ou 100 unités plus simples pour des batailles épiques ? Garde tes modèles aussi simples que possible.
- Taille des textures : Des textures en 8K, c’est cool pour un screenshot, mais ça pèse une tonne et allonge les temps de chargement. Compresse tes images et utilise des résolutions raisonnables.
- Le « Level of Detail » (LOD) : Une technique maline qui consiste à utiliser une version simplifiée d’un objet quand il est loin de la caméra. Pas besoin de voir les 3000 polygones du visage d’un garde s’il est à 2 km.
Plus loin que le cube : des idées pour frimer
Maintenant que tu as les bases, les portes de la création te sont grandes ouvertes. Three.js est utilisé pour des trucs vraiment cools :
- Des configurateurs de personnages ou d’équipement : Laisse tes joueurs customiser leur skin d’arme en 3D et en temps réel.
- Des cartes du monde interactives : Fais une carte de ton univers de jeu où l’on peut zoomer et cliquer sur les lieux.
- Des mini-jeux dans le navigateur : Des jeux de course comme HexGL montrent que l’on peut créer des expériences rapides et fluides, dignes d’un Wipeout, directement sur une page web.
Pour aller plus loin, tu peux te pencher sur les shaders pour créer des effets visuels uniques (eau qui ondule, effets de force, etc.), ou utiliser des outils comme Blender pour modéliser tes propres objets 3D et les importer. [developer.mozilla.org](https://developer.mozilla.org/fr/docs/Games/Techniques/3D_on_the_web) Des bibliothèques comme React Three Fiber simplifient même l’intégration dans des sites construits avec React.
Bien sûr, la courbe d’apprentissage est réelle. Maîtriser les lumières, les ombres, les animations complexes et les interactions demande du temps. Mais l’avantage de Three.js est que tu peux commencer petit, avec un simple cube, et ajouter de la complexité brique par brique.
Alors, prêt à te lancer ? Tu as maintenant toutes les cartes en main pour commencer à expérimenter et transformer ton site en une expérience interactive qui laissera tes visiteurs bouche bée. Le seul risque, c’est de ne plus pouvoir t’arrêter.
