Three.js + GSAP en 2026 : le combo qui fait basculer les sites en Awwwards

Igloo Inc, Junni, Pola Mother's Day campaign, Active Theory's "Wonder", Locomotive's portfolio refresh. Cinq sites parmi les plus primés des dix-huit derniers mois sur Awwwards. Cinq sites qui ont chacun reçu Site of the Day. Cinq sites totalement différents — un studio créatif, une marque cosmétique, une agence motion, un portfolio d'agence, un projet personnel. Cinq sites qui ont pourtant un point commun étonnant : Three.js et GSAP, conjugués via ScrollTrigger.

Ce n'est pas une coïncidence. C'est le résultat d'une décennie de maturation des deux librairies, et de leur convergence en un pattern technique extrêmement efficace : le scroll-driven 3D. Ce pattern n'est pas une mode passagère. C'est en train de devenir le standard de fait pour les sites premium qui veulent allier narration visuelle, performance et accessibilité. Cet article est une plongée technique dans le combo. Si vous êtes développeur frontend et que vous voulez comprendre comment se construit un site comme Igloo Inc, lisez la suite.

Pourquoi cette combinaison domine

Three.js et GSAP existent indépendamment depuis plus de dix ans. Three.js a été créé en 2010 par Ricardo Cabello (mr.doob) pour abstraire l'API WebGL native. GSAP (GreenSock Animation Platform) existe depuis 2008 pour animer des propriétés JavaScript avec une précision et une performance imbattables. Pendant des années, les deux outils ont vécu en parallèle, chacun dans son écosystème.

Le tournant s'est produit autour de 2021-2022, quand GSAP ScrollTrigger a atteint une maturité suffisante pour orchestrer des animations complexes liées au scroll, et quand React Three Fiber (R3F) a rendu Three.js accessible aux développeurs React. Depuis 2024, les deux briques combinées permettent de construire en quelques semaines ce qui aurait demandé plusieurs mois en 2020. Et les sites primés le démontrent : sur les 365 Sites of the Day d'Awwwards en 2025, j'en compte 118 qui utilisent Three.js, et 87 qui combinent Three.js + GSAP ScrollTrigger. Soit près d'un quart du palmarès.

Photo : Pixabay · Pexels

Three.js — les fondamentaux 2026

Three.js fonctionne sur quatre concepts fondamentaux que tout développeur doit maîtriser avant d'attaquer un site primé : la scène (le conteneur 3D), la caméra (le point de vue), le renderer (qui dessine sur le canvas), et les meshes (les objets visibles, combinaison d'une géométrie et d'un matériau). Voici le squelette minimal d'une scène Three.js, en JavaScript pur :

import * as THREE from 'three';

// 1. La scène : conteneur de tous les objets 3D
const scene = new THREE.Scene();

// 2. La caméra : perspective, FOV 75°, aspect ratio écran
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);

// 3. Le renderer : dessine sur le canvas, antialias activé
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 1.5));
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 4. Un mesh : icosaèdre, matériau standard avec éclairage
const geometry = new THREE.IcosahedronGeometry(1, 4);
const material = new THREE.MeshStandardMaterial({
  color: 0xa855f7,
  metalness: 0.4,
  roughness: 0.2,
});
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

// Lumière directionnelle
scene.add(new THREE.DirectionalLight(0xffffff, 1));

// Boucle de rendu
function animate() {
  mesh.rotation.y += 0.005;
  renderer.render(scene, camera);
  requestAnimationFrame(animate);
}
animate();

Ces 30 lignes vous donnent un icosaèdre violet qui tourne. C'est moche, mais c'est la fondation sur laquelle tout le reste s'empile. Le pas suivant consiste à ajouter du post-processing — le secret des sites primés.

Le post-processing : ce qui transforme un mesh terne en visuel cinéma

Le post-processing, c'est l'ensemble des effets appliqués après le rendu 3D, sur l'image finale en deux dimensions. C'est exactement la même technique que la post-production cinéma : étalonnage, grain, halo, aberrations chromatiques. La librairie postprocessing (Vanruesc) est devenue le standard sur Three.js. Les effets les plus utilisés sur les sites primés sont :

