Exploding Meshes
Exploding meshes is a visual effect where a mesh’s vertices or components are displaced outward, giving the appearance of it “exploding@components/meshes” 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.
