awwwards-3d

Sites Web 3D Style Awwwards

Vous construisez des expériences Web 3D cinématographiques et pilotées par le défilement, dans la lignée d'Active Theory, Lusion, 14islands, Bonhomme, Resn, Studio Freight, Locomotive et Igloo Inc. L'objectif esthétique est premium, lent, lissé (lerpé), brillant, atmosphérique — jamais brusque, jamais chargé, jamais par défaut.

Philosophie Fondamentale

Lisez ceci avant de toucher au code. C'est ce qui fait la différence entre une "démo Three.js" et un "Site de l'Année Awwwards".

1. L'esthétique prime sur la géométrie. Un cube à 6 polygones avec une bonne HDRI, un mappage de tons ACESFilmic et un bloom est plus beau qu'un modèle de 200 000 polygones éclairé par une seule DirectionalLight. Investissez d'abord le budget dans l'éclairage/le post-traitement, et la géométrie en dernier.
2. Lissez (lerpez) tout. Aucune valeur ne doit jamais changer instantanément. La position de la caméra, la rotation, la progression du défilement, la position de la souris, même les cibles du raycaster — tout passe par un facteur d'amortissement (0,06–0,1 est le point idéal). Le monde semble vivant parce que rien n'arrête brusquement.
3. Fichier HTML unique quand c'est possible. Le livrable par défaut est un seul fichier .html utilisant des imports ESM depuis unpkg (et esm.sh pour GSAP). Pas d'étape de construction (build) sauf si l'utilisateur le demande explicitement. C'est ce qui rend le travail portable, révisable et partageable.
4. Mobile d'abord, performance toujours. Limitez pixelRatio à Math.min(devicePixelRatio, 2). Utilisez le frustum-culling. Réduisez le post-traitement de moitié sur mobile. Testez sur un Android milieu de gamme dans Chrome DevTools avant de déclarer le travail terminé.
5. Le mappage de tons ACESFilmic est non négociable. renderer.toneMapping = THREE.ACESFilmicToneMapping et renderer.outputColorSpace = THREE.SRGBColorSpace. Sans cela, tout semble plat et "typique WebGL".
6. metalness > 0 nécessite une carte d'environnement. Un matériau métallique sans envMap est une tache noire. Chargez toujours une HDRI (ou utilisez RoomEnvironment comme solution de repli) avant d'introduire des métaux/du verre.
7. Objectif de 60 FPS sur desktop, minimum de 30 FPS sur mobile. Si vous ne pouvez pas l'atteindre, réduisez les passes de post-traitement avant la géométrie — l'œil remarque le bruit plus que les triangles.

Pile Technologique Verrouillée

Ces versions sont testées ensemble. Ne les mettez pas à niveau sans demander.

three                       0.170.0
gsap                        3.12.5  (avec ScrollTrigger)
lenis                       1.1.0   (PAS @studio-freight/lenis — cette portée a été retirée)

Le post-traitement utilise l'EffectComposer intégré de three depuis three/addons/postprocessing/. La bibliothèque standalone postprocessing (v6.36.0) a été évaluée et abandonnée pour cette compétence — ses internes appellent Material.onBeforeRender(), que three r170 a supprimé, produisant un avertissement dans la console par matériau et par image. Les passes intégrées de three (UnrealBloomPass, OutputPass, ShaderPass, LUTPass, etc.) couvrent tous les effets dont nous avons besoin, sans dérive de version.

Le verre utilise le MeshPhysicalMaterial intégré de three avec transmission: 1.0 + dispersion: 1.2 (fonctionnalité r166+ — réfraction chromatique sans bibliothèques externes). Le MeshTransmissionMaterial de drei-vanilla n'est PAS dans le noyau/les addons de three ; utilisez-le uniquement lorsque vous avez besoin d'une distorsion temporelle ou d'un échantillonnage par objet du backbuffer (ajoutez alors drei-vanilla et [email protected] à votre importmap). Voir PATTERNS.md #5 pour les deux chemins.

Les imports CDN utilisent ce modèle d'importmap (voir assets/templates/minimal.html pour l'exemple canonique) :

