3D Depth Gallery

Le HTML charge d'abord Three.js r128 depuis cdn.jsdelivr.net (build classique three.min.js, 600 Ko, qui expose la variable globale THREE), puis pose une scène .dg-stage (fond #0a0a0f, min-height: 100vh, contenu centré — à remplacer par votre mise en page) qui contient la zone .dg-scene (aspect-ratio: 16/10, overflow: hidden, touch-action: none, fond #0b1024, police Inter ou système) contenant un canvas.dg-canvas plein cadre, trois blocs HUD en pointer-events: none — compteur 1 / 5 (12 px, en haut à droite), légende h3 18 px + p 12 px (en bas à gauche), indication « Molette / glisser pour explorer » dans une pastille rgba(0,0,0,.45) — et un texte de repli. Le script vérifie d'abord typeof THREE : si la bibliothèque n'est pas arrivée (CDN bloqué, hors ligne, fichier chargé après l'effet), ou si WebGLRenderer échoue, la classe dg-nogl masque canvas et HUD et affiche le repli. Sinon : rendu antialias, pixelRatio plafonné à 2, setSize(W, H, false) (le canvas garde sa taille CSS), caméra perspective 45° en z = 5, et cinq PlaneGeometry(3, 3) en MeshBasicMaterial gris 0x888888, transparents, depthWrite: false, posés en (item.x, 0, −idx × GAP) : x = −0,9 / 0,8 / −0,7 / 1,0 / −0,7, z = 0 à −20. Un TextureLoader (crossOrigin: 'anonymous') remplace le gris par la photo à l'arrivée et le plan prend le ratio de l'image ; seul le premier est opaque, le fond de scène prend bg[0]. Les cinq src sont des photos Unsplash carrées de 1 200 px (images.unsplash.com, servies avec Access-Control-Allow-Origin: *) — des exemples à remplacer par vos images. Le gris 0x888888 est l'état d'attente de chaque plan : il persiste si une image n'arrive pas, et notamment si elle est hébergée sur un autre domaine que la page sans autoriser le CORS, condition que WebGL impose à toute texture.

Le défilement ne bouge pas la page : wheel sur la zone (preventDefault, deltaMode 1 multiplié par 16) et glisser (pointerdown/pointermove, 2,2 unités par pixel) alimentent scrollTarget, borné de 0 à maxScroll = (5 − (−20 + 5)) / 0,01 = 2 000. À chaque image, scrollCur comble 8 % de l'écart (SCROLL_SMOOTH, 95 % en 36 images), la caméra descend en z = 5 − scrollCur × 0,01, de 5 à −15, et l'index continu nd = (5 − camZ) / 5 va de 0 à 4 : 500 crans par photo. L'image ci reçoit l'opacité 1 − blend, la suivante blend, les autres 0, chaque opacité lissée à 14 % (FADE_SMOOTH) ; le fond three.background est l'interpolation linéaire de bg[ci] vers bg[ni]. Compteur et légende basculent à blend ≥ 0,5, l'indication disparaît dès scrollCur > 30. Mesuré par pas de 100 : légende 2 / 5 à 300, 3 / 5 à 800, 4 / 5 à 1 300, 5 / 5 à 1 800, rendu identique au-delà de 2 000 ; un glisser de 250 px (550 unités) mène à 2 / 5 ; le coin de la zone vaut exactement bg[] à chaque palier — (255, 250, 240) puis (60, 70, 120), (95, 129, 171), (40, 80, 150), (70, 95, 70). À 5 unités de la caméra, un plan de 3 unités couvre 72 % de la hauteur (hauteur visible 2 × 5 × tan 22,5° = 4,14) ; il n'en faisait que 36 % à 10 unités quand il est apparu, et grossit jusqu'à sortir du cadre pendant qu'il s'efface — c'est la plongée. Son décalage x se projette en x / distance : 0,9 unité vaut 101 px de désaxement dans une zone de 744 × 465 px à 5 unités, 202 px à 2,5 unités — la photo glisse latéralement en approchant, d'un côté ou de l'autre selon le signe.

Deux couches par-dessus. Le pointeur : pointermove normalise la position en ±1 (ptrTarget), lissée à 8 % ; chaque plan est déplacé de ptr.x × 0,16 × opacité × (1 + idx × 0,05) unités en x et ptr.y × 0,08 × … en y — ±18 px et ±9 px à 5 unités dans 744 × 465. Mesuré au repos, en 744 × 465 : la photo se décale de 35 px entre pointeur à gauche et pointeur à droite (36 px calculés). La vitesse : vel suit scrollCur − prevScroll à 12 %, bornée à ±1,5 unité par image ; velNorm éclaircit les trois canaux du fond de + velNorm × 0,08 et nourrit breath (lissé à 14 %) qui incline chaque plan de ±0,045 rad (2,6°) selon le pointeur et le gonfle de 3 % — un « souffle » visible seulement pendant le mouvement. La boucle requestAnimationFrame ne s'arrête jamais : 120 images par seconde mesurées au repos, sans IntersectionObserver, sans cancelAnimationFrame ; resize et pointerup sont posés sur window et jamais retirés, aucun dispose(). Le JS tient dans une seule IIFE sans variable globale : il initialise chaque .dg-scene de la page et lit sa galerie dans data-gallery ; la police du HUD est déclarée sur .dg-scene, aucune règle ne sort de l'effet.

Requiert la variable globale THREE : le HTML vendu charge Three.js r128 (build classique three.min.js, 600 Ko) depuis cdn.jsdelivr.net avant le code de l'effet — gardez cette version, l'effet est écrit pour son API et les versions récentes ne sont plus publiées qu'en modules ES. Requiert aussi un contexte WebGL 1, les pointer events, aspect-ratio et inset en CSS ; JavaScript ES5. Piloté par wheel et pointermove, pas par animation-timeline : il fonctionne sur Firefox, contrairement à Scroll Fade Gallery (fx-0566, animation-timeline: view()) et Layered Parallax (fx-0592, animation-timeline: scroll()) que Firefox ne rend dans aucune version — le code convertit d'ailleurs le deltaMode 1 (molette en lignes, Firefox) par ×16.