@operato/scene-transport 10.0.0-beta.22

package/src/forklift-3d.ts

@@ -0,0 +1,591 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ *
+ * Forklift 3D — designed from a real forklift's proportions, not stacked from
+ * primitive geometry. Procedural lo-poly with deliberate aesthetic choices.
+ *
+ * Design priorities (in order):
+ *
+ *   1. **Silhouette reads** — at any camera angle the mast + counterweight +
+ *      forks combo identifies this as an industrial forklift.
+ *   2. **Proportions** — chassis ~35% of envelope, cab ~25%, overhead guard
+ *      ~30%. Forks extend forward roughly the full chassis length.
+ *      Counterweight is the heaviest visual mass, set rearward.
+ *   3. **Sculpted, not stacked** — the chassis side profile is a single
+ *      `ExtrudeGeometry` (sloped hood / cab indent / counterweight rise),
+ *      not three separate boxes glued together. Mast and forks are
+ *      L-shaped extrusions, not rectangular prisms.
+ *   4. **Material palette** — yellow body with subtle shaded variant for
+ *      shape-reading; dark counterweight; cool gray mast; chrome hydraulic.
+ *      Status emissive only on the lamp + accent stripe.
+ *   5. **Sub-assemblies as groups** — chassis / cab / guard / mast / wheels
+ *      / accents are organized as scene-graph children. Adjustable mass
+ *      (mast group, forks) tracks `state.forkHeight` cleanly.
+ *
+ * Coordinate convention (component-local):
+ *   - Origin at the geometric center of the component bounds.
+ *   - X-axis: vehicle width (left/right).
+ *   - Y-axis: vertical. Floor at `-depth/2`, ceiling at `+depth/2`.
+ *   - Z-axis: vehicle length, +Z = forward (forks point this way).
+ *
+ * Defaults (with the scene-unit StandardHeights — operation=50, ceiling=200):
+ *   - depth = 200 (full envelope; mast collapsed reaches ~80%, mast up to top)
+ *   - wheelR = depth * 0.07 (~14)
+ *   - chassis section length ~0.65 of width footprint
+ *   - cab seat height ~operation level (matches the design intuition that
+ *     the operator's seat sits at the standard operation surface)
+ */
+
+import * as THREE from 'three'
+import * as BufferGeometryUtils from 'three/examples/jsm/utils/BufferGeometryUtils.js'
+import { RoundedBoxGeometry } from 'three/examples/jsm/geometries/RoundedBoxGeometry.js'
+import { RealObjectGroup } from '@hatiolab/things-scene'
+
+// ─── Color palette ─────────────────────────────────────────────────────────
+const COLOR_COUNTERWEIGHT = 0x1c1c22
+const COLOR_MAST = 0x36363f
+const COLOR_FORK = 0x14141a
+const COLOR_TIRE = 0x171719
+const COLOR_RIM = 0x707080
+const COLOR_HUB = 0xb8b8c0
+const COLOR_SEAT = 0x14141c
+const COLOR_STEERING = 0x202028
+const COLOR_GUARD = 0x252530
+const COLOR_HYDRAULIC = 0xc8ccd8
+const COLOR_CHAIN = 0x4a4a55
+const COLOR_WINDOW = 0x88aacc
+const COLOR_TAIL = 0xff2626
+const COLOR_HEADLIGHT = 0xfff7d4
+
+export class Forklift3D extends RealObjectGroup {
+  /** Local-frame position of the fork-tip top surface — where cargo sits. */
+  get cargoMount(): { x: number; y: number; z: number; width: number; depth: number } {
+    const { width, height, depth = 200 } = this.component.state
+    const raw = (this.component.state.forkHeight as number) ?? 0
+    const forkHeight = Math.max(0, Math.min(raw, depth * 0.85))
+    const wheelR = depth * 0.07
+    const forkH = depth * 0.018
+    const forkLen = height * 0.42
+    const y = -depth / 2 + wheelR + forkHeight + forkH
+    const z = height * 0.42 + forkLen / 2
+    return { x: 0, y, z, width: width * 0.4, depth: forkLen }
+  }
+
+  build() {
+    super.build()
+
+    // ── State + clamping ─────────────────────────────────────────────
+    const { width, height, depth = 200 } = this.component.state
+    const bodyColor = (this.component.state.bodyColor as string) || '#ffc107'
+    const lampEmissive = (this.component.state.lampEmissive as string) || '#333333'
+    const status = this.component.state.status
+    const lampIntensity = status && status !== 'idle' ? 1.5 : 0.2
+    const forkHeightRaw = (this.component.state.forkHeight as number) ?? 0
+    const forkHeight = Math.max(0, Math.min(forkHeightRaw, depth * 0.85))
+
+    // ── Proportions ──────────────────────────────────────────────────
+    const baseY = -depth / 2
+    const wheelR = depth * 0.07
+    const chassisH = depth * 0.30 // hood height + step up
+    const cabH = depth * 0.22
+    const guardH = depth * 0.30 // overhead guard above cab
+    const cwH = depth * 0.50 // counterweight tall block
+    const cwD = height * 0.22 // counterweight depth (along z)
+    const chassisLen = height * 0.55 // length along z (vehicle direction)
+    const cabFloorY = baseY + wheelR + chassisH * 0.85 // cab seat near operation level
+
+    // ── Materials ─────────────────────────────────────────────────────
+    const bodyMat = new THREE.MeshStandardMaterial({
+      color: bodyColor,
+      metalness: 0.30,
+      roughness: 0.45
+    })
+    const bodyShadeMat = new THREE.MeshStandardMaterial({
+      color: new THREE.Color(bodyColor).multiplyScalar(0.78),
+      metalness: 0.28,
+      roughness: 0.50
+    })
+    const cwMat = new THREE.MeshStandardMaterial({
+      color: COLOR_COUNTERWEIGHT,
+      metalness: 0.55,
+      roughness: 0.65
+    })
+    const mastMat = new THREE.MeshStandardMaterial({
+      color: COLOR_MAST,
+      metalness: 0.85,
+      roughness: 0.30
+    })
+    const forkMat = new THREE.MeshStandardMaterial({
+      color: COLOR_FORK,
+      metalness: 0.85,
+      roughness: 0.35
+    })
+    const tireMat = new THREE.MeshStandardMaterial({ color: COLOR_TIRE, roughness: 0.95 })
+    const rimMat = new THREE.MeshStandardMaterial({ color: COLOR_RIM, metalness: 0.80, roughness: 0.30 })
+    const hubMat = new THREE.MeshStandardMaterial({ color: COLOR_HUB, metalness: 0.85, roughness: 0.25 })
+    const seatMat = new THREE.MeshStandardMaterial({ color: COLOR_SEAT, roughness: 0.85 })
+    const guardMat = new THREE.MeshStandardMaterial({ color: COLOR_GUARD, metalness: 0.75, roughness: 0.40 })
+    const hydraulicMat = new THREE.MeshStandardMaterial({ color: COLOR_HYDRAULIC, metalness: 0.95, roughness: 0.10 })
+    const chainMat = new THREE.MeshStandardMaterial({ color: COLOR_CHAIN, metalness: 0.80, roughness: 0.40 })
+    const windowMat = new THREE.MeshStandardMaterial({
+      color: COLOR_WINDOW, metalness: 0.20, roughness: 0.05,
+      transparent: true, opacity: 0.55
+    })
+    const tailMat = new THREE.MeshStandardMaterial({
+      color: COLOR_TAIL, emissive: COLOR_TAIL, emissiveIntensity: 0.6,
+      metalness: 0.10, roughness: 0.40
+    })
+    const headlightMat = new THREE.MeshStandardMaterial({
+      color: COLOR_HEADLIGHT, emissive: COLOR_HEADLIGHT, emissiveIntensity: 0.4,
+      metalness: 0.10, roughness: 0.30
+    })
+
+    // ────────────────────────────────────────────────────────────────
+    // 1. CHASSIS BODY  — sculpted side profile + width via ExtrudeGeometry
+    // ────────────────────────────────────────────────────────────────
+    const chassisGroup = new THREE.Group()
+    chassisGroup.position.set(0, baseY + wheelR, 0) // wheels rest on floor
+
+    // Side profile (looking from +X, +Z forward, +Y up).
+    // Coordinates start at (z, y) = (chassisLen/2, 0) — front bottom corner.
+    const zFront = chassisLen * 0.5
+    const zBack = -chassisLen * 0.5
+    const hoodH = chassisH * 0.55
+    const stepZ = chassisLen * 0.10
+    const seatH = chassisH * 0.85
+
+    const sideShape = new THREE.Shape()
+    sideShape.moveTo(zFront, 0)
+    sideShape.lineTo(zFront, hoodH)             // up to hood top
+    sideShape.lineTo(stepZ * 1.2, hoodH)        // forward hood flat
+    sideShape.lineTo(stepZ * 0.4, seatH)        // sloped step up to seat platform
+    sideShape.lineTo(zBack + stepZ, seatH)      // platform flat to rear
+    sideShape.lineTo(zBack, seatH * 1.05)       // tiny lip into counterweight
+    sideShape.lineTo(zBack, 0)                  // down to ground
+    sideShape.lineTo(zFront, 0)
+
+    const chassisGeo = new THREE.ExtrudeGeometry(sideShape, {
+      depth: width * 0.78,
+      bevelEnabled: true,
+      bevelSegments: 2,
+      bevelSize: chassisH * 0.04,
+      bevelThickness: chassisH * 0.04,
+      curveSegments: 6
+    })
+    chassisGeo.rotateY(Math.PI / 2)
+    chassisGeo.translate(width * 0.39, 0, 0)
+    const chassisMesh = new THREE.Mesh(chassisGeo, bodyMat)
+    chassisMesh.castShadow = true
+    chassisMesh.receiveShadow = true
+    chassisGroup.add(chassisMesh)
+
+    // Side accent panel (slightly recessed darker panel along the hood)
+    for (const xSign of [-1, 1]) {
+      const panelGeo = new RoundedBoxGeometry(width * 0.005, hoodH * 0.55, chassisLen * 0.6, 1, hoodH * 0.06)
+      const panelMesh = new THREE.Mesh(panelGeo, bodyShadeMat)
+      panelMesh.position.set(xSign * width * 0.395, hoodH * 0.45, stepZ * 0.4)
+      chassisGroup.add(panelMesh)
+    }
+
+    // Status pinstripe — emissive thin band above the panel, status color
+    const pinMat = new THREE.MeshStandardMaterial({
+      color: lampEmissive, emissive: lampEmissive,
+      emissiveIntensity: Math.max(lampIntensity * 0.3, 0.08),
+      metalness: 0.20, roughness: 0.40
+    })
+    for (const xSign of [-1, 1]) {
+      const pinGeo = new THREE.BoxGeometry(width * 0.006, hoodH * 0.04, chassisLen * 0.55)
+      const pinMesh = new THREE.Mesh(pinGeo, pinMat)
+      pinMesh.position.set(xSign * width * 0.40, hoodH * 0.78, stepZ * 0.4)
+      chassisGroup.add(pinMesh)
+    }
+
+    // Headlights (front face of hood, two small emissive blocks)
+    for (const xSign of [-1, 1]) {
+      const hlGeo = new RoundedBoxGeometry(width * 0.10, hoodH * 0.18, chassisH * 0.05, 2, hoodH * 0.04)
+      const hlMesh = new THREE.Mesh(hlGeo, headlightMat)
+      hlMesh.position.set(xSign * width * 0.21, hoodH * 0.60, zFront + chassisH * 0.025)
+      chassisGroup.add(hlMesh)
+    }
+
+    this.object3d.add(chassisGroup)
+
+    // ────────────────────────────────────────────────────────────────
+    // 2. COUNTERWEIGHT  — sculpted rear mass (tapered, distinct from chassis)
+    // ────────────────────────────────────────────────────────────────
+    const cwGroup = new THREE.Group()
+    const cwZ = zBack - cwD * 0.5
+
+    // Base — wide, rectangular with rounded corners, sits low
+    const cwBaseGeo = new RoundedBoxGeometry(width * 0.96, cwH * 0.70, cwD, 3, cwH * 0.05)
+    const cwBaseMesh = new THREE.Mesh(cwBaseGeo, cwMat)
+    cwBaseMesh.position.set(0, baseY + wheelR + cwH * 0.35, cwZ)
+    cwBaseMesh.castShadow = true
+    cwGroup.add(cwBaseMesh)
+
+    // Top — narrower, slightly forward — gives the chamfered cast-iron look
+    const cwTopGeo = new RoundedBoxGeometry(width * 0.82, cwH * 0.32, cwD * 0.85, 3, cwH * 0.04)
+    const cwTopMat = new THREE.MeshStandardMaterial({
+      color: new THREE.Color(COLOR_COUNTERWEIGHT).multiplyScalar(1.20),
+      metalness: 0.55, roughness: 0.65
+    })
+    const cwTopMesh = new THREE.Mesh(cwTopGeo, cwTopMat)
+    cwTopMesh.position.set(0, baseY + wheelR + cwH * 0.70 + cwH * 0.16, cwZ + cwD * 0.05)
+    cwTopMesh.castShadow = true
+    cwGroup.add(cwTopMesh)
+
+    // Tail lights (rear face of cw base)
+    for (const xSign of [-1, 1]) {
+      const tailGeo = new RoundedBoxGeometry(width * 0.10, cwH * 0.10, cwD * 0.04, 1, cwD * 0.02)
+      const tailMesh = new THREE.Mesh(tailGeo, tailMat)
+      tailMesh.position.set(xSign * width * 0.36, baseY + wheelR + cwH * 0.50, cwZ - cwD * 0.50)
+      cwGroup.add(tailMesh)
+    }
+
+    this.object3d.add(cwGroup)
+
+    // ────────────────────────────────────────────────────────────────
+    // 3. CAB — open frame: pillars + roof + seat + steering
+    // ────────────────────────────────────────────────────────────────
+    const cabGroup = new THREE.Group()
+    const cabRoofY = cabFloorY + cabH
+    const pillarT = width * 0.025
+    const pillarPositions: [number, number][] = [
+      [width * 0.27, height * 0.05],   // front-right
+      [width * 0.27, -height * 0.28],  // rear-right
+      [-width * 0.27, height * 0.05],
+      [-width * 0.27, -height * 0.28]
+    ]
+
+    const pillarGeos: THREE.BufferGeometry[] = []
+    for (const [x, z] of pillarPositions) {
+      const g = new RoundedBoxGeometry(pillarT, cabH, pillarT, 1, pillarT * 0.2)
+      g.translate(x, cabFloorY + cabH / 2, z)
+      pillarGeos.push(g)
+    }
+    const pillarsMesh = new THREE.Mesh(BufferGeometryUtils.mergeGeometries(pillarGeos), bodyShadeMat)
+    pillarsMesh.castShadow = true
+    cabGroup.add(pillarsMesh)
+
+    // Roof panel with overhang
+    const cabRoofGeo = new RoundedBoxGeometry(width * 0.62, depth * 0.020, height * 0.40, 2, width * 0.02)
+    const cabRoofMesh = new THREE.Mesh(cabRoofGeo, bodyShadeMat)
+    cabRoofMesh.position.set(0, cabRoofY + depth * 0.010, -height * 0.115)
+    cabRoofMesh.castShadow = true
+    cabGroup.add(cabRoofMesh)
+
+    // Operator seat
+    const seatGeo = new RoundedBoxGeometry(width * 0.28, cabH * 0.40, height * 0.20, 2, width * 0.03)
+    const seatMesh = new THREE.Mesh(seatGeo, seatMat)
+    seatMesh.position.set(0, cabFloorY + cabH * 0.22, -height * 0.18)
+    cabGroup.add(seatMesh)
+
+    // Backrest
+    const backGeo = new RoundedBoxGeometry(width * 0.28, cabH * 0.65, height * 0.04, 2, width * 0.02)
+    const backMesh = new THREE.Mesh(backGeo, seatMat)
+    backMesh.position.set(0, cabFloorY + cabH * 0.55, -height * 0.27)
+    cabGroup.add(backMesh)
+
+    // Steering column + wheel
+    const steeringMat = new THREE.MeshStandardMaterial({
+      color: COLOR_STEERING, metalness: 0.4, roughness: 0.55
+    })
+    const colGeo = new THREE.CylinderGeometry(width * 0.014, width * 0.020, cabH * 0.55, 16)
+    colGeo.rotateX(-Math.PI * 0.12)
+    const colMesh = new THREE.Mesh(colGeo, steeringMat)
+    colMesh.position.set(0, cabFloorY + cabH * 0.30, -height * 0.05)
+    cabGroup.add(colMesh)
+    const swGeo = new THREE.TorusGeometry(width * 0.10, width * 0.013, 8, 24)
+    swGeo.rotateX(Math.PI / 2 - Math.PI * 0.12)
+    const swMesh = new THREE.Mesh(swGeo, steeringMat)
+    swMesh.position.set(0, cabFloorY + cabH * 0.55, height * 0.02)
+    cabGroup.add(swMesh)
+
+    this.object3d.add(cabGroup)
+
+    // ────────────────────────────────────────────────────────────────
+    // 4. OVERHEAD GUARD — ROPS structure above cab
+    // ────────────────────────────────────────────────────────────────
+    const guardGroup = new THREE.Group()
+    const guardPostT = width * 0.024
+    const guardX = width * 0.27
+    const guardZF = height * 0.05
+    const guardZB = -height * 0.38
+    const guardPostY = cabRoofY + guardH / 2
+
+    const guardGeos: THREE.BufferGeometry[] = []
+    for (const xSign of [-1, 1]) {
+      for (const z of [guardZF, guardZB]) {
+        const g = new THREE.BoxGeometry(guardPostT, guardH, guardPostT)
+        g.translate(xSign * guardX, guardPostY, z)
+        guardGeos.push(g)
+      }
+    }
+    // Roof grid (3 lateral + 3 longitudinal bars)
+    const roofY = guardPostY + guardH / 2 + guardPostT / 2
+    const roofZSpan = guardZF - guardZB
+    for (const xFrac of [-1, 0, 1]) {
+      const g = new THREE.BoxGeometry(guardPostT * 0.7, guardPostT * 0.7, roofZSpan + guardPostT)
+      g.translate(xFrac * guardX, roofY, (guardZF + guardZB) / 2)
+      guardGeos.push(g)
+    }
+    for (const zFrac of [-1, 0, 1]) {
+      const g = new THREE.BoxGeometry(2 * guardX + guardPostT, guardPostT * 0.7, guardPostT * 0.7)
+      g.translate(0, roofY, (guardZF + guardZB) / 2 + zFrac * roofZSpan * 0.5)
+      guardGeos.push(g)
+    }
+    const guardMesh = new THREE.Mesh(BufferGeometryUtils.mergeGeometries(guardGeos), guardMat)
+    guardMesh.castShadow = true
+    guardGroup.add(guardMesh)
+
+    // Side mirrors (small disks on bracket arms from guard front posts)
+    const mirrorMat = new THREE.MeshStandardMaterial({
+      color: COLOR_WINDOW, metalness: 0.85, roughness: 0.10
+    })
+    for (const xSign of [-1, 1]) {
+      const bracketGeo = new THREE.BoxGeometry(width * 0.025, guardPostT * 0.5, guardPostT * 0.5)
+      const bracketMesh = new THREE.Mesh(bracketGeo, guardMat)
+      bracketMesh.position.set(xSign * (guardX + width * 0.0125), cabRoofY + guardH * 0.65, guardZF)
+      guardGroup.add(bracketMesh)
+
+      const mirGeo = new THREE.CylinderGeometry(width * 0.04, width * 0.04, width * 0.008, 16)
+      mirGeo.rotateZ(Math.PI / 2)
+      const mirMesh = new THREE.Mesh(mirGeo, mirrorMat)
+      mirMesh.position.set(xSign * (guardX + width * 0.05), cabRoofY + guardH * 0.65, guardZF)
+      guardGroup.add(mirMesh)
+    }
+
+    this.object3d.add(guardGroup)
+
+    // ────────────────────────────────────────────────────────────────
+    // 5. MAST ASSEMBLY — rails + crossbar + hydraulic + chains + carriage + forks
+    // ────────────────────────────────────────────────────────────────
+    const mastGroup = new THREE.Group()
+    const mastH = depth * 0.95
+    const mastRailW = width * 0.06
+    const mastRailD = height * 0.03
+    const mastSpacing = width * 0.45
+    const mastZ = height * 0.42
+    const mastY = baseY + wheelR + mastH / 2
+
+    // Two main rails (rounded for visual softness)
+    for (const xSign of [-1, 1]) {
+      const railGeo = new RoundedBoxGeometry(mastRailW, mastH, mastRailD, 2, mastRailW * 0.20)
+      const railMesh = new THREE.Mesh(railGeo, mastMat)
+      railMesh.position.set((xSign * mastSpacing) / 2, mastY, mastZ)
+      railMesh.castShadow = true
+      mastGroup.add(railMesh)
+    }
+
+    // Crossbar at top
+    const crossbarGeo = new RoundedBoxGeometry(
+      mastSpacing + mastRailW, mastRailD * 1.3, mastRailD * 1.1, 2, mastRailW * 0.15
+    )
+    const crossbarMesh = new THREE.Mesh(crossbarGeo, mastMat)
+    crossbarMesh.position.set(0, baseY + wheelR + mastH, mastZ)
+    crossbarMesh.castShadow = true
+    mastGroup.add(crossbarMesh)
+
+    // Hydraulic cylinder (center, between rails)
+    const hydCylR = mastRailW * 0.42
+    const hydCylH = mastH * 0.78
+    const hydCylGeo = new THREE.CylinderGeometry(hydCylR, hydCylR * 1.05, hydCylH, 20)
+    const hydCylMesh = new THREE.Mesh(hydCylGeo, hydraulicMat)
+    hydCylMesh.position.set(0, baseY + wheelR + hydCylH / 2 + mastRailD * 0.5, mastZ - mastRailD * 0.15)
+    hydCylMesh.castShadow = true
+    mastGroup.add(hydCylMesh)
+
+    // Piston rod (length tracks forkHeight)
+    const pistonR = hydCylR * 0.55
+    const pistonH = hydCylH * 0.45 + forkHeight * 0.7
+    const pistonGeo = new THREE.CylinderGeometry(pistonR, pistonR, pistonH, 16)
+    const pistonMesh = new THREE.Mesh(pistonGeo, hydraulicMat)
+    pistonMesh.position.set(
+      0,
+      baseY + wheelR + hydCylH + pistonH / 2 + mastRailD * 0.5,
+      mastZ - mastRailD * 0.15
+    )
+    mastGroup.add(pistonMesh)
+
+    // Lift chains (parallel link bars between rails)
+    for (const xSign of [-1, 1]) {
+      const chW = mastRailW * 0.18
+      const chH = mastH * 0.55
+      const chGeo = new THREE.BoxGeometry(chW, chH, mastRailD * 0.3)
+      const chMesh = new THREE.Mesh(chGeo, chainMat)
+      chMesh.position.set(xSign * mastSpacing * 0.30, baseY + wheelR + chH / 2 + mastRailD * 0.5, mastZ - mastRailD * 0.4)
+      mastGroup.add(chMesh)
+    }
+
+    // Carriage (sliding plate)
+    const carriageY = baseY + wheelR + forkHeight + cwH * 0.05
+    const carriageW = mastSpacing + mastRailW
+    const carriageH = chassisH * 0.40
+    const carriageD = mastRailD * 0.7
+    const carriageGeo = new RoundedBoxGeometry(carriageW, carriageH, carriageD, 2, carriageH * 0.10)
+    const carriageMesh = new THREE.Mesh(carriageGeo, forkMat)
+    carriageMesh.position.set(0, carriageY + carriageH / 2, mastZ + mastRailD)
+    carriageMesh.castShadow = true
+    mastGroup.add(carriageMesh)
+
+    // Forks (L-shape via ExtrudeGeometry — heel + horizontal blade)
+    const forkLen = height * 0.42
+    const forkW = width * 0.10
+    const forkH = depth * 0.018
+    const forkBladeY = carriageY + forkH / 2
+    for (const xSign of [-1, 1]) {
+      const heelH = carriageH * 0.85
+      const fs = new THREE.Shape()
+      fs.moveTo(0, 0)
+      fs.lineTo(forkLen, 0)
+      fs.lineTo(forkLen, forkH * 0.5)
+      fs.lineTo(forkH, forkH * 1.0)
+      fs.lineTo(forkH, heelH)
+      fs.lineTo(0, heelH)
+      fs.lineTo(0, 0)
+      const forkGeo = new THREE.ExtrudeGeometry(fs, {
+        depth: forkW,
+        bevelEnabled: true,
+        bevelSegments: 1,
+        bevelSize: forkH * 0.18,
+        bevelThickness: forkH * 0.18
+      })
+      forkGeo.rotateY(-Math.PI / 2)
+      forkGeo.translate(
+        xSign * mastSpacing * 0.45 + forkW / 2,
+        forkBladeY,
+        mastZ + mastRailD + carriageD
+      )
+      const forkMesh = new THREE.Mesh(forkGeo, forkMat)
+      forkMesh.castShadow = true
+      mastGroup.add(forkMesh)
+    }
+
+    this.object3d.add(mastGroup)
+
+    // ────────────────────────────────────────────────────────────────
+    // 6. WHEELS — tire + rim disc + spokes (drive front, caster rear)
+    // ────────────────────────────────────────────────────────────────
+    const wheelW = depth * 0.04
+    const wheelGroup = new THREE.Group()
+
+    const tireGeos: THREE.BufferGeometry[] = []
+    const rimGeos: THREE.BufferGeometry[] = []
+    const hubGeos: THREE.BufferGeometry[] = []
+
+    // Front (drive) wheels — slightly larger
+    for (const xSign of [-1, 1]) {
+      const cx = xSign * width * 0.42
+      const cz = height * 0.30
+      const r = wheelR * 1.05
+
+      const tire = new THREE.CylinderGeometry(r, r, wheelW, 24)
+      tire.rotateZ(Math.PI / 2)
+      tire.translate(cx, baseY + r, cz)
+      tireGeos.push(tire)
+
+      const rim = new THREE.CylinderGeometry(r * 0.55, r * 0.55, wheelW * 0.85, 18)
+      rim.rotateZ(Math.PI / 2)
+      rim.translate(cx + xSign * wheelW * 0.10, baseY + r, cz)
+      rimGeos.push(rim)
+
+      // Spokes (5 cross-bars on the rim front face)
+      for (let i = 0; i < 5; i++) {
+        const angle = (i / 5) * Math.PI * 2
+        const sp = new THREE.BoxGeometry(wheelW * 0.10, r * 0.10, r * 0.95)
+        sp.rotateX(angle)
+        sp.translate(cx + xSign * wheelW * 0.50, baseY + r, cz)
+        hubGeos.push(sp)
+      }
+      // Center hub cap
+      const cap = new THREE.SphereGeometry(r * 0.22, 14, 10, 0, Math.PI * 2, 0, Math.PI / 2)
+      cap.rotateZ(Math.PI / 2 * xSign)
+      cap.translate(cx + xSign * wheelW * 0.55, baseY + r, cz)
+      hubGeos.push(cap)
+    }
+
+    // Rear (caster) wheels — smaller
+    for (const xSign of [-1, 1]) {
+      const cx = xSign * width * 0.36
+      const cz = -height * 0.32
+      const r = wheelR * 0.78
+
+      const tire = new THREE.CylinderGeometry(r, r, wheelW * 0.85, 20)
+      tire.rotateZ(Math.PI / 2)
+      tire.translate(cx, baseY + r, cz)
+      tireGeos.push(tire)
+
+      const rim = new THREE.CylinderGeometry(r * 0.55, r * 0.55, wheelW * 0.7, 16)
+      rim.rotateZ(Math.PI / 2)
+      rim.translate(cx + xSign * wheelW * 0.08, baseY + r, cz)
+      rimGeos.push(rim)
+    }
+
+    const tireMesh = new THREE.Mesh(BufferGeometryUtils.mergeGeometries(tireGeos), tireMat)
+    tireMesh.castShadow = true
+    wheelGroup.add(tireMesh)
+
+    const rimMesh = new THREE.Mesh(BufferGeometryUtils.mergeGeometries(rimGeos), rimMat)
+    rimMesh.castShadow = true
+    wheelGroup.add(rimMesh)
+
+    if (hubGeos.length > 0) {
+      const hubMesh = new THREE.Mesh(BufferGeometryUtils.mergeGeometries(hubGeos), hubMat)
+      wheelGroup.add(hubMesh)
+    }
+
+    this.object3d.add(wheelGroup)
+
+    // ────────────────────────────────────────────────────────────────
+    // 7. STATUS LAMP — sculpted (base + body + dome) on guard top
+    // ────────────────────────────────────────────────────────────────
+    const lampGroup = new THREE.Group()
+    const lampR = Math.min(width, height) * 0.04
+    const lampH = lampR * 1.5
+    const lampMat = new THREE.MeshStandardMaterial({
+      color: lampEmissive, emissive: lampEmissive,
+      emissiveIntensity: lampIntensity,
+      metalness: 0.0, roughness: 0.30
+    })
+
+    // Base disc
+    const lbGeo = new THREE.CylinderGeometry(lampR * 1.15, lampR * 1.15, lampR * 0.25, 16)
+    const lbMesh = new THREE.Mesh(lbGeo, guardMat)
+    lbMesh.position.set(0, roofY + guardPostT * 0.5 + lampR * 0.125, (guardZF + guardZB) / 2)
+    lampGroup.add(lbMesh)
+
+    // Body
+    const lyGeo = new THREE.CylinderGeometry(lampR, lampR * 0.95, lampH, 16)
+    const lyMesh = new THREE.Mesh(lyGeo, lampMat)
+    lyMesh.position.set(0, roofY + guardPostT * 0.5 + lampR * 0.25 + lampH / 2, (guardZF + guardZB) / 2)
+    lampGroup.add(lyMesh)
+
+    // Dome
+    const ldGeo = new THREE.SphereGeometry(lampR, 16, 8, 0, Math.PI * 2, 0, Math.PI / 2)
+    const ldMesh = new THREE.Mesh(ldGeo, lampMat)
+    ldMesh.position.set(0, roofY + guardPostT * 0.5 + lampR * 0.25 + lampH, (guardZF + guardZB) / 2)
+    lampGroup.add(ldMesh)
+
+    this.object3d.add(lampGroup)
+  }
+
+  updateDimension() {}
+
+  onchange(after: Record<string, unknown>, before: Record<string, unknown>) {
+    if (
+      'status' in after ||
+      'bodyColor' in after ||
+      'lampEmissive' in after ||
+      'forkHeight' in after ||
+      'width' in after ||
+      'height' in after ||
+      'depth' in after
+    ) {
+      this.update()
+      return
+    }
+    super.onchange(after, before)
+  }
+
+  updateAlpha() {}
+}