@agent-os-lab/agent-game-sdk 0.1.9 → 0.1.10

package/src/office/renderers/three/scene.ts

@@ -10,6 +10,13 @@ const OFFICE_FLOOR_CENTER_X = 16;
 const OFFICE_FLOOR_WIDTH = 68 * OFFICE_LAYOUT_SCALE;
 const OFFICE_FLOOR_DEPTH = 24 * OFFICE_LAYOUT_SCALE;
 const OFFICE_FLOOR_TILE_SIZE = 3;
+const GLASS_FACADE_DEFAULT_HEIGHT = 17.2;
+const GLASS_FACADE_OUTWARD_OFFSET = 0.42;
+const GLASS_FACADE_PANEL_THICKNESS = 0.08;
+const GLASS_FACADE_VERTICAL_OVERLAP = 0.35;
+const GLASS_ROOF_THICKNESS = 0.08;
+const GLASS_FACADE_DETAIL_OFFSET = 0.07;
+const GLASS_FACADE_FRAME_THICKNESS = 0.12;
 
 export function scaleOfficeX(x: number): number {
   return OFFICE_FLOOR_CENTER_X + (x - OFFICE_FLOOR_CENTER_X) * OFFICE_LAYOUT_SCALE;
@@ -162,20 +169,272 @@ export function addLights(scene: THREE.Scene): void {
 }
 
 export function buildOfficeScene(scene: THREE.Scene, layout: ResolvedOfficeLayout): void {
-  buildOfficeBaseFloors(scene, layout);
-  buildOfficeWalls(scene, layout);
-
-  const batcher = new BoxInstanceBatcher(scene);
-  const transparentCache = new TransparentBoxCache();
-  activeBoxBatcher = batcher;
-  activeTransparentBoxCache = transparentCache;
-  try {
-    layout.components.forEach((component) => renderOfficeComponent(scene, component));
-  } finally {
-    activeBoxBatcher = undefined;
-    activeTransparentBoxCache = undefined;
+  buildOfficeGround(scene, layout);
+  buildBuildingBase(scene, layout);
+  buildBuildingStructuralColumns(scene, layout);
+  buildBuildingConnectors(scene, layout);
+  const floorElevations = layout.building.floors.map((floor) => floor.elevation);
+  const firstFloorElevation = Math.min(...floorElevations);
+  const topFloorElevation = Math.max(...floorElevations);
+
+  for (const floor of layout.building.floors) {
+    const floorGroup = new THREE.Group();
+    floorGroup.name = `officeFloor:${floor.id}`;
+    floorGroup.position.y = floor.elevation;
+    const floorTarget = floorGroup as unknown as THREE.Scene;
+    buildOfficeBaseFloors(floorTarget, floor.floorTiles);
+    buildOfficeWalls(floorTarget, floor.walls);
+    const higherFloorElevations = floorElevations.filter((elevation) => elevation > floor.elevation);
+    const glassHeight = higherFloorElevations.length > 0
+      ? Math.min(...higherFloorElevations) - floor.elevation + GLASS_FACADE_VERTICAL_OVERLAP
+      : GLASS_FACADE_DEFAULT_HEIGHT;
+    buildOfficeGlassFacade(floorTarget, floor.floorTiles, glassHeight, {
+      detail: floor.elevation === firstFloorElevation ? "entrance" : undefined,
+      includeRoof: floor.elevation === topFloorElevation,
+    });
+
+    const batcher = new BoxInstanceBatcher(floorTarget);
+    const transparentCache = new TransparentBoxCache();
+    activeBoxBatcher = batcher;
+    activeTransparentBoxCache = transparentCache;
+    try {
+      floor.components.forEach((component) => renderOfficeComponent(floorTarget, component));
+    } finally {
+      activeBoxBatcher = undefined;
+      activeTransparentBoxCache = undefined;
+    }
+    batcher.flush();
+    scene.add(floorGroup);
+  }
+}
+
+function buildBuildingBase(scene: THREE.Scene, layout: ResolvedOfficeLayout): void {
+  const floors = [...layout.building.floors].sort((a, b) => a.elevation - b.elevation);
+  const groundFloor = floors[0];
+  if (!groundFloor) {
+    return;
+  }
+  const bounds = getFloorTileEdges(groundFloor.floorTiles);
+  if (!bounds) {
+    return;
+  }
+
+  const group = new THREE.Group();
+  group.name = "officeBuildingBase";
+  const batcher = new ColoredBoxBatcher(group, "officeBuildingBaseMesh");
+  const width = bounds.maxX - bounds.minX;
+  const depth = bounds.maxZ - bounds.minZ;
+  const x = (bounds.minX + bounds.maxX) / 2;
+  const z = (bounds.minZ + bounds.maxZ) / 2;
+
+  addBaseRing(batcher, 0x9f9a8b, width, depth, x, z, 1.6, 0.48, -0.24);
+  addBaseRing(batcher, 0x858173, width + 1.6, depth + 1.6, x, z, 1.2, 0.16, -0.56);
+  batcher.flush();
+  scene.add(group);
+}
+
+function addBaseRing(
+  batcher: ColoredBoxBatcher,
+  color: number,
+  innerWidth: number,
+  innerDepth: number,
+  x: number,
+  z: number,
+  thickness: number,
+  height: number,
+  y: number,
+): void {
+  batcher.addBox(color, innerWidth + thickness * 2, height, thickness, x, y, z - innerDepth / 2 - thickness / 2, 0);
+  batcher.addBox(color, innerWidth + thickness * 2, height, thickness, x, y, z + innerDepth / 2 + thickness / 2, 0);
+  batcher.addBox(color, thickness, height, innerDepth, x - innerWidth / 2 - thickness / 2, y, z, 0);
+  batcher.addBox(color, thickness, height, innerDepth, x + innerWidth / 2 + thickness / 2, y, z, 0);
+}
+
+function buildBuildingStructuralColumns(scene: THREE.Scene, layout: ResolvedOfficeLayout): void {
+  const floors = [...layout.building.floors].sort((a, b) => a.elevation - b.elevation);
+  if (floors.length < 2) {
+    return;
+  }
+
+  const group = new THREE.Group();
+  group.name = "officeStructuralColumns";
+  const batcher = new BoxInstanceBatcher(group);
+
+  for (let floorIndex = 1; floorIndex < floors.length; floorIndex += 1) {
+    const lowerFloor = floors[floorIndex - 1]!;
+    const upperFloor = floors[floorIndex]!;
+    const bounds = getFloorTileEdges(upperFloor.floorTiles);
+    if (!bounds) {
+      continue;
+    }
+
+    const columnHeight = Math.max(0.1, upperFloor.elevation - lowerFloor.elevation - 0.2);
+    const columnY = lowerFloor.elevation + 0.1 + columnHeight / 2;
+    getStructuralColumnPositions(bounds).forEach((position) => {
+      batcher.addBox(0x9a9688, 0.58, columnHeight, 0.58, position.x, columnY, position.z, 0);
+    });
   }
+
   batcher.flush();
+  scene.add(group);
+}
+
+function getFloorTileEdges(floorTiles: ResolvedOfficeLayout["scene"]["floorTiles"]) {
+  if (floorTiles.length === 0) {
+    return null;
+  }
+  return floorTiles.reduce(
+    (bounds, tile) => ({
+      minX: Math.min(bounds.minX, tile.x - tile.width / 2),
+      maxX: Math.max(bounds.maxX, tile.x + tile.width / 2),
+      minZ: Math.min(bounds.minZ, tile.z - tile.depth / 2),
+      maxZ: Math.max(bounds.maxZ, tile.z + tile.depth / 2),
+    }),
+    {
+      minX: Number.POSITIVE_INFINITY,
+      maxX: Number.NEGATIVE_INFINITY,
+      minZ: Number.POSITIVE_INFINITY,
+      maxZ: Number.NEGATIVE_INFINITY,
+    },
+  );
+}
+
+function getStructuralColumnPositions(bounds: { minX: number; maxX: number; minZ: number; maxZ: number }) {
+  const inset = 1.25;
+  const minX = bounds.minX + inset;
+  const maxX = bounds.maxX - inset;
+  const minZ = bounds.minZ + inset;
+  const maxZ = bounds.maxZ - inset;
+  return [
+    { x: minX, z: minZ },
+    { x: maxX, z: minZ },
+    { x: minX, z: maxZ },
+    { x: maxX, z: maxZ },
+  ];
+}
+
+function buildOfficeGround(scene: THREE.Scene, layout: ResolvedOfficeLayout): void {
+  const group = new THREE.Group();
+  group.name = "officeGroundEnvironment";
+
+  const campusWidth = layout.scene.width + 110;
+  const campusDepth = layout.scene.depth + 92;
+  const centerX = layout.scene.center.x;
+  const centerZ = layout.scene.center.z;
+  const westX = centerX - layout.scene.width / 2 - 18;
+  const southZ = centerZ + layout.scene.depth / 2 + 18;
+  const parkingX = westX - 12;
+  const parkingZ = southZ - 14;
+  const treeGroup = new THREE.Group();
+  treeGroup.name = "officeTrees";
+  const vehicleGroup = new THREE.Group();
+  vehicleGroup.name = "officeVehicles";
+  const batcher = new ColoredBoxBatcher(group, "officeGroundEnvironmentMesh");
+
+  addEnvironmentMarker(group, "officeGroundPlane");
+  addEnvironmentMarker(group, "officeRoad:main");
+  addEnvironmentMarker(group, "officeRoad:service");
+  addEnvironmentMarker(group, "officeSidewalk:south");
+  addEnvironmentMarker(group, "officeSidewalk:west");
+  addEnvironmentMarker(group, "officeParking:visitor");
+  batcher.addBox(0xb9c0b7, campusWidth, 0.08, campusDepth, centerX, -0.16, centerZ, 0);
+  batcher.addBox(0x4b5563, campusWidth - 20, 0.04, 9, centerX, -0.09, southZ, 0);
+  batcher.addBox(0x4b5563, 8, 0.04, campusDepth - 18, westX, -0.09, centerZ, 0);
+  batcher.addBox(0xd7d3c8, campusWidth - 28, 0.04, 3.2, centerX, -0.06, southZ - 6.2, 0);
+  batcher.addBox(0xd7d3c8, 3.2, 0.04, campusDepth - 26, westX + 5.8, -0.06, centerZ, 0);
+  batcher.addBox(0x8d948b, 14, 0.035, 10, parkingX, -0.055, parkingZ, 0);
+
+  for (const xOffset of [-42, -30, -18, -6, 8, 20, 32, 44]) {
+    addTree(batcher, centerX + xOffset, southZ + 7.5);
+  }
+  for (const zOffset of [-28, -16, -4, 8]) {
+    addTree(batcher, westX - 8, centerZ + zOffset);
+  }
+
+  addCar(batcher, centerX - 28, southZ + 0.6, 0xe11d48, 0);
+  addCar(batcher, centerX - 12, southZ - 1.2, 0x2563eb, Math.PI);
+  addCar(batcher, centerX + 18, southZ + 0.7, 0xf59e0b, 0);
+  addCar(batcher, westX, centerZ - 18, 0x14b8a6, Math.PI / 2);
+  addCar(batcher, parkingX, parkingZ, 0xf8fafc, Math.PI / 2);
+  batcher.flush();
+  group.add(treeGroup, vehicleGroup);
+
+  scene.add(group);
+}
+
+function addEnvironmentMarker(scene: THREE.Object3D, name: string): void {
+  const marker = new THREE.Group();
+  marker.name = name;
+  scene.add(marker);
+}
+
+function addTree(batcher: ColoredBoxBatcher, x: number, z: number): void {
+  batcher.addBox(0x7c4a28, 0.36, 1.4, 0.36, x, 0.56, z, 0);
+  batcher.addBox(0x2f6b3f, 1.65, 1.35, 1.65, x, 1.62, z, Math.PI / 4);
+  batcher.addBox(0x3f8550, 1.25, 1.05, 1.25, x, 2.35, z, Math.PI / 4);
+}
+
+function addCar(batcher: ColoredBoxBatcher, x: number, z: number, color: number, rotationY: number): void {
+  batcher.addBox(color, 3.4, 0.7, 1.55, x, 0.28, z, rotationY);
+  batcher.addBox(
+    0xc7d2fe,
+    1.45,
+    0.48,
+    1.18,
+    x + Math.cos(rotationY) * 0.28,
+    0.86,
+    z - Math.sin(rotationY) * 0.28,
+    rotationY,
+  );
+  for (const wheelX of [-1.05, 1.05]) {
+    for (const wheelZ of [-0.72, 0.72]) {
+      addLocalEnvironmentBox(batcher, 0x111827, 0.42, 0.42, 0.18, x, z, wheelX, 0.16, wheelZ, rotationY);
+    }
+  }
+}
+
+function addLocalEnvironmentBox(
+  batcher: ColoredBoxBatcher,
+  color: number,
+  width: number,
+  height: number,
+  depth: number,
+  originX: number,
+  originZ: number,
+  localX: number,
+  y: number,
+  localZ: number,
+  rotationY: number,
+) {
+  const cos = Math.cos(rotationY);
+  const sin = Math.sin(rotationY);
+  batcher.addBox(
+    color,
+    width,
+    height,
+    depth,
+    originX + localX * cos + localZ * sin,
+    y,
+    originZ - localX * sin + localZ * cos,
+    rotationY,
+  );
+}
+
+export const OFFICE_FLOOR_FOCUS_DIM_OPACITY = 0.18;
+
+export function applyOfficeFloorFocus(
+  scene: THREE.Scene,
+  layout: ResolvedOfficeLayout,
+  focusedFloorId: string | null,
+): void {
+  const floorIds = new Set(layout.building.floors.map((floor) => floor.id));
+  scene.children.forEach((child) => {
+    const floorId = parseOfficeFloorGroupId(child.name);
+    if (!floorId || !floorIds.has(floorId)) {
+      return;
+    }
+    setObjectOpacity(child, !focusedFloorId || floorId === focusedFloorId ? 1 : OFFICE_FLOOR_FOCUS_DIM_OPACITY);
+  });
 }
 
 export function disposeObject(object: THREE.Object3D): void {
@@ -193,13 +452,48 @@ export function disposeObject(object: THREE.Object3D): void {
   });
 }
 
+function parseOfficeFloorGroupId(name: string): string | null {
+  return name.startsWith("officeFloor:") ? name.slice("officeFloor:".length) : null;
+}
+
+export function setObjectOpacity(object: THREE.Object3D, opacity: number): void {
+  object.traverse((child) => {
+    const mesh = child as THREE.Mesh;
+    if (!mesh.material) {
+      return;
+    }
+    if (Array.isArray(mesh.material)) {
+      mesh.material = mesh.material.map((material) => prepareFocusMaterial(material, opacity));
+    } else {
+      mesh.material = prepareFocusMaterial(mesh.material, opacity);
+    }
+  });
+}
+
+function prepareFocusMaterial<TMaterial extends THREE.Material>(material: TMaterial, opacity: number): TMaterial {
+  const focusMaterial = (material.userData.officeFocusMaterialCloned ? material : material.clone()) as TMaterial;
+  const baseOpacity = typeof material.userData.officeBaseOpacity === "number" ? material.userData.officeBaseOpacity : material.opacity;
+  const baseTransparent = typeof material.userData.officeBaseTransparent === "boolean" ? material.userData.officeBaseTransparent : material.transparent;
+  const baseDepthWrite = typeof material.userData.officeBaseDepthWrite === "boolean" ? material.userData.officeBaseDepthWrite : material.depthWrite;
+  const resolvedOpacity = baseOpacity * opacity;
+  focusMaterial.userData.officeFocusMaterialCloned = true;
+  focusMaterial.userData.officeBaseOpacity = baseOpacity;
+  focusMaterial.userData.officeBaseTransparent = baseTransparent;
+  focusMaterial.userData.officeBaseDepthWrite = baseDepthWrite;
+  focusMaterial.transparent = baseTransparent || resolvedOpacity < 1;
+  focusMaterial.opacity = resolvedOpacity;
+  focusMaterial.depthWrite = baseDepthWrite && resolvedOpacity >= 1;
+  focusMaterial.needsUpdate = true;
+  return focusMaterial;
+}
+
 class BoxInstanceBatcher {
-  private readonly scene: THREE.Scene;
+  private readonly scene: THREE.Object3D;
   private readonly geometryCache = new Map<string, THREE.BoxGeometry>();
   private readonly materialCache = new Map<number, THREE.MeshLambertMaterial>();
   private readonly batches = new Map<number, THREE.BufferGeometry[]>();
 
-  constructor(scene: THREE.Scene) {
+  constructor(scene: THREE.Object3D) {
     this.scene = scene;
   }
 
@@ -257,6 +551,63 @@ class BoxInstanceBatcher {
   }
 }
 
+class ColoredBoxBatcher {
+  private readonly scene: THREE.Object3D;
+  private readonly name: string;
+  private readonly geometries: THREE.BufferGeometry[] = [];
+
+  constructor(scene: THREE.Object3D, name: string) {
+    this.scene = scene;
+    this.name = name;
+  }
+
+  addBox(
+    color: number,
+    width: number,
+    height: number,
+    depth: number,
+    x: number,
+    y: number,
+    z: number,
+    rotationY: number,
+  ) {
+    const geometry = new THREE.BoxGeometry(width, height, depth);
+    matrixHelper.position.set(x, y, z);
+    matrixHelper.rotation.set(0, rotationY, 0);
+    matrixHelper.scale.set(1, 1, 1);
+    matrixHelper.updateMatrix();
+    geometry.applyMatrix4(matrixHelper.matrix);
+
+    const vertexColor = new THREE.Color(color);
+    const position = geometry.getAttribute("position");
+    const colors = new Float32Array(position.count * 3);
+    for (let index = 0; index < position.count; index += 1) {
+      colors[index * 3] = vertexColor.r;
+      colors[index * 3 + 1] = vertexColor.g;
+      colors[index * 3 + 2] = vertexColor.b;
+    }
+    geometry.setAttribute("color", new THREE.BufferAttribute(colors, 3));
+    this.geometries.push(geometry);
+  }
+
+  flush() {
+    const mergedGeometry = mergeGeometries(this.geometries, false);
+    this.geometries.forEach((geometry) => geometry.dispose());
+    this.geometries.length = 0;
+    if (!mergedGeometry) {
+      return;
+    }
+    const mesh = new THREE.Mesh(
+      mergedGeometry,
+      new THREE.MeshLambertMaterial({ vertexColors: true }),
+    );
+    mesh.castShadow = false;
+    mesh.receiveShadow = true;
+    mesh.name = this.name;
+    this.scene.add(mesh);
+  }
+}
+
 let activeBoxBatcher: BoxInstanceBatcher | undefined;
 
 class TransparentBoxCache {
@@ -294,8 +645,8 @@ class TransparentBoxCache {
 
 let activeTransparentBoxCache: TransparentBoxCache | undefined;
 
-function buildOfficeBaseFloors(scene: THREE.Scene, layout: ResolvedOfficeLayout) {
-  layout.scene.floorTiles.forEach((tile) => {
+function buildOfficeBaseFloors(scene: THREE.Scene, floorTiles: ResolvedOfficeLayout["scene"]["floorTiles"]) {
+  floorTiles.forEach((tile) => {
     addBaseFloor(scene, tile.color, tile.x, tile.z, tile.width, tile.depth);
   });
 }
@@ -335,9 +686,9 @@ function addGridFloorLines(scene: THREE.Scene, x: number, z: number, width: numb
   scene.add(lines);
 }
 
-function buildOfficeWalls(scene: THREE.Scene, layout: ResolvedOfficeLayout) {
+function buildOfficeWalls(scene: THREE.Scene, walls: ResolvedOfficeLayout["scene"]["walls"]) {
   const materialCache = new Map<number, THREE.MeshLambertMaterial>();
-  layout.scene.walls.forEach((wall) => {
+  walls.forEach((wall) => {
     const material = materialCache.get(wall.color) ?? (() => {
       const created = new THREE.MeshLambertMaterial({ color: wall.color });
       materialCache.set(wall.color, created);
@@ -356,6 +707,164 @@ function buildOfficeWalls(scene: THREE.Scene, layout: ResolvedOfficeLayout) {
   });
 }
 
+function buildOfficeGlassFacade(
+  scene: THREE.Scene,
+  floorTiles: ResolvedOfficeLayout["scene"]["floorTiles"],
+  height = GLASS_FACADE_DEFAULT_HEIGHT,
+  options: { detail?: "entrance" | "windows"; includeRoof?: boolean } = {},
+) {
+  const bounds = getFloorTileEdges(floorTiles);
+  if (!bounds) {
+    return;
+  }
+  const geometries: THREE.BufferGeometry[] = [];
+  const group = new THREE.Group();
+  group.name = "officeGlassFacade";
+  const width = bounds.maxX - bounds.minX;
+  const depth = bounds.maxZ - bounds.minZ;
+  const closedWidth = width + GLASS_FACADE_OUTWARD_OFFSET * 2 + GLASS_FACADE_PANEL_THICKNESS;
+  const closedDepth = depth + GLASS_FACADE_OUTWARD_OFFSET * 2 + GLASS_FACADE_PANEL_THICKNESS;
+  const centerX = (bounds.minX + bounds.maxX) / 2;
+  const centerZ = (bounds.minZ + bounds.maxZ) / 2;
+  const panelY = height / 2;
+
+  [
+    { id: "north", width: closedWidth, depth: GLASS_FACADE_PANEL_THICKNESS, x: centerX, z: bounds.minZ - GLASS_FACADE_OUTWARD_OFFSET },
+    { id: "south", width: closedWidth, depth: GLASS_FACADE_PANEL_THICKNESS, x: centerX, z: bounds.maxZ + GLASS_FACADE_OUTWARD_OFFSET },
+    { id: "west", width: GLASS_FACADE_PANEL_THICKNESS, depth: closedDepth, x: bounds.minX - GLASS_FACADE_OUTWARD_OFFSET, z: centerZ },
+    { id: "east", width: GLASS_FACADE_PANEL_THICKNESS, depth: closedDepth, x: bounds.maxX + GLASS_FACADE_OUTWARD_OFFSET, z: centerZ },
+  ].forEach((panel) => {
+    const geometry = new THREE.BoxGeometry(panel.width, height, panel.depth);
+    matrixHelper.position.set(panel.x, panelY, panel.z);
+    matrixHelper.rotation.set(0, 0, 0);
+    matrixHelper.scale.set(1, 1, 1);
+    matrixHelper.updateMatrix();
+    geometry.applyMatrix4(matrixHelper.matrix);
+    geometries.push(geometry);
+
+    const marker = new THREE.Object3D();
+    marker.name = `officeGlassFacade:${panel.id}`;
+    marker.position.set(panel.x, panelY, panel.z);
+    marker.userData.officeGlassFacadePanel = { width: panel.width, height, depth: panel.depth };
+    group.add(marker);
+  });
+
+  if (options.includeRoof) {
+    const geometry = new THREE.BoxGeometry(closedWidth, GLASS_ROOF_THICKNESS, closedDepth);
+    matrixHelper.position.set(centerX, height + GLASS_ROOF_THICKNESS / 2, centerZ);
+    matrixHelper.rotation.set(0, 0, 0);
+    matrixHelper.scale.set(1, 1, 1);
+    matrixHelper.updateMatrix();
+    geometry.applyMatrix4(matrixHelper.matrix);
+    geometries.push(geometry);
+
+    const marker = new THREE.Object3D();
+    marker.name = "officeGlassRoof";
+    marker.position.set(centerX, height, centerZ);
+    marker.userData.officeGlassRoof = { width: closedWidth, height: GLASS_ROOF_THICKNESS, depth: closedDepth };
+    group.add(marker);
+  }
+
+  const mergedGeometry = mergeGeometries(geometries, false);
+  geometries.forEach((geometry) => geometry.dispose());
+  if (!mergedGeometry) {
+    return;
+  }
+  const mesh = new THREE.Mesh(
+    mergedGeometry,
+    new THREE.MeshLambertMaterial({ color: 0x94a3b8, transparent: true, opacity: 0.18, depthWrite: false }),
+  );
+  mesh.name = "officeGlassFacadeMesh";
+  mesh.castShadow = false;
+  mesh.receiveShadow = false;
+  group.add(mesh);
+  if (options.detail === "entrance") {
+    addGlassFacadeEntrance(group, bounds.maxZ + GLASS_FACADE_OUTWARD_OFFSET + GLASS_FACADE_DETAIL_OFFSET, centerX);
+  }
+  scene.add(group);
+}
+
+function addGlassFacadeEntrance(group: THREE.Group, southZ: number, centerX: number) {
+  const panes: THREE.BufferGeometry[] = [];
+  const frames: THREE.BufferGeometry[] = [];
+  const handles: THREE.BufferGeometry[] = [];
+  const doorWidth = 7.2;
+  const doorHeight = 6.4;
+  const doorY = doorHeight / 2;
+  pushBoxGeometry(panes, doorWidth / 2 - 0.22, doorHeight, 0.05, centerX - doorWidth / 4, doorY, southZ);
+  pushBoxGeometry(panes, doorWidth / 2 - 0.22, doorHeight, 0.05, centerX + doorWidth / 4, doorY, southZ);
+  pushBoxGeometry(frames, GLASS_FACADE_FRAME_THICKNESS * 1.35, doorHeight + 0.45, 0.1, centerX - doorWidth / 2, doorY, southZ + 0.02);
+  pushBoxGeometry(frames, GLASS_FACADE_FRAME_THICKNESS * 1.35, doorHeight + 0.45, 0.1, centerX + doorWidth / 2, doorY, southZ + 0.02);
+  pushBoxGeometry(frames, doorWidth + 0.45, GLASS_FACADE_FRAME_THICKNESS * 1.35, 0.1, centerX, doorHeight + 0.12, southZ + 0.02);
+  pushBoxGeometry(frames, doorWidth + 1.4, 0.28, 0.9, centerX, doorHeight + 0.55, southZ + 0.35);
+  pushBoxGeometry(frames, GLASS_FACADE_FRAME_THICKNESS, doorHeight, 0.1, centerX, doorY, southZ + 0.03);
+  pushBoxGeometry(handles, 0.12, 1.2, 0.12, centerX - 0.38, 2.65, southZ + 0.12);
+  pushBoxGeometry(handles, 0.12, 1.2, 0.12, centerX + 0.38, 2.65, southZ + 0.12);
+  addMergedMesh(group, panes, new THREE.MeshLambertMaterial({ color: 0xa5f3fc, transparent: true, opacity: 0.26, depthWrite: false }), "officeGlassFacadeEntrance:panes");
+  addMergedMesh(group, frames, new THREE.MeshLambertMaterial({ color: 0x1f2937 }), "officeGlassFacadeEntrance:frame");
+  addMergedMesh(group, handles, new THREE.MeshLambertMaterial({ color: 0xe5e7eb }), "officeGlassFacadeEntrance:handles");
+  const marker = new THREE.Object3D();
+  marker.name = "officeGlassFacadeEntrance";
+  marker.position.set(centerX, doorY, southZ);
+  group.add(marker);
+}
+
+function pushBoxGeometry(
+  geometries: THREE.BufferGeometry[],
+  width: number,
+  height: number,
+  depth: number,
+  x: number,
+  y: number,
+  z: number,
+) {
+  const geometry = new THREE.BoxGeometry(width, height, depth);
+  matrixHelper.position.set(x, y, z);
+  matrixHelper.rotation.set(0, 0, 0);
+  matrixHelper.scale.set(1, 1, 1);
+  matrixHelper.updateMatrix();
+  geometry.applyMatrix4(matrixHelper.matrix);
+  geometries.push(geometry);
+}
+
+function addMergedMesh(group: THREE.Group, geometries: THREE.BufferGeometry[], material: THREE.Material, name: string) {
+  const geometry = mergeGeometries(geometries, false);
+  geometries.forEach((item) => item.dispose());
+  if (!geometry) {
+    material.dispose();
+    return;
+  }
+  const mesh = new THREE.Mesh(geometry, material);
+  mesh.name = name;
+  mesh.castShadow = false;
+  mesh.receiveShadow = false;
+  group.add(mesh);
+}
+
+function buildBuildingConnectors(scene: THREE.Scene, layout: ResolvedOfficeLayout) {
+  layout.building.connectors.forEach((connector) => {
+    if (connector.stops.length < 2) {
+      return;
+    }
+    const firstStop = connector.stops[0]!;
+    const minY = Math.min(...connector.stops.map((stop) => stop.cabinPosition.y));
+    const maxY = Math.max(...connector.stops.map((stop) => stop.cabinPosition.y));
+    const height = Math.max(0.1, maxY - minY + 2.8);
+    addTransparentBox(
+      scene,
+      0x94a3b8,
+      2.4,
+      height,
+      1.25,
+      firstStop.cabinPosition.x,
+      minY + height / 2 - 1.4,
+      firstStop.cabinPosition.z,
+      0.18,
+      `elevatorShaft:${connector.id}`,
+    );
+  });
+}
+
 function addOfficeWallBox(
   scene: THREE.Scene,
   width: number,
@@ -510,6 +1019,36 @@ function renderOfficeComponent(scene: THREE.Scene, component: ResolvedOfficeComp
         component.props?.depth,
       );
       return;
+    case "diningTable":
+      addDiningTable(scene, x, z);
+      return;
+    case "cafeCounter":
+      addCafeCounter(scene, x, z);
+      return;
+    case "cafeTable":
+      addCafeTable(scene, x, z);
+      return;
+    case "kitchenCounter":
+      addKitchenCounter(scene, x, z);
+      return;
+    case "kitchenStove":
+      addKitchenStove(scene, x, z);
+      return;
+    case "kitchenFridge":
+      addKitchenFridge(scene, x, z);
+      return;
+    case "gardenPlanter":
+      addGardenPlanter(scene, x, z, rotation);
+      return;
+    case "gardenTree":
+      addGardenTree(scene, x, z);
+      return;
+    case "gardenBench":
+      addGardenBench(scene, x, z, rotation);
+      return;
+    case "gardenPath":
+      addGardenPath(scene, x, z, component.props?.width, component.props?.depth, rotation);
+      return;
     case "meetingGlassRoom":
       addMeetingGlassRoom(
         scene,
@@ -581,6 +1120,15 @@ function renderOfficeComponent(scene: THREE.Scene, component: ResolvedOfficeComp
     case "gymMirror":
       addGymMirror(scene, x, z, rotation, component.props?.width, component.props?.faceDirection ?? 1);
       return;
+    case "elevatorDoor":
+      addElevatorDoor(scene, x, z, component.props?.width, component.props?.height);
+      return;
+    case "elevatorFrame":
+      addElevatorFrame(scene, x, z, component.props?.width, component.props?.depth, component.props?.height);
+      return;
+    case "elevatorIndicator":
+      addElevatorIndicator(scene, x, component.position.y ?? 2.6, z, component.props?.width, component.props?.height);
+      return;
     case "glassWall":
     case "glassDoor":
       return;
@@ -643,6 +1191,76 @@ function addMeetingTable(
   addBox(scene, legColor, 0.2, 1.5, 0.2, x + 2.2, 0.75, z + legZ);
 }
 
+function addDiningTable(scene: THREE.Scene, x: number, z: number) {
+  addBox(scene, 0xc98b32, 2.6, 0.14, 1.8, x, 1.05, z);
+  addBox(scene, 0x7c3f12, 0.14, 1.05, 0.14, x - 1.08, 0.52, z - 0.68);
+  addBox(scene, 0x7c3f12, 0.14, 1.05, 0.14, x + 1.08, 0.52, z - 0.68);
+  addBox(scene, 0x7c3f12, 0.14, 1.05, 0.14, x - 1.08, 0.52, z + 0.68);
+  addBox(scene, 0x7c3f12, 0.14, 1.05, 0.14, x + 1.08, 0.52, z + 0.68);
+}
+
+function addCafeCounter(scene: THREE.Scene, x: number, z: number) {
+  addBox(scene, 0x7c2d12, 4.2, 0.78, 0.72, x, 0.39, z);
+  addBox(scene, 0xd6c4a8, 4.38, 0.12, 0.9, x, 0.84, z);
+  addBox(scene, 0x1f2937, 0.72, 0.42, 0.34, x - 1.15, 1.12, z - 0.18);
+  addBox(scene, 0x94a3b8, 0.62, 0.06, 0.26, x - 1.15, 1.36, z - 0.34);
+  addBox(scene, 0x334155, 0.34, 0.36, 0.28, x - 0.38, 1.05, z + 0.08);
+  addBox(scene, 0xf8fafc, 0.18, 0.2, 0.18, x + 0.45, 1.03, z - 0.12);
+  addBox(scene, 0xf8fafc, 0.18, 0.2, 0.18, x + 0.78, 1.03, z - 0.12);
+  addBox(scene, 0xf59e0b, 0.5, 0.18, 0.36, x + 1.35, 1.02, z + 0.1);
+}
+
+function addCafeTable(scene: THREE.Scene, x: number, z: number) {
+  addBox(scene, 0xb7791f, 1.65, 0.12, 1.65, x, 0.9, z);
+  addBox(scene, 0x7c3f12, 0.18, 0.9, 0.18, x, 0.45, z);
+  addBox(scene, 0x7c3f12, 0.9, 0.08, 0.9, x, 0.08, z);
+}
+
+function addKitchenCounter(scene: THREE.Scene, x: number, z: number) {
+  addBox(scene, 0x92400e, 4.8, 0.8, 0.72, x, 0.4, z);
+  addBox(scene, 0xe5e7eb, 4.95, 0.12, 0.9, x, 0.86, z);
+  addBox(scene, 0x64748b, 0.84, 0.08, 0.5, x - 1.35, 0.95, z - 0.02);
+  addBox(scene, 0x94a3b8, 0.52, 0.05, 0.32, x + 1.35, 0.96, z - 0.04);
+}
+
+function addKitchenStove(scene: THREE.Scene, x: number, z: number) {
+  addBox(scene, 0x334155, 1.5, 0.82, 0.82, x, 0.42, z);
+  addBox(scene, 0x111827, 1.2, 0.08, 0.62, x, 0.88, z);
+  addBox(scene, 0xf97316, 0.22, 0.04, 0.22, x - 0.32, 0.94, z - 0.14);
+  addBox(scene, 0xf97316, 0.22, 0.04, 0.22, x + 0.32, 0.94, z + 0.14);
+}
+
+function addKitchenFridge(scene: THREE.Scene, x: number, z: number) {
+  addBox(scene, 0xe2e8f0, 1.1, 2.0, 0.78, x, 1.0, z);
+  addBox(scene, 0xcbd5e1, 1.02, 0.05, 0.8, x, 1.42, z + 0.02);
+  addBox(scene, 0x64748b, 0.06, 0.58, 0.06, x + 0.42, 1.1, z + 0.42);
+}
+
+function addGardenPath(scene: THREE.Scene, x: number, z: number, width = 4, depth = 1, rotation = 0) {
+  addLocalBox(scene, 0xb9b39f, width, 0.05, depth, x, z, 0, 0.05, 0, rotation);
+}
+
+function addGardenPlanter(scene: THREE.Scene, x: number, z: number, rotation = 0) {
+  addLocalBox(scene, 0x8b5e3c, 4.4, 0.5, 1.15, x, z, 0, 0.25, 0, rotation);
+  addLocalBox(scene, 0x4d7c3f, 4.05, 0.18, 0.84, x, z, 0, 0.58, 0, rotation);
+  for (const offset of [-1.35, -0.45, 0.45, 1.35]) {
+    addLocalBox(scene, 0x2f6b3f, 0.52, 0.46, 0.52, x, z, offset, 0.84, 0, rotation + Math.PI / 4);
+  }
+}
+
+function addGardenTree(scene: THREE.Scene, x: number, z: number) {
+  addBox(scene, 0x7c4a28, 0.34, 1.15, 0.34, x, 0.58, z);
+  addBox(scene, 0x2f6b3f, 1.45, 1.15, 1.45, x, 1.35, z, Math.PI / 4);
+  addBox(scene, 0x3f8550, 1.05, 0.88, 1.05, x, 2.02, z, Math.PI / 4);
+}
+
+function addGardenBench(scene: THREE.Scene, x: number, z: number, rotation = 0) {
+  addLocalBox(scene, 0x8b5e3c, 3.1, 0.2, 0.58, x, z, 0, 0.58, 0, rotation);
+  addLocalBox(scene, 0x6b4428, 3.1, 0.72, 0.18, x, z, 0, 0.9, 0.28, rotation);
+  addLocalBox(scene, 0x475569, 0.12, 0.55, 0.12, x, z, -1.25, 0.28, -0.18, rotation);
+  addLocalBox(scene, 0x475569, 0.12, 0.55, 0.12, x, z, 1.25, 0.28, -0.18, rotation);
+}
+
 function addMeetingGlassRoom(
   scene: THREE.Scene,
   roomIndex: number,
@@ -876,6 +1494,22 @@ function addGymMirror(scene: THREE.Scene, x: number, z: number, rotation = 0, wi
   addLocalBox(scene, 0xe0f2fe, 0.08, 1.42, 0.05, x, z, width * 0.18, 1.45, 0.14 * faceDirection, rotation);
 }
 
+function addElevatorDoor(scene: THREE.Scene, x: number, z: number, width = 1.5, height = 2.4) {
+  addBox(scene, 0x475569, width, height, 0.08, x, height / 2, z);
+  addBox(scene, 0xcbd5e1, 0.04, height * 0.84, 0.1, x, height / 2, z + 0.05);
+}
+
+function addElevatorFrame(scene: THREE.Scene, x: number, z: number, width = 2.2, depth = 1.1, height = 2.8) {
+  addBox(scene, 0x334155, width, 0.16, depth, x, height, z);
+  addBox(scene, 0x334155, 0.16, height, depth, x - width / 2, height / 2, z);
+  addBox(scene, 0x334155, 0.16, height, depth, x + width / 2, height / 2, z);
+}
+
+function addElevatorIndicator(scene: THREE.Scene, x: number, y: number, z: number, width = 0.45, height = 0.3) {
+  addBox(scene, 0x0f172a, width, height, 0.08, x, y, z + 0.08);
+  addBox(scene, 0x38bdf8, width * 0.62, height * 0.46, 0.09, x, y, z + 0.13);
+}
+
 function addBox(
   scene: THREE.Scene,
   color: number,