Chamboule-tout 3D
Import a photo, then bombard it until it collapses into cubes
An imported or dropped image becomes a wall of hundreds of cubes, each carrying its own piece of the photo. Click to fire a physics ball: the bricks it hits break loose, drag their neighbors along, and the wall collapses convincingly. Sliders set the resolution, cube depth, shot force, ball mass and fragility, and the scene exports as a PNG.
What shines
- The whole wall is a single InstancedMesh: a GLSL shader offsets each instance's UVs, which slices the photo into hundreds of bricks
- "Selective" cannon-es physics: bricks stay static until impact. After that, the fracture spreads to their neighbors based on their speed and the "fragility" setting
- Any image becomes destructible, by import or by drag and drop
- Live settings (12 to 96 columns, depth, mass, power), gravity toggled from the keyboard, PNG export of the scene
How to use it
Import an image (or drop it in), click to fire balls, drag to rotate the camera. R resets, G turns gravity off, Delete clears the balls.
Made with
- Three.js r160 (module local)
- cannon-es 0.20 (jsDelivr)
- OrbitControls
- GLSL (ShaderMaterial)
- InstancedMesh
- Import maps
- HTML5 Drag & Drop
- Canvas toDataURL (export PNG)