@react-arch/renderer-3d 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 React Arch
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/index.d.ts

@@ -0,0 +1,77 @@
+import { BuildingDocument, EntityRef } from "@react-arch/core";
+
+//#region src/Building3D.d.ts
+interface Building3DProps {
+  document: BuildingDocument;
+  floorIds: string[] | "all";
+  selected?: EntityRef | null;
+  onSelect?: (ref: EntityRef | null) => void;
+  exploded?: boolean;
+  explodeGap?: number;
+  wireframe?: boolean;
+  xray?: boolean;
+  showSlabs?: boolean;
+  className?: string;
+}
+declare function Building3D(props: Building3DProps): import("react").JSX.Element;
+//#endregion
+//#region src/scene3d.d.ts
+/**
+ * Plan→world mapping: plan X → world X, plan Y → world Z, height → world Y.
+ * All records below carry positions/rotations/sizes ready to drop onto meshes.
+ */
+interface BoxMesh {
+  key: string;
+  entityId: string;
+  floorId: string;
+  kind: "wall";
+  position: [number, number, number];
+  rotationY: number;
+  size: [number, number, number];
+  materialId?: string;
+}
+interface SlabMesh {
+  key: string;
+  entityId: string;
+  floorId: string;
+  kind: "slab";
+  position: [number, number, number];
+  size: [number, number, number];
+}
+interface PanelMesh {
+  key: string;
+  entityId: string;
+  floorId: string;
+  kind: "door" | "window" | "opening";
+  position: [number, number, number];
+  rotationY: number;
+  size: [number, number, number];
+}
+interface ObjectMesh {
+  key: string;
+  entityId: string;
+  floorId: string;
+  kind: "object";
+  objectType: string;
+  position: [number, number, number];
+  rotationY: number;
+  size: [number, number, number];
+}
+interface Scene3D {
+  boxes: BoxMesh[];
+  slabs: SlabMesh[];
+  panels: PanelMesh[];
+  objects: ObjectMesh[];
+  center: [number, number, number];
+  radius: number;
+}
+interface Build3DOptions {
+  floorIds: string[] | "all";
+  exploded?: boolean;
+  explodeGap?: number;
+  showSlabs?: boolean;
+}
+declare function build3DScene(doc: BuildingDocument, opts: Build3DOptions): Scene3D;
+//#endregion
+export { type Build3DOptions, Building3D, type Building3DProps, type Scene3D, build3DScene };
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","names":[],"sources":["../src/Building3D.tsx","../src/scene3d.ts"],"mappings":";;;UAOiB,eAAA;EACf,QAAA,EAAU,gBAAA;EACV,QAAA;EACA,QAAA,GAAW,SAAA;EACX,QAAA,IAAY,GAAA,EAAK,SAAA;EACjB,QAAA;EACA,UAAA;EACA,SAAA;EACA,IAAA;EACA,SAAA;EACA,SAAA;AAAA;AAAA,iBA8Bc,UAAA,CAAW,KAAA,EAAO,eAAe,mBAAA,GAAA,CAAA,OAAA;;;;;AAxCjD;;UCEiB,OAAA;EACf,GAAA;EACA,QAAA;EACA,OAAA;EACA,IAAA;EACA,QAAA;EACA,SAAA;EACA,IAAA;EACA,UAAA;AAAA;AAAA,UAEe,QAAA;EACf,GAAA;EACA,QAAA;EACA,OAAA;EACA,IAAA;EACA,QAAA;EACA,IAAA;AAAA;AAAA,UAEe,SAAA;EACf,GAAA;EACA,QAAA;EACA,OAAA;EACA,IAAA;EACA,QAAA;EACA,SAAA;EACA,IAAA;AAAA;AAAA,UAGe,UAAA;EACf,GAAA;EACA,QAAA;EACA,OAAA;EACA,IAAA;EACA,UAAA;EACA,QAAA;EACA,SAAA;EACA,IAAA;AAAA;AAAA,UAGe,OAAA;EACf,KAAA,EAAO,OAAA;EACP,KAAA,EAAO,QAAA;EACP,MAAA,EAAQ,SAAA;EACR,OAAA,EAAS,UAAA;EACT,MAAA;EACA,MAAA;AAAA;AAAA,UAGe,cAAA;EACf,QAAA;EACA,QAAA;EACA,UAAA;EACA,SAAA;AAAA;AAAA,iBAQc,YAAA,CAAa,GAAA,EAAK,gBAAA,EAAkB,IAAA,EAAM,cAAA,GAAiB,OAAA"}

package/dist/index.js

