@marble.fun/track-catalog 3.0.0

package/src/pages/play/race/japanese-sakura-kawara-roof.ts

@@ -0,0 +1,201 @@
+import * as THREE from 'three'
+
+import { VisualCylinderGeometry, VisualBoxGeometry } from '../../../three/visual-geometry'
+import { mergeGeometries } from 'three/examples/jsm/utils/BufferGeometryUtils.js'
+
+const LOCAL_UP = new THREE.Vector3(0, 1, 0)
+
+export interface JapaneseSakuraKawaraRoofOptions {
+  name: string
+  ridgeY: number
+  widthScale?: number
+  halfDepth?: number
+  capCourses?: number
+  themeRolePrefix?: string
+}
+
+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, quaternion = new THREE.Quaternion()) {
+  geometry.applyMatrix4(new THREE.Matrix4().compose(position, quaternion, new THREE.Vector3(1, 1, 1)))
+  return metricPlanarUvs(geometry)
+}
+
+function mark(object: THREE.Object3D, role: string): void {
+  object.userData.themeOnly = 'japanese-sakura-lake'
+  object.userData.themeRole = role
+  object.userData.decorative = true
+  object.userData.visualOnly = true
+  object.userData.roofConstruction = 'shared-japanese-sakura-portal-kawara-v1'
+}
+
+function mergedRoofPart(
+  root: THREE.Group,
+  name: string,
+  material: THREE.Material,
+  parts: THREE.BufferGeometry[],
+  role: string,
+): THREE.Mesh {
+  const geometry = mergeGeometries(parts, false)
+  parts.forEach(part => part.dispose())
+  if (!geometry) throw new Error(`Unable to merge Japanese Sakura roof batch "${name}".`)
+  geometry.computeBoundingBox()
+  geometry.computeBoundingSphere()
+  const mesh = new THREE.Mesh(geometry, material)
+  mesh.name = name
+  mesh.castShadow = true
+  mesh.receiveShadow = true
+  mark(mesh, role)
+  root.add(mesh)
+  return mesh
+}
+
+/**
+ * The solved portal roof, shared verbatim by portals and vertical mechanisms.
+ * Width and course count may expand to clear a larger mechanism while the
+ * portal pitch, tile scale, lifted eaves, pan/cap rhythm, and ridge stay intact.
+ */
+export function addJapaneseSakuraKawaraRoof(
+  root: THREE.Group,
+  material: THREE.Material,
+  options: JapaneseSakuraKawaraRoofOptions,
+): THREE.Group {
+  const roof = new THREE.Group()
+  roof.name = `${options.name}-roof-assembly`
+  roof.scale.x = options.widthScale ?? 1
+  roof.userData.construction = 'shared-japanese-sakura-portal-kawara-v1'
+  const rolePrefix = options.themeRolePrefix ?? 'sakura'
+  const roofHalfDepth = options.halfDepth ?? 1.32
+  const capCourses = options.capCourses ?? 5
+  const panCourses = Math.max(1, capCourses - 1)
+  const isPortalDepth = options.halfDepth === undefined
+  const slopeDrop = 0.82 * (roofHalfDepth / 1.32)
+  const roofPitch = 0.5
+  const frontRoofRotation = new THREE.Quaternion().setFromAxisAngle(new THREE.Vector3(1, 0, 0), roofPitch)
+  const backRoofRotation = new THREE.Quaternion().setFromAxisAngle(new THREE.Vector3(1, 0, 0), -roofPitch)
+  const backingLength = isPortalDepth ? 1.38 : Math.hypot(roofHalfDepth, slopeDrop)
+  const backingZ = isPortalDepth ? 0.58 : roofHalfDepth / 2
+  const backing = mergedRoofPart(
+    roof,
+    `${options.name}-kawara-backing`,
+    material,
+    [
+      transformed(new VisualBoxGeometry(5.48, 0.12, backingLength, 2, 0.035), new THREE.Vector3(0, options.ridgeY - slopeDrop / 2, backingZ), frontRoofRotation),
+      transformed(new VisualBoxGeometry(5.48, 0.12, backingLength, 2, 0.035), new THREE.Vector3(0, options.ridgeY - slopeDrop / 2, -backingZ), backRoofRotation),
+    ],
+    `${rolePrefix}-kawara-roof-backing`,
+  )
+
+  const columns = 19
+  // The roof backing supplies the solid surface; tiles only need a curved outer shell.
+  const tileGeometry = new VisualCylinderGeometry(0.5, 0.5, 1, 4, 1, true, 0, Math.PI)
+  const tiles = new THREE.InstancedMesh(tileGeometry, material, columns * capCourses * 2)
+  tiles.name = `${options.name}-kawara-tiles`
+  let tileIndex = 0
+  for (const roofSide of [-1, 1] as const) {
+    for (let column = 0; column < columns; column += 1) {
+      const x = -2.52 + column * 0.28
+      const eaveLift = Math.max(0, Math.abs(x) - 2.08) * 0.3
+      for (let segment = 0; segment < capCourses; segment += 1) {
+        const inner = segment / capCourses
+        const outer = Math.min(1, (segment + 1) / capCourses + 0.055)
+        const start = new THREE.Vector3(x, options.ridgeY - inner * slopeDrop + eaveLift, roofSide * inner * roofHalfDepth)
+        const end = new THREE.Vector3(x, options.ridgeY - outer * slopeDrop + eaveLift, roofSide * outer * roofHalfDepth)
+        const direction = end.clone().sub(start)
+        const quaternion = new THREE.Quaternion().setFromUnitVectors(LOCAL_UP, direction.clone().normalize())
+        quaternion.multiply(new THREE.Quaternion().setFromAxisAngle(LOCAL_UP, roofSide > 0 ? 0 : Math.PI))
+        tiles.setMatrixAt(
+          tileIndex++,
+          new THREE.Matrix4().compose(
+            start.clone().lerp(end, 0.5).add(new THREE.Vector3(0, 0.065, 0)),
+            quaternion,
+            new THREE.Vector3(0.2, direction.length(), 0.2),
+          ),
+        )
+      }
+    }
+  }
+  tiles.instanceMatrix.needsUpdate = true
+  tiles.userData.kawaraTileCount = tiles.count
+  tiles.userData.kawaraCourseCount = capCourses
+  tiles.userData.mirroredRoofSides = true
+  mark(tiles, `${rolePrefix}-kawara-tile-shell`)
+  roof.add(tiles)
+
+  // A one-segment rounded box preserves the tiny pan tile's chamfered
+  // silhouette while avoiding 192 interior bevel triangles per instance.
+  const panGeometry = new VisualBoxGeometry(0.22, 0.055, 0.42, 1, 0.025)
+  const panTiles = new THREE.InstancedMesh(panGeometry, material, 18 * panCourses * 2)
+  panTiles.name = `${options.name}-kawara-pan-tiles`
+  let panIndex = 0
+  for (const roofSide of [-1, 1] as const) {
+    const rotation = roofSide > 0 ? frontRoofRotation : backRoofRotation
+    for (let course = 0; course < panCourses; course += 1) {
+      const progress = (course + 0.72) / (panCourses + 0.25)
+      for (let column = 0; column < 18; column += 1) {
+        const x = -2.38 + column * 0.28 + (course % 2) * 0.04
+        const eaveLift = Math.max(0, Math.abs(x) - 2.08) * 0.3
+        panTiles.setMatrixAt(
+          panIndex++,
+          new THREE.Matrix4().compose(
+            new THREE.Vector3(x, options.ridgeY - progress * slopeDrop + 0.065 + eaveLift, roofSide * progress * roofHalfDepth),
+            rotation,
+            new THREE.Vector3(1, 1, 1),
+          ),
+        )
+      }
+    }
+  }
+  panTiles.instanceMatrix.needsUpdate = true
+  panTiles.userData.kawaraPanTileCount = panTiles.count
+  panTiles.userData.kawaraCourseCount = panCourses
+  panTiles.userData.mirroredRoofSides = true
+  mark(panTiles, `${rolePrefix}-kawara-pan-shell`)
+  roof.add(panTiles)
+
+  const ridgeParts: THREE.BufferGeometry[] = []
+  for (const [y, z, radius] of [[options.ridgeY + 0.04, 0, 0.14], [options.ridgeY - 0.05, 0.13, 0.09], [options.ridgeY - 0.05, -0.13, 0.09]] as const) {
+    ridgeParts.push(
+      transformed(
+        new VisualCylinderGeometry(radius, radius, 5.58, 16),
+        new THREE.Vector3(0, y, z),
+        new THREE.Quaternion().setFromAxisAngle(new THREE.Vector3(0, 0, 1), Math.PI / 2),
+      ),
+    )
+  }
+  mergedRoofPart(roof, `${options.name}-kawara-ridge`, material, ridgeParts, `${rolePrefix}-kawara-ridge`)
+  backing.userData.roofWidthScale = options.widthScale ?? 1
+  backing.userData.roofHalfDepth = roofHalfDepth
+  mark(roof, `${rolePrefix}-kawara-roof-assembly`)
+  root.add(roof)
+  return roof
+}

