@fmsim/machine 2.0.0-beta.10 → 2.0.0-beta.101

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

@@ -10,12 +10,12 @@
  * Based on operato-scene Vehicle3D, adapted for fmsim:
  *   - extends RealObjectGroup (Conveyor3D와 동일 패턴)
  *   - statusColor from MCSStatusMixin
- *   - 바닥 원점 (y=0~depth)
+ *   - 볼륨 중심 원점 (things-scene 기본 컨벤션) - mesh 로컬 [-d/2, +d/2]
  */
 
 import * as THREE from 'three'
 import { RoundedBoxGeometry } from 'three/examples/jsm/geometries/RoundedBoxGeometry.js'
-import { RealObjectGroup, registerRealObjectFactory, disposeObject3D } from '@hatiolab/things-scene'
+import { RealObjectGroup, registerRealObjectFactory, disposeObject3D, MaterialBank } from '@hatiolab/things-scene'
 import type { Component } from '@hatiolab/things-scene'
 import { TRANSPORT_SURFACE_HEIGHT } from './machine-3d.js'
 
@@ -30,10 +30,6 @@ export class AGV3D extends RealObjectGroup {
     return depth || TRANSPORT_SURFACE_HEIGHT
   }
 
-  protected get syncZPosOffset(): number {
-    return 0
-  }
-
   private resolveColor(): number {
     const comp = this.component as any
 
@@ -41,14 +37,14 @@ export class AGV3D 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 {
@@ -80,11 +76,8 @@ export class AGV3D extends RealObjectGroup {
     const bumperPad = Math.min(w, h) * 0.03
     const bumperCornerR = Math.min(w + bumperPad * 2, h + bumperPad * 2, bumperH) * 0.2
     const bumperGeo = new RoundedBoxGeometry(w + bumperPad * 2, bumperH, h + bumperPad * 2, 4, bumperCornerR)
-    const bumperMat = new THREE.MeshStandardMaterial({
-      color: BUMPER_COLOR,
-      roughness: 0.8,
-      metalness: 0.1,
-    })
+    // MaterialBank 공유 — dedup + faint 안전(코어 변형 스왑, disposeObject3D 가 __bankOwned 스킵).
+    const bumperMat = MaterialBank.material('agv|bumper', { roughness: 0.8, metalness: 0.1 }, BUMPER_COLOR)
     const bumper = new THREE.Mesh(bumperGeo, bumperMat)
     bumper.position.y = bumperH / 2
     bumper.castShadow = true
@@ -93,11 +86,7 @@ export class AGV3D extends RealObjectGroup {
     // ── 본체 (둥근 모서리, statusColor 적용) ──
     const bodyColor = this.resolveColor()
     const bodyGeo = new RoundedBoxGeometry(w, bodyH, h, 4, cornerR)
-    const bodyMat = new THREE.MeshStandardMaterial({
-      color: bodyColor,
-      roughness: 0.3,
-      metalness: 0.5,
-    })
+    const bodyMat = MaterialBank.material('agv|body', { roughness: 0.3, metalness: 0.5 }, bodyColor)
     const body = new THREE.Mesh(bodyGeo, bodyMat)
     body.position.y = bumperH + bodyH / 2
     body.castShadow = true
@@ -107,18 +96,18 @@ export class AGV3D extends RealObjectGroup {
     const platInset = Math.min(w, h) * 0.04
     const platCornerR = Math.min(w - platInset * 2, h - platInset * 2, platH) * 0.15
     const platGeo = new RoundedBoxGeometry(w - platInset * 2, platH, h - platInset * 2, 4, platCornerR)
-    const platMat = new THREE.MeshStandardMaterial({
-      color: PLATFORM_COLOR,
-      roughness: 0.5,
-      metalness: 0.15,
-    })
+    const platMat = MaterialBank.material('agv|platform', { roughness: 0.5, metalness: 0.15 }, PLATFORM_COLOR)
     const plat = new THREE.Mesh(platGeo, platMat)
     plat.position.y = bumperH + bodyH + gapH + platH / 2
     plat.castShadow = true
     plat.receiveShadow = true
 
     this._ownMeshes = [bumper, body, plat]
-    for (const m of this._ownMeshes) this.object3d.add(m)
+    // ownGroup이 center-origin ↔ bottom-up 좌표계 변환을 자동 처리
+    for (const m of this._ownMeshes) this.components3D.add(m)
+
+    // mesh 는 super.build() 이후 생성 → 코어 faint 를 명시 적용(편집 흐림이 mesh 에 닿게).
+    this.updateAlpha()
   }
 
   updateDimension() {}
@@ -126,7 +115,7 @@ export class AGV3D extends RealObjectGroup {
   update() {
     // 자신의 mesh만 제거 (Carrier 등 자식 컴포넌트 3D 보존)
     for (const m of this._ownMeshes) {
-      this.object3d.remove(m)
+      this.components3D.remove(m)
       disposeObject3D(m)
     }
     this._ownMeshes = []
@@ -137,23 +126,17 @@ export class AGV3D extends RealObjectGroup {
     this.updateHidden()
   }
 
-  updateAlpha() {
-    const { alpha = 1 } = this.component.state
-    for (const m of this._ownMeshes) {
-      const materials = Array.isArray(m.material) ? m.material : [m.material]
-      for (const mat of materials) {
-        ;(mat as THREE.MeshStandardMaterial).opacity = alpha
-        ;(mat as THREE.MeshStandardMaterial).transparent = alpha < 1
-      }
-    }
-  }
+  // updateAlpha override 제거 — 코어 RealObject.updateAlpha(=applyMaterialOpacity)로 수렴.
+  // canonical(bank base opacity 1) × state.alpha × faint. view 모드 불변, 편집 모드 faint 추가.
 
   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)
   }
 }

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

@@ -13,26 +13,23 @@
 
 import * as THREE from 'three'
 import * as BufferGeometryUtils from 'three/examples/jsm/utils/BufferGeometryUtils.js'
-import { RealObjectGroup, registerRealObjectFactory } from '@hatiolab/things-scene'
+import { RealObjectGroup, registerRealObjectFactory, MaterialBank } from '@hatiolab/things-scene'
 import type { Component } from '@hatiolab/things-scene'
 import { TRANSPORT_SURFACE_HEIGHT } from './machine-3d.js'
+import { Z_FMSIM } from './z-priority'
 
 const FRAME_COLOR = 0x888899
 const ROLLER_COLOR = 0xaaaabc
 const DEFAULT_COLOR = 0x999999
 
 export class Conveyor3D extends RealObjectGroup {
+  get zPriority(): number { return Z_FMSIM.CONVEYOR }
+
   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
 
@@ -40,14 +37,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,34 +58,56 @@ 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({
-      color: FRAME_COLOR,
-      metalness: 0.85,
-      roughness: 0.35,
-    })
+    // MaterialBank 공유(dedup). 자체 update() 없이 base 생명주기(guarded disposeObject3D) 상속 → 안전.
+    const frameMaterial = MaterialBank.material('conveyor|frame', { metalness: 0.85, roughness: 0.35 }, FRAME_COLOR)
 
     // --- 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)
+    // 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,50 +115,70 @@ 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)
+        }
       }
     }
 
     const frameMesh = new THREE.Mesh(BufferGeometryUtils.mergeGeometries(frameGeometries), frameMaterial)
     frameMesh.castShadow = true
     frameMesh.receiveShadow = true
-    this.object3d.add(frameMesh)
+    this.components3D.add(frameMesh)
 
     // --- 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)
     }
