@operato/scene-storage 10.0.0-beta.41 → 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,11 +23,41 @@ 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()
 
@@ -47,21 +77,7 @@ export class StorageRack3D extends RealObjectGroup {
     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.
@@ -76,7 +92,7 @@ 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)
@@ -94,10 +110,14 @@ 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
@@ -127,7 +147,7 @@ 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)
     }
@@ -143,14 +163,7 @@ export class StorageRack3D extends RealObjectGroup {
     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 = new THREE.MeshStandardMaterial({
-      color: BEAM_COLOR,
-      metalness: 0.3,
-      roughness: 0.6,
-      transparent: true,
-      opacity: 0.25,
-      side: THREE.DoubleSide
-    })
+    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)
@@ -162,6 +175,107 @@ export class StorageRack3D extends RealObjectGroup {
       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() {}