jcode/skills/threejs-csg/SKILL.md

name	description
threejs-csg	Build interactive 3D scenes with three.js in a single HTML file (no build step) and apply boolean operations (subtract, union, intersect) to meshes with three-bvh-csg, e.g. drilling a cylindrical hole through a cube. Use for any three.js, WebGL, 3D-model or CSG task.

three.js + CSG (boolean operations)

Setup

No npm, no bundler: ES modules are loaded from a CDN through an import map. template.html is a complete, working page (lit scene, orbit controls, a cube with a cylindrical hole). Always start from it: read it with load_skill("threejs-csg", "template.html") and write it into the project under the requested file name, then change only buildModel().

Boolean operations

Rules, pitfalls and a reference of the operations: see csg.md.

Import / export / text / SVG

STL export and import, extruded SVG, solid text, and "group = union of solids minus holes": see loaders.md. Exporters take plain meshes with world matrices - not the scene, not raw Brushes.

Workflow

1. Copy the template, adapt buildModel() (geometry, materials, operations). For an editor/app around it, follow the single-file-webapp skill (state, UI wiring, test hook) and save-load-json for project files (meshes stay in a runtime map, records hold type/params/transform/hole/children).
2. Static check: python <single-file-webapp skill dir>/check_html.py <file>.html.
3. Visual/behavioural check with the browser-test skill (opens the file via file:// - no web server needed; CDN imports work from there).
4. Keep everything in the one HTML file unless the task asks for more.