This is a production-friendly approach for landing pages, product reveals, and interactive hero sections, where you need a “wow” effect that behaves identically on a MacBook and on a mid-range Android phone. The trade-off is that the animation is fixed – pieces always land in the same place – but in exchange you get full artistic control and a predictable performance budget.
What you will need:
- Blender (latest version)
- The free Cell Fracture add-on
- Proper model preparation
- Fracturing the mesh
- Physics setup and animation baking
Step 1: Installing Cell Fracture
We will skip the absolute basics of Blender and jump straight into the setup.
In recent Blender versions, the add-on system has moved. Go to Edit > Preferences > Get Extensions. Search for Cell Fracture. Install and enable it.
Now, when you select a mesh and go to Object > Quick Effects, you will see Cell Fracture. This is an older but incredibly flexible tool. It uses a Voronoi diagram to generate cells and applies Boolean operations to slice your object. It also automatically assigns inner materials, organizes pieces into collections, and sets up basic physics mass.
Step 2: Model Preparation
You can breeze through this in a minute or get stuck for hours.
Cell Fracture requires a mesh with perfect topology. It sequentially creates new objects and uses Boolean modifiers (Intersect and Difference). If your mesh has intersecting geometry, open holes, or overlapping faces, the Boolean math will fail. You will end up with floating fragments, missing faces, or flipped normals.
Make copies of your mesh at every single stage. Keep a backup before applying modifiers, before fracturing, and before adding physics. Hide them in a separate collection. If something breaks, you can quickly roll back without losing progress.
Follow this preparation checklist:
- Check UV mapping. Cell Fracture preserves your current UVs. If you skip this now, fixing UVs on hundreds of separate fragments later is a nightmare.
- Ensure a manifold mesh. The model must be watertight with no holes.
- Clean the topology. Run Merge by Distance to remove double vertices and Recalculate Normals to ensure all faces point outward.
- Separate loose parts. If your object is combined via Join, separate it first. Joined but physically disconnected meshes behave poorly with physics and Three.js exports.
- Bake procedural textures. This is crucial. If you use generative nodes like Noise or Musgrave relying on Object coordinates, do not leave them as nodes. When you fracture the mesh, each new piece gets its own origin point. The procedural pattern will shift, completely ruining your uniform roughness or surface pattern. Bake everything to Image Textures before fracturing.
- Apply modifiers. Hover over the modifier list and press Ctrl+A for each one.
- Scale up. Boolean operations in Blender struggle with micro-geometry. Scale your model up by 10 or 20 times, apply the scale (Ctrl+A > Scale), run the fracture, and then scale the pieces back down.
If the result looks clean, move forward. If you see visual artifacts, go back through the list and look for non-manifold geometry.
Step 3: Cell Fracture Settings
When you launch the add-on, a large menu appears. Let us break down the parameters.
Operator Presets
You can save your settings here. If you need to fracture multiple rocks with the exact same look, save a preset to avoid typing values repeatedly.
Point Source
This defines where the centers of your future fragments will be.
- Own Verts: Uses the mesh vertices. Denser topology areas get smaller pieces.
- Child Verts: Uses vertices from child objects.
- Own Particles (Default): The best method. Create a particle system, cluster particles where you want the impact, and the add-on fractures exactly around them.
- Child Particles: Same concept, but reads particles from a child object.
- Annotation Pencil: Draw lines on your model with the Annotate tool, and the cracks will follow your strokes.
- Source Limit: Maximum number of initial pieces.
- Noise: Distorts the Voronoi cells so they look organic rather than like perfect crystals.
Scale
The X, Y, and Z proportions of the cells. A scale of 1 1 1 gives uniform chunks. Setting Z to 5 creates long splinters.
Recursive Shatter
Breaks already fractured pieces into even smaller details.
- Recursion: Number of extra passes (0 means disabled).
- Source Limit: How many new pieces to create per old piece.
- Clamp Recursion: A hard limit on the total fragment count to prevent software crashes.
- Random Factor: Adds randomness to which pieces get fractured again.
- Falloff: Determines which pieces to target. Small targets tiny pieces, Big targets large ones, Cursor Close/Far targets pieces based on the 3D cursor position.
Mesh Data
- Smooth Interior: Smooths the newly created inner faces.
- Sharp Edges (Default): Marks the cut edges as sharp.
- Apply Split Edge (Default): Physically disconnects the geometry along the sharp edges.
- Match Data (Default): Transfers UVs and vertex colors to the new fragments.
- Material: The material index for the inside faces. 0 uses the exterior material. 1 uses the second material in your object material slots.
- Interior VGroup: Creates a vertex group for the inner faces, useful for masking.
- Margin: The gap between pieces. Keep this at 0, otherwise your model will shrink.
- Split Islands (Default): If a cut results in two physically disconnected chunks within one object, this separates them into two objects.
Physics
- Mass Mode: Volume calculates weight based on piece size. Uniform gives every piece the exact same weight.
- Mass: The base multiplier for Rigid Body physics.
Object and Scene
- Object Recenter (Default): Moves the origin point to the center of mass for every fragment. This is mandatory for stable physics.
- Scene Collection: Automatically moves the hundreds of generated pieces into a neat new collection.
Debug
- Show Progress Realtime (Default): Updates the viewport during calculation.
- Debug Points / Debug Boolean: Leaves helper objects in the scene to help you troubleshoot failed cuts.
Step 4: Adding Physics and Animation
To blow up or collapse the model, we need the Rigid Body system.
Core Physics Setup
- Adding Force: You need a trigger. Add a Force Field like Force (omnidirectional explosion) or Wind (directional push).
- Rigid Body: Assign Active Rigid Body to all fragments. Assign Passive Rigid Body to the floor so pieces can bounce off it.
- Scene Time Scale: Go to Scene Properties > Rigid Body World > Speed. Lowering this creates a slow-motion effect. Note that this is a global parameter. It affects all physics in the entire scene. You cannot set different time scales for different objects at the same time.
- The Animated Flag: In the Rigid Body settings, there is an Animated checkbox. When checked, the object ignores physics and follows keyframes. When unchecked, physics takes over.
Managing Hundreds of Pieces
Do not edit fragments one by one. Select all fragments, make sure one is the active selection, set up its physics, and click Object > Rigid Body > Copy from Active.
To delay an explosion, animate the Animated checkbox on one piece, then use Ctrl+L > Link Animation Data to sync it across all pieces.
Baking vs. Three.js Physics
Why bake in Blender instead of using Cannon.js or Rapier in Three.js?
First, calculating physics for hundreds of unique meshes in real-time is computationally expensive for a browser.
Second, baking gives you absolute artistic control. You see exactly where every piece lands.
Select all pieces and go to Object > Rigid Body > Bake to Keyframes. This converts the simulation into standard animation tracks. In Three.js, playing back keyframes is incredibly cheap. You can also easily tie this baked animation to user scroll or mouse movement, using lerp (linear interpolation) to scrub through the timeline smoothly.
Step 5: Export and Three.js Integration
Export your scene as a GLTF/GLB file.
The Visibility Trick
Even with a margin of 0, WebGL rendering might show microscopic seams where the cracks are, depending on your lighting and shadows.
The solution is a standard visibility trick. Keep your original, unfractured mesh in the scene and visible. Hide the collection of fractured pieces. At the exact frame of the impact or explosion, hide the original mesh and unhide the fragments. The swap happens in a single frame and is completely invisible to the user.
Optimization: BatchedMesh
Do not export hundreds of individual meshes. Your draw calls will skyrocket and the browser will lag.
You might think of InstancedMesh, but instancing is strictly for rendering the exact same geometry multiple times. Since every fractured piece has a unique shape, instancing will not work here.
Instead, use BatchedMesh (more about). BatchedMesh is designed specifically for this scenario. It allows you to merge multiple different geometries into a single object and render them all with a single draw call, while still allowing you to update their individual transforms (positions and rotations) per frame. Use one shared material for the entire batch to maximize performance.