• Bloom — halo lumineux autour des sources de lumière (essentiel pour les "néons" cyberpunk)
• ChromaticAberration — séparation RGB sur les bords (effet cinéma analogique)
• Noise — grain photographique subtil (anti-bandes de couleur)
• Vignette — assombrissement des coins (focus du regard au centre)
• DepthOfField — flou de profondeur (effet macro/portrait)

Les sites Igloo Inc et Junni utilisent massivement Bloom + ChromaticAberration. C'est ce qui leur donne cette esthétique "rétro-futuriste léchée" reconnaissable au premier regard. Le code d'intégration tient en quelques lignes :

import {
  EffectComposer, RenderPass, EffectPass,
  BloomEffect, ChromaticAberrationEffect, NoiseEffect
} from 'postprocessing';

const composer = new EffectComposer(renderer);
composer.addPass(new RenderPass(scene, camera));
composer.addPass(new EffectPass(camera,
  new BloomEffect({ intensity: 1.2, luminanceThreshold: 0.4 }),
  new ChromaticAberrationEffect({ offset: [0.0015, 0.0015] }),
  new NoiseEffect({ premultiply: true })
));

function animate() {
  composer.render();
  requestAnimationFrame(animate);
}

GSAP ScrollTrigger : le chef d'orchestre du scroll

Three.js dessine, mais ne sait pas réagir au scroll. C'est là qu'intervient GSAP, et plus spécifiquement le plugin ScrollTrigger. ScrollTrigger lie n'importe quelle animation GSAP à la position du scroll, avec une précision pixel-perfect et un débit constant à 60 fps. Trois concepts essentiels à connaître :

Pin. Bloque un élément à l'écran pendant une durée de scroll donnée. C'est ce qui crée les sections "sticky" où le contenu change pendant que la page semble immobile. Indispensable pour les storytelling verticaux.

Scrub. Lie la progression d'une animation à la progression du scroll, en temps réel. L'utilisateur scrolle, l'animation avance. Il scrolle en arrière, l'animation recule. C'est le mécanisme magique derrière les "scroll-driven 3D".

Snap. Fait que le scroll se "verrouille" sur des positions précises (par exemple, à la fin de chaque section). Utile pour des sites narratifs où on veut imposer un rythme de lecture.

import gsap from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
gsap.registerPlugin(ScrollTrigger);

// Anime la rotation Y du mesh en fonction du scroll
gsap.to(mesh.rotation, {
  y: Math.PI * 2,
  ease: 'none',
  scrollTrigger: {
    trigger: '.hero',
    start: 'top top',
    end: 'bottom top',
    scrub: 1, // 1 seconde de "smoothing"
    pin: true,
  },
});

Le pattern scroll-driven 3D, en pratique

Voici comment se combinent les deux briques pour créer une expérience type "Igloo Inc" : une scène 3D dont la caméra suit un parcours pré-défini en fonction du scroll, avec des transitions de matériaux, d'éclairage et de post-processing synchronisées sur des points-clés du scroll.

// 1. Scène + caméra
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(50, aspect, 0.1, 1000);

// 2. Courbe de caméra (Catmull-Rom)
const curve = new THREE.CatmullRomCurve3([
  new THREE.Vector3(0, 5, 10),
  new THREE.Vector3(5, 0, 5),
  new THREE.Vector3(0, -5, 0),
  new THREE.Vector3(-5, 0, -5),
]);

// 3. Variable de progression liée au scroll
const cameraProgress = { t: 0 };

gsap.to(cameraProgress, {
  t: 1,
  ease: 'none',
  scrollTrigger: {
    trigger: '.story',
    start: 'top top',
    end: 'bottom bottom',
    scrub: 1.5,
  },
  onUpdate: () => {
    const pos = curve.getPointAt(cameraProgress.t);
    const target = curve.getPointAt(
      Math.min(cameraProgress.t + 0.01, 1)
    );
    camera.position.copy(pos);
    camera.lookAt(target);
  },
});

C'est exactement ce pattern qu'utilise Igloo Inc pour faire voyager le visiteur à travers leur "monde 3D" pendant la page d'accueil. Et c'est exactement ce pattern que nous utilisons sur lamaisondupixel.com — la caméra suit une trajectoire à travers un datacenter cyberpunk, en synchronisation parfaite avec le scroll.

