@operato/scene-storage 10.0.0-beta.40 → 10.0.0-beta.42

package/src/rack-materials.ts

@@ -0,0 +1,61 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ *
+ * Shared frame / shelf / stock materials — module-level singleton.
+ *
+ * StorageRack 과 RackGrid 의 frame mesh material 을 *공유* — 여러 rack 인스턴스가
+ * scene 에 있어도 GPU material 1개. 전체 application lifecycle 동안 살아있음
+ * (dispose 안 함).
+ *
+ * 색상 / 속성을 인스턴스별로 *override* 해야 한다면 인스턴스 내 별도 material 생성
+ * (현재는 모든 rack 이 같은 색 — singleton 으로 충분).
+ */
+import * as THREE from 'three'
+
+const POST_COLOR = 0x6a7080
+const BEAM_COLOR = 0x556070
+const BRACE_COLOR = 0x556070
+
+export const POST_MATERIAL = new THREE.MeshStandardMaterial({
+  color: POST_COLOR,
+  metalness: 0.7,
+  roughness: 0.4
+})
+
+export const BEAM_MATERIAL = new THREE.MeshStandardMaterial({
+  color: BEAM_COLOR,
+  metalness: 0.7,
+  roughness: 0.4
+})
+
+export const BRACE_MATERIAL = new THREE.MeshStandardMaterial({
+  color: BRACE_COLOR,
+  metalness: 0.7,
+  roughness: 0.4
+})
+
+export const SHELF_MATERIAL = new THREE.MeshStandardMaterial({
+  color: BEAM_COLOR,
+  metalness: 0.3,
+  roughness: 0.6,
+  transparent: true,
+  opacity: 0.25,
+  side: THREE.DoubleSide
+})
+
+/** Stock — white base, instanceColor 가 최종 색상이 됨. */
+export const STOCK_MATERIAL = new THREE.MeshStandardMaterial({
+  color: 0xffffff,
+  metalness: 0,
+  roughness: 0.9
+})
+
+/** Empty stock (record 없는 cell, hideEmptyStock=off 시) — 회색 반투명. */
+export const EMPTY_STOCK_MATERIAL = new THREE.MeshStandardMaterial({
+  color: 0x888888,
+  metalness: 0,
+  roughness: 0.9,
+  transparent: true,
+  opacity: 0.2,
+  depthWrite: false
+})

package/src/storage-rack-3d.ts

@@ -23,38 +23,61 @@ import * as THREE from 'three'
 import * as BufferGeometryUtils from 'three/examples/jsm/utils/BufferGeometryUtils.js'
 import { RealObjectGroup } from '@hatiolab/things-scene'
 
