@operato/scene-storage 10.0.0-beta.32 → 10.0.0-beta.34

package/src/rack-column.ts

@@ -0,0 +1,340 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+
+import * as THREE from 'three'
+import * as BufferGeometryUtils from 'three/examples/jsm/utils/BufferGeometryUtils.js'
+
+import { RealObject } from '@hatiolab/things-scene'
+import { Stock } from './stock.js'
+import RackGrid from './rack-grid.js'
+
+
+const _color = new THREE.Color()
+const _matrix = new THREE.Matrix4()
+const _position = new THREE.Vector3()
+const _quaternion = new THREE.Quaternion()
+const _scale = new THREE.Vector3()
+
+export class Rack extends RealObject {
+  private _frame?: THREE.BufferGeometry
+  private _board?: THREE.BufferGeometry
+  private _instancedMesh?: THREE.InstancedMesh
+  private _stocks: Stock[] = []
+
+  static rackFrameGeometry = new THREE.BoxGeometry(1, 1, 1)
+  static boardGeometry = new THREE.PlaneGeometry(1, 1, 1, 1)
+
+  private static _boardMaterial?: THREE.MeshStandardMaterial
+  private static _stockMaterial?: THREE.MeshStandardMaterial
+
+  get visualizer(): any | undefined {
+    var component = this.component
+
+    while (component) {
+      if (component.state.type == 'visualizer') {
+        return component as any
+      }
+      component = component.parent
+    }
+  }
+
+  /**
+   * Stock 등록 대상: 1순위 조상 Visualizer(하위호환), 2순위 서비스 레지스트리의 stock-hub
+   */
+  get stockRegistry(): { putObject(id: string, obj: RealObject): void } | undefined {
+    const vis = this.visualizer
+    if (vis) return vis
+    return (this.component.root as any)?.getService?.('stock')
+  }
+
+  get rackTable(): RackGrid | undefined {
+    var component = this.component
+
+    while (component) {
+      if (component.state.type == 'rack-grid') {
+        return component as unknown as RackGrid
+      }
+      component = component.parent
+    }
+  }
+
+  get cz() {
+    var { shelves = 1, depth = 1 } = this.rackTable!.state
+
+    return 0.5 * depth * shelves
+  }
+
+  static get boardMaterial() {
+    if (!Rack._boardMaterial) {
+      Rack._boardMaterial = new THREE.MeshStandardMaterial({
+        color: '#dedede',
+        side: THREE.DoubleSide,
+        polygonOffset: true,
+        polygonOffsetFactor: -0.1
+      })
+    }
+
+    return Rack._boardMaterial
+  }
+
+  static get stockMaterial() {
+    if (!Rack._stockMaterial) {
+      Rack._stockMaterial = new THREE.MeshStandardMaterial({
+        color: 0xffffff,
+        side: THREE.FrontSide,
+        metalness: 0,
+        roughness: 1,
+        envMapIntensity: 0
+      })
+    }
+    return Rack._stockMaterial
+  }
+
+  get frame() {
+    return this._frame
+  }
+
+  get board() {
+    return this._board
+  }
+
+  get instancedMesh() {
+    return this._instancedMesh
+  }
+
+  get stocks() {
+    return this._stocks
+  }
+
+  build() {
+    super.build()
+
+    var { depth, hideRackFrame, shelves = 1, shelfLocations: commonShelfLocation, stockScale = 0.7 } = this.rackTable!.state
+
+    var { width, height, shelfLocations = commonShelfLocation, binLocations = '' } = this.component.state
+
+    let scale = stockScale
+
+    var shelfLocIds
+
+    if (!shelfLocations) {
+      shelfLocIds = []
+      for (var i = 0; i < shelves; i++) shelfLocIds.push(i + 1)
+    } else shelfLocIds = shelfLocations.split(/\s*,\s*/)
+
+    var shelfBins = binLocations.trim().split('\n').reverse()
+
+    if (!hideRackFrame) {
+      this._frame = this.createRackFrame(width, height, depth * shelves)
+      this._board = this.createRackBoards(shelves, width, height, depth, shelfLocIds)
+    }
+
+    // Stock 인스턴스 정보 수집
+    const stockEntries: { stock: Stock; x: number; y: number; z: number; w: number; h: number; d: number; name: string }[] = []
+
+    for (var i = 0; i < shelves; i++) {
+      let bottom = -depth * shelves * 0.5
+      if (shelfLocIds[i] == '') {
+        continue
+      }
+
+      var bins = (shelfBins[i] || '').trim().split(/\s*,\s*/)
+
+      var binWidth = width / (bins.length || 1)
+      for (var b = 0; b < bins.length; b++) {
+        let sw = binWidth * scale
+        let sh = height * scale
+        let sd = depth * scale
+
+        let stock = new Stock(this.component, { width: sw, height: sh, depth: sd })
+
+        let x = (width / 2) * ((2 * b - (bins.length - 1)) / bins.length)
+        let y = bottom + depth * i + sd * 0.5
+        let z = 0
+
+        var binCode = (bins[b] || '').replace('.', '')
+        let name = `${this.makeLocationString(shelfLocIds[i])}${binCode}`
+
+        stockEntries.push({ stock, x, y, z, w: sw, h: sh, d: sd, name })
+      }
+    }
+
+    // InstancedMesh 생성 (전체 Stock을 1개 draw call로)
+    if (stockEntries.length > 0) {
+      const instMesh = new THREE.InstancedMesh(
+        Stock.stockGeometry,
+        Rack.stockMaterial,
+        stockEntries.length
+      )
+
+      // instanceColor 초기화
+      const defaultColor = new THREE.Color(Stock.defaultMaterial.color)
+      for (let idx = 0; idx < stockEntries.length; idx++) {
+        const { stock, x, y, z, w, h, d, name } = stockEntries[idx]
+
+        _matrix.compose(
+          _position.set(x, y, z),
+          _quaternion.identity(),
+          _scale.set(w, d, h)
+        )
+        instMesh.setMatrixAt(idx, _matrix)
+        instMesh.setColorAt(idx, defaultColor)
+
+        // Stock에 instanced 참조 설정
+        stock._instancedMesh = instMesh
+        stock._instanceIndex = idx
+        stock._basePosition = { x, y, z }
+        stock._baseScale = { x: w, y: d, z: h }
+
+        // name 기반 lookup 유지
+        this._stocks.push(stock)
+        this.stockRegistry?.putObject(name, stock)
+      }
+
+      instMesh.instanceMatrix.needsUpdate = true
+      instMesh.instanceColor!.needsUpdate = true
+      instMesh.receiveShadow = true
+
+      // focused stock 회전 애니메이션
+      const self = this
+      instMesh.onBeforeRender = () => {
+        let needsUpdate = false
+        let hasFocused = false
+        for (const stock of self._stocks) {
+          if (stock._focused && stock._focusedAt != null) {
+            const elapsed = performance.now() - stock._focusedAt
+            const angle = 2 * Math.PI * (elapsed / 2000)
+            _quaternion.setFromAxisAngle(_position.set(0, 1, 0), angle)
+            _matrix.compose(
+              _position.set(stock._basePosition!.x, stock._basePosition!.y, stock._basePosition!.z),
+              _quaternion,
+              _scale.set(stock._baseScale!.x, stock._baseScale!.y, stock._baseScale!.z)
+            )
+            instMesh.setMatrixAt(stock._instanceIndex, _matrix)
+            needsUpdate = true
+            hasFocused = true
+          } else if (stock._focusedAt != null) {
+            delete stock._focusedAt
+            _matrix.compose(
+              _position.set(stock._basePosition!.x, stock._basePosition!.y, stock._basePosition!.z),
+              _quaternion.identity(),
+              _scale.set(stock._baseScale!.x, stock._baseScale!.y, stock._baseScale!.z)
+            )
+            instMesh.setMatrixAt(stock._instanceIndex, _matrix)
+            needsUpdate = true
+          }
+        }
+        if (needsUpdate) {
+          instMesh.instanceMatrix.needsUpdate = true
+        }
+        if (hasFocused) {
+          self.component.invalidate()
+        }
+      }
+
+      this.object3d.add(instMesh)
+      this._instancedMesh = instMesh
+    }
+  }
+
+  createRackFrame(w: number, h: number, d: number): THREE.BufferGeometry {
+    const frameWeight = Math.round(Math.min(w, h) / 10)
+    const geometries = []
+
+    for (let i = 0; i < 4; i++) {
+      const geometry = Rack.rackFrameGeometry.clone()
+      geometry.scale(frameWeight, d, frameWeight)
+
+      switch (i) {
+        case 0:
+          geometry.translate(w / 2, 0, h / 2)
+          break
+        case 1:
+          geometry.translate(w / 2, 0, -h / 2)
+          break
+        case 2:
+          geometry.translate(-w / 2, 0, h / 2)
+          break
+        case 3:
+          geometry.translate(-w / 2, 0, -h / 2)
+          break
+      }
+
+      geometries.push(geometry)
+    }
+
+    return BufferGeometryUtils.mergeGeometries(geometries)
+  }
+
+  createRackBoards(
+    shelves: number,
+    width: number,
+    height: number,
+    depth: number,
+    shelfLocIds: string[]
+  ): THREE.BufferGeometry {
+    let bottom = -depth * shelves * 0.5
+    const geometries = []
+
+    for (let i = 1; i < shelves; i++) {
+      if (shelfLocIds[i] === '') {
+        continue
+      }
+
+      const geometry = Rack.boardGeometry.clone()
+
+      geometry.scale(width, height, 1)
+      geometry.rotateX(Math.PI / 2)
+      geometry.translate(0, bottom + depth * i, 0)
+
+      geometries.push(geometry)
+    }
+
+    return BufferGeometryUtils.mergeGeometries(geometries)
+  }
+
+  makeLocationString(shelfString: string) {
+    var { section = '', unit = '' } = this.component.state
+    var { locPattern = '{z}{s}-{u}-{sh}', zone = '' } = this.rackTable!.state
+
+    var locationString = locPattern
+
+    locationString = locationString.replace(/{z}/i, zone)
+    locationString = locationString.replace(/{s}/i, section)
+    locationString = locationString.replace(/{u}/i, unit)
+    locationString = locationString.replace(/{sh}/i, shelfString)
+
+    return locationString
+  }
+
+  makeShelfString(pattern: string, shelf: number, length: number) {
+    /**
+     *  pattern #: 숫자
+     *  pattern 0: 고정 자리수
+     *  pattern -: 역순
+     */
+
+    if (!pattern || !shelf || !length) return
+
+    var isReverse = /^\-/.test(pattern)
+    pattern = pattern.replace(/#+/, '#')
+
+    var fixedLength = (pattern.match(/0/g) || []).length || 0
+    var shelfString = String(isReverse ? length - shelf + 1 : shelf)
+
+    if (shelfString.length > fixedLength && fixedLength > 0) {
+      shelfString = shelfString.substring(shelfString.length - fixedLength)
+    } else {
+      var prefix = ''
+      for (var i = 0; i < fixedLength - shelfString.length; i++) {
+        prefix += '0'
+      }
+      shelfString = prefix + shelfString
+    }
+
+    return shelfString
+  }
+
+  updateAlpha() {}
+}

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

@@ -0,0 +1,128 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+
+import * as THREE from 'three'
+import * as BufferGeometryUtils from 'three/examples/jsm/utils/BufferGeometryUtils.js'
+import { Component, RealObjectGroup } from '@hatiolab/things-scene'
+
+import { Rack } from './rack-column.js'
+import type RackGrid from './rack-grid.js'
+
+const DEFAULT_FRAME_COLOR = 0x8a8a8a
+
+export class RackGrid3D extends RealObjectGroup {
+  private _frameMaterial?: THREE.MeshStandardMaterial
+
+  build() {
+    super.build()
+
+    this.createRacks()
+  }
+
+  // bottom origin: object3d가 zPos(바닥)에 위치 (내부 mesh는 center-local 좌표로 쌓임)
+  protected get syncZPosOffset(): number {
+    return 0
+  }
+
+  override get geometricOffsetY(): number {
+    return 0
+  }
+
+  private createFrameMaterial(): THREE.MeshStandardMaterial {
+    this._frameMaterial?.dispose()
+
+    const { strokeStyle } = this.component.state
+    const color = strokeStyle && typeof strokeStyle === 'string' ? strokeStyle : DEFAULT_FRAME_COLOR
+
+    this._frameMaterial = new THREE.MeshStandardMaterial({
+      color,
+      roughness: 0.35,
+      metalness: 0.85
+    })
+
+    return this._frameMaterial
+  }
+
+  createRacks() {
+    const { rotation = 0, shelfLocations, shelves = 1 } = this.component.state
+
+    this.object3d.rotation.y = -rotation
+
+    const racks = (this.component as unknown as RackGrid).components
+      .map((cell: Component) => {
+        const { shelfLocations: shelfLoc = shelfLocations, isEmpty } = cell.state
+
+        if (!isEmpty) {
+          cell.setState('shelfLocations', shelfLoc)
+
+          const rack = new Rack(cell)
+          cell._realObject = rack // 중복 생성 방지: addObject 재귀에서 skip
+
+          rack.update()
+          this.object3d.add(rack.object3d)
+
+          return rack
+        }
+        return
+      })
+      .filter((rack: any): rack is Rack => !!rack)
+
+    this.mergeAndAddRackCommonObjects(racks)
+  }
+
+  mergeAndAddRackCommonObjects(racks: Rack[]) {
+    const framesGeometries: THREE.BufferGeometry[] = []
+    const boardsGeometries: THREE.BufferGeometry[] = []
+
+    if (racks.length > 0) {
+      racks.forEach(rack => {
+        const geometry = rack.frame
+
+        if (!geometry) {
+          return
+        }
+
+        geometry.translate(rack.position.x, rack.position.y, rack.position.z)
+        geometry.scale(rack.scale.x, rack.scale.y, rack.scale.z)
+        framesGeometries.push(geometry)
+      })
+
+      if (framesGeometries.length > 0) {
+        const frameMesh = new THREE.Mesh(BufferGeometryUtils.mergeGeometries(framesGeometries), this.createFrameMaterial())
+        this.object3d.add(frameMesh)
+      }
+
+      racks.forEach(rack => {
+        const geometry = rack.board
+
+        if (!geometry) {
+          return
+        }
+
+        geometry.translate(rack.position.x, rack.position.y, rack.position.z)
+        geometry.scale(rack.scale.x, rack.scale.y, rack.scale.z)
+        boardsGeometries.push(geometry)
+      })
+
+      if (boardsGeometries.length > 0) {
+        const material = Rack.boardMaterial
+        material.opacity = 0.5
+        material.transparent = true
+
+        const boardMesh = new THREE.Mesh(BufferGeometryUtils.mergeGeometries(boardsGeometries), material)
+
+        this.object3d.add(boardMesh)
+      }
+    }
+  }
+
+  dispose() {
+    this._frameMaterial?.dispose()
+    this._frameMaterial = undefined
+
+    super.dispose()
+  }
+
+  updateAlpha() {}
+}