An interactive browser-based tool for visualizing how 2D shapes emerge when 3D solids are sliced by a cutting plane. Built with Three.js, it renders a live 3D scene alongside a computed 2D cross-section diagram.
- 6 solids — Cube, Cylinder, Cone, Sphere, Square Pyramid, Triangular Prism
- Adjustable cutting plane — control height, tilt, and rotation with sliders
- Real-time 2D cross-section — displays the resulting shape with its name and a description
- Conic sections — slice a cone to reveal circles, ellipses, parabolas, and hyperbolas
- Preset cuts — one-click interesting cross-sections per solid (e.g. the hexagon hidden inside a cube)
- 3D orbit controls — drag to rotate, scroll to zoom
Open cross-sections.html directly in any modern browser — no build step or server required.
open cross-sections.html
- Pick a solid from the Choose a Solid panel
- Drag the Height, Tilt, and Rotate sliders to position the cutting plane
- The Resulting 2D Shape panel updates in real time
- Use Interesting Cuts presets to jump to notable cross-sections
| Control | Action |
|---|---|
| Drag (3D view) | Orbit camera |
| Scroll (3D view) | Zoom in / out |
| Height slider | Move the cutting plane up or down |
| Tilt slider | Tilt the plane from horizontal to vertical |
| Rotate slider | Rotate the plane around the vertical axis |
| Solid | Possible cross-sections |
|---|---|
| Cube | Square, Rectangle, Triangle, Regular Hexagon |
| Cylinder | Circle, Ellipse, Rectangle |
| Cone | Circle, Ellipse, Parabola, Hyperbola, Triangle |
| Sphere | Circle (always) |
| Square Pyramid | Square, Rectangle, Triangle, Pentagon |
| Triangular Prism | Triangle, Rectangle, Parallelogram, Pentagon |
Loaded from CDN — no installation needed.
- Three.js r128 — 3D rendering
- OrbitControls — camera interaction