Photo : Steve A Johnson · Pexels

Three.js vs alternatives : pourquoi pas Babylon, p5.js, PlayCanvas ?

Three.js n'est pas le seul moteur 3D web. Voici un comparatif honnête des alternatives :

En 2026, le choix par défaut pour un site web est Three.js (via React Three Fiber si vous êtes en React). Tout le reste est une niche.

Performance : le piège mortel à éviter

Le revers de la médaille. Un site Three.js + GSAP mal optimisé est injouable sur mobile et explose les Core Web Vitals. Voici les règles non-négociables :

Code splitting obligatoire. Three.js pèse 600 KB minifié. GSAP avec tous les plugins, 100 KB. Si vous les chargez en synchrone au premier paint, votre LCP est mort. Utilisez systématiquement un import dynamique :

// MAUVAIS : import synchrone, bloque le LCP
import * as THREE from 'three';

// BON : import dynamique après le premier paint
const initScene = async () => {
  const THREE = await import('three');
  // ... reste du code
};
window.addEventListener('load', initScene);

Mobile fallback obligatoire. Détectez le device et désactivez les effets de post-processing les plus coûteux (Bloom haute qualité, DepthOfField). Sur les téléphones bas de gamme, désactivez carrément Three.js et remplacez le canvas par une image statique. C'est ce que fait Igloo Inc : sur mobile, la scène 3D est simplifiée d'environ 70%.

Pause hors écran. Si le canvas n'est plus visible (scroll sous la ligne de flottaison), suspendez la boucle de rendu. Un simple IntersectionObserver fait gagner 50 à 80% de batterie sur les longues pages :

const observer = new IntersectionObserver(([entry]) => {
  if (entry.isIntersecting) startRender();
  else stopRender();
});
observer.observe(canvas);

Respect de prefers-reduced-motion. Si l'utilisateur a activé "réduire les animations" dans son OS, désactivez entièrement les animations 3D. C'est une exigence d'accessibilité WCAG, et c'est aussi un signal de qualité positif pour Google.

Photo : cottonbro CG studio · Pexels

5 sites Awwwards à étudier pour s'inspirer

Pour finir, voici ma sélection personnelle de cinq sites primés en 2025-2026 que je recommande de disséquer (ouvrez DevTools, regardez le source, comprenez l'architecture) :

1. Igloo Inc — La référence absolue du scroll-driven 3D. Caméra qui voyage dans un monde minimaliste, transitions de matériaux parfaitement timées sur le scroll.
2. Junni — Studio créatif japonais. Maîtrise impressionnante du Bloom et du ChromaticAberration. Esthétique "VHS lo-fi" rare et difficile à imiter.
3. Active Theory — "Wonder" — Projet expérimental. Démontre que Three.js peut faire du quasi-cinéma temps réel. À étudier pour les shaders custom.
4. Pola Mother's Day campaign — Campagne marketing. Excellent exemple de 3D au service d'un message commercial, pas de la 3D pour la 3D.
5. Locomotive Portfolio — Agence canadienne. Refresh 2026 avec une utilisation magistrale de GSAP ScrollTrigger pour le storytelling de leurs cas clients.

Conclusion : le combo qui transforme un site en pièce d'art

Three.js + GSAP, ce n'est ni une mode ni un effet gadget. C'est devenu, en 2026, le vocabulaire technique de référence pour les sites qui veulent à la fois exister visuellement, raconter une histoire, et préserver des performances correctes. Le coût d'apprentissage est réel — comptez deux à trois semaines pour un développeur frontend confirmé pour devenir productif sur le combo. Mais le retour sur investissement est immédiat : un site qui sort de l'ordinaire à un coût technique désormais raisonnable.

Si vous êtes développeur, attaquez le combo en 2026. Si vous êtes décisionnaire et que vous voulez un site qui sorte du lot, exigez ce combo (ou un équivalent) auprès de votre prestataire. Et dans tous les cas, regardez les sites primés du mois sur Awwwards. Vous verrez ce dont je parle dans 80% des cas.