---
name: threejs-csg
description: >
  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](./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](./csg.md).

## Import / export / text / SVG
STL export and import, extruded SVG, solid text, and "group = union of solids
minus holes": see [loaders.md](./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.