@marble.fun/track-catalog 3.0.0

package/src/pages/play/race/portal-derived-elevator-skins.ts

@@ -0,0 +1,729 @@
+import * as THREE from 'three'
+
+import { VisualSphereGeometry, VisualExtrudeGeometry, VisualBoxGeometry } from '../../../three/visual-geometry'
+import { mergeGeometries } from 'three/examples/jsm/utils/BufferGeometryUtils.js'
+
+import { addJapaneseSakuraKawaraRoof } from './japanese-sakura-kawara-roof'
+import {
+  addEgyptElevatorBlenderPlatform,
+  addEgyptElevatorBlenderShell,
+  applyEgyptElevatorBlenderMaterials,
+  type EgyptElevatorBlenderMaterials,
+} from './egypt-elevator-blender'
+import { addSpaceStationWallVisual, type SpaceStationWallPathRun } from './track-appearance-space-station-wall'
+import { createCanonicalWallRun, type RawWallFrame } from './track-surface-topology'
+
+export const EGYPT_ELEVATOR_THEME_ID = 'ancient-egypt'
+export const JAPAN_ELEVATOR_THEME_ID = 'japanese-sakura-lake'
+export const SPACE_ELEVATOR_THEME_ID = 'intergalactic-space-station'
+
+export interface PortalDerivedElevatorMaterials {
+  egypt: {
+    sandstone: THREE.Material
+    carvedStone: THREE.Material
+    pyramidStone: THREE.Material
+    pyramidGold: THREE.Material
+    bronze: THREE.Material
+    gold: THREE.Material
+    paving: THREE.Material
+    signal: THREE.Material
+  }
+  japan: {
+    vermilion: THREE.Material
+    timber: THREE.Material
+    plaster: THREE.Material
+    stone: THREE.Material
+    kawara: THREE.Material
+    hardware: THREE.Material
+    signal: THREE.Material
+  }
+  space: {
+    chassis: THREE.Material
+    panel: THREE.Material
+    rib: THREE.Material
+    trim: THREE.Material
+    light: THREE.Material
+  }
+}
+
+interface ElevatorSkinOptions {
+  activeThemeId?: string
+  id: string
+  bottom: THREE.Vector3
+  rotation: THREE.Quaternion
+  width: number
+  height: number
+  depth: number
+  releaseHeight: number
+  materials: PortalDerivedElevatorMaterials
+}
+
+interface Batch {
+  name: string
+  material: THREE.Material
+  parts: THREE.BufferGeometry[]
+}
+
+interface RearEnclosureLayout {
+  panelZ: number
+  panelBottom: number
+  panelTop: number
+  openingBottom: number
+  openingTop: number
+  lowerHeight: number
+  upperHeight: number
+}
+
+const UNIT = new THREE.Vector3(1, 1, 1)
+const IDENTITY = new THREE.Quaternion()
+const LOCAL_UP = new THREE.Vector3(0, 1, 0)
+
+function rearEnclosureLayout(height: number, depth: number, releaseHeight: number): RearEnclosureLayout {
+  const panelBottom = -0.12
+  const panelTop = height + 0.68
+  const openingBottom = THREE.MathUtils.clamp(releaseHeight - 0.34, 0.9, height - 1.5)
+  const openingTop = Math.min(height + 0.42, releaseHeight + 1.48)
+  return {
+    panelZ: -depth / 2 - 0.05,
+    panelBottom,
+    panelTop,
+    openingBottom,
+    openingTop,
+    lowerHeight: openingBottom - panelBottom,
+    upperHeight: Math.max(0.24, panelTop - openingTop),
+  }
+}
+
+function markRearEnclosure(root: THREE.Group, layout: RearEnclosureLayout, construction: string): void {
+  root.userData.hasBackWall = true
+  root.userData.releaseOpeningBottom = layout.openingBottom
+  root.userData.releaseOpeningTop = layout.openingTop
+  root.userData.rearEnclosureConstruction = construction
+}
+
+function metricPlanarUvs(geometry: THREE.BufferGeometry): THREE.BufferGeometry {
+  const prepared = geometry.index ? geometry.toNonIndexed() : geometry
+  if (prepared !== geometry) geometry.dispose()
+  const position = prepared.getAttribute('position')
+  const normal = prepared.getAttribute('normal')
+  const uv = new Float32Array(position.count * 2)
+  const themeNetUv = new Float32Array(position.count * 4)
+  for (let index = 0; index < position.count; index += 1) {
+    const x = position.getX(index)
+    const y = position.getY(index)
+    const z = position.getZ(index)
+    const nx = Math.abs(normal.getX(index))
+    const ny = Math.abs(normal.getY(index))
+    const nz = Math.abs(normal.getZ(index))
+    if (ny >= nx && ny >= nz) {
+      uv[index * 2] = x
+      uv[index * 2 + 1] = z
+    } else if (nx >= nz) {
+      uv[index * 2] = z
+      uv[index * 2 + 1] = y
+    } else {
+      uv[index * 2] = x
+      uv[index * 2 + 1] = y
+    }
+    themeNetUv[index * 4 + 2] = 1
+  }
+  prepared.setAttribute('uv', new THREE.BufferAttribute(uv, 2))
+  prepared.setAttribute('themeNetUv', new THREE.BufferAttribute(themeNetUv, 4))
+  return prepared
+}
+
+function transformed(
+  geometry: THREE.BufferGeometry,
+  position: THREE.Vector3,
+  rotation = IDENTITY,
+  scale = UNIT,
+): THREE.BufferGeometry {
+  geometry.applyMatrix4(new THREE.Matrix4().compose(position, rotation, scale))
+  return metricPlanarUvs(geometry)
+}
+
+function roundedBox(size: THREE.Vector3, position: THREE.Vector3, radius = 0.045): THREE.BufferGeometry {
+  return transformed(
+    new VisualBoxGeometry(size.x, size.y, size.z, 2, Math.min(radius, size.x / 4, size.y / 4, size.z / 4)),
+    position,
+  )
+}
+
+function beam(start: THREE.Vector3, end: THREE.Vector3, width: number, depth: number): THREE.BufferGeometry {
+  const direction = end.clone().sub(start)
+  return transformed(
+    new VisualBoxGeometry(width, direction.length(), depth, 2, Math.min(width, depth) * 0.16),
+    start.clone().lerp(end, 0.5),
+    new THREE.Quaternion().setFromUnitVectors(LOCAL_UP, direction.clone().normalize()),
+  )
+}
+
+function addBatch(group: THREE.Group, id: string, batch: Batch): THREE.Mesh {
+  const geometry = mergeGeometries(batch.parts, false)
+  batch.parts.forEach(part => part.dispose())
+  if (!geometry) throw new Error(`Unable to merge elevator batch "${batch.name}".`)
+  geometry.computeBoundingBox()
+  geometry.computeBoundingSphere()
+  geometry.userData.visualOnly = true
+  const mesh = new THREE.Mesh(geometry, batch.material)
+  mesh.name = `${id}-${batch.name}`
+  mesh.castShadow = true
+  mesh.receiveShadow = true
+  mesh.userData.decorative = true
+  mesh.userData.visualOnly = true
+  group.add(mesh)
+  return mesh
+}
+
+function markTheme(group: THREE.Group, themeId: string, style: string): void {
+  group.userData.themeOnly = themeId
+  group.userData.decorative = true
+  group.userData.visualOnly = true
+  group.userData.elevatorStyle = style
+  group.traverse(object => {
+    object.userData.themeOnly = themeId
+    object.userData.decorative = true
+    object.userData.visualOnly = true
+    object.userData.elevatorStyle = style
+    if (object instanceof THREE.Mesh || object instanceof THREE.InstancedMesh) {
+      object.castShadow = true
+      object.receiveShadow = true
+    }
+  })
+}
+
+function liveEgyptBlenderMaterials(materials: PortalDerivedElevatorMaterials): EgyptElevatorBlenderMaterials {
+  return {
+    get sandstone() {
+      return materials.egypt.sandstone
+    },
+    get carvedStone() {
+      return materials.egypt.carvedStone
+    },
+    get pyramidStone() {
+      return materials.egypt.pyramidStone
+    },
+    get pyramidGold() {
+      return materials.egypt.pyramidGold
+    },
+    get bronze() {
+      return materials.egypt.bronze
+    },
+    get paving() {
+      return materials.egypt.paving
+    },
+  }
+}
+
+function addEgyptSkin(group: THREE.Group, options: ElevatorSkinOptions): THREE.Group {
+  const { id, width, height, depth, releaseHeight, materials } = options
+  const root = new THREE.Group()
+  root.name = `${id}-egypt-temple-hoist`
+  const rear = rearEnclosureLayout(height, depth, releaseHeight)
+  markRearEnclosure(root, rear, 'blender-authored-recessed-ashlar-chamber')
+  root.userData.roofConstruction = 'six-course-tura-limestone-pyramid-with-hammered-gold-pyramidion'
+  root.userData.platformCount = 4
+  root.userData.approvedReference = '/docs/material-contracts/theme-elevator-egypt-approved-v3.png'
+  const blenderMaterials = liveEgyptBlenderMaterials(materials)
+  root.userData.applySemanticTheme = () => applyEgyptElevatorBlenderMaterials(root, blenderMaterials)
+  addEgyptElevatorBlenderShell(root, id, blenderMaterials, new THREE.Vector3(width / 5.5, height / 8.5, depth / 4))
+
+  root.position.copy(options.bottom)
+  root.quaternion.copy(options.rotation)
+  markTheme(root, EGYPT_ELEVATOR_THEME_ID, 'approved-egypt-blender-pylon-hoist-v5')
+  group.add(root)
+  return root
+}
+
+function addJapanSkin(group: THREE.Group, options: ElevatorSkinOptions): THREE.Group {
+  const { id, width, height, depth, releaseHeight, materials } = options
+  const root = new THREE.Group()
+  root.name = `${id}-japanese-gatehouse-hoist`
+  const vermilion: THREE.BufferGeometry[] = []
+  const timber: THREE.BufferGeometry[] = []
+  const plaster: THREE.BufferGeometry[] = []
+  const plasterGables: THREE.BufferGeometry[] = []
+  const rearPlaster: THREE.BufferGeometry[] = []
+  const stone: THREE.BufferGeometry[] = []
+  const hardware: THREE.BufferGeometry[] = []
+  const postX = width / 2 + 0.2
+  const postZ = depth / 2 + 0.18
+  const roofHalfDepth = depth / 2 + 0.46
+  const ridgeY = height + 1.7
+  const eaveY = ridgeY - 0.82 * (roofHalfDepth / 1.32)
+
+  for (const x of [-postX, postX]) {
+    for (const z of [-postZ, postZ]) {
+      vermilion.push(
+        roundedBox(new THREE.Vector3(0.54, height + 0.5, 0.54), new THREE.Vector3(x, height / 2 + 0.02, z), 0.07),
+      )
+      stone.push(
+        roundedBox(new THREE.Vector3(0.78, 0.34, 0.78), new THREE.Vector3(x, -0.19, z), 0.055),
+        roundedBox(new THREE.Vector3(0.64, 0.2, 0.66), new THREE.Vector3(x, 0.05, z), 0.04),
+      )
+      hardware.push(
+        roundedBox(
+          new THREE.Vector3(0.15, 0.34, 0.055),
+          new THREE.Vector3(x - 0.14, 0.3, z + Math.sign(z) * 0.28),
+          0.018,
+        ),
+        roundedBox(
+          new THREE.Vector3(0.15, 0.34, 0.055),
+          new THREE.Vector3(x + 0.14, 0.3, z + Math.sign(z) * 0.28),
+          0.018,
+        ),
+      )
+    }
+  }
+
+  for (const z of [-postZ, postZ]) {
+    vermilion.push(
+      roundedBox(new THREE.Vector3(width + 1.18, 0.34, 0.68), new THREE.Vector3(0, height + 0.06, z), 0.055),
+      roundedBox(new THREE.Vector3(width + 0.42, 0.22, 0.54), new THREE.Vector3(0, height - 0.27, z), 0.045),
+    )
+    for (let bracket = -6; bracket <= 6; bracket += 1) {
+      vermilion.push(
+        roundedBox(
+          new THREE.Vector3(0.18, 0.22, 0.82),
+          new THREE.Vector3((bracket * width) / 13, height + 0.28, z),
+          0.025,
+        ),
+      )
+    }
+    for (const side of [-1, 1] as const) {
+      vermilion.push(
+        beam(
+          new THREE.Vector3(side * (postX - 0.08), height - 0.72, z),
+          new THREE.Vector3(side * (postX - 0.6), height - 0.18, z),
+          0.2,
+          0.34,
+        ),
+      )
+      plaster.push(
+        roundedBox(
+          new THREE.Vector3(0.3, 0.8, 0.46),
+          new THREE.Vector3(side * (postX - 0.31), height - 0.58, z),
+          0.035,
+        ),
+        roundedBox(new THREE.Vector3(0.36, 0.2, 0.52), new THREE.Vector3(side * (postX - 0.5), height - 0.18, z), 0.03),
+      )
+    }
+  }
+
+  const sharedRear = rearEnclosureLayout(height, depth, releaseHeight)
+  const rear: RearEnclosureLayout = {
+    ...sharedRear,
+    panelTop: height + 0.1,
+    upperHeight: Math.max(0.24, height + 0.1 - sharedRear.openingTop),
+  }
+  markRearEnclosure(root, rear, 'castle-plaster-panels-with-vermilion-release-frame')
+  for (const side of [-1, 1] as const) {
+    const x = side * (postX - 0.11)
+    // The side infill is a continuous architectural backing from its stone
+    // sill to the roof gable. Stopping it at the nominal wall height exposed
+    // the diagonal timber behind it as triangular "missing material" wedges.
+    const plasterBottom = 0.45
+    const plasterTop = eaveY + 0.02
+    // Underlap the corner posts as well; the old depth stopped 0.3 units
+    // before each post and exposed the framing at both vertical seams.
+    const plasterDepth = depth - 0.14
+    plaster.push(
+      roundedBox(
+        new THREE.Vector3(0.16, plasterTop - plasterBottom, plasterDepth),
+        new THREE.Vector3(x, (plasterBottom + plasterTop) / 2, 0),
+        0.03,
+      ),
+    )
+    stone.push(roundedBox(new THREE.Vector3(0.23, 0.32, depth - 0.64), new THREE.Vector3(x, 0.16, 0), 0.03))
+    for (const y of [0.62, 2.58, 4.54, 6.5, height - 0.32]) {
+      timber.push(roundedBox(new THREE.Vector3(0.25, 0.16, depth - 0.5), new THREE.Vector3(x, y, 0), 0.035))
+    }
+  }
+  rearPlaster.push(
+    roundedBox(
+      new THREE.Vector3(width - 0.46, rear.lowerHeight, 0.16),
+      new THREE.Vector3(0, (rear.panelBottom + rear.openingBottom) / 2, rear.panelZ),
+      0.035,
+    ),
+    roundedBox(
+      new THREE.Vector3(width - 0.46, rear.upperHeight, 0.16),
+      new THREE.Vector3(0, (rear.openingTop + rear.panelTop) / 2, rear.panelZ),
+      0.035,
+    ),
+  )
+  for (const y of [rear.openingBottom - 0.08, rear.openingTop + 0.08]) {
+    vermilion.push(
+      roundedBox(new THREE.Vector3(width - 0.14, 0.2, 0.24), new THREE.Vector3(0, y, rear.panelZ + 0.02), 0.04),
+    )
+  }
+
+  const gableShape = new THREE.Shape()
+  gableShape.moveTo(-roofHalfDepth + 0.18, eaveY - 0.02)
+  gableShape.lineTo(0, ridgeY - 0.15)
+  gableShape.lineTo(roofHalfDepth - 0.18, eaveY - 0.02)
+  gableShape.closePath()
+  for (const side of [-1, 1] as const) {
+    const gable = new VisualExtrudeGeometry(gableShape, {
+      depth: 0.16,
+      steps: 1,
+      bevelEnabled: true,
+      bevelSegments: 2,
+      bevelSize: 0.025,
+      bevelThickness: 0.018,
+    })
+    gable.applyMatrix4(
+      new THREE.Matrix4().compose(
+        new THREE.Vector3(side * (postX - 0.08), 0, 0),
+        new THREE.Quaternion().setFromAxisAngle(LOCAL_UP, (side * Math.PI) / 2),
+        UNIT,
+      ),
+    )
+    plasterGables.push(metricPlanarUvs(gable))
+    const gableX = side * postX
+    timber.push(
+      roundedBox(
+        new THREE.Vector3(0.2, 0.18, roofHalfDepth * 2 - 0.28),
+        new THREE.Vector3(gableX, eaveY - 0.1, 0),
+        0.035,
+      ),
+      beam(
+        new THREE.Vector3(gableX, eaveY - 0.01, -roofHalfDepth + 0.12),
+        new THREE.Vector3(gableX, ridgeY - 0.05, 0),
+        0.18,
+        0.2,
+      ),
+      beam(
+        new THREE.Vector3(gableX, ridgeY - 0.05, 0),
+        new THREE.Vector3(gableX, eaveY - 0.01, roofHalfDepth - 0.12),
+        0.18,
+        0.2,
+      ),
+    )
+  }
+
+  addBatch(root, id, { name: 'japan-vermilion-joinery', material: materials.japan.vermilion, parts: vermilion })
+  addBatch(root, id, { name: 'japan-castle-timber-framing', material: materials.japan.timber, parts: timber })
+  addBatch(root, id, { name: 'japan-castle-plaster-infill', material: materials.japan.plaster, parts: plaster })
+  addBatch(root, id, { name: 'japan-castle-plaster-gables', material: materials.japan.plaster, parts: plasterGables })
+  addBatch(root, id, { name: 'japan-rear-enclosure', material: materials.japan.plaster, parts: rearPlaster })
+  addBatch(root, id, { name: 'japan-foundation-stone', material: materials.japan.stone, parts: stone })
+  addBatch(root, id, { name: 'japan-black-silver-hardware', material: materials.japan.hardware, parts: hardware })
+  addJapaneseSakuraKawaraRoof(root, materials.japan.kawara, {
+    name: `${id}-japan`,
+    ridgeY: height + 1.7,
+    widthScale: (width + 1.18) / 5.48,
+    halfDepth: roofHalfDepth,
+    capCourses: 9,
+    themeRolePrefix: 'elevator-sakura',
+  })
+  root.userData.constructionContract = 'japanese-sakura-obstacle-kit-elevator-v3'
+  root.userData.sidePlasterCoverage = 'continuous-sill-to-gable'
+  root.userData.reusedComponents = [
+    'portal-kawara-roof',
+    'portal-vermilion-frame',
+    'castle-wall-infill',
+    'bridge-hardware',
+  ]
+  root.position.copy(options.bottom)
+  root.quaternion.copy(options.rotation)
+  markTheme(root, JAPAN_ELEVATOR_THEME_ID, 'portal-derived-japanese-gatehouse-hoist')
+  group.add(root)
+  return root
+}
+
+function addSpaceSkin(group: THREE.Group, options: ElevatorSkinOptions): THREE.Group {
+  const { id, width, height, depth, releaseHeight, materials } = options
+  const root = new THREE.Group()
+  root.name = `${id}-space-armored-cargo-lift`
+  const chassis: THREE.BufferGeometry[] = []
+  const panel: THREE.BufferGeometry[] = []
+  const rib: THREE.BufferGeometry[] = []
+  const trim: THREE.BufferGeometry[] = []
+  const lights: THREE.BufferGeometry[] = []
+  const postX = width / 2 + 0.27
+  const postZ = depth / 2 + 0.24
+  const sideCoreX = width / 2 + 0.14
+  const wallModuleBottoms = [0.18, 4.12]
+  const wallModuleHeight = 3.54
+  const wallDepthStart = -depth / 2 - 0.12
+  const wallDepthEnd = depth / 2 + 0.12
+  const spaceWallMaterials = {
+    chassis: materials.space.chassis,
+    panel: materials.space.panel,
+    rib: materials.space.rib,
+    trim: materials.space.trim,
+    light: materials.space.light,
+  }
+  const sideWallRuns: SpaceStationWallPathRun[] = []
+
+  const canonicalElevatorWallRun = (frames: readonly RawWallFrame[]): SpaceStationWallPathRun => {
+    const run = createCanonicalWallRun(frames, { role: 'outer' })
+    if (!run) throw new Error('Space Station elevator wall requires a valid canonical boundary')
+    return run
+  }
+  const sideRun = (x: number, baseY: number): SpaceStationWallPathRun =>
+    canonicalElevatorWallRun(
+      [wallDepthStart, wallDepthEnd].map(z => ({
+        base: new THREE.Vector3(x, baseY, z),
+        tangent: new THREE.Vector3(0, 0, 1),
+        up: new THREE.Vector3(0, 1, 0),
+        outward: new THREE.Vector3(-1, 0, 0),
+      })),
+    )
+  const rearRun = (baseY: number): SpaceStationWallPathRun =>
+    canonicalElevatorWallRun(
+      [-width / 2 - 0.12, width / 2 + 0.12].map(x => ({
+        base: new THREE.Vector3(x, baseY, -depth / 2 - 0.14),
+        tangent: new THREE.Vector3(1, 0, 0),
+        up: new THREE.Vector3(0, 1, 0),
+        outward: new THREE.Vector3(0, 0, 1),
+      })),
+    )
+
+  for (const x of [-postX, postX]) {
+    for (const z of [-postZ, postZ]) {
+      chassis.push(
+        roundedBox(new THREE.Vector3(0.62, height + 0.82, 0.58), new THREE.Vector3(x, height / 2 + 0.06, z), 0.09),
+      )
+      rib.push(
+        roundedBox(new THREE.Vector3(0.82, 0.32, 0.78), new THREE.Vector3(x, -0.2, z), 0.065),
+        roundedBox(new THREE.Vector3(0.76, 0.3, 0.72), new THREE.Vector3(x, height + 0.43, z), 0.065),
+      )
+      for (const y of [0.38, 4.04, 8.18]) {
+        trim.push(roundedBox(new THREE.Vector3(0.68, 0.18, 0.66), new THREE.Vector3(x, y, z), 0.035))
+      }
+    }
+  }
+
+  for (const baseY of wallModuleBottoms) {
+    for (const side of [-1, 1] as const) {
+      chassis.push(
+        roundedBox(
+          new THREE.Vector3(0.2, wallModuleHeight, wallDepthEnd - wallDepthStart),
+          new THREE.Vector3(side * sideCoreX, baseY + wallModuleHeight / 2, 0),
+          0.035,
+        ),
+      )
+    }
+    sideWallRuns.push(sideRun(-sideCoreX, baseY), sideRun(sideCoreX, baseY))
+  }
+
+  addSpaceStationWallVisual(root, `${id}-space-side-armored-bays`, sideWallRuns, wallModuleHeight, spaceWallMaterials)
+
+  const rear = rearEnclosureLayout(height, depth, releaseHeight)
+  markRearEnclosure(root, rear, 'large-space-station-armored-bays-with-release-opening')
+  chassis.push(
+    roundedBox(
+      new THREE.Vector3(width + 0.24, rear.lowerHeight, 0.2),
+      new THREE.Vector3(0, (rear.panelBottom + rear.openingBottom) / 2, -depth / 2 - 0.14),
+      0.035,
+    ),
+  )
+  addSpaceStationWallVisual(
+    root,
+    `${id}-space-rear-lower-module`,
+    [rearRun(rear.panelBottom)],
+    rear.lowerHeight,
+    spaceWallMaterials,
+  )
+  const upperRearHeight = rear.panelTop - rear.openingTop
+  chassis.push(
+    roundedBox(
+      new THREE.Vector3(width + 0.24, upperRearHeight, 0.2),
+      new THREE.Vector3(0, rear.openingTop + upperRearHeight / 2, -depth / 2 - 0.14),
+      0.035,
+    ),
+  )
+  addSpaceStationWallVisual(
+    root,
+    `${id}-space-rear-upper-module`,
+    [rearRun(rear.openingTop)],
+    upperRearHeight,
+    spaceWallMaterials,
+  )
+
+  for (const y of [rear.openingBottom - 0.08, rear.openingTop + 0.08]) {
+    rib.push(
+      roundedBox(new THREE.Vector3(width - 0.08, 0.22, 0.28), new THREE.Vector3(0, y, rear.panelZ + 0.01), 0.055),
+    )
+    lights.push(roundedBox(new THREE.Vector3(1.2, 0.08, 0.08), new THREE.Vector3(0, y, rear.panelZ + 0.19), 0.035))
+  }
+
+  const frontHeaderBase = height - 0.22
+  const headerHeight = 0.82
+  chassis.push(
+    roundedBox(
+      new THREE.Vector3(width + 0.92, headerHeight, 0.24),
+      new THREE.Vector3(0, frontHeaderBase + headerHeight / 2, postZ),
+      0.055,
+    ),
+  )
+  panel.push(
+    roundedBox(
+      new THREE.Vector3(width - 0.34, headerHeight - 0.26, 0.09),
+      new THREE.Vector3(0, frontHeaderBase + headerHeight / 2, postZ + 0.17),
+      0.035,
+    ),
+  )
+  rib.push(
+    roundedBox(
+      new THREE.Vector3(0.18, headerHeight - 0.12, 0.16),
+      new THREE.Vector3(0, frontHeaderBase + headerHeight / 2, postZ + 0.22),
+      0.04,
+    ),
+  )
+  lights.push(
+    roundedBox(
+      new THREE.Vector3(1.04, 0.1, 0.08),
+      new THREE.Vector3(0, frontHeaderBase + headerHeight / 2, postZ + 0.28),
+      0.035,
+    ),
+  )
+
+  for (const side of [-1, 1] as const) {
+    for (const y of [2.08, 6.02]) {
+      lights.push(
+        roundedBox(new THREE.Vector3(0.26, 0.045, 0.07), new THREE.Vector3(side * postX, y, postZ + 0.32), 0.014),
+      )
+    }
+  }
+
+  addBatch(root, id, { name: 'space-load-chassis', material: materials.space.chassis, parts: chassis })
+  addBatch(root, id, { name: 'space-header-panel', material: materials.space.panel, parts: panel })
+  addBatch(root, id, { name: 'space-wrapped-ribs', material: materials.space.rib, parts: rib })
+  addBatch(root, id, { name: 'space-structural-trim', material: materials.space.trim, parts: trim })
+  addBatch(root, id, { name: 'space-cyan-channels', material: materials.space.light, parts: lights })
+  root.userData.constructionContract = 'space-station-armored-wall-elevator-v3'
+  root.userData.reusedComponents = [
+    'armored-wall-bay',
+    'wrapped-seam-rib',
+    'recessed-cyan-channel',
+    'portal-chassis-pylon',
+  ]
+
+  root.position.copy(options.bottom)
+  root.quaternion.copy(options.rotation)
+  markTheme(root, SPACE_ELEVATOR_THEME_ID, 'portal-derived-space-cargo-lift')
+  group.add(root)
+  return root
+}
+
+export function addPortalDerivedElevatorSkins(group: THREE.Group, options: ElevatorSkinOptions): THREE.Group[] {
+  switch (options.activeThemeId) {
+    case EGYPT_ELEVATOR_THEME_ID:
+      return [addEgyptSkin(group, options)]
+    case JAPAN_ELEVATOR_THEME_ID:
+      return [addJapanSkin(group, options)]
+    case SPACE_ELEVATOR_THEME_ID:
+      return [addSpaceSkin(group, options)]
+    default:
+      return []
+  }
+}
+
+function addShelfMesh(
+  group: THREE.Group,
+  name: string,
+  geometry: THREE.BufferGeometry,
+  material: THREE.Material,
+  position: THREE.Vector3,
+): THREE.Mesh {
+  const mesh = new THREE.Mesh(geometry, material)
+  mesh.name = name
+  mesh.position.copy(position)
+  mesh.castShadow = true
+  mesh.receiveShadow = true
+  mesh.userData.decorative = true
+  mesh.userData.visualOnly = true
+  group.add(mesh)
+  return mesh
+}
+
+export function decoratePortalDerivedElevatorShelf(
+  shelf: THREE.Mesh,
+  id: string,
+  width: number,
+  depth: number,
+  materials: PortalDerivedElevatorMaterials,
+  activeThemeId?: string,
+): void {
+  if (activeThemeId === EGYPT_ELEVATOR_THEME_ID) {
+    const egypt = new THREE.Group()
+    egypt.name = `${id}-egypt-approved-platform-cassette`
+    const blenderMaterials = liveEgyptBlenderMaterials(materials)
+    egypt.userData.applySemanticTheme = () => applyEgyptElevatorBlenderMaterials(egypt, blenderMaterials)
+    addEgyptElevatorBlenderPlatform(egypt, id, blenderMaterials, new THREE.Vector3((width - 0.56) / 4.94, 1, depth / 4))
+    markTheme(egypt, EGYPT_ELEVATOR_THEME_ID, 'approved-egypt-blender-platform-v5')
+    shelf.add(egypt)
+    return
+  }
+
+  if (activeThemeId === JAPAN_ELEVATOR_THEME_ID) {
+    const japan = new THREE.Group()
+    japan.name = `${id}-japan-bridge-cassette`
+    addShelfMesh(
+      japan,
+      `${id}-japan-timber-deck`,
+      new VisualBoxGeometry(width - 0.08, 0.08, depth - 0.1, 2, 0.035),
+      materials.japan.timber,
+      new THREE.Vector3(0, 0.13, 0),
+    )
+    addShelfMesh(
+      japan,
+      `${id}-japan-bullnose-fascia`,
+      new VisualBoxGeometry(width, 0.25, 0.16, 2, 0.065),
+      materials.japan.vermilion,
+      new THREE.Vector3(0, 0.18, depth / 2 - 0.02),
+    )
+    for (const x of [-width / 2 + 0.18, width / 2 - 0.18]) {
+      addShelfMesh(
+        japan,
+        `${id}-japan-corner-collar-${x}`,
+        new VisualBoxGeometry(0.34, 0.34, 0.24, 2, 0.045),
+        materials.japan.hardware,
+        new THREE.Vector3(x, 0.2, depth / 2 - 0.02),
+      )
+      const finial = addShelfMesh(
+        japan,
+        `${id}-japan-giboshi-${x}`,
+        new VisualSphereGeometry(0.12, 12, 8),
+        materials.japan.hardware,
+        new THREE.Vector3(x, 0.42, depth / 2 - 0.02),
+      )
+      finial.scale.y = 1.28
+    }
+    markTheme(japan, JAPAN_ELEVATOR_THEME_ID, 'japan-bridge-cassette')
+    shelf.add(japan)
+    return
+  }
+
+  if (activeThemeId === SPACE_ELEVATOR_THEME_ID) {
+    const space = new THREE.Group()
+    space.name = `${id}-space-cargo-cassette`
+    addShelfMesh(
+      space,
+      `${id}-space-cargo-deck`,
+      new VisualBoxGeometry(width - 0.08, 0.09, depth - 0.1, 2, 0.04),
+      materials.space.trim,
+      new THREE.Vector3(0, 0.13, 0),
+    )
+    addShelfMesh(
+      space,
+      `${id}-space-armored-fascia`,
+      new VisualBoxGeometry(width, 0.27, 0.16, 2, 0.055),
+      materials.space.chassis,
+      new THREE.Vector3(0, 0.18, depth / 2 - 0.02),
+    )
+    for (const x of [-width * 0.31, 0, width * 0.31]) {
+      addShelfMesh(
+        space,
+        `${id}-space-cyan-marker-${x}`,
+        new VisualBoxGeometry(0.34, 0.1, 0.06, 2, 0.03),
+        materials.space.light,
+        new THREE.Vector3(x, 0.19, depth / 2 + 0.08),
+      )
+    }
+    markTheme(space, SPACE_ELEVATOR_THEME_ID, 'space-cargo-cassette')
+    shelf.add(space)
+  }
+}