+
+    // mesh 는 super.build() 이후 생성 → 코어 faint 를 명시 적용(편집 흐림이 mesh 에 닿게).
+    this.updateAlpha()
   }
 
   private buildRollers(
@@ -148,87 +187,111 @@ 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) {
       const rollerMesh = new THREE.Mesh(
         BufferGeometryUtils.mergeGeometries(rollerGeometries),
-        new THREE.MeshStandardMaterial({ color, metalness: 0.9, roughness: 0.2 })
+        MaterialBank.material('conveyor|roller', { metalness: 0.9, roughness: 0.2 }, color)
       )
       rollerMesh.castShadow = true
-      this.object3d.add(rollerMesh)
+      this.components3D.add(rollerMesh)
     }
   }
 
-  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)
     }
 
     const drumMesh = new THREE.Mesh(
       BufferGeometryUtils.mergeGeometries(drumGeometries),
-      new THREE.MeshStandardMaterial({ color: ROLLER_COLOR, metalness: 0.9, roughness: 0.2 })
+      MaterialBank.material('conveyor|drum', { metalness: 0.9, roughness: 0.2 }, ROLLER_COLOR)
     )
     drumMesh.castShadow = true
-    this.object3d.add(drumMesh)
+    this.components3D.add(drumMesh)
 
     // Belt surface
     const beltThickness = drumRadius * 0.12
-    const beltMaterial = new THREE.MeshStandardMaterial({
-      color: color,
-      metalness: 0.0,
-      roughness: 0.9,
-    })
+    const beltMaterial = MaterialBank.material('conveyor|belt', { metalness: 0.0, roughness: 0.9 }, color)
 
     // 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
-    this.object3d.add(flatMesh)
+    this.components3D.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],
+    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,65 +299,82 @@ 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
-      this.object3d.add(wrapMesh)
+      this.components3D.add(wrapMesh)
     }
 
     // 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)
+    this.components3D.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
 
-    const railMaterial = new THREE.MeshStandardMaterial({
-      color,
-      metalness: 0.7,
-      roughness: 0.3,
-    })
+    const railMaterial = MaterialBank.material('conveyor|rail', { metalness: 0.7, roughness: 0.3 }, color)
 
     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)
     railMesh.castShadow = true
-    this.object3d.add(railMesh)
+    this.components3D.add(railMesh)
   }
 
   updateDimension() {}
-  updateAlpha() {}
+  // updateAlpha override 제거 — 코어 RealObject.updateAlpha(=applyMaterialOpacity)로 수렴(faint).
+  // view 모드는 factor=1 → build-시 opacity 그대로(불변), 편집 모드만 faint 추가.
 
   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 ||