@fmsim/machine 1.0.87 → 2.0.0-beta.2

package/src/factories/conveyor-3d.ts

@@ -0,0 +1,311 @@
+/**
+ * Conveyor 3D Factory
+ *
+ * 'conveyor' type (default): side rails + cylindrical rollers + 4 legs + cross-bracing
+ * 'belt' type:               side rails + two end drums + belt wrapping + 4 legs + cross-bracing
+ * 'rail' type:               side rails + two parallel rails + 4 legs + cross-bracing
+ *
+ * Based on operato-scene conveyor-3d.ts, adapted for fmsim:
+ *   - conveyorType is string ('', 'conveyor', 'belt', 'rail') instead of numeric
+ *   - statusColor from MCSStatusMixin instead of value-based lookup
+ *   - rollWidth auto-calculated: Math.max(10, Math.min(width, height) / 2)
+ */
+
+import * as THREE from 'three'
+import * as BufferGeometryUtils from 'three/examples/jsm/utils/BufferGeometryUtils.js'
+import { RealObjectGroup, registerRealObjectFactory } from '@hatiolab/things-scene'
+import type { Component } from '@hatiolab/things-scene'
+import { TRANSPORT_SURFACE_HEIGHT } from './machine-3d.js'
+
+const FRAME_COLOR = 0x888899
+const ROLLER_COLOR = 0xaaaabc
+const DEFAULT_COLOR = 0x999999
+
+export class Conveyor3D extends RealObjectGroup {
+  get effectiveDepth(): number {
+    const { depth } = this.component.state
+    return depth || TRANSPORT_SURFACE_HEIGHT
+  }
+
+  // group origin = 바닥 (y=0). MCSRealObject3D와 동일 컨벤션.
+  // 기하는 build()에서 y=0(바닥)~y=depth(상단) 범위로 배치.
+  protected get syncZPosOffset(): number {
+    return 0
+  }
+
+  private resolveColor(): number {
+    const comp = this.component as any
+
+    // 1) MCSStatusMixin.statusColor (legend 기반 상태 색상)
+    //    '#F0F0F0'은 상태 미설정 시 기본 fallback — 무시하고 defaultColor 사용
+    try {
+      const sc = comp.statusColor
+      if (typeof sc === 'string' && sc && sc.toUpperCase() !== '#F0F0F0') return new THREE.Color(sc).getHex()
+    } catch {
+      /* statusColor 미구현 시 무시 */
+    }
+
+    // 2) state.fillStyle fallback
+    const { fillStyle } = this.component.state
+    if (fillStyle && typeof fillStyle === 'string') {
+      try {
+        return new THREE.Color(fillStyle).getHex()
+      } catch {
+        /* 파싱 실패 시 무시 */
+      }
+    }
+
+    return DEFAULT_COLOR
+  }
+
+  build() {
+    super.build()
+
+    const { width, height, conveyorType } = this.component.state
+    const depth = this.effectiveDepth
+    if (!width || !height) return
+
+    // 2D와 동일 로직으로 rollWidth 산출
+    const rollWidth = Math.max(10, Math.min(width, height) / 2)
+    const rollerDiameter = Math.max(rollWidth, 2)
+    const frameH = Math.min(rollerDiameter, depth)
+    const legH = Math.max(depth - frameH, 0)
+    const railW = Math.max(height * 0.06, 2)
+    const legThickness = Math.max(railW * 0.8, 2)
+
+    const frameMaterial = new THREE.MeshStandardMaterial({
+      color: FRAME_COLOR,
+      metalness: 0.85,
+      roughness: 0.35,
+    })
+
+    // --- Frame: side rails + legs + cross-bracing ---
+    // Y 좌표: y=0(바닥) ~ y=depth(상단). 레일 상단이 depth에 위치.
+    const frameGeometries: THREE.BufferGeometry[] = []
+    const railY = depth - frameH / 2
+
+    // Side rails (along X)
+    for (const zSign of [-1, 1]) {
+      const rail = new THREE.BoxGeometry(width, frameH, railW)
+      rail.translate(0, railY, zSign * (height / 2 - railW / 2))
+      frameGeometries.push(rail)
+    }
+
+    // 4 legs at corners
+    if (legH > 0) {
+      const legTopY = depth - frameH
+      const legCenterY = legTopY - legH / 2
+
+      for (const xSign of [-1, 1]) {
+        for (const zSign of [-1, 1]) {
+          const lx = xSign * (width / 2 - legThickness / 2)
+          const lz = zSign * (height / 2 - railW / 2)
+          const leg = new THREE.BoxGeometry(legThickness, legH, legThickness)
+          leg.translate(lx, legCenterY, lz)
+          frameGeometries.push(leg)
+        }
+      }
+
+      // Cross-bracing: 앞뒤 다리 연결 (Z 방향)
+      const braceH = legThickness * 0.6
+      const braceW = legThickness * 0.6
+      const braceLen = height - railW
+      const braceY = legTopY - legH * 0.35
+
+      for (const xSign of [-1, 1]) {
+        const brace = new THREE.BoxGeometry(braceW, braceH, braceLen)
+        brace.translate(xSign * (width / 2 - legThickness / 2), braceY, 0)
+        frameGeometries.push(brace)
+      }
+
+      // Cross-bracing: 좌우 다리 연결 (X 방향)
+      const braceLenX = width - legThickness
+      for (const zSign of [-1, 1]) {
+        const brace = new THREE.BoxGeometry(braceLenX, braceH, braceW)
+        brace.translate(0, braceY, zSign * (height / 2 - railW / 2))
+        frameGeometries.push(brace)
+      }
+    }
+
+    const frameMesh = new THREE.Mesh(BufferGeometryUtils.mergeGeometries(frameGeometries), frameMaterial)
+    frameMesh.castShadow = true
+    frameMesh.receiveShadow = true
+    this.object3d.add(frameMesh)
+
+    // --- Rollers, Belt, or Rails ---
+    if (conveyorType === 'rail') {
+      this.buildRails(width, height, depth, frameH, railW)
+    } else if (conveyorType === 'belt') {
+      this.buildBelt(width, height, depth, frameH, railW)
+    } else {
+      this.buildRollers(width, height, depth, frameH, railW, rollWidth)
+    }
+  }
+
+  private buildRollers(
+    width: number,
+    height: number,
+    depth: number,
+    frameH: number,
+    railW: number,
+    rollWidth: number
+  ) {
+    const rollerRadius = Math.max(rollWidth / 8, 1)
+    const rollerLength = height - railW * 2 - 0.5
+    const diameter = rollerRadius * 2
+    // 롤러 간 최소 간격 (z-fighting 방지용 미세 갭만)
+    const step = diameter * 1.05
+    // 롤러 상단 = 이송 표면 (y=depth)
+    const rollerY = depth - rollerRadius
+    const color = this.resolveColor()
+
+    const rollerGeometries: THREE.BufferGeometry[] = []
+    const count = Math.max(1, Math.floor(width / step))
+    const totalSpan = (count - 1) * step
+    const startX = -totalSpan / 2
+
+    for (let i = 0; i < count; i++) {
+      const x = startX + i * step
+      const roller = new THREE.CylinderGeometry(rollerRadius, rollerRadius, rollerLength, 16)
+      roller.rotateX(Math.PI / 2)
+      roller.translate(x, rollerY, 0)
+      rollerGeometries.push(roller)
+    }
+
+    if (rollerGeometries.length > 0) {
+      const rollerMesh = new THREE.Mesh(
+        BufferGeometryUtils.mergeGeometries(rollerGeometries),
+        new THREE.MeshStandardMaterial({ color, metalness: 0.9, roughness: 0.2 })
+      )
+      rollerMesh.castShadow = true
+      this.object3d.add(rollerMesh)
+    }
+  }
+
+  private buildBelt(width: number, height: number, depth: number, frameH: number, railW: number) {
+    const drumRadius = frameH * 0.38
+    const drumLength = height - railW * 2
+    const beltY = depth - drumRadius
+    const color = this.resolveColor()
+
+    // Two end drums
+    const drumGeometries: THREE.BufferGeometry[] = []
+    const drumInset = drumRadius * 1.5
+    const leftDrumX = -width / 2 + drumInset
+    const rightDrumX = width / 2 - drumInset
+
+    for (const dx of [leftDrumX, rightDrumX]) {
+      const drum = new THREE.CylinderGeometry(drumRadius, drumRadius, drumLength, 16)
+      drum.rotateX(Math.PI / 2)
+      drum.translate(dx, beltY, 0)
+      drumGeometries.push(drum)
+    }
+
+    const drumMesh = new THREE.Mesh(
+      BufferGeometryUtils.mergeGeometries(drumGeometries),
+      new THREE.MeshStandardMaterial({ color: ROLLER_COLOR, metalness: 0.9, roughness: 0.2 })
+    )
+    drumMesh.castShadow = true
+    this.object3d.add(drumMesh)
+
+    // Belt surface
+    const beltThickness = drumRadius * 0.12
+    const beltMaterial = new THREE.MeshStandardMaterial({
+      color: color,
+      metalness: 0.0,
+      roughness: 0.9,
+    })
+
+    // Flat belt top surface spanning between drums
+    const flatLen = rightDrumX - leftDrumX
+    const flatGeo = new THREE.BoxGeometry(flatLen, beltThickness, drumLength)
+    const flatMesh = new THREE.Mesh(flatGeo, beltMaterial)
+    flatMesh.position.set(0, beltY + drumRadius, 0)
+    flatMesh.castShadow = true
+    this.object3d.add(flatMesh)
+
+    // Belt wrap around drums (segmented half-cylinder)
+    const wrapSegments = 12
+    for (const [dx, angleStart] of [
+      [leftDrumX, Math.PI / 2],
+      [rightDrumX, -Math.PI / 2],
+    ] as [number, number][]) {
+      const wrapGeometries: THREE.BufferGeometry[] = []
+      for (let i = 0; i < wrapSegments; i++) {
+        const a0 = angleStart + (Math.PI * i) / wrapSegments
+        const a1 = angleStart + (Math.PI * (i + 1)) / wrapSegments
+        const r = drumRadius + beltThickness / 2
+
+        const x0 = dx + Math.cos(a0) * r
+        const y0 = beltY + Math.sin(a0) * r
+        const x1 = dx + Math.cos(a1) * r
+        const y1 = beltY + Math.sin(a1) * r
+
+        const segLen = Math.sqrt((x1 - x0) ** 2 + (y1 - y0) ** 2) * 1.05
+        const segAngle = Math.atan2(y1 - y0, x1 - x0)
+
+        const seg = new THREE.BoxGeometry(segLen, beltThickness, drumLength)
+        seg.rotateZ(segAngle)
+        seg.translate((x0 + x1) / 2, (y0 + y1) / 2, 0)
+        wrapGeometries.push(seg)
+      }
+      const wrapMesh = new THREE.Mesh(BufferGeometryUtils.mergeGeometries(wrapGeometries), beltMaterial)
+      wrapMesh.castShadow = true
+      this.object3d.add(wrapMesh)
+    }
+
+    // Flat belt bottom (return path)
+    const bottomGeo = new THREE.BoxGeometry(flatLen, beltThickness, drumLength * 0.85)
+    const bottomMesh = new THREE.Mesh(bottomGeo, beltMaterial)
+    bottomMesh.position.set(0, beltY - drumRadius, 0)
+    this.object3d.add(bottomMesh)
+  }
+
+  private buildRails(width: number, height: number, depth: number, frameH: number, railW: number) {
+    const color = this.resolveColor()
+    const railHeight = frameH * 0.3
+    const railY = depth - railHeight / 2
+    const innerWidth = height - railW * 2
+    // 두 레일 간격: 내부 폭의 60%
+    const railSpacing = innerWidth * 0.6
+
+    const railMaterial = new THREE.MeshStandardMaterial({
+      color,
+      metalness: 0.7,
+      roughness: 0.3,
+    })
+
+    const railGeometries: THREE.BufferGeometry[] = []
+
+    // Two parallel rails running along X axis
+    for (const zSign of [-1, 1]) {
+      const rail = new THREE.BoxGeometry(width - railW * 2, railHeight, railW * 0.8)
+      rail.translate(0, railY, zSign * (railSpacing / 2))
+      railGeometries.push(rail)
+    }
+
+    const railMesh = new THREE.Mesh(BufferGeometryUtils.mergeGeometries(railGeometries), railMaterial)
+    railMesh.castShadow = true
+    this.object3d.add(railMesh)
+  }
+
+  updateDimension() {}
+  updateAlpha() {}
+
+  onchange(after: Record<string, unknown>, before: Record<string, unknown>) {
+    if (
+      'conveyorType' in after ||
+      'width' in after ||
+      'height' in after ||
+      'depth' in after ||
+      'fillStyle' in after ||
+      'strokeStyle' in after
+    ) {
+      this.update()
+      return
+    }
+    super.onchange(after, before)
+  }
+}
+
+registerRealObjectFactory('Conveyor', (component: Component) => new Conveyor3D(component))

