abstract-3d 2.10.6 → 2.11.1

package/src/renderers/ifc/ifc.test.ts

@@ -0,0 +1,110 @@
+import { describe, expect, it } from "vitest";
+import type { Scene } from "../../abstract-3d.js";
+import { box, cylinder, group, line, roundHole, sphere, vec2, vec3, vec3Zero } from "../../abstract-3d.js";
+import { guid, ifcFile, real, str } from "./ifc-encoding.js";
+import { triangulate } from "./ifc-geometry.js";
+import { render } from "./ifc.js";
+
+const red = { normal: "rgb(255, 0, 0)", opacity: 0.5 };
+const scene = (groups: Scene["groups"]): Scene => ({ size_deprecated: vec3Zero, groups });
+const count = (ifc: string, entity: string): number => ifc.split(`=${entity}(`).length - 1;
+
+describe("ifc encoding", () => {
+  it("writes reals with a decimal point", () => {
+    expect([real(0), real(-0), real(1), real(-2.5), real(1e-9), real(1 / 3)]).toEqual(["0.", "0.", "1.", "-2.5", "0.", "0.333333"]);
+  });
+
+  it("escapes strings", () => {
+    expect(str("it's a\\b")).toBe("'it''s a\\\\b'");
+    expect(str("Fläkt")).toBe("'Fl\\X2\\00E4\\X0\\kt'");
+    expect(str(undefined)).toBe("$");
+  });
+
+  it("derives the guid from a uuid and stays unique within a file", () => {
+    const m = ifcFile();
+    const uuid = "588c9525-0f1b-4b0b-a3e1-ba10f8a922ff";
+    const first = guid(m, uuid);
+    expect(first).toMatch(/^[0-9A-Za-z_$]{22}$/);
+    expect(guid(ifcFile(), uuid)).toBe(first);
+    expect(guid(m, uuid)).not.toBe(first);
+  });
+});
+
+describe("ifc triangulation", () => {
+  it("triangulates a box into 12 triangles over 8 shared points, converted to Z-up", () => {
+    const t = triangulate(box(vec3(2, 4, 6), red, vec3(0, 10, 0)).geometry)!;
+    expect(t.triangles).toHaveLength(12);
+    expect(t.points).toHaveLength(8);
+    // Y-up 10 + half height 2 becomes Z
+    expect(t.points).toContain("(1.,3.,12.)");
+  });
+
+  it("triangulates holes and skips lines", () => {
+    expect(triangulate(box(vec3(10, 10, 1), red, vec3Zero, vec3Zero, [roundHole(vec2(0, 0), 2)]).geometry)!.triangles.length).toBeGreaterThan(12);
+    expect(triangulate(cylinder(vec3Zero, 1, 2, red, vec3Zero, false, [], 0, Math.PI).geometry)!.triangles.length).toBeGreaterThan(0);
+    expect(triangulate(line(vec3Zero, vec3(1, 1, 1), 1, red).geometry)).toBeUndefined();
+  });
+});
+
+describe("ifc render", () => {
+  it("writes an element per top-level group and group with data, merging groups without data into their parent", () => {
+    const ifc = render(
+      scene([
+        group(
+          [box(vec3(1, 1, 1), red)],
+          vec3Zero,
+          vec3Zero,
+          [
+            group([sphere(1, red)], vec3Zero, vec3Zero, [], { name: "Fan" }),
+            group([box(vec3(2, 2, 2), red)], vec3(0, 100, 0)),
+            group([line(vec3Zero, vec3(1, 0, 0), 1, red)], vec3Zero, vec3Zero, [], { name: "Lines only" }),
+          ],
+          { id: "588c9525-0f1b-4b0b-a3e1-ba10f8a922ff" }
+        ),
+        group([box(vec3(1, 1, 1), red)]),
+        group([]),
+      ])
+    );
+    expect(ifc).toMatch(/^ISO-10303-21;/);
+    expect(ifc).toContain("FILE_SCHEMA(('IFC4'));");
+    expect(ifc.trimEnd()).toMatch(/END-ISO-10303-21;$/);
+    // The line-only and the empty group are left out, the group without data is merged into its parent
+    expect(count(ifc, "IFCBUILDINGELEMENTPROXY")).toBe(3);
+    expect(count(ifc, "IFCTRIANGULATEDFACESET")).toBe(4);
+    expect(count(ifc, "IFCRELAGGREGATES")).toBe(4);
+    expect(count(ifc, "IFCRELCONTAINEDINSPATIALSTRUCTURE")).toBe(1);
+    // The merged box keeps its group's offset, Y-up 100 + half height becomes Z
+    expect(ifc).toContain("(1.,-1.,101.)");
+    // Same material is styled once
+    expect(count(ifc, "IFCSURFACESTYLE")).toBe(1);
+    expect(ifc).toContain("IFCCOLOURRGB($,1.,0.,0.)");
+    expect(ifc).toContain("IFCSURFACESTYLESHADING(#");
+    expect(ifc).toContain(",'588c9525-0f1b-4b0b-a3e1-ba10f8a922ff',$,$,#");
+    expect(ifc).toContain(",'588c9525-0f1b-4b0b-a3e1-ba10f8a922ff',.NOTDEFINED.)");
+    expect(ifc).toContain(",'Fan',$,$,#");
+    // IFC requires a name, top-level groups without data are named after their position
+    expect(ifc).toContain(",'Element 2',$,$,#");
+  });
+
+  it("wraps the scene in one root element", () => {
+    const ifc = render(
+      scene([
+        group([box(vec3(1, 1, 1), red)], vec3Zero, vec3Zero, [], { name: "Filter" }),
+        group([box(vec3(1, 1, 1), red)], vec3(0, 0, 10), vec3Zero, [], { name: "Fan" }),
+      ]),
+      { root: { entity: "IfcUnitaryEquipment", predefinedType: "AIRHANDLER", name: "AHU" } }
+    );
+    expect(ifc).toMatch(/[=]IFCUNITARYEQUIPMENT\('[^']{22}',\$,'AHU',\$,\$,#\d+,\$,\$,\.AIRHANDLER\.\);/);
+    expect(count(ifc, "IFCBUILDINGELEMENTPROXY")).toBe(2);
+    // Only the root is in the storey, the groups are aggregated into it
+    expect(ifc).toMatch(/[=]IFCRELCONTAINEDINSPATIALSTRUCTURE\('[^']{22}',\$,\$,\$,\(#\d+\),#\d+\);/);
+    expect(count(ifc, "IFCRELAGGREGATES")).toBe(4);
+  });
+
+  it("only references entities that exist", () => {
+    const ifc = render(scene([group([box(vec3(1, 1, 1), red)], vec3(1, 2, 3), vec3(0.1, 0.2, 0.3), [group([sphere(1, red)])])]));
+    const ids = new Set(Array.from(ifc.matchAll(/^#(\d+)=/gm), (match) => match[1]));
+    const referenced = Array.from(ifc.matchAll(/[(,]#(\d+)/g), (match) => match[1]);
+    expect(referenced.filter((id) => !ids.has(id))).toEqual([]);
+  });
+});

package/src/renderers/ifc/ifc.ts

@@ -0,0 +1,167 @@
+import { Color, SRGBColorSpace } from "three";
+import type { Scene, Group, Material, Vec3 } from "../../abstract-3d.js";
+import { vec3Zero, vec3PosX, vec3PosY, vec3Rot, vec3TransRot, vec3RotCombine } from "../../abstract-3d.js";
+import type { MutableIfc } from "./ifc-encoding.js";
+import { add, guid, ifcFile, point, real, ref, refs, serialize, str } from "./ifc-encoding.js";
+import type { Triangulation } from "./ifc-geometry.js";
+import { toIfc, triangulate } from "./ifc-geometry.js";
+
+/** Element classes with the same attributes as IfcBuildingElementProxy (GlobalId, ..., Tag, PredefinedType) */
+export type IfcElementEntity = "IfcBuildingElementProxy" | "IfcUnitaryEquipment";
+
+export type IfcElementClass = {
+  readonly entity: IfcElementEntity;
+  /** The entity's PredefinedType, e.g. "AIRHANDLER" for IfcUnitaryEquipment, defaults to "NOTDEFINED" */
+  readonly predefinedType?: string;
+};
+
+export type IfcOptions = {
+  /** Name of the IFC project, defaults to "Abstract 3D" */
+  readonly name?: string;
+  /**
+   * Wraps the whole scene in one element, e.g. `{ entity: "IfcUnitaryEquipment", predefinedType: "AIRHANDLER", name: "AHU" }`, otherwise the
+   * top-level groups are placed directly in the storey
+   */
+  readonly root?: IfcElementClass & { readonly name: string };
+};
+
+type NodeMesh = { readonly material: Material; readonly triangulation: Triangulation };
+
+/** A group that becomes an element, groups without any triangulated geometry in them are left out */
+type ElementNode = {
+  readonly group: Group;
+  readonly elementClass: IfcElementClass;
+  readonly pos: Vec3;
+  readonly rot: Vec3;
+  readonly meshes: ReadonlyArray<NodeMesh>;
+  readonly children: ReadonlyArray<ElementNode>;
+};
+
+const proxyClass: IfcElementClass = { entity: "IfcBuildingElementProxy" };
+
+type IfcContext = { readonly body: number; readonly styles: Map<string, number> };
+
+/**
+ * IFC4 (Reference View) with every mesh as an IfcTriangulatedFaceSet, in millimetres. Every top-level group and every group with `data` becomes an
+ * IfcBuildingElementProxy placed relative to its parent element and aggregated into it. Groups without `data` are only transforms, so their meshes
+ * are merged into the parent element
+ */
+export function render(scene: Scene, options: IfcOptions = {}): string {
+  const name = options.name ?? "Abstract 3D";
+  const m = ifcFile();
+
+  const world = axisPlacement(m, vec3Zero, vec3Zero);
+  const context = add(m, `IFCGEOMETRICREPRESENTATIONCONTEXT($,'Model',3,1.E-05,${ref(world)},$)`);
+  const body = add(m, `IFCGEOMETRICREPRESENTATIONSUBCONTEXT('Body','Model',*,*,*,*,${ref(context)},$,.MODEL_VIEW.,$)`);
+  const units = [
+    add(m, "IFCSIUNIT(*,.LENGTHUNIT.,.MILLI.,.METRE.)"),
+    add(m, "IFCSIUNIT(*,.AREAUNIT.,$,.SQUARE_METRE.)"),
+    add(m, "IFCSIUNIT(*,.VOLUMEUNIT.,$,.CUBIC_METRE.)"),
+    add(m, "IFCSIUNIT(*,.PLANEANGLEUNIT.,$,.RADIAN.)"),
+  ];
+  const project = add(m, `IFCPROJECT(${str(guid(m))},$,${str(name)},$,$,$,$,(${ref(context)}),${ref(add(m, `IFCUNITASSIGNMENT(${refs(units)})`))})`);
+
+  const sitePlacement = add(m, `IFCLOCALPLACEMENT($,${ref(world)})`);
+  const site = add(m, `IFCSITE(${str(guid(m))},$,'Site',$,$,${ref(sitePlacement)},$,$,.ELEMENT.,$,$,$,$,$)`);
+  const buildingPlacement = add(m, `IFCLOCALPLACEMENT(${ref(sitePlacement)},${ref(world)})`);
+  const building = add(m, `IFCBUILDING(${str(guid(m))},$,'Building',$,$,${ref(buildingPlacement)},$,$,.ELEMENT.,$,$,$)`);
+  const storeyPlacement = add(m, `IFCLOCALPLACEMENT(${ref(buildingPlacement)},${ref(world)})`);
+  const storey = add(m, `IFCBUILDINGSTOREY(${str(guid(m))},$,'Storey',$,$,${ref(storeyPlacement)},$,$,.ELEMENT.,0.)`);
+  aggregate(m, project, [site]);
+  aggregate(m, site, [building]);
+  aggregate(m, building, [storey]);
+
+  const center = scene.center_deprecated ?? vec3Zero;
+  const sceneRot = scene.rotation_deprecated ?? vec3Zero;
+  const c: IfcContext = { body, styles: new Map() };
+  const nodes = options.root
+    ? [elementNode({ pos: center, rot: sceneRot, groups: scene.groups, data: { name: options.root.name } }, center, sceneRot, options.root)]
+    : scene.groups.map((g) => elementNode(g, vec3TransRot(g.pos, center, sceneRot), vec3RotCombine(sceneRot, g.rot ?? vec3Zero)));
+  const elements = nodes.flatMap((node) => node ?? []).map((node, i) => element(m, node, `${i + 1}`, storeyPlacement, c));
+  if (elements.length > 0) {
+    add(m, `IFCRELCONTAINEDINSPATIALSTRUCTURE(${str(guid(m))},$,$,$,${refs(elements)},${ref(storey)})`);
+  }
+
+  const date = new Date().toISOString().split(".")[0] ?? "1970-01-01T00:00:00";
+  return serialize(m, `${name}.ifc`, date);
+}
+
+function elementNode(group: Group, pos: Vec3, rot: Vec3, elementClass = proxyClass): ElementNode | undefined {
+  const { meshes, children } = elementContent(group, vec3Zero, vec3Zero);
+  return meshes.length > 0 || children.length > 0 ? { group, elementClass, pos, rot, meshes, children } : undefined;
+}
+
+/** Meshes of the group and its descendants without data, relative to the element the group is at pos/rot in, and the descendants with data as elements */
+function elementContent(group: Group, pos: Vec3, rot: Vec3): Pick<ElementNode, "meshes" | "children"> {
+  const meshes = (group.meshes ?? []).flatMap((mesh) => {
+    const triangulation = triangulate(mesh.geometry, pos, rot);
+    return triangulation ? [{ material: mesh.material, triangulation }] : [];
+  });
+  const nested = (group.groups ?? []).map((child) => {
+    const childPos = vec3TransRot(child.pos, pos, rot);
+    const childRot = vec3RotCombine(rot, child.rot ?? vec3Zero);
+    return Object.keys(child.data ?? {}).length > 0
+      ? { meshes: [], children: [elementNode(child, childPos, childRot)].flatMap((node) => node ?? []) }
+      : elementContent(child, childPos, childRot);
+  });
+  return { meshes: [...meshes, ...nested.flatMap((n) => n.meshes)], children: nested.flatMap((n) => n.children) };
+}
+
+/** `path` is the element's position in the tree (e.g. "2.1"), named after it when the group has no `data.name` or `data.id` since IFC requires a name */
+function element(m: MutableIfc, node: ElementNode, path: string, parentPlacement: number, c: IfcContext): number {
+  const placement = add(m, `IFCLOCALPLACEMENT(${ref(parentPlacement)},${ref(axisPlacement(m, node.pos, node.rot))})`);
+  const items = node.meshes.map(({ material, triangulation }) => faceSet(m, triangulation, material, c));
+  const shape =
+    items.length > 0
+      ? ref(add(m, `IFCPRODUCTDEFINITIONSHAPE($,$,(${ref(add(m, `IFCSHAPEREPRESENTATION(${ref(c.body)},'Body','Tessellation',${refs(items)})`))}))`))
+      : "$";
+  const id = node.group.data?.["id"];
+  const name = node.group.data?.["name"] ?? id ?? `Element ${path}`;
+  const { entity, predefinedType = "NOTDEFINED" } = node.elementClass;
+  const ifcElement = add(
+    m,
+    `${entity.toUpperCase()}(${str(guid(m, id))},$,${str(name)},$,$,${ref(placement)},${shape},${str(id)},.${predefinedType}.)`
+  );
+  aggregate(
+    m,
+    ifcElement,
+    node.children.map((child, i) => element(m, child, `${path}.${i + 1}`, placement, c))
+  );
+  return ifcElement;
+}
+
+function faceSet(m: MutableIfc, { points, triangles }: Triangulation, material: Material, c: IfcContext): number {
+  const pointList = add(m, `IFCCARTESIANPOINTLIST3D((${points.join(",")}))`);
+  const faces = add(m, `IFCTRIANGULATEDFACESET(${ref(pointList)},$,.F.,(${triangles.map((t) => `(${t.join(",")})`).join(",")}),$)`);
+  add(m, `IFCSTYLEDITEM(${ref(faces)},(${ref(surfaceStyle(m, material, c))}),$)`);
+  return faces;
+}
+
+function surfaceStyle(m: MutableIfc, material: Material, c: IfcContext): number {
+  const opacity = material.opacity ?? 1;
+  const key = `${material.normal}_${opacity}`;
+  const cached = c.styles.get(key);
+  if (cached !== undefined) {
+    return cached;
+  }
+  const { r, g, b } = new Color(material.normal).getRGB({ r: 0, g: 0, b: 0 }, SRGBColorSpace);
+  const colour = add(m, `IFCCOLOURRGB($,${real(r)},${real(g)},${real(b)})`);
+  const shading = add(m, `IFCSURFACESTYLESHADING(${ref(colour)},${real(1 - opacity)})`);
+  const style = add(m, `IFCSURFACESTYLE(${str(material.normal)},.BOTH.,(${ref(shading)}))`);
+  c.styles.set(key, style);
+  return style;
+}
+
+/** The group's local axes, converted to IFC's Z-up where three.js' up (Y) becomes the placement's Axis (Z) */
+function axisPlacement(m: MutableIfc, pos: Vec3, rot: Vec3): number {
+  const location = add(m, `IFCCARTESIANPOINT(${point(toIfc(pos))})`);
+  const axis = add(m, `IFCDIRECTION(${point(toIfc(vec3Rot(vec3PosY, vec3Zero, rot)))})`);
+  const refDirection = add(m, `IFCDIRECTION(${point(toIfc(vec3Rot(vec3PosX, vec3Zero, rot)))})`);
+  return add(m, `IFCAXIS2PLACEMENT3D(${ref(location)},${ref(axis)},${ref(refDirection)})`);
+}
+
+function aggregate(m: MutableIfc, parent: number, children: ReadonlyArray<number>): void {
+  if (children.length > 0) {
+    add(m, `IFCRELAGGREGATES(${str(guid(m))},$,$,$,${ref(parent)},${refs(children)})`);
+  }
+}

package/src/renderers/ifc/index.ts

@@ -0,0 +1 @@
+export * from "./ifc.js";

package/src/renderers/index.ts

@@ -3,3 +3,4 @@ export * as Svg from "./svg/index.js";
 export * as Stl from "./stl/index.js";
 export * as React3Js from "./react/index.js";
 export * as Step from "./step/index.js";
+export * as Ifc from "./ifc/index.js";

package/src/renderers/react/react-mesh.tsx

@@ -8,7 +8,6 @@ import {
   CatmullRomCurve3,
   Color,
   ConeGeometry,
-  Curve,
   CylinderGeometry,
   Euler,
   ExtrudeGeometry,
@@ -23,20 +22,9 @@ import {
   Vector2,
   Vector3,
 } from "three";
-import { exhaustiveCheck } from "ts-exhaustive-check";
-import type {
-  Mesh,
-  Box,
-  Plane,
-  Shape as Shape_1,
-  Cylinder,
-  Polygon as A3dPolygon,
-  Tube as A3dTube,
-  CircleCurve as A3dCircleCurve,
-  Hole,
-  Vec3,
-} from "../../abstract-3d.js";
-import { vec2Scale, vec2Sub, vec2Add, isZero, vec3, equals } from "../../abstract-3d.js";
+import type { Mesh, Box, Plane, Shape as Shape_1, Cylinder, Polygon as A3dPolygon, Tube as A3dTube } from "../../abstract-3d.js";
+import { vec2Scale, isZero } from "../../abstract-3d.js";
+import { addHoles, CircleCurve, CYLINDER_SEGMENTS, cylinderCutPositions, nonZeroHoles } from "../shared/three-geometry.js";
 import { planeGeometry } from "./react-image-material.js";
 
 extend({
@@ -56,7 +44,6 @@ extend({
   CylinderGeometry,
 });
 
-const CYLINDER_SEGMENTS = 40;
 const boxGeometry = new BoxGeometry();
 const cylinderGeometries = new Map<string, BufferGeometry>();
 const coneGeometry = new ConeGeometry(1, 1, 16, 1);
@@ -80,8 +67,7 @@ export function ReactMesh({ mesh, children }: { readonly mesh: Mesh; readonly ch
   switch (mesh.geometry.type) {
     case "Box": {
       const { pos, size, rot, holes } = mesh.geometry;
-      const filteredHoles = holes?.filter((h) => !holeIsZero(h));
-      return !filteredHoles || filteredHoles.length === 0 ? (
+      return nonZeroHoles(holes).length === 0 ? (
         <mesh
           geometry={boxGeometry}
           scale={[size.x, size.y, size.z]}
@@ -117,8 +103,7 @@ export function ReactMesh({ mesh, children }: { readonly mesh: Mesh; readonly ch
       const { pos, radius, radiusEnd = radius, rot, length, holes, open, angleStart = 0, angleLength = Math.PI * 2 } = mesh.geometry;
       const isWhole = isZero(Math.PI * 2 - angleLength);
       // Holes are extruded along the length, which can't taper
-      const filteredHoles = radiusEnd === radius ? holes?.filter((h) => !holeIsZero(h)) : undefined;
-      if (isWhole && filteredHoles && filteredHoles.length > 0) {
+      if (isWhole && radiusEnd === radius && nonZeroHoles(holes).length > 0) {
         return <ExcrudeCylinder cyl={mesh.geometry}>{children}</ExcrudeCylinder>;
       }
       // Unit geometry scaled by the largest radius, so only the radius ratio needs its own geometry
@@ -162,8 +147,7 @@ export function ReactMesh({ mesh, children }: { readonly mesh: Mesh; readonly ch
       );
     case "Plane": {
       const { pos, size, rot, holes } = mesh.geometry;
-      const filteredHoles = holes?.filter((h) => !holeIsZero(h));
-      return !filteredHoles || filteredHoles.length === 0 ? (
+      return nonZeroHoles(holes).length === 0 ? (
         <mesh
           geometry={planeGeometry}
           scale={[size.x, size.y, 1]}
@@ -273,7 +257,7 @@ function ExcrudeBoxPlane({
   const excrudeGeometry = React.useMemo(() => {
     const shape = new Shape();
     shape.moveTo(-half.x, -half.y).lineTo(-half.x, half.y).lineTo(half.x, half.y).lineTo(half.x, -half.y).closePath();
-    holes(geo.holes, shape);
+    addHoles(geo.holes, shape);
     return new ExtrudeGeometry(shape, { depth: sizeZ, bevelEnabled: false });
   }, [geo, half.x, half.y, sizeZ]);
 
@@ -299,7 +283,7 @@ function ExcrudeShape({ s, children }: { readonly s: Shape_1; readonly children?
       shape.lineTo(p.x, p.y);
     }
     shape.closePath();
-    holes(s.holes, shape);
+    addHoles(s.holes, shape);
     return new ExtrudeGeometry(shape, { depth: s.thickness, bevelEnabled: false });
   }, [s]);
 
@@ -330,30 +314,11 @@ function getCylinderGeometry(top: number, bottom: number, open: boolean, angleSt
   );
 }
 
-const rimPoint = (radius: number, y: number, angle: number): Vec3 => vec3(radius * Math.sin(angle), y, radius * Math.cos(angle));
-
 /** The two walls closing an angled cylinder, from the axis out to the rim at angleStart and angleEnd */
 function getCylinderCutGeometry(top: number, bottom: number, angleStart: number, angleLength: number): BufferGeometry {
   return cachedCylinderGeometry(`cut_${top}_${bottom}_${angleStart}_${angleLength}`, () => {
-    const [c0, c1] = [vec3(0, -0.5, 0), vec3(0, 0.5, 0)];
-    const angleEnd = angleStart + angleLength;
-    const [b0, t0] = [rimPoint(bottom, -0.5, angleStart), rimPoint(top, 0.5, angleStart)];
-    const [b1, t1] = [rimPoint(bottom, -0.5, angleEnd), rimPoint(top, 0.5, angleEnd)];
-    // Unshared vertices so each wall gets its own flat normal, wound opposite so both face outwards
-    const triangles = [
-      [c0, b0, t0],
-      [c0, t0, c1],
-      [c0, c1, t1],
-      [c0, t1, b1],
-    ];
     const g = new BufferGeometry();
-    g.setAttribute(
-      "position",
-      new Float32BufferAttribute(
-        triangles.flat().flatMap((v) => [v.x, v.y, v.z]),
-        3
-      )
-    );
+    g.setAttribute("position", new Float32BufferAttribute(cylinderCutPositions(top, bottom, 1, angleStart, angleLength), 3));
     g.computeVertexNormals();
     return g;
   });
@@ -363,7 +328,7 @@ function ExcrudeCylinder({ cyl, children }: { readonly cyl: Cylinder; readonly c
   const excrudeGeometry = React.useMemo(() => {
     const shape = new Shape();
     shape.moveTo(0, cyl.radius).absellipse(0, 0, cyl.radius, cyl.radius, 0, Math.PI * 2, true);
-    holes(cyl.holes, shape);
+    addHoles(cyl.holes, shape);
     return new ExtrudeGeometry(shape, { depth: cyl.length, bevelEnabled: false });
   }, [cyl]);
 
@@ -377,29 +342,6 @@ function ExcrudeCylinder({ cyl, children }: { readonly cyl: Cylinder; readonly c
   );
 }
 
-function holes(holes: ReadonlyArray<Hole> | undefined, shape: Shape): void {
-  holes
-    ?.filter((h) => !holeIsZero(h))
-    .forEach((h) => {
-      switch (h.type) {
-        case "RoundHole":
-          shape.holes.push(new Path().absarc(h.pos.x, h.pos.y, h.radius, 0, Math.PI * 2, true));
-          break;
-        case "SquareHole": {
-          const path = new Path();
-          const halfHole = vec2Scale(h.size, 0.5);
-          const min = vec2Sub(h.pos, halfHole);
-          const max = vec2Add(h.pos, halfHole);
-          path.moveTo(min.x, min.y).lineTo(min.x, max.y).lineTo(max.x, max.y).lineTo(max.x, min.y).closePath();
-          shape.holes.push(path);
-          break;
-        }
-        default:
-          exhaustiveCheck(h);
-      }
-    });
-}
-
 function Polygon({ polygon, children }: { readonly polygon: A3dPolygon; readonly children?: React.JSX.Element }): React.JSX.Element {
   const vertices = React.useMemo(() => {
     if (polygon.points.length === 4) {
@@ -481,41 +423,6 @@ function Tube({ tube, children }: { readonly tube: A3dTube; readonly children?:
   );
 }
 
-function holeIsZero(hole: Hole): boolean {
-  switch (hole.type) {
-    case "RoundHole": {
-      return equals(hole.radius, 0.0);
-    }
-    case "SquareHole": {
-      return equals(hole.size.x, 0.0) || equals(hole.size.y, 0.0);
-    }
-    default:
-      return false;
-  }
-}
-
-// oxlint-disable-next-line functional/no-classes -- extends three.js Curve, which requires a class
-class CircleCurve extends Curve<Vector3> {
-  radius: number;
-  angleLength: number;
-  startAngle: number;
-
-  constructor(circleCurve: A3dCircleCurve) {
-    super();
-    this.radius = circleCurve.radius;
-    this.startAngle = circleCurve.angleStart;
-    this.angleLength = circleCurve.angleLength;
-  }
-
-  override getPoint(t: number, optionalTarget = new Vector3()): Vector3 {
-    return optionalTarget.set(
-      -this.radius * Math.sin(this.startAngle + this.angleLength * t),
-      -this.radius * Math.cos(this.startAngle + this.angleLength * t),
-      0
-    );
-  }
-}
-
 const culledLineVertexShader = `
   uniform vec3 lineStart;
   uniform vec3 lineEnd;

package/src/renderers/shared/three-geometry.ts

@@ -0,0 +1,87 @@
+import { Curve, Path, type Shape, Vector3 } from "three";
+import { exhaustiveCheck } from "ts-exhaustive-check";
+import type { CircleCurve as A3dCircleCurve, Hole, Vec3 } from "../../abstract-3d.js";
+import { vec2Scale, vec2Sub, vec2Add, vec3, equals } from "../../abstract-3d.js";
+
+/** Three.js geometry helpers shared by the react renderer and the triangulating exporters */
+
+export const CYLINDER_SEGMENTS = 40;
+
+export function holeIsZero(hole: Hole): boolean {
+  switch (hole.type) {
+    case "RoundHole": {
+      return equals(hole.radius, 0.0);
+    }
+    case "SquareHole": {
+      return equals(hole.size.x, 0.0) || equals(hole.size.y, 0.0);
+    }
+    default:
+      return false;
+  }
+}
+
+export function nonZeroHoles(holes: ReadonlyArray<Hole> | undefined): ReadonlyArray<Hole> {
+  return holes?.filter((h) => !holeIsZero(h)) ?? [];
+}
+
+export function addHoles(holes: ReadonlyArray<Hole> | undefined, shape: Shape): void {
+  nonZeroHoles(holes).forEach((h) => {
+    switch (h.type) {
+      case "RoundHole":
+        shape.holes.push(new Path().absarc(h.pos.x, h.pos.y, h.radius, 0, Math.PI * 2, true));
+        break;
+      case "SquareHole": {
+        const path = new Path();
+        const halfHole = vec2Scale(h.size, 0.5);
+        const min = vec2Sub(h.pos, halfHole);
+        const max = vec2Add(h.pos, halfHole);
+        path.moveTo(min.x, min.y).lineTo(min.x, max.y).lineTo(max.x, max.y).lineTo(max.x, min.y).closePath();
+        shape.holes.push(path);
+        break;
+      }
+      default:
+        exhaustiveCheck(h);
+    }
+  });
+}
+
+const rimPoint = (radius: number, y: number, angle: number): Vec3 => vec3(radius * Math.sin(angle), y, radius * Math.cos(angle));
+
+/** Flat xyz positions of the two walls closing an angled cylinder, from the axis out to the rim at angleStart and angleEnd */
+export function cylinderCutPositions(top: number, bottom: number, length: number, angleStart: number, angleLength: number): ReadonlyArray<number> {
+  const half = length / 2;
+  const [c0, c1] = [vec3(0, -half, 0), vec3(0, half, 0)];
+  const angleEnd = angleStart + angleLength;
+  const [b0, t0] = [rimPoint(bottom, -half, angleStart), rimPoint(top, half, angleStart)];
+  const [b1, t1] = [rimPoint(bottom, -half, angleEnd), rimPoint(top, half, angleEnd)];
+  // Unshared vertices so each wall gets its own flat normal, wound opposite so both face outwards
+  const triangles = [
+    [c0, b0, t0],
+    [c0, t0, c1],
+    [c0, c1, t1],
+    [c0, t1, b1],
+  ];
+  return triangles.flat().flatMap((v) => [v.x, v.y, v.z]);
+}
+
+// oxlint-disable-next-line functional/no-classes -- extends three.js Curve, which requires a class
+export class CircleCurve extends Curve<Vector3> {
+  radius: number;
+  angleLength: number;
+  startAngle: number;
+
+  constructor(circleCurve: A3dCircleCurve) {
+    super();
+    this.radius = circleCurve.radius;
+    this.startAngle = circleCurve.angleStart;
+    this.angleLength = circleCurve.angleLength;
+  }
+
+  override getPoint(t: number, optionalTarget = new Vector3()): Vector3 {
+    return optionalTarget.set(
+      -this.radius * Math.sin(this.startAngle + this.angleLength * t),
+      -this.radius * Math.cos(this.startAngle + this.angleLength * t),
+      0
+    );
+  }
+}