Capture du site Particles

Particles

Projet interne2025site webVoir le site en ligne

Le contexte

Un nuage de particules qui suit la main plutôt que le clic : la souris reste un rail classique, la main devient un espace. Le projet part de cette question — que reste-t-il d'une interface quand on retire l'écran tactile et qu'on ne garde que le geste, capté par une simple webcam ?

Pas de client, pas de brief : une démonstration technique, pensée comme terrain d'essai pour du rendu 3D temps réel et de la reconnaissance de geste dans le navigateur, sans rien installer côté visiteur.

Ce qu'on a fait

Le nuage — plusieurs milliers de points rendus en WebGL via Three.js — répond à deux entrées simultanées. La souris oriente la caméra autour de la scène ; la main droite, repérée par MediaPipe Hands exécuté entièrement dans le navigateur, pilote la matière elle-même : poing fermé, doigts écartés, les particules explosent, se rassemblent en vague ou implosent selon le geste reconnu.

La forme du nuage change à la demande — sphère, galaxie, atome, ou un texte recomposé point par point — tout comme la palette et le fond, d'une nébuleuse profonde à un noir presque total.

React pour l'interface et l'état, Three.js (react-three-fiber) pour le rendu, MediaPipe pour le suivi de main — compilé en une application statique, sans serveur.