package/src/factories/crane-3d.ts

@@ -0,0 +1,176 @@
+/**
+ * Crane (Stacker Crane) 3D Factory
+ *
+ * 스토커 내부의 스태커 크레인 — CraneRail 위를 이동하는 차체.
+ * 레일 인프라는 CraneRail이 담당하므로 크레인은 이동체만 표현.
+ *
+ * 구조 (바닥 원점, y=0~depth):
+ *   - 하단 바퀴/클램프 (4%, 바닥 레일에 물리는 부분)
+ *   - 수직 마스트 (좌우 기둥 88%, statusColor 적용)
+ *   - 캐리지 포크 (마스트 40% 높이, 양쪽 포크 암)
+ *   - 상단 클램프 (4%, 천장 레일에 물리는 부분)
+ */
+
+import * as THREE from 'three'
+import * as BufferGeometryUtils from 'three/examples/jsm/utils/BufferGeometryUtils.js'
+import { RealObjectGroup, registerRealObjectFactory } from '@hatiolab/things-scene'
+import type { Component } from '@hatiolab/things-scene'
+import { TRANSPORT_SURFACE_HEIGHT } from './machine-3d.js'
+
+const CLAMP_COLOR = 0x444444
+const FORK_COLOR = 0x999999
+const DEFAULT_BODY_COLOR = 0xcc8844
+
+export class Crane3D extends RealObjectGroup {
+  get effectiveDepth(): number {
+    const { depth } = this.component.state
+    return depth || 5 * TRANSPORT_SURFACE_HEIGHT - 2
+  }
+
+  protected get syncZPosOffset(): number {
+    return 0
+  }
+
+  private resolveColor(): number {
+    const comp = this.component as any
+
+    try {
+      const sc = comp.statusColor
+      if (typeof sc === 'string' && sc && sc.toUpperCase() !== '#F0F0F0') return new THREE.Color(sc).getHex()
+    } catch {
+      /* statusColor 미구현 시 무시 */
+    }
+
+    const { fillStyle } = this.component.state
+    if (fillStyle && typeof fillStyle === 'string') {
+      try {
+        return new THREE.Color(fillStyle).getHex()
+      } catch {
+        /* 파싱 실패 시 무시 */
+      }
+    }
+
+    return DEFAULT_BODY_COLOR
+  }
+
+  build() {
+    super.build()
+
+    const { width = 10, height = 10 } = this.component.state
+    const w = Math.abs(width)
+    const h = Math.abs(height)
+    const d = this.effectiveDepth
+    if (!w || !h) return
+
+    // 높이 배분: 하단 클램프 4%, 마스트 92%, 상단 클램프 4%
+    const clampH = d * 0.04
+    const mastH = d * 0.92
+
+    const pillarThick = Math.min(w, h) * 0.12
+
+    const clampMat = new THREE.MeshStandardMaterial({
+      color: CLAMP_COLOR,
+      roughness: 0.5,
+      metalness: 0.5,
+    })
+
+    // ── 1. 하단 클램프 (바닥 레일에 물리는 바퀴부) ──
+    const clampW = w * 0.7
+    const clampD = h * 0.5
+    const bottomClampGeo = new THREE.BoxGeometry(clampW, clampH, clampD)
+    const bottomClamp = new THREE.Mesh(bottomClampGeo, clampMat)
+    bottomClamp.position.y = clampH / 2
+    bottomClamp.castShadow = true
+    this.object3d.add(bottomClamp)
+
+    // ── 2. 수직 마스트 (좌우 기둥 + 상·하 가로 연결 바) ──
+    const mastBaseY = clampH
+    const bodyColor = this.resolveColor()
+    const mastMat = new THREE.MeshStandardMaterial({
+      color: bodyColor,
+      roughness: 0.3,
+      metalness: 0.6,
+    })
+
+    const mastGeometries: THREE.BufferGeometry[] = []
+
+    // 좌우 수직 기둥
+    for (const xSign of [-1, 1]) {
+      const pillar = new THREE.BoxGeometry(pillarThick, mastH, pillarThick)
+      pillar.translate(xSign * (w / 2 - pillarThick / 2), mastBaseY + mastH / 2, 0)
+      mastGeometries.push(pillar)
+    }
+
+    // 하단 가로 연결 바
+    const crossW = w - pillarThick
+    const crossH = pillarThick * 0.5
+    const lowerCross = new THREE.BoxGeometry(crossW, crossH, pillarThick)
+    lowerCross.translate(0, mastBaseY + crossH / 2, 0)
+    mastGeometries.push(lowerCross)
+
+    // 상단 가로 연결 바
+    const upperCross = new THREE.BoxGeometry(crossW, crossH, pillarThick)
+    upperCross.translate(0, mastBaseY + mastH - crossH / 2, 0)
+    mastGeometries.push(upperCross)
+
+    const mastMesh = new THREE.Mesh(BufferGeometryUtils.mergeGeometries(mastGeometries), mastMat)
+    mastMesh.castShadow = true
+    this.object3d.add(mastMesh)
+
+    // ── 3. 캐리지 포크 (마스트 40% 높이, 양쪽으로 뻗는 포크 암) ──
+    const forkY = mastBaseY + mastH * 0.4
+    const forkMat = new THREE.MeshStandardMaterial({
+      color: FORK_COLOR,
+      roughness: 0.4,
+      metalness: 0.5,
+    })
+
+    const forkGeometries: THREE.BufferGeometry[] = []
+
+    // 캐리지 중심 플레이트 (마스트에 부착, 양쪽 포크의 베이스)
+    const plateW = w * 0.9
+    const plateH = d * 0.08
+    const plateD = pillarThick * 0.8
+    const centerPlate = new THREE.BoxGeometry(plateW, plateH, plateD)
+    centerPlate.translate(0, forkY + plateH / 2, 0)
+    forkGeometries.push(centerPlate)
+
+    // 양쪽 포크 암 (좌/우 선반 방향으로 뻗음)
+    const armW = pillarThick * 0.6
+    const armH = plateH * 0.4
+    const armD = h * 0.6
+    const armSpacing = w * 0.5
+
+    for (const zSign of [-1, 1]) {
+      for (const xSign of [-1, 1]) {
+        const arm = new THREE.BoxGeometry(armW, armH, armD)
+        arm.translate(xSign * (armSpacing / 2), forkY + armH / 2, zSign * (plateD / 2 + armD / 2))
+        forkGeometries.push(arm)
+      }
+    }
+
+    const forkMesh = new THREE.Mesh(BufferGeometryUtils.mergeGeometries(forkGeometries), forkMat)
+    forkMesh.castShadow = true
+    this.object3d.add(forkMesh)
+
+    // ── 4. 상단 클램프 (천장 레일에 물리는 가이드부) ──
+    const topClampGeo = new THREE.BoxGeometry(clampW, clampH, clampD)
+    const topClamp = new THREE.Mesh(topClampGeo, clampMat)
+    topClamp.position.y = mastBaseY + mastH + clampH / 2
+    topClamp.castShadow = true
+    this.object3d.add(topClamp)
+  }
+
+  updateDimension() {}
+  updateAlpha() {}
+
+  onchange(after: Record<string, unknown>, before: Record<string, unknown>) {
+    if ('width' in after || 'height' in after || 'depth' in after || 'fillStyle' in after || 'strokeStyle' in after) {
+      this.update()
+      return
+    }
+    super.onchange(after, before)
+  }
+}
+
+registerRealObjectFactory('Crane', (component: Component) => new Crane3D(component))

