@fmsim/machine 2.0.0-beta.17 → 2.0.0-beta.19

package/package.json

@@ -2,7 +2,7 @@
   "name": "@fmsim/machine",
   "description": "Layout View를 구성하는 설비(machine)들과 유닛을 구현한 모듈입니다.",
   "author": "heartyoh",
-  "version": "2.0.0-beta.17",
+  "version": "2.0.0-beta.19",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "things-scene": true,
@@ -55,5 +55,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "59cdf8c2138451e3aa443cdbc2d0d2c4b560a9ba"
+  "gitHead": "29a0fc9444f6eec0961401d979fd21fdfd34e041"
 }

package/src/carrier.ts

@@ -163,8 +163,14 @@ export default class Carrier extends MCSStatusMixin(ParentObjectMixin(Shape)) {
       }
 
       // 캐시에 없으면 파싱하고 저장
-      const theme = (this.root as any)?.style?.[carrierAnimationName]
+      let theme = (this.root as any)?.style?.[carrierAnimationName]
       if (theme) {
+        // theme이 string이면 먼저 파싱
+        if (typeof theme === 'string') {
+          try { theme = JSON5.parse(theme) } catch { return ANIMATION_DEFAULT }
+        }
+        if (typeof theme !== 'object' || theme === null) return ANIMATION_DEFAULT
+
         // 문자열 형태의 설정들을 미리 파싱
         const parsedTheme = {}
         for (const [status, config] of Object.entries(theme)) {

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

@@ -59,9 +59,19 @@ export class AGV3D extends RealObjectGroup {
     return DEFAULT_BODY_COLOR
   }
 
+  private _dataHandler?: () => void
+
   build() {
     super.build()
 
+    // data 변경 감지 (배터리 잔량 업데이트)
+    if (!this._dataHandler) {
+      this._dataHandler = (_after: any, _before: any) => {
+        if (_after.data !== undefined) this.updateBattery()
+      }
+      this.component.on('change', this._dataHandler)
+    }
+
     const { width = 10, height = 10 } = this.component.state
     const w = Math.abs(width)
     const h = Math.abs(height)
@@ -118,9 +128,127 @@ export class AGV3D extends RealObjectGroup {
     plat.receiveShadow = true
 
     this._ownMeshes = [bumper, body, plat]
+
+    // ── 배터리 실린더 (바디 뒷면, BATTERYRATE 데이터가 있을 때만) ──
+    if (this.getBatteryRate() > 0) {
+      const batteryMeshes = this.buildBattery(w, h, bumperH, bodyH)
+      this._ownMeshes.push(...batteryMeshes)
+    }
+
     for (const m of this._ownMeshes) this.object3d.add(m)
   }
 
+  private _batteryFillMesh?: THREE.Mesh
+  private _batteryLen = 0
+  private _batteryY = 0
+  private _batteryZ = 0
+
+  private buildBattery(agvW: number, agvH: number, bodyBottomY: number, bodyH: number): THREE.Mesh[] {
+    const radius = Math.min(agvW, agvH) * 0.15
+    this._batteryLen = agvW * 0.7
+    this._batteryY = bodyBottomY + bodyH * 0.5
+    this._batteryZ = -agvH / 2 - radius * 1.5
+
+    const rate = this.getBatteryRate()
+    const batteryColor = this.getBatteryColor(rate)
+    const innerRadius = radius * 0.85
+    const capWidth = radius * 0.3
+    const meshes: THREE.Mesh[] = []
+
+    // 투명 외장 (유리 쉘, 양단 막힘)
+    const shellGeo = new THREE.CylinderGeometry(radius, radius, this._batteryLen, 20)
+    shellGeo.rotateZ(Math.PI / 2)
+    const shellMat = new THREE.MeshStandardMaterial({
+      color: 0xffffff,
+      transparent: true,
+      opacity: 0.25,
+      roughness: 0.1,
+      metalness: 0.1,
+      side: THREE.DoubleSide,
+      depthWrite: false,
+    })
+    const shell = new THREE.Mesh(shellGeo, shellMat)
+    shell.position.set(0, this._batteryY, this._batteryZ)
+    meshes.push(shell)
+
+    // 좌측 캡 (금속)
+    const capGeo = new THREE.CylinderGeometry(radius * 0.6, radius, capWidth, 20)
+    capGeo.rotateZ(Math.PI / 2)
+    const capMat = new THREE.MeshStandardMaterial({
+      color: batteryColor, roughness: 0.3, metalness: 0.7,
+      emissive: batteryColor, emissiveIntensity: 0.2,
+    })
+    const leftCap = new THREE.Mesh(capGeo, capMat)
+    leftCap.position.set(-this._batteryLen / 2 - capWidth / 2, this._batteryY, this._batteryZ)
+    meshes.push(leftCap)
+
+    // 우측 캡 (금속)
+    const rightCapGeo = capGeo.clone()
+    const rightCap = new THREE.Mesh(rightCapGeo, capMat)
+    rightCap.position.set(this._batteryLen / 2 + capWidth / 2, this._batteryY, this._batteryZ)
+    rightCap.rotation.z = Math.PI
+    meshes.push(rightCap)
+
+    // 내부 잔량/빈 부분
+    const fillLen = Math.max(this._batteryLen * rate / 100, 0.1)
+    const emptyLen = Math.max(this._batteryLen - fillLen, 0.1)
+
+    // 빈 부분 (짙은 회색, 불투명, 양단 닫힘)
+    const emptyGeo = new THREE.CylinderGeometry(innerRadius, innerRadius, emptyLen, 16)
+    emptyGeo.rotateZ(Math.PI / 2)
+    const emptyMat = new THREE.MeshStandardMaterial({
+      color: 0x333333,
+      roughness: 0.6,
+      metalness: 0.2,
+      side: THREE.DoubleSide,
+    })
+    const emptyMesh = new THREE.Mesh(emptyGeo, emptyMat)
+    emptyMesh.position.set(
+      (this._batteryLen - emptyLen) / 2,
+      this._batteryY, this._batteryZ
+    )
+    meshes.push(emptyMesh)
+
+    // 잔량 채움 (상태 컬러)
+    const fillGeo = new THREE.CylinderGeometry(innerRadius * 0.98, innerRadius * 0.98, fillLen, 16)
+    fillGeo.rotateZ(Math.PI / 2)
+    const fillMat = new THREE.MeshStandardMaterial({
+      color: batteryColor,
+      roughness: 0.3,
+      metalness: 0.1,
+      emissive: batteryColor,
+      emissiveIntensity: 0.4,
+      side: THREE.DoubleSide,
+    })
+    this._batteryFillMesh = new THREE.Mesh(fillGeo, fillMat)
+    this._batteryFillMesh.position.set(
+      -(this._batteryLen - fillLen) / 2,
+      this._batteryY, this._batteryZ
+    )
+    meshes.push(this._batteryFillMesh)
+
+    return meshes
+  }
+
+  private getBatteryRate(): number {
+    const data = (this.component as any).data
+    return typeof data?.BATTERYRATE === 'number' ? data.BATTERYRATE : 0
+  }
+
+  private getBatteryColor(rate: number): number {
+    try {
+      const comp = this.component as any
+      if (comp.getBatteryColor) {
+        const color = comp.getBatteryColor(rate)
+        if (color) return new THREE.Color(color).getHex()
+      }
+    } catch { /* fallback */ }
+    // 기본: 녹색 > 노랑 > 빨강
+    if (rate > 50) return 0x4caf50
+    if (rate > 20) return 0xffc107
+    return 0xf44336
+  }
+
   updateDimension() {}
 
   update() {
@@ -150,12 +278,19 @@ export class AGV3D extends RealObjectGroup {
 
   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 || 'id' in after) {
+        'fillStyle' in after || 'strokeStyle' in after || 'id' in after ||
+        'EMPTYTYPE' in after || 'CARRIERSTATUS' in after) {
       this.update()
       return
     }
+
     super.onchange(after, before)
   }
+
+  private updateBattery() {
+    // 전체 rebuild로 정확한 geometry 생성
+    this.update()
+  }
 }
 
 registerRealObjectFactory('AGV', (component: Component) => new AGV3D(component))

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

@@ -30,7 +30,7 @@ interface MCS3DConfig {
   /** statusColor 미사용 시 기본 색상 */
   defaultColor: number
   /** 'box' | 'hexagon' */
-  shape: 'box' | 'hexagon'
+  shape: 'box' | 'hexagon' | 'plane'
   /** mesh 생성 전 가시성 판정 — false 반환 시 mesh 미생성 */
   isVisible?: (component: Component) => boolean
   /** 부모 대비 크기 비율 (기본 1.0). < 1이면 부모 중심에 배치. */
@@ -41,6 +41,10 @@ interface MCS3DConfig {
   matteTop?: boolean
   /** 상판에 2D 렌더링 텍스처 적용 */
   texturedTop?: boolean
+  /** 자체 발광 강도 (0~1). 조명 약한 면에서도 색상 유지 */
+  emissiveIntensity?: number
+  /** 바닥면 유지 (기본 false — 바닥면 제거) */
+  keepBottomFace?: boolean
 }
 
 /**
@@ -163,7 +167,7 @@ class MCSRealObject3D extends RealObjectGroup {
 
   private buildBoxGeometry(w: number, d: number, h: number): THREE.BufferGeometry {
     const geo = new THREE.BoxGeometry(w, d, h)
-    return this.removeBottomFace(geo)
+    return this._config.keepBottomFace ? geo : this.removeBottomFace(geo)
   }
 
   private buildHexagonGeometry(w: number, d: number, h: number): THREE.BufferGeometry {
@@ -194,6 +198,12 @@ class MCSRealObject3D extends RealObjectGroup {
     return this.removeBottomFace(geo)
   }
 
+  private buildPlaneGeometry(w: number, h: number): THREE.BufferGeometry {
+    const geo = new THREE.PlaneGeometry(w, h)
+    geo.rotateX(-Math.PI / 2)
+    return geo
+  }
+
   // ── Build ──
 
   protected _ownMesh?: THREE.Mesh
@@ -217,19 +227,31 @@ class MCSRealObject3D extends RealObjectGroup {
     const { opacity, metalness, roughness, shape } = this._config
 
     const geometry =
-      shape === 'hexagon'
-        ? this.buildHexagonGeometry(w, depth, h)
-        : this.buildBoxGeometry(w, depth, h)
-
-    const material = new THREE.MeshStandardMaterial({
-      color,
-      metalness,
-      roughness,
-      opacity,
-      transparent: opacity < 1,
-      side: opacity < 1 ? THREE.DoubleSide : THREE.FrontSide,
-      depthWrite: opacity >= 0.9,
-    })
+      shape === 'plane'
+        ? this.buildPlaneGeometry(w, h)
+        : shape === 'hexagon'
+          ? this.buildHexagonGeometry(w, depth, h)
+          : this.buildBoxGeometry(w, depth, h)
+
+    const isPlane = shape === 'plane'
+    const material = isPlane
+      ? new THREE.MeshBasicMaterial({
+          color,
+          opacity,
+          transparent: opacity < 1,
+          side: THREE.DoubleSide,
+          depthWrite: opacity >= 0.9,
+        })
+      : new THREE.MeshStandardMaterial({
+          color,
+          metalness,
+          roughness,
+          opacity,
+          transparent: opacity < 1,
+          side: opacity < 1 ? THREE.DoubleSide : THREE.FrontSide,
+          depthWrite: opacity >= 0.9,
+          ...(this._config.emissiveIntensity ? { emissive: color, emissiveIntensity: this._config.emissiveIntensity } : {}),
+        })
     // z-fighting 방지: 바닥면(floor grid)보다 항상 앞에 렌더링
     material.polygonOffset = true
     material.polygonOffsetFactor = -1
@@ -254,9 +276,9 @@ class MCSRealObject3D extends RealObjectGroup {
     }
 
     this._ownMesh = new THREE.Mesh(geometry, meshMaterial)
-    // sizeRatio < 1이면 부모 중심에 배치 (rawDepth/2), 아니면 자체 중심 (depth/2)
-    this._ownMesh.position.y = ratio < 1 ? rawDepth / 2 : depth / 2
-    this._ownMesh.castShadow = true
+    // sizeRatio < 1이면 부모 중심에 배치 (rawDepth/2), plane은 살짝 띄움
+    this._ownMesh.position.y = isPlane ? 1 : ratio < 1 ? rawDepth / 2 : depth / 2
+    this._ownMesh.castShadow = !isPlane
     this._ownMesh.receiveShadow = true
     this.object3d.add(this._ownMesh)
   }
@@ -610,16 +632,16 @@ registerRealObjectFactory('STOCKER', (component: Component) => new StockerRealOb
 //  Unit (이동체 · 홀더) — 낮은 depth, 불투명
 // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
-// Port: 상부 개방 5면 박스
+// Port: 바닥판 (PlaneGeometry)
 const PORT_CONFIG: MCS3DConfig = {
   ...DEFAULTS,
-  depthRatio: 0.5,
+  depthRatio: 0.01,
   defaultZPosFromParent: true,
-  opacity: 0.5,
-  metalness: 0.4,
-  roughness: 0.6,
+  opacity: 1,
+  metalness: 0.3,
+  roughness: 0.8,
   defaultColor: 0xb0a090,
-  openTop: true,
+  shape: 'plane',
 }
 registerRealObjectFactory('Port', (component: Component) => new MCSRealObject3D(component, PORT_CONFIG))
 
@@ -640,6 +662,7 @@ const CARRIER_CONFIG: MCS3DConfig = {
   isVisible: (c: Component) => !!(c.state as any).id,
   sizeRatio: 0.8,
   texturedTop: true,
+  emissiveIntensity: 0.4,
 }
 
 class CarrierRealObject3D extends MCSRealObject3D {