← cad viewer

CAD viewer · #4

Cutting the model open: the section plane

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.clippingPlanes clips everything including the floor grid, which looks wrong — a sliced grid reads as a bug. Material-level clippingPlanes on 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 — one updateSection() 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.