package/src/factories/crane-rail-3d.ts

@@ -0,0 +1,114 @@
+/**
+ * CraneRail 3D Factory
+ *
+ * 스토커 내부 스태커 크레인의 주행 레일.
+ * 바닥 레일 + 천장 가이드 레일로 크레인의 2축 이동(수평 주행 + 수직 승강)을 지원.
+ *
+ * 구조 (바닥 원점, y=0~depth):
+ *   - 바닥 레일: 2개의 평행 트랙 (크레인 바퀴 주행)
+ *   - 천장 가이드 레일: 2개의 평행 트랙 (마스트 상단 안내)
+ *   - 수직 지지대: 양 끝단 기둥 (바닥~천장 연결)
+ */
+
+import * as THREE from 'three'
+import * as BufferGeometryUtils from 'three/examples/jsm/utils/BufferGeometryUtils.js'
+import { RealObjectGroup, registerRealObjectFactory } from '@hatiolab/things-scene'
+import type { Component } from '@hatiolab/things-scene'
+import { TRANSPORT_SURFACE_HEIGHT } from './machine-3d.js'
+
+const RAIL_COLOR = 0x666677
+const SUPPORT_COLOR = 0x555566
+
+/** 크레인 레일 기본 높이: 스토커와 동일 */
+const DEFAULT_RAIL_DEPTH = 5 * TRANSPORT_SURFACE_HEIGHT
+
+export class CraneRail3D extends RealObjectGroup {
+  get effectiveDepth(): number {
+    const { depth } = this.component.state
+    return depth || DEFAULT_RAIL_DEPTH
+  }
+
+  protected get syncZPosOffset(): number {
+    return 0
+  }
+
+  build() {
+    super.build()
+
+    const { width = 10, height = 10 } = this.component.state
+    const w = Math.abs(width)
+    const h = Math.abs(height)
+    const d = this.effectiveDepth
+    if (!w || !h) return
+
+    const railH = Math.max(d * 0.02, 2) // 레일 높이 (얇은 트랙)
+    const railW = Math.max(h * 0.06, 2) // 레일 폭
+    const supportThick = Math.max(Math.min(w, h) * 0.05, 2)
+
+    const railMat = new THREE.MeshStandardMaterial({
+      color: RAIL_COLOR,
+      roughness: 0.3,
+      metalness: 0.7,
+    })
+
+    const supportMat = new THREE.MeshStandardMaterial({
+      color: SUPPORT_COLOR,
+      roughness: 0.5,
+      metalness: 0.5,
+    })
+
+    // ── 바닥 레일 (2개 평행 트랙) ──
+    const bottomGeometries: THREE.BufferGeometry[] = []
+    for (const zSign of [-1, 1]) {
+      const rail = new THREE.BoxGeometry(w, railH, railW)
+      rail.translate(0, railH / 2, zSign * (h / 2 - railW / 2))
+      bottomGeometries.push(rail)
+    }
+    const bottomMesh = new THREE.Mesh(BufferGeometryUtils.mergeGeometries(bottomGeometries), railMat)
+    bottomMesh.castShadow = true
+    bottomMesh.receiveShadow = true
+    this.object3d.add(bottomMesh)
+
+    // ── 천장 가이드 레일 (2개 평행 트랙) ──
+    const topGeometries: THREE.BufferGeometry[] = []
+    for (const zSign of [-1, 1]) {
+      const rail = new THREE.BoxGeometry(w, railH, railW)
+      rail.translate(0, d - railH / 2, zSign * (h / 2 - railW / 2))
+      topGeometries.push(rail)
+    }
+    const topMesh = new THREE.Mesh(BufferGeometryUtils.mergeGeometries(topGeometries), railMat)
+    topMesh.castShadow = true
+    this.object3d.add(topMesh)
+
+    // ── 양 끝단 수직 지지대 (바닥~천장 연결) ──
+    const supportH = d - railH * 2
+    const supportGeometries: THREE.BufferGeometry[] = []
+    for (const xSign of [-1, 1]) {
+      for (const zSign of [-1, 1]) {
+        const support = new THREE.BoxGeometry(supportThick, supportH, supportThick)
+        support.translate(
+          xSign * (w / 2 - supportThick / 2),
+          railH + supportH / 2,
+          zSign * (h / 2 - railW / 2)
+        )
+        supportGeometries.push(support)
+      }
+    }
+    const supportMesh = new THREE.Mesh(BufferGeometryUtils.mergeGeometries(supportGeometries), supportMat)
+    supportMesh.castShadow = true
+    this.object3d.add(supportMesh)
+  }
+
+  updateDimension() {}
+  updateAlpha() {}
+
+  onchange(after: Record<string, unknown>, before: Record<string, unknown>) {
+    if ('width' in after || 'height' in after || 'depth' in after || 'fillStyle' in after || 'strokeStyle' in after) {
+      this.update()
+      return
+    }
+    super.onchange(after, before)
+  }
+}
+
+registerRealObjectFactory('CraneRail', (component: Component) => new CraneRail3D(component))