-const POST_COLOR = 0x6a7080
-const BEAM_COLOR = 0x556070
-const BRACE_COLOR = 0x556070
+import { POST_MATERIAL, BEAM_MATERIAL, BRACE_MATERIAL, SHELF_MATERIAL, STOCK_MATERIAL } from './rack-materials.js'
+
+const BEAM_COLOR = 0x556070   // shelf material 의 color 와 일치 — 일부 코멘트 참조
+
+// ── Stock visualization 공용 자원 ────────────────────────────────────────────
+const STOCK_GEOMETRY_CACHE = new Map<string, THREE.BufferGeometry>()
+const STOCK_DEFAULT_COLOR = '#c8a878'   // cardboard 색 (legend 매칭 없을 때)
+
+function getStockGeometry(w: number, h: number, d: number): THREE.BufferGeometry {
+  const k = `${w.toFixed(1)}-${h.toFixed(1)}-${d.toFixed(1)}`
+  let g = STOCK_GEOMETRY_CACHE.get(k)
+  if (!g) {
+    g = new THREE.BoxGeometry(w, d, h)   // X=w, Y=d (vertical), Z=h
+    STOCK_GEOMETRY_CACHE.set(k, g)
+  }
+  return g
+}
 
 export class StorageRack3D extends RealObjectGroup {
+  /** state.data 기반 stock 시각화 InstancedMesh. rebuildStockMesh 가 관리. */
+  private _stockMesh?: THREE.InstancedMesh
+  /** Horizontal beam 그룹 — hideHorizontalFrame 시 visibility 토글. */
+  private _beamGroup?: THREE.Group
+
+  /** Public read-only — click 핸들러가 instanceId/record 역참조에 사용. */
+  get stockMesh(): THREE.InstancedMesh | undefined {
+    return this._stockMesh
+  }
+
+  /** hideHorizontalFrame 변경 시 RackGrid 의 onchange 가 호출 — 즉시 반영. */
+  applyFrameVisibility(): void {
+    const hide = !!(this.component.state as any)?.hideHorizontalFrame
+    if (this._beamGroup) this._beamGroup.visible = !hide
+  }
+
   build() {
     super.build()
 
     const { width, height, depth = 3000 } = this.component.state
     const levels = Math.max(1, Math.floor((this.component.state.levels as number) || 4))
     const bays = Math.max(1, Math.floor((this.component.state.bays as number) || 5))
+    const shelfBase = Math.max(0, Math.min(
+      (this.component.state.shelfBaseHeight as number) || 0,
+      depth * 0.9
+    ))
+    const shelfZone = depth - shelfBase    // 실제 shelf 가 차지하는 Y
 
-    const baseY = -depth / 2
+    const baseY = -depth / 2               // rack 바닥 (3D Y 의 최저)
+    const shelfBaseY = baseY + shelfBase   // 첫 shelf 의 시작 (= level 1 의 바닥)
     const postW = Math.min(width / bays, height) * 0.06
-    const beamH = depth * 0.025
+    // beam 두께 = post 와 비슷 (산업 beam 이 post 보다 약간 두꺼움 — 1.2배)
+    const beamH = postW * 1.2
     const braceT = postW * 0.6
 
-    const postMaterial = new THREE.MeshStandardMaterial({
-      color: POST_COLOR,
-      metalness: 0.7,
-      roughness: 0.4
-    })
-    const beamMaterial = new THREE.MeshStandardMaterial({
-      color: BEAM_COLOR,
-      metalness: 0.7,
-      roughness: 0.4
-    })
-    const braceMaterial = new THREE.MeshStandardMaterial({
-      color: BRACE_COLOR,
-      metalness: 0.7,
-      roughness: 0.4
-    })
+    // Material 은 module-level singleton (rack-materials.ts) — 인스턴스 별 생성 X.
 
     // ── Uprights (vertical posts at every bay boundary) ──────────────
     // bays + 1 vertical positions; for each, one front post + one back post.
@@ -69,17 +92,17 @@ export class StorageRack3D extends RealObjectGroup {
         postGeos.push(post)
       }
     }
-    const postMesh = new THREE.Mesh(BufferGeometryUtils.mergeGeometries(postGeos), postMaterial)
+    const postMesh = new THREE.Mesh(BufferGeometryUtils.mergeGeometries(postGeos), POST_MATERIAL)
     postMesh.castShadow = true
     postMesh.receiveShadow = true
     this.object3d.add(postMesh)
 
     // ── Horizontal beams (front + back faces at each level) ──────────
-    // levels + 1 vertical positions (level 0 = ground, level N = top).
+    // shelf zone 안 levels+1 위치 (level 0 = shelfBase, level N = 천장).
     const beamGeos: THREE.BufferGeometry[] = []
     for (let lv = 0; lv <= levels; lv++) {
       const yFrac = lv / levels
-      const y = baseY + yFrac * depth - beamH / 2 + (lv === 0 ? beamH : 0)
+      const y = shelfBaseY + yFrac * shelfZone - beamH / 2 + (lv === 0 ? beamH : 0)
 
       for (const zSign of [-1, 1]) {
         const beam = new THREE.BoxGeometry(width, beamH, beamH)
@@ -87,17 +110,21 @@ export class StorageRack3D extends RealObjectGroup {
         beamGeos.push(beam)
       }
     }
-    const beamMesh = new THREE.Mesh(BufferGeometryUtils.mergeGeometries(beamGeos), beamMaterial)
+    const beamMesh = new THREE.Mesh(BufferGeometryUtils.mergeGeometries(beamGeos), BEAM_MATERIAL)
     beamMesh.castShadow = true
     beamMesh.receiveShadow = true
-    this.object3d.add(beamMesh)
+    // hideHorizontalFrame 즉시 토글 위한 별도 group
+    this._beamGroup = new THREE.Group()
+    this._beamGroup.add(beamMesh)
+    this._beamGroup.visible = !((this.component.state as any)?.hideHorizontalFrame)
+    this.object3d.add(this._beamGroup)
 
     // ── Diagonal cross-bracing on the back face (the "X" pattern) ────
     // Two diagonals per level — "/" and "\" — making an X across each
     // bay-tall cell. Visual signature of a load-bearing rack.
     const braceGeos: THREE.BufferGeometry[] = []
     const cellW = width / bays
-    const cellH = depth / levels
+    const cellH = shelfZone / levels                          // cell 높이 (shelf zone 안)
     const braceLen = Math.sqrt(cellW * cellW + cellH * cellH)
     const braceAngle = Math.atan2(cellH, cellW)
     const backZ = height / 2 - postW * 0.6
@@ -109,7 +136,7 @@ export class StorageRack3D extends RealObjectGroup {
       const cellCenterX = (bay - bays / 2 + 0.5) * cellW
 
       for (let lv = 0; lv < levels; lv++) {
-        const cellCenterY = baseY + (lv + 0.5) * cellH
+        const cellCenterY = shelfBaseY + (lv + 0.5) * cellH
 
         for (const sign of [-1, 1]) {
           const brace = new THREE.BoxGeometry(braceLen, braceT, braceT)
@@ -120,10 +147,135 @@ export class StorageRack3D extends RealObjectGroup {
       }
     }
     if (braceGeos.length > 0) {
-      const braceMesh = new THREE.Mesh(BufferGeometryUtils.mergeGeometries(braceGeos), braceMaterial)
+      const braceMesh = new THREE.Mesh(BufferGeometryUtils.mergeGeometries(braceGeos), BRACE_MATERIAL)
       braceMesh.castShadow = true
       this.object3d.add(braceMesh)
     }
+
+    // ── Shelf planes (level 별 반투명 무볼륨 판) ────────────────────────────
+    // 각 level 의 *바닥 면* 에 plane — cell 위치 시각 인식. carrier 가 그 위
+    // 에 놓이는 *지지면*. 반투명.
+    //
+    // X-Z 넓이를 *frame 안쪽* 으로 줄여 mesh 겹침 자체 제거 (Z-fight 회피).
+    //   X: 양 옆 corner post 안쪽 (-postW 양쪽)
+    //   Z: 앞/뒤 beam 안쪽 (-beamH 양쪽)
+    const shelfW = Math.max(0, width - 2 * postW)
+    const shelfD = Math.max(0, height - 2 * beamH)
+    const shelfGeo = new THREE.PlaneGeometry(shelfW, shelfD)
+    shelfGeo.rotateX(-Math.PI / 2)  // X-Y plane → X-Z plane (= horizontal)
+    const shelfMaterial = SHELF_MATERIAL
+    for (let lv = 0; lv < levels; lv++) {
+      // shelf plane Y = 해당 level 의 *load beam top* 정확 일치 (cell 바닥 면).
+      //   beam center Y = shelfBaseY + yFrac*shelfZone - beamH/2 + (lv===0 ? beamH : 0)
+      //   beam top    Y = beam center + beamH/2 = shelfBaseY + yFrac*shelfZone + (lv===0 ? beamH : 0)
+      const yFrac = lv / levels
+      const y = shelfBaseY + yFrac * shelfZone + (lv === 0 ? beamH : 0)
+      const shelf = new THREE.Mesh(shelfGeo, shelfMaterial)
+      shelf.position.set(0, y, 0)
+      shelf.receiveShadow = true
+      this.object3d.add(shelf)
+    }
+
+    // state.data 가 있으면 stock InstancedMesh 도 빌드
+    this.rebuildStockMesh()
+  }
+
+  /**
+   * state.data 의 각 record 를 한 InstancedMesh instance 로 렌더링.
+   * cellMap 에 있는 cellId 만 instance 부여 — 나머지는 무시.
+   * Mover/pickAndPlace 와 무관 — 순수 시각화.
+   */
+  rebuildStockMesh(): void {
+    if (this._stockMesh) {
+      this.object3d.remove(this._stockMesh)
+      this._stockMesh = undefined
+    }
+
+    const rack: any = this.component
+    const data = rack.state?.data as Array<{ cellId: string;[key: string]: any }> | undefined
+    if (!Array.isArray(data) || data.length === 0) return
+
+    const cellMap = rack.cellMap
+    if (!cellMap) return
+
+    // rack 의 기하 파라미터 — cellMap / _ensureCellAttachObject3d 의 levelHeight
+    // 계산과 *반드시* 일치해야 함 (shelfBaseHeight > 0 일 때 stock 시각 위치와
+    // crane fork target 이 어긋나는 회귀 차단).
+    const rs: any = this.component.state
+    const rackWidth = (rs?.width as number) || 1000
+    const rackDepth = (rs?.depth as number) || 3000
+    const rackHeight = (rs?.height as number) || 600
+    const bays = Math.max(1, Math.floor(rs?.bays || 5))
+    const levels = Math.max(1, Math.floor(rs?.levels || 4))
+    const shelfBase = Math.max(0, Math.min((rs?.shelfBaseHeight as number) || 0, rackDepth * 0.9))
+    const shelfZone = rackDepth - shelfBase
+    const bayWidth = rackWidth / bays
+    const levelHeight = shelfZone / levels                    // ← shelfZone 기준 (cellMap 과 동일)
+    const rowDepth = rackHeight
+
+    // 한 stock 의 크기 — cell 의 85% × 85% × 70%
+    const stockW = bayWidth * 0.85
+    const stockH = rowDepth * 0.85
+    const stockD = levelHeight * 0.7
+    const geo = getStockGeometry(stockW, stockH, stockD)
+
+    // 유효한 record 만 추출
+    const valid: { cell: any; record: any }[] = []
+    for (const r of data) {
+      if (!r?.cellId) continue
+      const cell = cellMap.findById(r.cellId)
+      if (cell) valid.push({ cell, record: r })
+    }
+    if (valid.length === 0) return
+
+    const inst = new THREE.InstancedMesh(geo, STOCK_MATERIAL, valid.length)
+    inst.castShadow = false
+    inst.receiveShadow = false
+    inst.frustumCulled = false
+    // things-scene EventManager3D 의 raycast hit-test 가 walk-up 하며 찾는 키:
+    //   userData.context 에 RealObject 자체 set.
+    // 객체 전체 대체가 아니라 속성만 set 해 Three.js 의 기존 userData 필드 보존.
+    inst.userData.context = this
+    // 클릭 핸들러가 instanceId 로 record 를 역참조할 수 있도록 순서대로 저장.
+    inst.userData._records = valid.map(v => v.record)
+
+    const m = new THREE.Matrix4()
+    const pos = new THREE.Vector3()
+    const q = new THREE.Quaternion()
+    const s = new THREE.Vector3(1, 1, 1)
+    const c = new THREE.Color()
+
+    for (let i = 0; i < valid.length; i++) {
+      const { cell, record } = valid[i]
+      // cell 중심 (rack-center 좌표계)
+      const x = cell.localPosition.x + bayWidth / 2 - rackWidth / 2
+      const cellCenterY = cell.localPosition.y + levelHeight / 2 - rackDepth / 2
+      // stock 바닥 = cell 바닥 → stock 중심 Y = cell 중심 Y - levelHeight/2 + stockD/2
+      const y = cellCenterY - levelHeight / 2 + stockD / 2
+      const z = cell.localPosition.z + rowDepth / 2 - rackHeight / 2
+
+      pos.set(x, y, z)
+      m.compose(pos, q, s)
+      inst.setMatrixAt(i, m)
+
+      // Legend 색상 매핑 — rack 의 resolveLegendColor 호출, 매칭 없으면 default
+      const resolved = (rack as any).resolveLegendColor?.(record) ?? STOCK_DEFAULT_COLOR
+      c.set(resolved)
+      inst.setColorAt(i, c)
+    }
+    inst.instanceMatrix.needsUpdate = true
+    if (inst.instanceColor) inst.instanceColor.needsUpdate = true
+
+    // ── CRITICAL: bounding sphere 계산 ────────────────────────────────────────
+    // Three.js InstancedMesh.raycast 는 먼저 bounding sphere 로 broad-phase 체크.
+    // setMatrixAt 만 호출하고 computeBoundingSphere 를 안 부르면 sphere.radius=0
+    // → 어떤 ray 도 안 맞음 → click event 발화 안 됨. raycaster 가 instance 인식
+    // 못 하는 것의 *결정적 원인*. needsUpdate 후 명시 호출 필수.
+    inst.computeBoundingSphere()
+    inst.computeBoundingBox?.()
+
+    this.object3d.add(inst)
+    this._stockMesh = inst
   }
 
   updateDimension() {}
@@ -134,7 +286,8 @@ export class StorageRack3D extends RealObjectGroup {
       'bays' in after ||
       'width' in after ||
       'height' in after ||
-      'depth' in after
+      'depth' in after ||
+      'shelfBaseHeight' in after
     ) {
       this.update()
       return