@@ -0,0 +1,358 @@
+import { useEffect, useMemo, useRef } from "react";
+import { Canvas, useThree } from "@react-three/fiber";
+import { OrbitControls } from "@react-three/drei";
+import { allFloors, furnitureColor, furnitureDims } from "@react-arch/core";
+import { bounds, wallBoxes, wallDirection } from "@react-arch/geometry";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/scene3d.ts
+const SLAB_THICKNESS = .14;
+/** Drop the slab top slightly below the floor line to avoid sharing a plane
+* with the wall-tops of the floor below (prevents z-fighting). 2 cm, invisible. */
+const SLAB_TOP_GAP = .02;
+function build3DScene(doc, opts) {
+	const ordered = [...allFloors(doc)].sort((a, b) => a.elevation - b.elevation);
+	const gap = opts.explodeGap ?? 3;
+	const boxes = [];
+	const slabs = [];
+	const panels = [];
+	const objects = [];
+	const allPts = [];
+	let minY = Infinity;
+	let maxY = -Infinity;
+	ordered.forEach((floor, index) => {
+		if (!(opts.floorIds === "all" ? floor.visible : opts.floorIds.includes(floor.id))) return;
+		const elevation = floor.elevation + (opts.exploded ? index * gap : 0);
+		minY = Math.min(minY, elevation);
+		maxY = Math.max(maxY, elevation + floor.height);
+		const wallById = new Map(floor.walls.map((w) => [w.id, w]));
+		const openingsByWall = /* @__PURE__ */ new Map();
+		for (const o of floor.openings) {
+			const arr = openingsByWall.get(o.wallId) ?? [];
+			arr.push(o);
+			openingsByWall.set(o.wallId, arr);
+		}
+		for (const wall of floor.walls) {
+			allPts.push(wall.start, wall.end);
+			const dir = wallDirection(wall);
+			const theta = Math.atan2(dir[1], dir[0]);
+			wallBoxes(wall, (openingsByWall.get(wall.id) ?? []).map((o) => ({
+				offset: o.offset,
+				width: o.width,
+				height: o.height,
+				sillHeight: o.sillHeight
+			})), wall.height, wall.thickness / 2).forEach((s, i) => {
+				const along = (s.along0 + s.along1) / 2;
+				const px = wall.start[0] + dir[0] * along;
+				const py = wall.start[1] + dir[1] * along;
+				boxes.push({
+					key: `${wall.id}-${i}`,
+					entityId: wall.id,
+					floorId: floor.id,
+					kind: "wall",
+					position: [
+						px,
+						elevation + (s.z0 + s.z1) / 2,
+						py
+					],
+					rotationY: -theta,
+					size: [
+						Math.max(s.along1 - s.along0, .001),
+						Math.max(s.z1 - s.z0, .001),
+						wall.thickness
+					],
+					materialId: wall.materialId
+				});
+			});
+		}
+		for (const o of floor.openings) {
+			const wall = wallById.get(o.wallId);
+			if (!wall) continue;
+			const dir = wallDirection(wall);
+			const theta = Math.atan2(dir[1], dir[0]);
+			const px = wall.start[0] + dir[0] * o.offset;
+			const py = wall.start[1] + dir[1] * o.offset;
+			const depth = o.type === "window" ? .05 : wall.thickness * .6;
+			panels.push({
+				key: o.id,
+				entityId: o.id,
+				floorId: floor.id,
+				kind: o.type,
+				position: [
+					px,
+					elevation + o.sillHeight + o.height / 2,
+					py
+				],
+				rotationY: -theta,
+				size: [
+					Math.max(o.width - .04, .05),
+					Math.max(o.height - .04, .05),
+					depth
+				]
+			});
+		}
+		for (const ob of floor.objects) {
+			const d = furnitureDims(ob.type, ob.scale);
+			objects.push({
+				key: ob.id,
+				entityId: ob.id,
+				floorId: floor.id,
+				kind: "object",
+				objectType: ob.type,
+				position: [
+					ob.position[0],
+					elevation + ob.position[2] + d.height / 2,
+					ob.position[1]
+				],
+				rotationY: -ob.rotation[2],
+				size: [
+					d.width,
+					d.height,
+					d.depth
+				]
+			});
+		}
+		if (opts.showSlabs !== false && floor.walls.length > 0) {
+			const b = bounds(floor.walls.flatMap((w) => [w.start, w.end]));
+			slabs.push({
+				key: `slab-${floor.id}`,
+				entityId: floor.id,
+				floorId: floor.id,
+				kind: "slab",
+				position: [
+					(b.min[0] + b.max[0]) / 2,
+					elevation - SLAB_TOP_GAP - SLAB_THICKNESS / 2,
+					(b.min[1] + b.max[1]) / 2
+				],
+				size: [
+					b.width + .4,
+					SLAB_THICKNESS,
+					b.height + .4
+				]
+			});
+		}
+	});
+	const b = bounds(allPts);
+	const cx = (b.min[0] + b.max[0]) / 2;
+	const cz = (b.min[1] + b.max[1]) / 2;
+	const cy = Number.isFinite(minY) ? (minY + maxY) / 2 : 1.5;
+	const radius = Math.max(b.width, b.height, maxY - minY, 4) * .75;
+	return {
+		boxes,
+		slabs,
+		panels,
+		objects,
+		center: [
+			cx,
+			cy,
+			cz
+		],
+		radius
+	};
+}
+//#endregion
+//#region src/Building3D.tsx
+const ACCENT = "#4c8eff";
+function colorFor(doc, materialId, fallback) {
+	if (!materialId) return fallback;
+	return doc.materials.find((m) => m.id === materialId)?.baseColor ?? fallback;
+}
+function CameraRig({ scene }) {
+	const { camera } = useThree();
+	const controls = useRef(null);
+	useEffect(() => {
+		const [cx, cy, cz] = scene.center;
+		const r = scene.radius;
+		camera.position.set(cx + r * 1.4, cy + r * 1.3, cz + r * 1.6);
+		camera.near = Math.max(.05, r * .02);
+		camera.far = r * 8 + 40;
+		camera.updateProjectionMatrix();
+		if (controls.current) {
+			controls.current.target.set(cx, cy, cz);
+			controls.current.update();
+		}
+	}, [scene, camera]);
+	return /* @__PURE__ */ jsx(OrbitControls, {
+		ref: controls,
+		makeDefault: true,
+		enableDamping: true,
+		dampingFactor: .1
+	});
+}
+function Building3D(props) {
+	const { document: doc, floorIds } = props;
+	const scene = useMemo(() => build3DScene(doc, {
+		floorIds,
+		exploded: props.exploded,
+		explodeGap: props.explodeGap,
+		showSlabs: props.showSlabs
+	}), [
+		doc,
+		floorIds,
+		props.exploded,
+		props.explodeGap,
+		props.showSlabs
+	]);
+	const wallColor = colorFor(doc, void 0, "#e8e6e1");
+	const isSelected = (id) => props.selected?.id === id;
+	return /* @__PURE__ */ jsx("div", {
+		className: props.className,
+		style: {
+			width: "100%",
+			height: "100%",
+			background: "#0f1115"
+		},
+		children: /* @__PURE__ */ jsxs(Canvas, {
+			shadows: true,
+			dpr: [1, 2],
+			camera: {
+				position: [
+					12,
+					10,
+					14
+				],
+				fov: 45
+			},
+			gl: { antialias: true },
+			onPointerMissed: () => props.onSelect?.(null),
+			children: [
+				/* @__PURE__ */ jsx("color", {
+					attach: "background",
+					args: ["#0f1115"]
+				}),
+				/* @__PURE__ */ jsx("hemisphereLight", {
+					intensity: .55,
+					groundColor: "#1a1c22"
+				}),
+				/* @__PURE__ */ jsx("ambientLight", { intensity: .35 }),
+				/* @__PURE__ */ jsx("directionalLight", {
+					position: [
+						scene.center[0] + 20,
+						scene.center[1] + 35,
+						scene.center[2] + 15
+					],
+					intensity: 1.1,
+					castShadow: true,
+					"shadow-mapSize": [2048, 2048]
+				}),
+				/* @__PURE__ */ jsx("gridHelper", {
+					args: [
+						200,
+						200,
+						"#2a2d35",
+						"#1c1e24"
+					],
+					position: [
+						scene.center[0],
+						-.01,
+						scene.center[2]
+					]
+				}),
+				scene.slabs.map((s) => /* @__PURE__ */ jsxs("mesh", {
+					position: s.position,
+					receiveShadow: true,
+					onClick: (e) => {
+						e.stopPropagation();
+						props.onSelect?.({
+							kind: "floor",
+							id: s.floorId
+						});
+					},
+					children: [/* @__PURE__ */ jsx("boxGeometry", { args: s.size }), /* @__PURE__ */ jsx("meshStandardMaterial", {
+						color: isSelected(s.floorId) ? ACCENT : "#3a3d44",
+						roughness: .95,
+						polygonOffset: true,
+						polygonOffsetFactor: 1,
+						polygonOffsetUnits: 1
+					})]
+				}, s.key)),
+				scene.boxes.map((b) => {
+					const sel = isSelected(b.entityId);
+					return /* @__PURE__ */ jsxs("mesh", {
+						position: b.position,
+						rotation: [
+							0,
+							b.rotationY,
+							0
+						],
+						castShadow: true,
+						receiveShadow: true,
+						onClick: (e) => {
+							e.stopPropagation();
+							props.onSelect?.({
+								kind: "wall",
+								id: b.entityId
+							});
+						},
+						children: [/* @__PURE__ */ jsx("boxGeometry", { args: b.size }), /* @__PURE__ */ jsx("meshStandardMaterial", {
+							color: sel ? ACCENT : colorFor(doc, b.materialId, wallColor),
+							roughness: .9,
+							wireframe: props.wireframe,
+							transparent: props.xray,
+							opacity: props.xray ? .25 : 1
+						})]
+					}, b.key);
+				}),
+				scene.panels.map((p) => {
+					const sel = isSelected(p.entityId);
+					const isGlass = p.kind === "window";
+					return /* @__PURE__ */ jsxs("mesh", {
+						position: p.position,
+						rotation: [
+							0,
+							p.rotationY,
+							0
+						],
+						castShadow: true,
+						onClick: (e) => {
+							e.stopPropagation();
+							props.onSelect?.({
+								kind: "opening",
+								id: p.entityId
+							});
+						},
+						children: [/* @__PURE__ */ jsx("boxGeometry", { args: p.size }), /* @__PURE__ */ jsx("meshStandardMaterial", {
+							color: sel ? ACCENT : isGlass ? "#bcd6e6" : "#6b4b2f",
+							roughness: isGlass ? .05 : .6,
+							metalness: isGlass ? .1 : 0,
+							transparent: isGlass || props.xray,
+							opacity: isGlass ? .4 : props.xray ? .3 : 1,
+							wireframe: props.wireframe
+						})]
+					}, p.key);
+				}),
+				scene.objects.map((o) => {
+					const sel = isSelected(o.entityId);
+					return /* @__PURE__ */ jsxs("mesh", {
+						position: o.position,
+						rotation: [
+							0,
+							o.rotationY,
+							0
+						],
+						castShadow: true,
+						receiveShadow: true,
+						onClick: (e) => {
+							e.stopPropagation();
+							props.onSelect?.({
+								kind: "object",
+								id: o.entityId
+							});
+						},
+						children: [/* @__PURE__ */ jsx("boxGeometry", { args: o.size }), /* @__PURE__ */ jsx("meshStandardMaterial", {
+							color: sel ? ACCENT : furnitureColor(o.objectType),
+							roughness: .7,
+							wireframe: props.wireframe,
+							transparent: props.xray,
+							opacity: props.xray ? .35 : 1
+						})]
+					}, o.key);
+				}),
+				/* @__PURE__ */ jsx(CameraRig, { scene })
+			]
+		})
+	});
+}
+//#endregion
+export { Building3D, build3DScene };
+
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../src/scene3d.ts","../src/Building3D.tsx"],"sourcesContent":["import type { BuildingDocument } from \"@react-arch/core\";\nimport { allFloors, furnitureDims } from \"@react-arch/core\";\nimport { bounds, wallBoxes, wallDirection, wallLength, type Vec2 } from \"@react-arch/geometry\";\n\n/**\n * Plan→world mapping: plan X → world X, plan Y → world Z, height → world Y.\n * All records below carry positions/rotations/sizes ready to drop onto meshes.\n */\n\nexport interface BoxMesh {\n  key: string;\n  entityId: string;\n  floorId: string;\n  kind: \"wall\";\n  position: [number, number, number];\n  rotationY: number;\n  size: [number, number, number];\n  materialId?: string;\n}\nexport interface SlabMesh {\n  key: string;\n  entityId: string;\n  floorId: string;\n  kind: \"slab\";\n  position: [number, number, number];\n  size: [number, number, number];\n}\nexport interface PanelMesh {\n  key: string;\n  entityId: string;\n  floorId: string;\n  kind: \"door\" | \"window\" | \"opening\";\n  position: [number, number, number];\n  rotationY: number;\n  size: [number, number, number];\n}\n\nexport interface ObjectMesh {\n  key: string;\n  entityId: string;\n  floorId: string;\n  kind: \"object\";\n  objectType: string;\n  position: [number, number, number];\n  rotationY: number;\n  size: [number, number, number];\n}\n\nexport interface Scene3D {\n  boxes: BoxMesh[];\n  slabs: SlabMesh[];\n  panels: PanelMesh[];\n  objects: ObjectMesh[];\n  center: [number, number, number];\n  radius: number;\n}\n\nexport interface Build3DOptions {\n  floorIds: string[] | \"all\";\n  exploded?: boolean;\n  explodeGap?: number;\n  showSlabs?: boolean;\n}\n\nconst SLAB_THICKNESS = 0.14;\n/** Drop the slab top slightly below the floor line to avoid sharing a plane\n * with the wall-tops of the floor below (prevents z-fighting). 2 cm, invisible. */\nconst SLAB_TOP_GAP = 0.02;\n\nexport function build3DScene(doc: BuildingDocument, opts: Build3DOptions): Scene3D {\n  const floors = allFloors(doc);\n  const ordered = [...floors].sort((a, b) => a.elevation - b.elevation);\n  const gap = opts.explodeGap ?? 3;\n\n  const boxes: BoxMesh[] = [];\n  const slabs: SlabMesh[] = [];\n  const panels: PanelMesh[] = [];\n  const objects: ObjectMesh[] = [];\n  const allPts: Vec2[] = [];\n  let minY = Infinity;\n  let maxY = -Infinity;\n\n  ordered.forEach((floor, index) => {\n    const visible = opts.floorIds === \"all\" ? floor.visible : opts.floorIds.includes(floor.id);\n    if (!visible) return;\n    const elevation = floor.elevation + (opts.exploded ? index * gap : 0);\n    minY = Math.min(minY, elevation);\n    maxY = Math.max(maxY, elevation + floor.height);\n\n    const wallById = new Map(floor.walls.map((w) => [w.id, w]));\n    const openingsByWall = new Map<string, typeof floor.openings>();\n    for (const o of floor.openings) {\n      const arr = openingsByWall.get(o.wallId) ?? [];\n      arr.push(o);\n      openingsByWall.set(o.wallId, arr);\n    }\n\n    for (const wall of floor.walls) {\n      allPts.push(wall.start, wall.end);\n      const dir = wallDirection(wall);\n      const theta = Math.atan2(dir[1], dir[0]);\n      const wallOpenings = (openingsByWall.get(wall.id) ?? []).map((o) => ({\n        offset: o.offset,\n        width: o.width,\n        height: o.height,\n        sillHeight: o.sillHeight,\n      }));\n      // Extend each end by half-thickness so walls overlap and fill corners.\n      const segs = wallBoxes(wall, wallOpenings, wall.height, wall.thickness / 2);\n      segs.forEach((s, i) => {\n        const along = (s.along0 + s.along1) / 2;\n        const px = wall.start[0] + dir[0] * along;\n        const py = wall.start[1] + dir[1] * along;\n        boxes.push({\n          key: `${wall.id}-${i}`,\n          entityId: wall.id,\n          floorId: floor.id,\n          kind: \"wall\",\n          position: [px, elevation + (s.z0 + s.z1) / 2, py],\n          rotationY: -theta,\n          size: [Math.max(s.along1 - s.along0, 0.001), Math.max(s.z1 - s.z0, 0.001), wall.thickness],\n          materialId: wall.materialId,\n        });\n      });\n    }\n\n    for (const o of floor.openings) {\n      const wall = wallById.get(o.wallId);\n      if (!wall) continue;\n      const dir = wallDirection(wall);\n      const theta = Math.atan2(dir[1], dir[0]);\n      const px = wall.start[0] + dir[0] * o.offset;\n      const py = wall.start[1] + dir[1] * o.offset;\n      const depth = o.type === \"window\" ? 0.05 : wall.thickness * 0.6;\n      panels.push({\n        key: o.id,\n        entityId: o.id,\n        floorId: floor.id,\n        kind: o.type,\n        position: [px, elevation + o.sillHeight + o.height / 2, py],\n        rotationY: -theta,\n        size: [Math.max(o.width - 0.04, 0.05), Math.max(o.height - 0.04, 0.05), depth],\n      });\n    }\n\n    for (const ob of floor.objects) {\n      const d = furnitureDims(ob.type, ob.scale);\n      objects.push({\n        key: ob.id,\n        entityId: ob.id,\n        floorId: floor.id,\n        kind: \"object\",\n        objectType: ob.type,\n        position: [ob.position[0], elevation + ob.position[2] + d.height / 2, ob.position[1]],\n        rotationY: -ob.rotation[2],\n        size: [d.width, d.height, d.depth],\n      });\n    }\n\n    if (opts.showSlabs !== false && floor.walls.length > 0) {\n      const b = bounds(floor.walls.flatMap((w) => [w.start, w.end]));\n      slabs.push({\n        key: `slab-${floor.id}`,\n        entityId: floor.id,\n        floorId: floor.id,\n        kind: \"slab\",\n        // Sit the slab top SLAB_TOP_GAP below the floor line so it is never\n        // coplanar with the tops of the walls of the floor below (which reach\n        // exactly this elevation) — the root cause of the z-fighting seam.\n        position: [(b.min[0] + b.max[0]) / 2, elevation - SLAB_TOP_GAP - SLAB_THICKNESS / 2, (b.min[1] + b.max[1]) / 2],\n        size: [b.width + 0.4, SLAB_THICKNESS, b.height + 0.4],\n      });\n    }\n  });\n\n  const b = bounds(allPts);\n  const cx = (b.min[0] + b.max[0]) / 2;\n  const cz = (b.min[1] + b.max[1]) / 2;\n  const cy = Number.isFinite(minY) ? (minY + maxY) / 2 : 1.5;\n  const radius = Math.max(b.width, b.height, maxY - minY, 4) * 0.75;\n  return { boxes, slabs, panels, objects, center: [cx, cy, cz], radius };\n}\n","import { useEffect, useMemo, useRef } from \"react\";\nimport { Canvas, useThree } from \"@react-three/fiber\";\nimport { OrbitControls } from \"@react-three/drei\";\nimport type { BuildingDocument, EntityRef } from \"@react-arch/core\";\nimport { furnitureColor } from \"@react-arch/core\";\nimport { build3DScene, type Scene3D } from \"./scene3d.js\";\n\nexport interface Building3DProps {\n  document: BuildingDocument;\n  floorIds: string[] | \"all\";\n  selected?: EntityRef | null;\n  onSelect?: (ref: EntityRef | null) => void;\n  exploded?: boolean;\n  explodeGap?: number;\n  wireframe?: boolean;\n  xray?: boolean;\n  showSlabs?: boolean;\n  className?: string;\n}\n\nconst ACCENT = \"#4c8eff\";\n\nfunction colorFor(doc: BuildingDocument, materialId: string | undefined, fallback: string): string {\n  if (!materialId) return fallback;\n  return doc.materials.find((m) => m.id === materialId)?.baseColor ?? fallback;\n}\n\nfunction CameraRig({ scene }: { scene: Scene3D }) {\n  const { camera } = useThree();\n  const controls = useRef<any>(null);\n  useEffect(() => {\n    const [cx, cy, cz] = scene.center;\n    const r = scene.radius;\n    camera.position.set(cx + r * 1.4, cy + r * 1.3, cz + r * 1.6);\n    // Keep the near/far range tight for good depth-buffer precision (reduces\n    // z-fighting between stacked floors that share a plane).\n    camera.near = Math.max(0.05, r * 0.02);\n    camera.far = r * 8 + 40;\n    camera.updateProjectionMatrix();\n    if (controls.current) {\n      controls.current.target.set(cx, cy, cz);\n      controls.current.update();\n    }\n  }, [scene, camera]);\n  return <OrbitControls ref={controls} makeDefault enableDamping dampingFactor={0.1} />;\n}\n\nexport function Building3D(props: Building3DProps) {\n  const { document: doc, floorIds } = props;\n  const scene = useMemo(\n    () => build3DScene(doc, { floorIds, exploded: props.exploded, explodeGap: props.explodeGap, showSlabs: props.showSlabs }),\n    [doc, floorIds, props.exploded, props.explodeGap, props.showSlabs],\n  );\n\n  const wallColor = colorFor(doc, undefined, \"#e8e6e1\");\n  const isSelected = (id: string) => props.selected?.id === id;\n\n  return (\n    <div className={props.className} style={{ width: \"100%\", height: \"100%\", background: \"#0f1115\" }}>\n      <Canvas\n        shadows\n        dpr={[1, 2]}\n        camera={{ position: [12, 10, 14], fov: 45 }}\n        gl={{ antialias: true }}\n        onPointerMissed={() => props.onSelect?.(null)}\n      >\n        <color attach=\"background\" args={[\"#0f1115\"]} />\n        <hemisphereLight intensity={0.55} groundColor=\"#1a1c22\" />\n        <ambientLight intensity={0.35} />\n        <directionalLight\n          position={[scene.center[0] + 20, scene.center[1] + 35, scene.center[2] + 15]}\n          intensity={1.1}\n          castShadow\n          shadow-mapSize={[2048, 2048]}\n        />\n\n        {/* Ground reference grid */}\n        <gridHelper args={[200, 200, \"#2a2d35\", \"#1c1e24\"]} position={[scene.center[0], -0.01, scene.center[2]]} />\n\n        {scene.slabs.map((s) => (\n          <mesh key={s.key} position={s.position} receiveShadow\n            onClick={(e) => { e.stopPropagation(); props.onSelect?.({ kind: \"floor\", id: s.floorId }); }}>\n            <boxGeometry args={s.size} />\n            {/* polygonOffset pushes the slab slightly back in depth so it never\n                ties with a coplanar wall-top from the floor below. */}\n            <meshStandardMaterial\n              color={isSelected(s.floorId) ? ACCENT : \"#3a3d44\"}\n              roughness={0.95}\n              polygonOffset\n              polygonOffsetFactor={1}\n              polygonOffsetUnits={1}\n            />\n          </mesh>\n        ))}\n\n        {scene.boxes.map((b) => {\n          const sel = isSelected(b.entityId);\n          return (\n            <mesh key={b.key} position={b.position} rotation={[0, b.rotationY, 0]} castShadow receiveShadow\n              onClick={(e) => { e.stopPropagation(); props.onSelect?.({ kind: \"wall\", id: b.entityId }); }}>\n              <boxGeometry args={b.size} />\n              <meshStandardMaterial\n                color={sel ? ACCENT : colorFor(doc, b.materialId, wallColor)}\n                roughness={0.9}\n                wireframe={props.wireframe}\n                transparent={props.xray}\n                opacity={props.xray ? 0.25 : 1}\n              />\n            </mesh>\n          );\n        })}\n\n        {scene.panels.map((p) => {\n          const sel = isSelected(p.entityId);\n          const isGlass = p.kind === \"window\";\n          return (\n            <mesh key={p.key} position={p.position} rotation={[0, p.rotationY, 0]} castShadow\n              onClick={(e) => { e.stopPropagation(); props.onSelect?.({ kind: \"opening\", id: p.entityId }); }}>\n              <boxGeometry args={p.size} />\n              <meshStandardMaterial\n                color={sel ? ACCENT : isGlass ? \"#bcd6e6\" : \"#6b4b2f\"}\n                roughness={isGlass ? 0.05 : 0.6}\n                metalness={isGlass ? 0.1 : 0}\n                transparent={isGlass || props.xray}\n                opacity={isGlass ? 0.4 : props.xray ? 0.3 : 1}\n                wireframe={props.wireframe}\n              />\n            </mesh>\n          );\n        })}\n\n        {scene.objects.map((o) => {\n          const sel = isSelected(o.entityId);\n          return (\n            <mesh key={o.key} position={o.position} rotation={[0, o.rotationY, 0]} castShadow receiveShadow\n              onClick={(e) => { e.stopPropagation(); props.onSelect?.({ kind: \"object\", id: o.entityId }); }}>\n              <boxGeometry args={o.size} />\n              <meshStandardMaterial\n                color={sel ? ACCENT : furnitureColor(o.objectType)}\n                roughness={0.7}\n                wireframe={props.wireframe}\n                transparent={props.xray}\n                opacity={props.xray ? 0.35 : 1}\n              />\n            </mesh>\n          );\n        })}\n\n        <CameraRig scene={scene} />\n      </Canvas>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;AAgEA,MAAM,iBAAiB;;;AAGvB,MAAM,eAAe;AAErB,SAAgB,aAAa,KAAuB,MAA+B;CAEjF,MAAM,UAAU,CAAC,GADF,UAAU,GACA,CAAC,CAAC,CAAC,MAAM,GAAG,MAAM,EAAE,YAAY,EAAE,SAAS;CACpE,MAAM,MAAM,KAAK,cAAc;CAE/B,MAAM,QAAmB,CAAC;CAC1B,MAAM,QAAoB,CAAC;CAC3B,MAAM,SAAsB,CAAC;CAC7B,MAAM,UAAwB,CAAC;CAC/B,MAAM,SAAiB,CAAC;CACxB,IAAI,OAAO;CACX,IAAI,OAAO;CAEX,QAAQ,SAAS,OAAO,UAAU;EAEhC,IAAI,EADY,KAAK,aAAa,QAAQ,MAAM,UAAU,KAAK,SAAS,SAAS,MAAM,EAAE,IAC3E;EACd,MAAM,YAAY,MAAM,aAAa,KAAK,WAAW,QAAQ,MAAM;EACnE,OAAO,KAAK,IAAI,MAAM,SAAS;EAC/B,OAAO,KAAK,IAAI,MAAM,YAAY,MAAM,MAAM;EAE9C,MAAM,WAAW,IAAI,IAAI,MAAM,MAAM,KAAK,MAAM,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC;EAC1D,MAAM,iCAAiB,IAAI,IAAmC;EAC9D,KAAK,MAAM,KAAK,MAAM,UAAU;GAC9B,MAAM,MAAM,eAAe,IAAI,EAAE,MAAM,KAAK,CAAC;GAC7C,IAAI,KAAK,CAAC;GACV,eAAe,IAAI,EAAE,QAAQ,GAAG;EAClC;EAEA,KAAK,MAAM,QAAQ,MAAM,OAAO;GAC9B,OAAO,KAAK,KAAK,OAAO,KAAK,GAAG;GAChC,MAAM,MAAM,cAAc,IAAI;GAC9B,MAAM,QAAQ,KAAK,MAAM,IAAI,IAAI,IAAI,EAAE;GASvC,UADuB,OAPD,eAAe,IAAI,KAAK,EAAE,KAAK,CAAC,EAAA,CAAG,KAAK,OAAO;IACnE,QAAQ,EAAE;IACV,OAAO,EAAE;IACT,QAAQ,EAAE;IACV,YAAY,EAAE;GAChB,EAEwC,GAAG,KAAK,QAAQ,KAAK,YAAY,CACtE,CAAC,CAAC,SAAS,GAAG,MAAM;IACrB,MAAM,SAAS,EAAE,SAAS,EAAE,UAAU;IACtC,MAAM,KAAK,KAAK,MAAM,KAAK,IAAI,KAAK;IACpC,MAAM,KAAK,KAAK,MAAM,KAAK,IAAI,KAAK;IACpC,MAAM,KAAK;KACT,KAAK,GAAG,KAAK,GAAG,GAAG;KACnB,UAAU,KAAK;KACf,SAAS,MAAM;KACf,MAAM;KACN,UAAU;MAAC;MAAI,aAAa,EAAE,KAAK,EAAE,MAAM;MAAG;KAAE;KAChD,WAAW,CAAC;KACZ,MAAM;MAAC,KAAK,IAAI,EAAE,SAAS,EAAE,QAAQ,IAAK;MAAG,KAAK,IAAI,EAAE,KAAK,EAAE,IAAI,IAAK;MAAG,KAAK;KAAS;KACzF,YAAY,KAAK;IACnB,CAAC;GACH,CAAC;EACH;EAEA,KAAK,MAAM,KAAK,MAAM,UAAU;GAC9B,MAAM,OAAO,SAAS,IAAI,EAAE,MAAM;GAClC,IAAI,CAAC,MAAM;GACX,MAAM,MAAM,cAAc,IAAI;GAC9B,MAAM,QAAQ,KAAK,MAAM,IAAI,IAAI,IAAI,EAAE;GACvC,MAAM,KAAK,KAAK,MAAM,KAAK,IAAI,KAAK,EAAE;GACtC,MAAM,KAAK,KAAK,MAAM,KAAK,IAAI,KAAK,EAAE;GACtC,MAAM,QAAQ,EAAE,SAAS,WAAW,MAAO,KAAK,YAAY;GAC5D,OAAO,KAAK;IACV,KAAK,EAAE;IACP,UAAU,EAAE;IACZ,SAAS,MAAM;IACf,MAAM,EAAE;IACR,UAAU;KAAC;KAAI,YAAY,EAAE,aAAa,EAAE,SAAS;KAAG;IAAE;IAC1D,WAAW,CAAC;IACZ,MAAM;KAAC,KAAK,IAAI,EAAE,QAAQ,KAAM,GAAI;KAAG,KAAK,IAAI,EAAE,SAAS,KAAM,GAAI;KAAG;IAAK;GAC/E,CAAC;EACH;EAEA,KAAK,MAAM,MAAM,MAAM,SAAS;GAC9B,MAAM,IAAI,cAAc,GAAG,MAAM,GAAG,KAAK;GACzC,QAAQ,KAAK;IACX,KAAK,GAAG;IACR,UAAU,GAAG;IACb,SAAS,MAAM;IACf,MAAM;IACN,YAAY,GAAG;IACf,UAAU;KAAC,GAAG,SAAS;KAAI,YAAY,GAAG,SAAS,KAAK,EAAE,SAAS;KAAG,GAAG,SAAS;IAAE;IACpF,WAAW,CAAC,GAAG,SAAS;IACxB,MAAM;KAAC,EAAE;KAAO,EAAE;KAAQ,EAAE;IAAK;GACnC,CAAC;EACH;EAEA,IAAI,KAAK,cAAc,SAAS,MAAM,MAAM,SAAS,GAAG;GACtD,MAAM,IAAI,OAAO,MAAM,MAAM,SAAS,MAAM,CAAC,EAAE,OAAO,EAAE,GAAG,CAAC,CAAC;GAC7D,MAAM,KAAK;IACT,KAAK,QAAQ,MAAM;IACnB,UAAU,MAAM;IAChB,SAAS,MAAM;IACf,MAAM;IAIN,UAAU;MAAE,EAAE,IAAI,KAAK,EAAE,IAAI,MAAM;KAAG,YAAY,eAAe,iBAAiB;MAAI,EAAE,IAAI,KAAK,EAAE,IAAI,MAAM;IAAC;IAC9G,MAAM;KAAC,EAAE,QAAQ;KAAK;KAAgB,EAAE,SAAS;IAAG;GACtD,CAAC;EACH;CACF,CAAC;CAED,MAAM,IAAI,OAAO,MAAM;CACvB,MAAM,MAAM,EAAE,IAAI,KAAK,EAAE,IAAI,MAAM;CACnC,MAAM,MAAM,EAAE,IAAI,KAAK,EAAE,IAAI,MAAM;CACnC,MAAM,KAAK,OAAO,SAAS,IAAI,KAAK,OAAO,QAAQ,IAAI;CACvD,MAAM,SAAS,KAAK,IAAI,EAAE,OAAO,EAAE,QAAQ,OAAO,MAAM,CAAC,IAAI;CAC7D,OAAO;EAAE;EAAO;EAAO;EAAQ;EAAS,QAAQ;GAAC;GAAI;GAAI;EAAE;EAAG;CAAO;AACvE;;;ACjKA,MAAM,SAAS;AAEf,SAAS,SAAS,KAAuB,YAAgC,UAA0B;CACjG,IAAI,CAAC,YAAY,OAAO;CACxB,OAAO,IAAI,UAAU,MAAM,MAAM,EAAE,OAAO,UAAU,CAAC,EAAE,aAAa;AACtE;AAEA,SAAS,UAAU,EAAE,SAA6B;CAChD,MAAM,EAAE,WAAW,SAAS;CAC5B,MAAM,WAAW,OAAY,IAAI;CACjC,gBAAgB;EACd,MAAM,CAAC,IAAI,IAAI,MAAM,MAAM;EAC3B,MAAM,IAAI,MAAM;EAChB,OAAO,SAAS,IAAI,KAAK,IAAI,KAAK,KAAK,IAAI,KAAK,KAAK,IAAI,GAAG;EAG5D,OAAO,OAAO,KAAK,IAAI,KAAM,IAAI,GAAI;EACrC,OAAO,MAAM,IAAI,IAAI;EACrB,OAAO,uBAAuB;EAC9B,IAAI,SAAS,SAAS;GACpB,SAAS,QAAQ,OAAO,IAAI,IAAI,IAAI,EAAE;GACtC,SAAS,QAAQ,OAAO;EAC1B;CACF,GAAG,CAAC,OAAO,MAAM,CAAC;CAClB,OAAO,oBAAC,eAAD;EAAe,KAAK;EAAU,aAAA;EAAY,eAAA;EAAc,eAAe;CAAM,CAAA;AACtF;AAEA,SAAgB,WAAW,OAAwB;CACjD,MAAM,EAAE,UAAU,KAAK,aAAa;CACpC,MAAM,QAAQ,cACN,aAAa,KAAK;EAAE;EAAU,UAAU,MAAM;EAAU,YAAY,MAAM;EAAY,WAAW,MAAM;CAAU,CAAC,GACxH;EAAC;EAAK;EAAU,MAAM;EAAU,MAAM;EAAY,MAAM;CAAS,CACnE;CAEA,MAAM,YAAY,SAAS,KAAK,KAAA,GAAW,SAAS;CACpD,MAAM,cAAc,OAAe,MAAM,UAAU,OAAO;CAE1D,OACE,oBAAC,OAAD;EAAK,WAAW,MAAM;EAAW,OAAO;GAAE,OAAO;GAAQ,QAAQ;GAAQ,YAAY;EAAU;YAC7F,qBAAC,QAAD;GACE,SAAA;GACA,KAAK,CAAC,GAAG,CAAC;GACV,QAAQ;IAAE,UAAU;KAAC;KAAI;KAAI;IAAE;IAAG,KAAK;GAAG;GAC1C,IAAI,EAAE,WAAW,KAAK;GACtB,uBAAuB,MAAM,WAAW,IAAI;aAL9C;IAOE,oBAAC,SAAD;KAAO,QAAO;KAAa,MAAM,CAAC,SAAS;IAAI,CAAA;IAC/C,oBAAC,mBAAD;KAAiB,WAAW;KAAM,aAAY;IAAW,CAAA;IACzD,oBAAC,gBAAD,EAAc,WAAW,IAAO,CAAA;IAChC,oBAAC,oBAAD;KACE,UAAU;MAAC,MAAM,OAAO,KAAK;MAAI,MAAM,OAAO,KAAK;MAAI,MAAM,OAAO,KAAK;KAAE;KAC3E,WAAW;KACX,YAAA;KACA,kBAAgB,CAAC,MAAM,IAAI;IAC5B,CAAA;IAGD,oBAAC,cAAD;KAAY,MAAM;MAAC;MAAK;MAAK;MAAW;KAAS;KAAG,UAAU;MAAC,MAAM,OAAO;MAAI;MAAO,MAAM,OAAO;KAAE;IAAI,CAAA;IAEzG,MAAM,MAAM,KAAK,MAChB,qBAAC,QAAD;KAAkB,UAAU,EAAE;KAAU,eAAA;KACtC,UAAU,MAAM;MAAE,EAAE,gBAAgB;MAAG,MAAM,WAAW;OAAE,MAAM;OAAS,IAAI,EAAE;MAAQ,CAAC;KAAG;eAD7F,CAEE,oBAAC,eAAD,EAAa,MAAM,EAAE,KAAO,CAAA,GAG5B,oBAAC,wBAAD;MACE,OAAO,WAAW,EAAE,OAAO,IAAI,SAAS;MACxC,WAAW;MACX,eAAA;MACA,qBAAqB;MACrB,oBAAoB;KACrB,CAAA,CACG;OAZK,EAAE,GAYP,CACP;IAEA,MAAM,MAAM,KAAK,MAAM;KACtB,MAAM,MAAM,WAAW,EAAE,QAAQ;KACjC,OACE,qBAAC,QAAD;MAAkB,UAAU,EAAE;MAAU,UAAU;OAAC;OAAG,EAAE;OAAW;MAAC;MAAG,YAAA;MAAW,eAAA;MAChF,UAAU,MAAM;OAAE,EAAE,gBAAgB;OAAG,MAAM,WAAW;QAAE,MAAM;QAAQ,IAAI,EAAE;OAAS,CAAC;MAAG;gBAD7F,CAEE,oBAAC,eAAD,EAAa,MAAM,EAAE,KAAO,CAAA,GAC5B,oBAAC,wBAAD;OACE,OAAO,MAAM,SAAS,SAAS,KAAK,EAAE,YAAY,SAAS;OAC3D,WAAW;OACX,WAAW,MAAM;OACjB,aAAa,MAAM;OACnB,SAAS,MAAM,OAAO,MAAO;MAC9B,CAAA,CACG;QAVK,EAAE,GAUP;IAEV,CAAC;IAEA,MAAM,OAAO,KAAK,MAAM;KACvB,MAAM,MAAM,WAAW,EAAE,QAAQ;KACjC,MAAM,UAAU,EAAE,SAAS;KAC3B,OACE,qBAAC,QAAD;MAAkB,UAAU,EAAE;MAAU,UAAU;OAAC;OAAG,EAAE;OAAW;MAAC;MAAG,YAAA;MACrE,UAAU,MAAM;OAAE,EAAE,gBAAgB;OAAG,MAAM,WAAW;QAAE,MAAM;QAAW,IAAI,EAAE;OAAS,CAAC;MAAG;gBADhG,CAEE,oBAAC,eAAD,EAAa,MAAM,EAAE,KAAO,CAAA,GAC5B,oBAAC,wBAAD;OACE,OAAO,MAAM,SAAS,UAAU,YAAY;OAC5C,WAAW,UAAU,MAAO;OAC5B,WAAW,UAAU,KAAM;OAC3B,aAAa,WAAW,MAAM;OAC9B,SAAS,UAAU,KAAM,MAAM,OAAO,KAAM;OAC5C,WAAW,MAAM;MAClB,CAAA,CACG;QAXK,EAAE,GAWP;IAEV,CAAC;IAEA,MAAM,QAAQ,KAAK,MAAM;KACxB,MAAM,MAAM,WAAW,EAAE,QAAQ;KACjC,OACE,qBAAC,QAAD;MAAkB,UAAU,EAAE;MAAU,UAAU;OAAC;OAAG,EAAE;OAAW;MAAC;MAAG,YAAA;MAAW,eAAA;MAChF,UAAU,MAAM;OAAE,EAAE,gBAAgB;OAAG,MAAM,WAAW;QAAE,MAAM;QAAU,IAAI,EAAE;OAAS,CAAC;MAAG;gBAD/F,CAEE,oBAAC,eAAD,EAAa,MAAM,EAAE,KAAO,CAAA,GAC5B,oBAAC,wBAAD;OACE,OAAO,MAAM,SAAS,eAAe,EAAE,UAAU;OACjD,WAAW;OACX,WAAW,MAAM;OACjB,aAAa,MAAM;OACnB,SAAS,MAAM,OAAO,MAAO;MAC9B,CAAA,CACG;QAVK,EAAE,GAUP;IAEV,CAAC;IAED,oBAAC,WAAD,EAAkB,MAAQ,CAAA;GACpB;;CACL,CAAA;AAET"}

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@react-arch/renderer-3d",
+  "version": "0.1.0",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "dependencies": {
+    "@react-arch/core": "0.1.0",
+    "@react-arch/shared": "0.1.0",
+    "@react-arch/geometry": "0.1.0"
+  },
+  "peerDependencies": {
+    "@react-three/drei": ">=9",
+    "@react-three/fiber": ">=8",
+    "react": "^18.3.0",
+    "three": ">=0.160"
+  },
+  "devDependencies": {
+    "@react-three/drei": "^9.114.0",
+    "@react-three/fiber": "^8.17.10",
+    "@types/react": "^18.3.12",
+    "@types/three": "^0.169.0",
+    "react": "^18.3.1",
+    "three": "^0.169.0",
+    "typescript": "^5.7.2"
+  },
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/react-arch/react-arch.git",
+    "directory": "packages/renderer-3d"
+  },
+  "license": "MIT",
+  "scripts": {
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run --passWithNoTests",
+    "lint": "oxlint src",
+    "build": "tsdown"
+  }
+}