Chamboule-tout 3D
Importe une photo, bombarde-la : elle s'écroule en cubes
Une image importée ou glissée-déposée devient un mur de centaines de cubes : chacun porte son morceau de la photo. Un clic tire une boule physique. Les briques touchées se détachent, entraînent leurs voisines, et le mur s'effondre de façon crédible. Résolution, profondeur des cubes, force du tir, masse de la boule et fragilité se règlent au curseur. La scène s'exporte en PNG.
Ce qui brille
- Tout le mur tient dans un seul InstancedMesh : un shader GLSL décale les UV de chaque instance, ce qui découpe la photo en centaines de briques
- Physique cannon-es « sélective » : les briques restent statiques jusqu'à l'impact. Ensuite, la fracture se propage aux voisines selon leur vitesse et le réglage « fragilité »
- N'importe quelle image devient destructible, par import ou par glisser-déposer
- Réglages en direct (12 à 96 colonnes, profondeur, masse, puissance), gravité activable au clavier, export PNG de la scène
Mode d'emploi
Importe une image (ou dépose-la), clique pour tirer des boules, glisse pour tourner la caméra. R remet à zéro, G coupe la gravité, Suppr efface les boules.
Fabriqué avec
- Three.js r160 (module local)
- cannon-es 0.20 (jsDelivr)
- OrbitControls
- GLSL (ShaderMaterial)
- InstancedMesh
- Import maps
- HTML5 Drag & Drop
- Canvas toDataURL (export PNG)