Wavy cubes — grille 3D réactive à la souris
Three.js / InstancedMesh
Chargement de la démo…
Survolez la grille : les cubes se soulèvent sous le curseur.
Un fond vivant qui réagit au visiteur : effet « waouh » immédiat sur une page d’accueil.
- Intensité
- Performance
- Lourd
- Mobile
- Grille allégée automatiquement ; l’ondulation tourne seule, sans survol.
- Accessibilité
- Une seule image fixe, aucune animation.
- Idéal pour
- Studio créatifTech / SaaSÉvénementielLancement produit
Featured :
- 1.Toute la grille en un seul draw call :
new THREE.InstancedMesh(geometry, material, COLS * ROWS) - 2.Souris projetée sur le plan de la grille avec
raycaster.ray.intersectPlane(plane, hit), puis lissée pargsap.quickTo(mouse, 'x', { duration: 0.8 }) - 3.Hauteur de chaque cube = vague + soulèvement près du curseur :
Math.max(0, 1 - d / 5) ** 2 * 4 * mouse.strength - 4.Rendu cadencé par
gsap.ticker;renderer.dispose()au démontage pour libérer le GPU - 5.Pour aller plus loin (version originale) : déplacement dans le vertex shader via
uniform vec2 uMouseetRGBShiftShaderen post-processing