/threejs-procedural-geometry

name: threejs-procedural-geometry
description: Build well-crafted production procedural meshes in Three.js. Use for complete hard-surface assemblies and humanoid robots, profile extrusion, parameter-curve and spine lofts, pillow panels, exact polygon cuts, inset, revolve, sweep, solidify, bevels and fillets, shell thickness, direct-topology apertures, semantic mesh writers, or diagnosing primitive-built forms, coplanar flicker, loose/non-manifold geometry, detached parts, interpenetration, support, clearance, and swept-envelope defects.

Procedural Geometry

Generate geometry from a semantic contract and explicit coordinate frame. Treat polygon operations as the design model and triangle emission as the final compilation step. Do not declare an object complete until its topology, assembly relationships, semantic measurements, and fixed views all pass.

This skill contains exemplary examples and assets beyond descriptive guidance, they're worth studying, referencing, or even copying. Use them sufficiently when relevant and do NOT blindly skip them.

Craft loop

1. Define units, local/world frames, dimensions, bounds, primary profiles, topology intent, shell thickness, apertures, material slots, and triangle band. 2. Declare every required contact, support, clearance, penetration, reveal, moving envelope, and interaction datum. 3. Choose a modeling operation for each visible form: profile extrusion, inset, loft, revolve, sweep, direct-topology aperture, solidify, subdivision, bevel, or fillet. 4. Keep quads and n-gons through design. Preserve one named mesh per semantic part; do not weld unrelated parts or merge material slots yet. 5. Apply modifiers in a deliberate order, then clean inside each part, repair winding, assign a part-specific smooth angle, and emit triangles. 6. Run the polygon topology gate, then audit the named world assembly for coplanar overlap, defects, and substantial solid clashes. 7. Run builder-owned semantic checks, including support, openings, shell thickness samples, ergonomic clearances, and moving extrema. 8. Merge by material slot, audit again, and inspect fixed silhouettes, hidden sides, joints, interaction views, wireframe, normals, and grazing light.

Modeling bar

• Use primitives only for genuinely primitive or hidden structural parts.
• Give every visible manufactured edge a scale-appropriate bevel or fillet.
• Build openings into one closed shell; do not stack a dark plane over a solid.
• Construct thick shells with paired profiles or `solidify`; never rely on a

single surface where an exposed rim reveals thickness.

• Drive mating parts from the same datum. A late visual nudge is a failed

dimension contract.

• Choose a continuous mesh for a continuous manufactured form. An arrangement

of intersecting primitives is not a substitute for modeling.

• Keep narrow, named allowances only for intersections that are structurally

intentional.

Read [references/geometry-craft-workflow.md](references/geometry-craft-workflow.md) for the polygon-first modeling grammar, modifier order, join floors, detail budgets, fixed visual-review contract, and geometry-craft failure diagnosis.

Read [references/geometry-quality-gates.md](references/geometry-quality-gates.md) for exact topology, coplanar, solid-clash, semantic, support, clearance, motion-envelope, and visual gates with metre-scale tolerances.

Portable JavaScript kit

Place the complete `assets/geometry-quality-kit/` directory into a Three.js project when the project lacks an equivalent modeling and quality layer. Adjust import paths and scene plumbing as needed; preserve the geometry and audit contracts.

• [procedural-mesh.js](assets/geometry-quality-kit/procedural-mesh.js) provides

`MeshData`, polygon cleanup, winding reconstruction, profiles, offsets, extrusion, loft, revolve, sweeps, solidify, subdivision, bevels, apertures, smooth-angle normals, material-slot builds, and Three.js emission.

• [mesh-topology-audit.js](assets/geometry-quality-kit/mesh-topology-audit.js)

checks loose/duplicate vertices, degenerates, open/non-manifold edges, detached components, signed volume, and emitted positions/normals.

• [geometry-audit.js](assets/geometry-quality-kit/geometry-audit.js) audits a

built `Object3D` hierarchy for true clipped coplanar overlap, invalid mesh data, missing materials, and substantial triangle-crossing clashes.

• [geometry-contract.js](assets/geometry-quality-kit/geometry-contract.js)

runs object-specific measurements without imposing project-specific shape semantics.

• [assembly.js](assets/geometry-quality-kit/assembly.js) preserves named parts

for auditing, then builds one draw mesh per material slot after gates pass.

• [selftest.js](assets/geometry-quality-kit/selftest.js) plants known defects

and verifies the modeling, topology, contract, assembly, z-fight, and clash paths; run it after placing or adapting the kit.

Mechanism references and implementations

Read [references/profile-sweeps-and-mesh-writers.md](references/profile-sweeps-and-mesh-writers.md) for the exact sculpted-frame profile, rail emission, tree rings, semantic mesh writer, and their observed scaling limits.

Read the [sculpted gallery frame geometry](examples/sculpted-gallery-frame/frame-geometry.js) for profile sweeps, miter-like rail mapping, deliberate cap ownership, PBR surface bundles, grazing highlights, selective bloom, and geometry diagnostics.

Read [references/complete-submarine-assembly.md](references/complete-submarine-assembly.md) for the exact dimensioned object contract, shared loft/sweep kernel, UV-owned apertures, semantic subassemblies, generated fittings, and model diagnostics.

Read the [porcelain-and-brass submarine model](examples/porcelain-brass-submarine/submarine-model.js) for a complete assembly with a tilted-collar hull loft, parallel-transport trim, furnished glass cabin, shrouded propeller, lens-section fins, and per-pa