package/src/pages/play/race/japanese-sakura-portal-frame.ts

@@ -0,0 +1,325 @@
+import * as THREE from 'three'
+
+import { VisualSphereGeometry, VisualCylinderGeometry, VisualTorusGeometry, VisualTubeGeometry, VisualBoxGeometry } from '../../../three/visual-geometry'
+import { mergeGeometries } from 'three/examples/jsm/utils/BufferGeometryUtils.js'
+
+import { PORTAL_APERTURE_HALF_WIDTH } from './portal-proportions'
+import { addJapaneseSakuraKawaraRoof } from './japanese-sakura-kawara-roof'
+
+export const JAPANESE_SAKURA_PORTAL_FRAME_THEME_ID = 'japanese-sakura-lake'
+
+export interface JapaneseSakuraPortalFrameMaterials {
+  vermilion: THREE.Material
+  plaster: THREE.Material
+  foundationStone: THREE.Material
+  kawara: THREE.Material
+  hardware: THREE.Material
+}
+
+const LOCAL_UP = new THREE.Vector3(0, 1, 0)
+
+function markVisualOnly(object: THREE.Object3D, role: string): void {
+  object.userData.themeOnly = JAPANESE_SAKURA_PORTAL_FRAME_THEME_ID
+  object.userData.themeRole = role
+  object.userData.decorative = true
+  object.userData.visualOnly = true
+  object.userData.portalFrameStyle = 'japanese-sakura-roofed-gate'
+}
+
+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, quaternion = new THREE.Quaternion()) {
+  geometry.applyMatrix4(new THREE.Matrix4().compose(position, quaternion, new THREE.Vector3(1, 1, 1)))
+  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, radius), position)
+}
+
+function boxBeam(start: THREE.Vector3, end: THREE.Vector3, width: number, depth: number): THREE.BufferGeometry {
+  const direction = end.clone().sub(start)
+  const quaternion = new THREE.Quaternion().setFromUnitVectors(LOCAL_UP, direction.clone().normalize())
+  return transformed(
+    new VisualBoxGeometry(width, direction.length(), depth, 2, Math.min(width, depth) * 0.16),
+    start.clone().lerp(end, 0.5),
+    quaternion,
+  )
+}
+
+function mergeBatch(
+  root: THREE.Group,
+  name: string,
+  material: THREE.Material,
+  parts: THREE.BufferGeometry[],
+  role: string,
+): THREE.Mesh {
+  const geometry = mergeGeometries(parts, false)
+  parts.forEach(part => part.dispose())
+  if (!geometry) throw new Error(`Unable to merge Japanese Sakura portal batch "${name}".`)
+  geometry.computeBoundingBox()
+  geometry.computeBoundingSphere()
+  const mesh = new THREE.Mesh(geometry, material)
+  mesh.name = name
+  mesh.castShadow = true
+  mesh.receiveShadow = true
+  markVisualOnly(mesh, role)
+  root.add(mesh)
+  return mesh
+}
+
+function addLantern(frame: THREE.Group, name: string, color: string, hardware: THREE.Material): void {
+  const lantern = new THREE.Group()
+  lantern.name = `${name}-sakura-pair-lantern`
+  lantern.position.set(0, 0.83, 0.58)
+  lantern.userData.portalPairColor = color
+  lantern.userData.portalLightRole = 'pair-color-paper-lantern'
+  markVisualOnly(lantern, 'sakura-pair-lantern')
+
+  const pairColor = new THREE.Color(color)
+  const paperMaterial = new THREE.MeshStandardMaterial({
+    color: '#fff1df',
+    emissive: pairColor,
+    emissiveIntensity: 0.88,
+    roughness: 0.72,
+    transparent: true,
+    opacity: 0.96,
+  })
+  const paper = new THREE.Mesh(new VisualSphereGeometry(0.33, 24, 16), paperMaterial)
+  paper.scale.y = 1.18
+  paper.name = `${name}-sakura-lantern-paper`
+  paper.userData.ownsMaterial = true
+  markVisualOnly(paper, 'sakura-pair-lantern-paper')
+  lantern.add(paper)
+
+  const rings = new THREE.InstancedMesh(new VisualTorusGeometry(0.35, 0.024, 7, 24), hardware, 5)
+  rings.name = `${name}-sakura-lantern-rings`
+  ;[-0.3, -0.15, 0, 0.15, 0.3].forEach((y, index) => {
+    const radiusScale = Math.sqrt(Math.max(0.18, 1 - (y / 0.39) ** 2))
+    rings.setMatrixAt(
+      index,
+      new THREE.Matrix4().compose(
+        new THREE.Vector3(0, y, 0),
+        new THREE.Quaternion().setFromAxisAngle(new THREE.Vector3(1, 0, 0), Math.PI / 2),
+        new THREE.Vector3(radiusScale, radiusScale, radiusScale),
+      ),
+    )
+  })
+  rings.instanceMatrix.needsUpdate = true
+  markVisualOnly(rings, 'sakura-lantern-hardware')
+  lantern.add(rings)
+
+  const cageParts: THREE.BufferGeometry[] = []
+  for (let longitude = 0; longitude < 6; longitude += 1) {
+    const angle = (longitude / 6) * Math.PI * 2
+    const points = Array.from({ length: 9 }, (_, index) => {
+      const latitude = -Math.PI / 2 + (index / 8) * Math.PI
+      return new THREE.Vector3(
+        Math.cos(angle) * Math.cos(latitude) * 0.335,
+        Math.sin(latitude) * 0.39,
+        Math.sin(angle) * Math.cos(latitude) * 0.335,
+      )
+    })
+    cageParts.push(new VisualTubeGeometry(new THREE.CatmullRomCurve3(points), 24, 0.018, 5, false))
+  }
+  mergeBatch(lantern, `${name}-sakura-lantern-cage`, hardware, cageParts, 'sakura-lantern-hardware')
+
+  const top = new THREE.Mesh(new VisualCylinderGeometry(0.25, 0.34, 0.14, 18), hardware)
+  top.position.y = 0.45
+  const bottom = new THREE.Mesh(new VisualCylinderGeometry(0.34, 0.24, 0.13, 18), hardware)
+  bottom.position.y = -0.45
+  const chain = new THREE.Mesh(new VisualCylinderGeometry(0.014, 0.014, 0.56, 8), hardware)
+  chain.position.y = 0.79
+  for (const object of [top, bottom, chain]) {
+    markVisualOnly(object, 'sakura-lantern-hardware')
+    lantern.add(object)
+  }
+  const light = new THREE.PointLight(color, 0.58, 3.4, 2)
+  light.position.z = 0.15
+  light.userData.decorative = true
+  light.userData.visualOnly = true
+  lantern.add(light)
+  frame.add(lantern)
+}
+
+function addBlossoms(frame: THREE.Group, name: string): void {
+  const branchMaterial = new THREE.MeshStandardMaterial({ color: '#4b2d25', roughness: 0.92 })
+  const blossomMaterial = new THREE.MeshStandardMaterial({ color: '#f4a9ca', roughness: 0.78 })
+  const branches: THREE.BufferGeometry[] = []
+  const blossomPoints: THREE.Vector3[] = []
+  for (const side of [-1, 1] as const) {
+    const start = new THREE.Vector3(side * 2.08, 2.65, 0.24)
+    const end = new THREE.Vector3(side * 3.16, 3.18, 0.04)
+    const direction = end.clone().sub(start)
+    const quaternion = new THREE.Quaternion().setFromUnitVectors(LOCAL_UP, direction.clone().normalize())
+    branches.push(
+      transformed(
+        new VisualCylinderGeometry(0.024, 0.038, direction.length(), 7),
+        start.clone().lerp(end, 0.5),
+        quaternion,
+      ),
+    )
+    const fork = start.clone().lerp(end, 0.54)
+    const forkEnd = new THREE.Vector3(side * 3.3, 2.82, 0.12)
+    const forkDirection = forkEnd.clone().sub(fork)
+    branches.push(
+      transformed(
+        new VisualCylinderGeometry(0.014, 0.024, forkDirection.length(), 7),
+        fork.clone().lerp(forkEnd, 0.5),
+        new THREE.Quaternion().setFromUnitVectors(LOCAL_UP, forkDirection.clone().normalize()),
+      ),
+    )
+    for (let index = 0; index < 10; index += 1) {
+      const point = start.clone().lerp(end, index / 9)
+      point.y += Math.sin(index * 1.7) * 0.1
+      point.z += 0.12
+      blossomPoints.push(point)
+    }
+  }
+  mergeBatch(
+    frame,
+    `${name}-sakura-branches`,
+    branchMaterial,
+    branches,
+    'sakura-blossom-branches',
+  ).userData.ownsMaterial = true
+  const blossoms = new THREE.InstancedMesh(
+    new VisualSphereGeometry(0.045, 8, 6),
+    blossomMaterial,
+    blossomPoints.length * 5,
+  )
+  blossoms.name = `${name}-sakura-blossoms`
+  let blossomIndex = 0
+  blossomPoints.forEach((point, flowerIndex) => {
+    for (let petal = 0; petal < 5; petal += 1) {
+      const angle = (petal / 5) * Math.PI * 2
+      const center = point.clone().add(new THREE.Vector3(Math.cos(angle) * 0.052, Math.sin(angle) * 0.052, 0))
+      const scale = 0.78 + (flowerIndex % 4) * 0.07
+      blossoms.setMatrixAt(
+        blossomIndex++,
+        new THREE.Matrix4().compose(
+          center,
+          new THREE.Quaternion().setFromAxisAngle(new THREE.Vector3(0, 0, 1), angle),
+          new THREE.Vector3(scale * 1.5, scale * 0.68, scale * 0.48),
+        ),
+      )
+    }
+  })
+  blossoms.instanceMatrix.needsUpdate = true
+  blossoms.userData.ownsMaterial = true
+  markVisualOnly(blossoms, 'sakura-blossoms')
+  frame.add(blossoms)
+}
+
+/** Adds only the theme-local frame; the shared aperture, camera rift, glow and particles stay global. */
+export function addJapaneseSakuraPortalFrame(
+  root: THREE.Group,
+  name: string,
+  color: string,
+  materials: JapaneseSakuraPortalFrameMaterials,
+): THREE.Group {
+  const frame = new THREE.Group()
+  frame.name = `${name}-japanese-sakura-frame`
+  // This frame is authored directly against the four-unit portal deck. Unlike
+  // the wider source geometry used by Jungle and Egypt it must not receive the
+  // shared 0.7 compensation a second time.
+  frame.scale.x = 1
+  frame.userData.portalApertureClearHalfWidth = PORTAL_APERTURE_HALF_WIDTH
+  frame.userData.drawCallBudget = 14
+  frame.userData.triangleBudget = 28_000
+  markVisualOnly(frame, 'japanese-sakura-roofed-gate')
+
+  const vermilion: THREE.BufferGeometry[] = []
+  const masonry: THREE.BufferGeometry[] = []
+  for (const side of [-1, 1] as const) {
+    const x = side * 1.68
+    vermilion.push(
+      roundedBox(new THREE.Vector3(0.52, 3.34, 0.62), new THREE.Vector3(x, 0.08, 0.02), 0.055),
+      roundedBox(new THREE.Vector3(0.7, 0.18, 0.7), new THREE.Vector3(x, 1.42, 0.02), 0.04),
+      roundedBox(new THREE.Vector3(0.96, 0.2, 0.7), new THREE.Vector3(x, 1.6, 0.02), 0.04),
+      boxBeam(new THREE.Vector3(side * 1.42, 0.82, 0.12), new THREE.Vector3(side * 0.98, 1.34, 0.12), 0.2, 0.34),
+    )
+    masonry.push(
+      roundedBox(new THREE.Vector3(0.62, 0.28, 0.86), new THREE.Vector3(x, -1.59, 0), 0.045),
+      roundedBox(new THREE.Vector3(0.56, 0.17, 0.74), new THREE.Vector3(x, -1.4, 0), 0.035),
+    )
+  }
+  vermilion.push(
+    roundedBox(new THREE.Vector3(4.92, 0.34, 0.68), new THREE.Vector3(0, 1.72, 0), 0.055),
+    roundedBox(new THREE.Vector3(3.78, 0.22, 0.54), new THREE.Vector3(0, 1.39, 0.03), 0.045),
+  )
+  for (let index = -5; index <= 5; index += 1) {
+    vermilion.push(roundedBox(new THREE.Vector3(0.18, 0.22, 0.82), new THREE.Vector3(index * 0.4, 1.94, 0), 0.025))
+  }
+  mergeBatch(frame, `${name}-sakura-vermilion-frame`, materials.vermilion, vermilion, 'sakura-vermilion-frame')
+  mergeBatch(
+    frame,
+    `${name}-sakura-foundation-stone-feet`,
+    materials.foundationStone,
+    masonry,
+    'sakura-foundation-stone-feet',
+  )
+  addJapaneseSakuraKawaraRoof(frame, materials.kawara, {
+    name: `${name}-sakura`,
+    ridgeY: 2.8,
+  })
+
+  const footStraps = [-1, 1].flatMap(side => [
+    roundedBox(new THREE.Vector3(0.14, 0.34, 0.05), new THREE.Vector3(side * 1.78, -1.06, 0.335), 0.018),
+    roundedBox(new THREE.Vector3(0.14, 0.34, 0.05), new THREE.Vector3(side * 1.58, -1.06, 0.335), 0.018),
+  ])
+  mergeBatch(frame, `${name}-sakura-foot-hardware`, materials.hardware, footStraps, 'sakura-frame-hardware')
+
+  const bolts = new THREE.InstancedMesh(new VisualCylinderGeometry(0.045, 0.045, 0.08, 12), materials.hardware, 4)
+  bolts.name = `${name}-sakura-frame-bolts`
+  let boltIndex = 0
+  for (const x of [-1.68, 1.68]) {
+    for (const y of [-1.16, -0.96]) {
+      bolts.setMatrixAt(
+        boltIndex++,
+        new THREE.Matrix4().compose(
+          new THREE.Vector3(x, y, 0.33),
+          new THREE.Quaternion().setFromAxisAngle(new THREE.Vector3(1, 0, 0), Math.PI / 2),
+          new THREE.Vector3(1, 1, 1),
+        ),
+      )
+    }
+  }
+  bolts.instanceMatrix.needsUpdate = true
+  markVisualOnly(bolts, 'sakura-frame-hardware')
+  frame.add(bolts)
+
+  addLantern(frame, name, color, materials.hardware)
+  addBlossoms(frame, name)
+  root.add(frame)
+  return frame
+}