36 lines
1.7 KiB
Markdown
36 lines
1.7 KiB
Markdown
---
|
|
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.
|