<script type="importmap">
{
  "imports": {
    "three": "https://unpkg.com/[email protected]/build/three.module.js",
    "three/addons/": "https://unpkg.com/[email protected]/examples/jsm/",
    "gsap": "https://esm.sh/[email protected]",
    "gsap/ScrollTrigger": "https://esm.sh/[email protected]/ScrollTrigger",
    "lenis": "https://unpkg.com/[email protected]/dist/lenis.mjs"
  }
}
</script>

Choix du compositeur — réglé : Cette compétence utilise l'EffectComposer intégré de three depuis three/addons/postprocessing/. La bibliothèque npm standalone postprocessing a été testée et rejetée : [email protected] signale Material.onBeforeRender() supprimé dans r170, inondant la console une fois par matériau et par image. Les passes intégrées de three couvrent tous les effets dont cette compétence a besoin (bloom, vignette via ShaderPass, grain via ShaderPass, LUT via LUTPass, mappage de tons de sortie via OutputPass). Voir references/POST_PROCESSING.md pour la chaîne de passes canonique.

Fiabilité CDN : Utilisez par défaut unpkg.com pour three et lenis — il reflète exactement la structure du répertoire npm, donc three/addons/... se résout proprement. cdn.jsdelivr.net a été testé et a échoué par intermittence pour servir les fichiers [email protected]/examples/jsm/postprocessing/* (ERR_CONNECTION_CLOSED) depuis certains réseaux. Utilisez esm.sh pour GSAP car c'est la passerelle ESM la plus propre pour le bundle UMD de GSAP. Si unpkg est inaccessible, ordre de repli : unpkg → esm.sh → cdn.skypack.dev. Pour la production, hébergez les fichiers localement (téléchargez-les dans /vendor/) — une dépendance stricte au CDN n'est acceptable que pour les prototypes.

Politique de mise à jour : Les versions sont verrouillées car elles ont été testées ensemble. Pour mettre à niveau : (1) changez d'abord dans assets/templates/minimal.html, (2) exécutez les quatre modèles dans un navigateur, (3) corrigez toute rupture, (4) mettez à jour SKILL.md et PATTERNS.md. Ne modifiez pas les versions en silence dans un seul modèle — la dérive entre les modèles est la source numéro 1 des problèmes "ça marche sur ma machine".

Le Workflow en 5 Étapes

Suivez cet ordre. Sauter une étape produit une "démo technique" au lieu d'un "site premium".

Étape 1 — Identifiez l'Archétype d'Expérience

Chaque site 3D Awwwards correspond à l'un de ces archétypes. Choisissez-en un et tenez-vous-y :

Archétype	Motif	Référence
Vitrine d'objet	Un seul objet principal, la caméra orbite/zoome au défilement	Pages produits Bonhomme, Apple AirPods Pro
Visite de pièce	Chemin de caméra à travers un intérieur 3D	Igloo Inc., portfolio de Bruno Simon
Tunnel	La caméra vole vers l'avant à travers une géométrie infinie	Expériences Active Theory
Descente verticale	Le défilement = chute/montée à travers des couches	Études de cas 14islands
Survol	La caméra traverse un paysage	Études de cas Lusion
Champ de particules	Des milliers de points réagissant au défilement/à la souris	Expériences Resn

Demandez à l'utilisateur quel archétype s'il ne l'a pas précisé. N'en inventez pas un nouveau — ceux-ci sont éprouvés.

Étape 2 — Planifiez les Assets

Choisissez la source la moins coûteuse qui satisfait aux exigences :

1. Primitives Three.js (SphereGeometry, BoxGeometry, TorusKnotGeometry) — pour les travaux abstraits/de vitrine. La plupart des sites Awwwards les utilisent. Ne les négligez pas.
2. Blender via MCP — lorsque vous avez besoin d'une forme personnalisée. Voir references/BLENDER_PIPELINE.md pour les recettes (pièce de monnaie, orbe de verre, blob, pièce low-poly) et la configuration d'exportation GLB (Draco + KTX2).
3. Polyhaven — HDRIs et textures, gratuits, licence CC0. L'HDRI est plus importante que le modèle.
4. Sketchfab — dernier recours pour les modèles prêts à l'emploi. Vérifiez toujours le nombre de polygones.

Étape 3 — Choisissez un Modèle

Partez de assets/templates/ :

• minimal.html — scène vide avec HDRI, mappage de tons, Lenis, post-traitement câblé. Utilisez-le comme base pour tout ce qui est personnalisé.
• coin-scroll.html — une pièce tourne et tombe au défilement (vitrine d'objet).
• room-walkthrough.html — la caméra se déplace le long d'une spline à travers une pièce (visite de pièce).
• glass-product.html — un seul produit avec MeshPhysicalMaterial transmission + dispersion (r166+), HDRI, bloom doux (vitrine d'objet, verre).

Les modèles sont des points de départ, pas des travaux finaux. Supprimez ce dont vous n'avez pas besoin, ajoutez ce dont vous avez besoin.

Étape 4 — Ajoutez les Couches de Finition (dans cet ordre)

L'ordre est important. Chaque couche suppose que la précédente est en place.

1. HDRI chargée et appliquée comme scene.environment
2. Mappage de tons — ACESFilmicToneMapping, exposition 1,0–1,2
3. Éclairage — même avec HDRI, ajoutez une DirectionalLight pour la direction des ombres
4. Post-traitement — EffectComposer intégré de three avec une cible HDR → RenderPass → UnrealBloomPass (intensité ~0,45, rayon 0,4, seuil 0,82) → vignette ShaderPass → OutputPass (applique renderer.toneMapping = ACESFilmic) → grain ShaderPass en dernier
5. Lenis défilement fluide câblé à ScrollTrigger.update de GSAP
6. Curseur personnalisé (optionnel, mais une signature de Bonhomme/Lusion)
7. Timeline de défilement — timeline GSAP pilotée par ScrollTrigger, lissant les propriétés de la caméra/de l'objet
8. Grain de film comme couche composite finale — ShaderPass personnalisé avec un fragment de bruit temporel, intensité ~0,05 (voir references/POST_PROCESSING.md § "Passe 5 — Grain de film")

Étape 5 — Audit de Performance

Avant de déclarer le travail terminé :

• Lighthouse Performance ≥ 85 sur desktop, ≥ 70 sur mobile
• FCP < 1,8s, LCP < 2,5s
• 60 FPS sur desktop, 30 FPS minimum sur Android milieu de gamme
• pixelRatio plafonné à 2
• Fichiers GLB compressés avec Draco, textures en KTX2 si possible
• Aucun console.log dans les boucles requestAnimationFrame (tue les performances dans DevTools)
• Toutes les animations pilotées par le temps delta, pas par le nombre d'images

Règles Strictes — Ne Faites Jamais Ceci

Ces erreurs produisent un travail défectueux. Voir references/ANTI_PATTERNS.md pour la version longue.

1. Pas d'animations brusques (snap). Chaque changement de propriété passe par le lissage (lerp) ou un ease de GSAP.
2. Pas de metalness > 0 sans carte d'environnement. Résultat : des taches noires.
3. Pas de pixelRatio non plafonné. Un écran 4K avec devicePixelRatio = 2 chutera à 15 FPS.
4. Pas de GLB non compressé. La compression Draco est obligatoire (voir BLENDER_PIPELINE.md).
5. Pas d'audio en lecture automatique. Les navigateurs le bloquent ; les utilisateurs le détestent.
6. Pas de console.log dans la boucle d'animation. Même un par image détruit DevTools.
7. Pas de mélange de défilement piloté par CSS et par JS. Lenis possède le défilement. ScrollTrigger lit depuis Lenis. scroll-behavior: smooth CSS doit être supprimé.
8. Pas d'OrbitControls en production. C'est pour le prototypage. Les vrais sites utilisent des caméras pilotées par le défilement.
9. Pas de ShaderMaterial sans déclaration de précision. Les GPU mobiles ont besoin de precision mediump float;.
10. Pas de raycasting contre toute la scène à chaque image. Filtrez sur un petit tableau de maillages interactifs.
11. Pas d'animation basée sur le nombre d'images. Tout mouvement doit être piloté par delta de clock.getDelta() et multiplié par celui-ci. Un moniteur 144 Hz et un moniteur 30 Hz doivent produire un mouvement visuellement identique. Pour le lissage (lerp), utilisez une formule indépendante du taux d'images : factor = 1 - Math.pow(1 - ease, delta * 60) au lieu d'un ease brut.

Fichiers de Référence

Chargez-les à la demande — ne lisez pas tout au début.

• references/ARCHITECTURE.md — structure de la scène, boucle de lissage/défilement, ordre de rendu
• references/PATTERNS.md — 33 extraits de code copier-coller pour les besoins courants
• references/PROCEDURAL_GEOMETRY.md — génération de géométrie par code uniquement ; primitives, formes mathématiques, déplacement de sommets, motifs hybrides Blender. Le chemin par défaut avant de recourir aux générateurs 3D IA.
• references/BLENDER_PIPELINE.md — Recettes Blender MCP + configuration d'exportation GLB
• references/SHADERS.md — Blocs de construction GLSL (bruit, fresnel, dispersion, matériaux personnalisés)
• references/POST_PROCESSING.md — Recettes pour le bloom, la profondeur de champ, le grain, l'aberration chromatique
• references/TRANSITIONS.md — Transitions de page Barba.js, API View Transitions
• references/ANTI_PATTERNS.md — Liste longue de ce qui tue l'esthétique et pourquoi

Archives d'Inspiration

Quand l'utilisateur est indécis sur la direction, dirigez-le ici. Ouvrez ces liens dans un navigateur, ne faites pas de capture d'écran ou de scraping.

• Active Theory — https://activetheory.net — maîtres du style WebGL, distorsions GLSL, bloom et dispersion artisanaux
• Lusion — https://lusion.co — vitrines de produits surréalistes, matériaux transmissifs, étalonnage des couleurs parfait
• 14islands — https://14islands.com — 3D ludiques, transitions de page signature, typographie élégante sur les scènes
• Bonhomme — https://bonhomme.lol — typographie audacieuse rencontre la 3D, curseurs distinctifs, dirigé par la direction artistique
• Resn — https://resn.co.nz — travail atmosphérique avec particules, palettes oniriques, mouvements de caméra lents
• Studio Freight — https://studiofreight.com — auteurs de Lenis ; minimalisme + douceur parfaitement réglée
• Locomotive — https://locomotive.ca — auteurs originaux de Locomotive Scroll ; maîtrise de la chorégraphie de défilement
• Igloo Inc. — https://igloo.inc — survols de paysages, rythme narratif, éclairage digne de Pixar
• Awwwards Sites of the Day — https://www.awwwards.com/websites/sites_of_the_day/ — archive quotidienne organisée pour les tendances actuelles

Audio (Optionnel mais Signature)

~70 % des gagnants 3D des Awwwards incluent un son subtil : drones ambiants, clics de survol, bruits de défilement. Bien fait, le son fait la différence entre "site" et "expérience". Mal fait, c'est la raison pour laquelle les utilisateurs ferment l'onglet dans les 2 premières secondes.

Règles :

• Utilisez Howler.js (https://esm.sh/[email protected]) ou l'API Web Audio. Pas de balise <audio> pour l'ambiance.
• Toujours conditionner la lecture derrière un geste de l'utilisateur (clic de bouton, défilement visible après le premier viewport). Les navigateurs bloquent la lecture automatique de toute façon, mais la règle UX est plus stricte : ne démarrez jamais un son que l'utilisateur n'a pas demandé.
• Fournissez une bascule de mise en sourdine persistante dans le coin de l'UI. Par défaut : DÉSACTIVÉ sur mobile, DÉSACTIVÉ lors de la première visite (utilisez localStorage pour mémoriser le choix de l'utilisateur lors des retours).
• Bouclez l'ambiance à -18 dB à -24 dB. Les sons UI ...

[...tronqué pour la traduction…]