@fmsim/machine 2.0.0-beta.23 → 2.0.0-beta.25

package/package.json

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

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

@@ -80,7 +80,12 @@ export class Conveyor3D extends RealObjectGroup {
     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)
+
+    // isVertical일 때 이송 방향이 Z축: 레일은 Z축을 따라, 벨트폭은 width
+    // !isVertical일 때 이송 방향이 X축: 레일은 X축을 따라, 벨트폭은 height
+    const beltWidth = isVertical ? width : height
+    const railLen = isVertical ? height : width
+    const railW = Math.max(beltWidth * 0.06, 2)
     const legThickness = Math.max(railW * 0.8, 2)
 
     const frameMaterial = new THREE.MeshStandardMaterial({
@@ -94,11 +99,21 @@ export class Conveyor3D extends RealObjectGroup {
     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)
+    // Side rails — 이송 방향을 따라, 벨트 양측에 배치
+    if (isVertical) {
+      // 레일이 Z축(세로)을 따라, ±X에 배치
+      for (const xSign of [-1, 1]) {
+        const rail = new THREE.BoxGeometry(railW, frameH, height)
+        rail.translate(xSign * (width / 2 - railW / 2), railY, 0)
+        frameGeometries.push(rail)
+      }
+    } else {
+      // 레일이 X축(가로)을 따라, ±Z에 배치
+      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
@@ -106,34 +121,51 @@ export class Conveyor3D extends RealObjectGroup {
       const legTopY = depth - frameH
       const legCenterY = legTopY - legH / 2
 
+      // 다리 위치: 레일 안쪽에 정렬
+      const legXPos = isVertical ? (width / 2 - railW / 2) : (width / 2 - legThickness / 2)
+      const legZPos = isVertical ? (height / 2 - legThickness / 2) : (height / 2 - railW / 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)
+          leg.translate(xSign * legXPos, legCenterY, zSign * legZPos)
           frameGeometries.push(leg)
         }
       }
 
-      // Cross-bracing: 앞뒤 다리 연결 (Z 방향)
+      // Cross-bracing
       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)
+      // 이송 방향 브레이스 (레일과 평행)
+      if (isVertical) {
+        for (const xSign of [-1, 1]) {
+          const brace = new THREE.BoxGeometry(braceW, braceH, height - legThickness)
+          brace.translate(xSign * legXPos, braceY, 0)
+          frameGeometries.push(brace)
+        }
+      } else {
+        for (const zSign of [-1, 1]) {
+          const brace = new THREE.BoxGeometry(width - legThickness, braceH, braceW)
+          brace.translate(0, braceY, zSign * legZPos)
+          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)
+      // 벨트폭 방향 브레이스 (레일과 수직)
+      if (isVertical) {
+        for (const zSign of [-1, 1]) {
+          const brace = new THREE.BoxGeometry(width - railW, braceH, braceW)
+          brace.translate(0, braceY, zSign * legZPos)
+          frameGeometries.push(brace)
+        }
+      } else {
+        for (const xSign of [-1, 1]) {
+          const brace = new THREE.BoxGeometry(braceW, braceH, height - railW)
+          brace.translate(xSign * legXPos, braceY, 0)
+          frameGeometries.push(brace)
+        }
       }
     }
 
@@ -144,9 +176,9 @@ export class Conveyor3D extends RealObjectGroup {
 
     // --- Rollers, Belt, or Rails ---
     if (conveyorType === 'rail') {
-      this.buildRails(width, height, depth, frameH, railW)
+      this.buildRails(width, height, depth, frameH, railW, isVertical)
     } else if (conveyorType === 'belt') {
-      this.buildBelt(width, height, depth, frameH, railW)
+      this.buildBelt(width, height, depth, frameH, railW, isVertical)
     } else {
       this.buildRollers(width, height, depth, frameH, railW, rollWidth, isVertical)
     }
@@ -209,22 +241,31 @@ export class Conveyor3D extends RealObjectGroup {
     }
   }
 
-  private buildBelt(width: number, height: number, depth: number, frameH: number, railW: number) {
+  private buildBelt(width: number, height: number, depth: number, frameH: number, railW: number, isVertical: boolean = false) {
     const drumRadius = frameH * 0.38
-    const drumLength = height - railW * 2
     const beltY = depth - drumRadius
     const color = this.resolveColor()
 
+    // 이송 방향 길이와 벨트폭
+    const transportLen = isVertical ? height : width
+    const beltWidth = isVertical ? width : height
+    const drumLength = beltWidth - railW * 2
+
     // Two end drums
     const drumGeometries: THREE.BufferGeometry[] = []
     const drumInset = drumRadius * 1.5
-    const leftDrumX = -width / 2 + drumInset
-    const rightDrumX = width / 2 - drumInset
+    const drum1 = -transportLen / 2 + drumInset
+    const drum2 = transportLen / 2 - drumInset
 
-    for (const dx of [leftDrumX, rightDrumX]) {
+    for (const dp of [drum1, drum2]) {
       const drum = new THREE.CylinderGeometry(drumRadius, drumRadius, drumLength, 16)
-      drum.rotateX(Math.PI / 2)
-      drum.translate(dx, beltY, 0)
+      if (isVertical) {
+        drum.rotateZ(Math.PI / 2)
+        drum.translate(0, beltY, dp)
+      } else {
+        drum.rotateX(Math.PI / 2)
+        drum.translate(dp, beltY, 0)
+      }
       drumGeometries.push(drum)
     }
 
@@ -244,8 +285,10 @@ export class Conveyor3D extends RealObjectGroup {
     })
 
     // Flat belt top surface spanning between drums
-    const flatLen = rightDrumX - leftDrumX
-    const flatGeo = new THREE.BoxGeometry(flatLen, beltThickness, drumLength)
+    const flatLen = drum2 - drum1
+    const flatGeo = isVertical
+      ? new THREE.BoxGeometry(drumLength, beltThickness, flatLen)
+      : new THREE.BoxGeometry(flatLen, beltThickness, drumLength)
     const flatMesh = new THREE.Mesh(flatGeo, beltMaterial)
     flatMesh.position.set(0, beltY + drumRadius, 0)
     flatMesh.castShadow = true
@@ -253,9 +296,9 @@ export class Conveyor3D extends RealObjectGroup {
 
     // Belt wrap around drums (segmented half-cylinder)
     const wrapSegments = 12
-    for (const [dx, angleStart] of [
-      [leftDrumX, Math.PI / 2],
-      [rightDrumX, -Math.PI / 2],
+    for (const [dp, angleStart] of [
+      [drum1, Math.PI / 2],
+      [drum2, -Math.PI / 2],
     ] as [number, number][]) {
       const wrapGeometries: THREE.BufferGeometry[] = []
       for (let i = 0; i < wrapSegments; i++) {
@@ -263,18 +306,25 @@ export class Conveyor3D extends RealObjectGroup {
         const a1 = angleStart + (Math.PI * (i + 1)) / wrapSegments
         const r = drumRadius + beltThickness / 2
 
-        const x0 = dx + Math.cos(a0) * r
+        const p0 = dp + Math.cos(a0) * r
         const y0 = beltY + Math.sin(a0) * r
-        const x1 = dx + Math.cos(a1) * r
+        const p1 = dp + 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 segLen = Math.sqrt((p1 - p0) ** 2 + (y1 - y0) ** 2) * 1.05
+        const segAngle = Math.atan2(y1 - y0, p1 - p0)
+
+        if (isVertical) {
+          const seg = new THREE.BoxGeometry(drumLength, beltThickness, segLen)
+          seg.rotateX(-segAngle)
+          seg.translate(0, (y0 + y1) / 2, (p0 + p1) / 2)
+          wrapGeometries.push(seg)
+        } else {
+          const seg = new THREE.BoxGeometry(segLen, beltThickness, drumLength)
+          seg.rotateZ(segAngle)
+          seg.translate((p0 + p1) / 2, (y0 + y1) / 2, 0)
+          wrapGeometries.push(seg)
+        }
       }
       const wrapMesh = new THREE.Mesh(BufferGeometryUtils.mergeGeometries(wrapGeometries), beltMaterial)
       wrapMesh.castShadow = true
@@ -282,17 +332,21 @@ export class Conveyor3D extends RealObjectGroup {
     }
 
     // Flat belt bottom (return path)
-    const bottomGeo = new THREE.BoxGeometry(flatLen, beltThickness, drumLength * 0.85)
+    const bottomGeo = isVertical
+      ? new THREE.BoxGeometry(drumLength * 0.85, beltThickness, flatLen)
+      : 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) {
+  private buildRails(width: number, height: number, depth: number, frameH: number, railW: number, isVertical: boolean = false) {
     const color = this.resolveColor()
     const railHeight = frameH * 0.3
     const railY = depth - railHeight / 2
-    const innerWidth = height - railW * 2
+    const beltWidth = isVertical ? width : height
+    const transportLen = isVertical ? height : width
+    const innerWidth = beltWidth - railW * 2
     // 두 레일 간격: 내부 폭의 60%
     const railSpacing = innerWidth * 0.6
 
@@ -304,11 +358,19 @@ export class Conveyor3D extends RealObjectGroup {
 
     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)
+    // Two parallel rails running along transport direction
+    if (isVertical) {
+      for (const xSign of [-1, 1]) {
+        const rail = new THREE.BoxGeometry(railW * 0.8, railHeight, transportLen - railW * 2)
+        rail.translate(xSign * (railSpacing / 2), railY, 0)
+        railGeometries.push(rail)
+      }
+    } else {
+      for (const zSign of [-1, 1]) {
+        const rail = new THREE.BoxGeometry(transportLen - 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)

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

@@ -9,6 +9,7 @@
  */
 
 import * as THREE from 'three'
+import * as BufferGeometryUtils from 'three/examples/jsm/utils/BufferGeometryUtils.js'
 import { RealObjectGroup, registerRealObjectFactory, disposeObject3D } from '@hatiolab/things-scene'
 import type { Component } from '@hatiolab/things-scene'
 import { LEGEND_CAPACITY } from '../features/mcs-status-default'
@@ -45,6 +46,8 @@ interface MCS3DConfig {
   emissiveIntensity?: number
   /** 바닥면 유지 (기본 false — 바닥면 제거) */
   keepBottomFace?: boolean
+  /** syncZPosOffset 고정값 (설정 시 다른 로직 무시) */
+  zPosOverride?: number
 }
 
 /**
@@ -88,6 +91,10 @@ class MCSRealObject3D extends RealObjectGroup {
   }
 
   protected get syncZPosOffset(): number {
+    // zPosOverride: 고정 높이 (OHTLine 등)
+    if (this._config.zPosOverride != null) {
+      return this._config.zPosOverride
+    }
     // Port: 이송 표면 높이에 배치
     if (this._config.defaultZPosFromParent) {
       return TRANSPORT_SURFACE_HEIGHT
@@ -436,18 +443,109 @@ register('Buffer', {
 })
 
 register('AGVLine', {
-  depthRatio: 0.12,
+  depthRatio: 0,
+  defaultDepth: 0.1,
   metalness: 0.6,
   roughness: 0.3,
   defaultColor: 0x888899,
 })
 
-register('OHTLine', {
-  depthRatio: 0.12,
-  metalness: 0.6,
-  roughness: 0.3,
-  defaultColor: 0x888899,
-})
+// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+//  OHTLine — 천장 I-beam 레일
+// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+const OHT_LINE_RAIL_COLOR = 0xcccccc
+const OHT_LINE_HEIGHT = 7 * TRANSPORT_SURFACE_HEIGHT // OHT 상단과 일치
+
+class OHTLineRealObject3D extends RealObjectGroup {
+  private _mesh?: THREE.Mesh
+
+  get effectiveDepth(): number { return 0 }
+  protected get syncZPosOffset(): number { return OHT_LINE_HEIGHT }
+
+  build() {
+    super.build()
+
+    const { width = 10, height = 10 } = this.component.state
+    const w = Math.abs(width)
+    const h = Math.abs(height)
+    if (!w || !h) return
+
+    // I-beam 치수: 이송 방향 = 긴 변, 폭은 2D의 1/2
+    const isVertical = w < h
+    const shortSide = isVertical ? w : h              // 2D 원본 짧은 쪽 폭
+    const beltW = shortSide * 0.25                    // I-beam 폭: 원본의 1/4
+    const beamH = Math.max(beltW * 0.5, 3)           // I-beam 전체 높이
+    const inset = shortSide * 0.5                     // 양끝 여백: 원본 폭의 1/2
+    const railLen = (isVertical ? h : w) - inset * 2
+    const flangeH = beamH * 0.2                    // 플랜지 두께
+    const flangeW = beltW * 0.8                    // 플랜지 폭
+    const webH = beamH - flangeH * 2               // 웹 높이
+    const webW = Math.max(flangeW * 0.25, 1)       // 웹 두께
+
+    const mat = new THREE.MeshStandardMaterial({
+      color: OHT_LINE_RAIL_COLOR,
+      metalness: 0.5,
+      roughness: 0.4,
+      transparent: true,
+      opacity: 1.0,
+      depthWrite: false,
+    })
+
+    const geoms: THREE.BufferGeometry[] = []
+
+    // 상부 플랜지
+    const topFlange = isVertical
+      ? new THREE.BoxGeometry(flangeW, flangeH, railLen)
+      : new THREE.BoxGeometry(railLen, flangeH, flangeW)
+    topFlange.translate(0, -flangeH / 2, 0)
+    geoms.push(topFlange)
+
+    // 웹 (수직판)
+    const web = isVertical
+      ? new THREE.BoxGeometry(webW, webH, railLen)
+      : new THREE.BoxGeometry(railLen, webH, webW)
+    web.translate(0, -flangeH - webH / 2, 0)
+    geoms.push(web)
+
+    // 하부 플랜지
+    const botFlange = isVertical
+      ? new THREE.BoxGeometry(flangeW, flangeH, railLen)
+      : new THREE.BoxGeometry(railLen, flangeH, flangeW)
+    botFlange.translate(0, -flangeH - webH - flangeH / 2, 0)
+    geoms.push(botFlange)
+
+    this._mesh = new THREE.Mesh(BufferGeometryUtils.mergeGeometries(geoms), mat)
+    this._mesh.castShadow = true
+    this.object3d.add(this._mesh)
+  }
+
+  update() {
+    if (this._mesh) {
+      this.object3d.remove(this._mesh)
+      this._mesh.geometry.dispose()
+      ;(this._mesh.material as THREE.Material).dispose()
+      this._mesh = undefined
+    }
+    this.build()
+    this.updateTransform()
+    this.updateHidden()
+  }
+
+  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)
+  }
+
+  updateDimension() {}
+  updateAlpha() {}
+}
+
+registerRealObjectFactory('OHTLine', (component: Component) => new OHTLineRealObject3D(component))
 
 // STOCKER: 벽면에 용량 게이지 바를 포함하는 커스텀 3D 오브젝트
 const STOCKER_CONFIG: MCS3DConfig = {
@@ -764,7 +862,10 @@ class PortFlowRealObject3D extends RealObjectGroup {
     })
 
     this._mesh = new THREE.Mesh(geo, mat)
+    // 비대칭 패딩 보정: 플레인 센터를 컴포넌트 bounds 센터에 맞춤
+    this._mesh.position.x = (padRight - padLeft) / 2
     this._mesh.position.y = 1
+    this._mesh.position.z = (padBottom - padTop) / 2
     this.object3d.add(this._mesh)
   }
 
@@ -779,6 +880,7 @@ class PortFlowRealObject3D extends RealObjectGroup {
     }
     this.build()
     this.updateTransform()
+    this.updateHidden()
   }
 
   onchange(after: Record<string, unknown>, before: Record<string, unknown>) {
@@ -795,3 +897,91 @@ class PortFlowRealObject3D extends RealObjectGroup {
 }
 
 registerRealObjectFactory('PortFlow', (component: Component) => new PortFlowRealObject3D(component))
+
+// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+//  Node — 2D render를 바닥 Plane 텍스처로 3D 표시
+// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+class NodeRealObject3D extends RealObjectGroup {
+  private _mesh?: THREE.Mesh
+  private _texture?: THREE.CanvasTexture
+
+  get effectiveDepth(): number { return 0 }
+  protected get syncZPosOffset(): number { return 0 }
+
+  build() {
+    super.build()
+
+    const { cx, cy } = this.component.state
+    const radius = 8
+    const size = radius * 2
+    const scale = 2
+    const pad = 2
+
+    const canvas = document.createElement('canvas')
+    canvas.width = (size + pad * 2) * scale
+    canvas.height = (size + pad * 2) * scale
+    const ctx = canvas.getContext('2d')!
+
+    ctx.save()
+    ctx.scale(scale, scale)
+    ctx.translate(-cx + radius + pad, -cy + radius + pad)
+    try {
+      this.component.render(ctx)
+      const { fillStyle = '#888888' } = this.component.state
+      ctx.fillStyle = typeof fillStyle === 'string' ? fillStyle : '#888888'
+      ctx.fill()
+      const { strokeStyle } = this.component.state
+      if (strokeStyle && typeof strokeStyle === 'string') {
+        ctx.strokeStyle = strokeStyle
+        ctx.lineWidth = 1
+        ctx.stroke()
+      }
+    } catch { /* render 실패 시 빈 텍스처 */ }
+    ctx.restore()
+
+    this._texture = new THREE.CanvasTexture(canvas)
+    this._texture.colorSpace = THREE.SRGBColorSpace
+
+    const geo = new THREE.PlaneGeometry(size + pad * 2, size + pad * 2)
+    geo.rotateX(-Math.PI / 2)
+
+    const mat = new THREE.MeshBasicMaterial({
+      map: this._texture,
+      transparent: true,
+      side: THREE.DoubleSide,
+      depthWrite: false,
+    })
+
+    this._mesh = new THREE.Mesh(geo, mat)
+    this._mesh.position.y = 1
+    this.object3d.add(this._mesh)
+  }
+
+  update() {
+    if (this._mesh) {
+      this.object3d.remove(this._mesh)
+      this._mesh.geometry.dispose()
+      ;(this._mesh.material as THREE.Material).dispose()
+      this._texture?.dispose()
+      this._mesh = undefined
+      this._texture = undefined
+    }
+    this.build()
+    this.updateTransform()
+    this.updateHidden()
+  }
+
+  onchange(after: Record<string, unknown>, before: Record<string, unknown>) {
+    if ('fillStyle' in after || 'strokeStyle' in after) {
+      this.update()
+      return
+    }
+    super.onchange(after, before)
+  }
+
+  updateDimension() {}
+  updateAlpha() {}
+}
+
+registerRealObjectFactory('Node', (component: Component) => new NodeRealObject3D(component))

package/src/node.ts

@@ -28,7 +28,7 @@ export default class Node extends Shape {
   static RADIUS = 8
 
   is3dish() {
-    return false
+    return true
   }
 
   isDescendible() {