Milestone three is live at /viewer: check section in the parts panel, drag the slider, and the model slices open along your chosen axis.
The cheap implementation that works
Three.js clipping planes are just a plane equation evaluated per-fragment in the shader:
normal · point + constant ≥ 0 → keep it
normal · point + constant < 0 → discard it
So the whole feature is: pick an axis vector for normal, and map a 0–100
slider onto the model's bounding box to move constant through it:
const bbox = new THREE.Box3().setFromObject(modelGroup);
const t = sectionSlider.value / 100;
const pos = bbox.min[axis] + t * (bbox.max[axis] - bbox.min[axis]);
clipPlane.normal.copy(AXES[axis]);
clipPlane.constant = -pos;
Enable localClippingEnabled, assign the plane to every material, done.
Two details that took the actual time
- Material-level, not global.
renderer.clippingPlanesclips everything including the floor grid, which looks wrong — a sliced grid reads as a bug. Material-levelclippingPlaneson the solids and edge lines keeps the environment intact. Small thing, but it's the difference between a demo trick and a feature. - The shared plane object. Every material references the same
Plane— oneupdateSection()call moves the cut for the whole scene, no per-material bookkeeping.
What it doesn't do yet
The cut is hollow — you see through the walls to the interior, but there's no solid "cap" filling the section face. Real section hatching (closing the cut with a shaded cross-section) is a known hard problem for arbitrary meshes and stays on the long list. Face picking is next — that one's real B-rep data this time, not an approximation.