@fmsim/machine 2.0.0-beta.5 → 2.0.0-beta.52

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

@@ -40,14 +40,14 @@ export class Conveyor3D extends RealObjectGroup {
     //    '#F0F0F0'은 상태 미설정 시 기본 fallback — 무시하고 defaultColor 사용
     try {
       const sc = comp.statusColor
-      if (typeof sc === 'string' && sc && sc.toUpperCase() !== '#F0F0F0') return new THREE.Color(sc).getHex()
+      if (typeof sc === 'string' && sc && sc.toUpperCase() !== '#F0F0F0' && sc !== 'transparent') return new THREE.Color(sc).getHex()
     } catch {
       /* statusColor 미구현 시 무시 */
     }
 
     // 2) state.fillStyle fallback
     const { fillStyle } = this.component.state
-    if (fillStyle && typeof fillStyle === 'string') {
+    if (fillStyle && typeof fillStyle === 'string' && fillStyle !== 'transparent') {
       try {
         return new THREE.Color(fillStyle).getHex()
       } catch {
@@ -61,16 +61,31 @@ export class Conveyor3D extends RealObjectGroup {
   build() {
     super.build()
 
-    const { width, height, conveyorType } = this.component.state
+    const { width: rawWidth, height: rawHeight, conveyorType, orientation } = this.component.state
     const depth = this.effectiveDepth
-    if (!width || !height) return
+    if (!rawWidth || !rawHeight) return
+
+    // orientation: 'horizontal' = 롤러가 Z축(세로), 'vertical' = 롤러가 X축(가로)
+    // default = 긴 방향에 수직 (긴 축을 따라 이송)
+    const isVertical = orientation === 'vertical' ? true
+      : orientation === 'horizontal' ? false
+      : rawWidth < rawHeight  // default: 세로가 길면 롤러는 가로(X축)
+    // isVertical=true → 롤러 축이 X(가로), 이송 방향이 Z(세로)
+    // isVertical=false → 롤러 축이 Z(세로), 이송 방향이 X(가로)
+    const width = rawWidth
+    const height = rawHeight
 
     // 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)
+
+    // 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({
@@ -84,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
@@ -96,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)
+        }
       }
     }
 
@@ -134,11 +176,11 @@ 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)
+      this.buildRollers(width, height, depth, frameH, railW, rollWidth, isVertical)
     }
   }
 
@@ -148,28 +190,45 @@ export class Conveyor3D extends RealObjectGroup {
     depth: number,
     frameH: number,
     railW: number,
-    rollWidth: number
+    rollWidth: number,
+    isVertical: boolean = false
   ) {
     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 (isVertical) {
+      // 롤러 축 = X축(가로), 이송 방향 = Z축(세로)
+      const rollerLength = width - railW * 2 - 0.5
+      const count = Math.max(1, Math.floor(height / step))
+      const totalSpan = (count - 1) * step
+      const startZ = -totalSpan / 2
+
+      for (let i = 0; i < count; i++) {
+        const z = startZ + i * step
+        const roller = new THREE.CylinderGeometry(rollerRadius, rollerRadius, rollerLength, 16)
+        roller.rotateZ(Math.PI / 2)
+        roller.translate(0, rollerY, z)
+        rollerGeometries.push(roller)
+      }
+    } else {
+      // 롤러 축 = Z축(세로), 이송 방향 = X축(가로) — 기존 동작
+      const rollerLength = height - railW * 2 - 0.5
+      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) {
@@ -182,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)
     }
 
@@ -217,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
@@ -226,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++) {
@@ -236,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
@@ -255,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
 
@@ -277,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)
@@ -295,6 +384,7 @@ export class Conveyor3D extends RealObjectGroup {
   onchange(after: Record<string, unknown>, before: Record<string, unknown>) {
     if (
       'conveyorType' in after ||
+      'orientation' in after ||
       'width' in after ||
       'height' in after ||
       'depth' in after ||