Exploding Meshes
Exploding meshes is a visual effect where a mesh’s vertices or components are displaced outward, giving the appearance of it “exploding”. In Babylon.js, this can be achieved by manipulating the geometry or using shaders for dramatic effects like breaking objects.
In the following example, 30 colored spheres start at their original positions (direction = 0, radius = 3). The spheres first implode, moving inward (direction = -1, radius = 0), and then explode outward (direction = 1, radius = 6), creating a dynamic animation of contraction and expansion.
const numSpheres = 30;
const radius = 3;
const scene = useScene();
useEffect(() => {
const newExplosion = new MeshExploder(spheresRef.current, groundRef.current!);
function explode() {
//const explode = Math.max(Math.sin(Date.now() / 1000) * 2, 0); //bewtween 0 and 2
const implodeAndExplode = Math.min(Math.sin(Date.now() / 1000) * -1, 0)
newExplosion.explode(implodeAndExplode);
}
scene.registerBeforeRender(explode);
return () => scene.unregisterBeforeRender(explode);
}, []);
// ...
<>
<sphere name='main-sphere' positionY={2} ref={(ref) => { spheresRef.current.push(ref) }} />
{new Array(numSpheres).fill(null).map((_, index) => {
const name = `sphere-${index}`;
const angle = (index / numSpheres) * (2 * Math.PI);
return (
<sphere
key={name}
name={name}
ref={(ref) => { spheresRef.current.push(ref) }}
options={{ segments: 8, diameter: 0.1 }}
position={new Vector3(radius * Math.cos(angle), 2, radius * Math.sin(angle))}>
<standardMaterial name={`${name}-material`} diffuseColor={Color3.Random()} />
</sphere>
)
})}
<ground ref={groundRef} name='ground' options={{ width: 8, height: 8 }}>
<standardMaterial name='ground-mat' backFaceCulling={false} />
</ground>
</>
Learn More
For properties and additional context, please refer to Babylon.js documentation: https://doc.babylonjs.com/features/featuresDeepDive/mesh/meshExploder.
