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

package/package.json

@@ -2,7 +2,7 @@
   "name": "@fmsim/machine",
   "description": "Layout View를 구성하는 설비(machine)들과 유닛을 구현한 모듈입니다.",
   "author": "heartyoh",
-  "version": "2.0.0-beta.5",
+  "version": "2.0.0-beta.6",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "things-scene": true,
@@ -25,7 +25,7 @@
     "migration": "things-factory-migration"
   },
   "dependencies": {
-    "@fmsim/api": "^2.0.0-beta.3",
+    "@fmsim/api": "^2.0.0-beta.6",
     "@hatiolab/things-scene": "^10.0.0-beta.1"
   },
   "devDependencies": {
@@ -54,5 +54,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "522cb3abab43f7a3c8850cab80d1b9187d6447d6"
+  "gitHead": "879225fef10fca7f9084e4c27d23744337eaa06b"
 }

package/src/carrier.ts

@@ -134,11 +134,11 @@ export default class Carrier extends MCSStatusMixin(ParentObjectMixin(Shape)) {
         // 문자열 형태의 설정들을 미리 파싱
         const parsedTheme = {}
         for (const [status, config] of Object.entries(theme)) {
-          if (typeof config === 'string') {
+          if (typeof config === 'string' && config.trim()) {
             try {
               parsedTheme[status] = JSON5.parse(config)
             } catch (e) {
-              console.error('JSON5 parse error:', e)
+              console.error('JSON5 parse error:', e, 'input:', JSON.stringify(config), 'status:', status, 'theme:', carrierAnimationName)
               parsedTheme[status] = config
             }
           } else {

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

@@ -15,7 +15,7 @@
 
 import * as THREE from 'three'
 import { RoundedBoxGeometry } from 'three/examples/jsm/geometries/RoundedBoxGeometry.js'
-import { RealObjectGroup, registerRealObjectFactory } from '@hatiolab/things-scene'
+import { RealObjectGroup, registerRealObjectFactory, disposeObject3D } from '@hatiolab/things-scene'
 import type { Component } from '@hatiolab/things-scene'
 import { TRANSPORT_SURFACE_HEIGHT } from './machine-3d.js'
 
@@ -24,6 +24,7 @@ const PLATFORM_COLOR = 0x333333
 const DEFAULT_BODY_COLOR = 0x6688cc
 
 export class AGV3D extends RealObjectGroup {
+  private _ownMeshes: THREE.Mesh[] = []
   get effectiveDepth(): number {
     const { depth } = this.component.state
     return depth || TRANSPORT_SURFACE_HEIGHT
@@ -88,7 +89,6 @@ export class AGV3D extends RealObjectGroup {
     bumper.position.y = bumperH / 2
     bumper.castShadow = true
     bumper.receiveShadow = true
-    this.object3d.add(bumper)
 
     // ── 본체 (둥근 모서리, statusColor 적용) ──
     const bodyColor = this.resolveColor()
@@ -102,7 +102,6 @@ export class AGV3D extends RealObjectGroup {
     body.position.y = bumperH + bodyH / 2
     body.castShadow = true
     body.receiveShadow = true
-    this.object3d.add(body)
 
     // ── 상단 플랫폼 (본체보다 안쪽, 어두운색) ──
     const platInset = Math.min(w, h) * 0.04
@@ -117,14 +116,41 @@ export class AGV3D extends RealObjectGroup {
     plat.position.y = bumperH + bodyH + gapH + platH / 2
     plat.castShadow = true
     plat.receiveShadow = true
-    this.object3d.add(plat)
+
+    this._ownMeshes = [bumper, body, plat]
+    for (const m of this._ownMeshes) this.object3d.add(m)
   }
 
   updateDimension() {}
-  updateAlpha() {}
+
+  update() {
+    // 자신의 mesh만 제거 (Carrier 등 자식 컴포넌트 3D 보존)
+    for (const m of this._ownMeshes) {
+      this.object3d.remove(m)
+      disposeObject3D(m)
+    }
+    this._ownMeshes = []
+
+    this.build()
+    this.updateTransform()
+    this.updateAlpha()
+    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
+      }
+    }
+  }
 
   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) {
+    if ('width' in after || 'height' in after || 'depth' in after ||
+        'fillStyle' in after || 'strokeStyle' in after || 'id' in after) {
       this.update()
       return
     }

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

@@ -9,7 +9,7 @@
  */
 
 import * as THREE from 'three'
-import { RealObjectGroup, registerRealObjectFactory } from '@hatiolab/things-scene'
+import { RealObjectGroup, registerRealObjectFactory, disposeObject3D } from '@hatiolab/things-scene'
 import type { Component } from '@hatiolab/things-scene'
 import { LEGEND_CAPACITY } from '../features/mcs-status-default'
 import { getVaueOnRanges } from '../utils/get-value-on-ranges'
@@ -35,6 +35,12 @@ interface MCS3DConfig {
   isVisible?: (component: Component) => boolean
   /** 부모 대비 크기 비율 (기본 1.0). < 1이면 부모 중심에 배치. */
   sizeRatio?: number
+  /** 상부 면 제거 (5면 개방 박스) */
+  openTop?: boolean
+  /** 상판 무반사 (MeshBasicMaterial) */
+  matteTop?: boolean
+  /** 상판에 2D 렌더링 텍스처 적용 */
+  texturedTop?: boolean
 }
 
 /**
@@ -94,7 +100,7 @@ class MCSRealObject3D extends RealObjectGroup {
   }
 
   // 컴포넌트의 상태 색상(statusColor) 또는 fillStyle → Three.js 색상 변환
-  private resolveColor(): number {
+  protected resolveColor(): number {
     const comp = this.component as any
 
     // 1) MCSStatusMixin.statusColor (legend 기반 상태 색상)
@@ -190,6 +196,8 @@ class MCSRealObject3D extends RealObjectGroup {
 
   // ── Build ──
 
+  protected _ownMesh?: THREE.Mesh
+
   build() {
     super.build()
 
@@ -227,16 +235,36 @@ class MCSRealObject3D extends RealObjectGroup {
     material.polygonOffsetFactor = -1
     material.polygonOffsetUnit = -1
 
-    const mesh = new THREE.Mesh(geometry, material)
+    // BoxGeometry material groups: +x(0), -x(1), +y(2), -y(3), +z(4), -z(5)
+    let meshMaterial: THREE.Material | THREE.Material[] = material
+    if (shape === 'box') {
+      if (this._config.openTop) {
+        // 상단면 제거 → 5면 개방 박스
+        const invisible = new THREE.MeshBasicMaterial({ visible: false })
+        meshMaterial = [material, material, invisible, material, material, material]
+      } else if (this._config.texturedTop) {
+        // 상판에 2D 렌더링 텍스처
+        const topMat = this.buildTopTexture(w, h)
+        meshMaterial = [material, material, topMat, material, material, material]
+      } else if (this._config.matteTop) {
+        // 상판만 무반사
+        const matte = new THREE.MeshBasicMaterial({ color, opacity, transparent: opacity < 1 })
+        meshMaterial = [material, material, matte, material, material, material]
+      }
+    }
+
+    this._ownMesh = new THREE.Mesh(geometry, meshMaterial)
     // sizeRatio < 1이면 부모 중심에 배치 (rawDepth/2), 아니면 자체 중심 (depth/2)
-    mesh.position.y = ratio < 1 ? rawDepth / 2 : depth / 2
-    mesh.castShadow = true
-    mesh.receiveShadow = true
-    this.object3d.add(mesh)
+    this._ownMesh.position.y = ratio < 1 ? rawDepth / 2 : depth / 2
+    this._ownMesh.castShadow = true
+    this._ownMesh.receiveShadow = true
+    this.object3d.add(this._ownMesh)
   }
 
   // ── Change handling ──
 
+  private _updatePending = false
+
   onchange(after: Record<string, unknown>, before: Record<string, unknown>) {
     if (
       'width' in after ||
@@ -244,18 +272,117 @@ class MCSRealObject3D extends RealObjectGroup {
       'depth' in after ||
       'fillStyle' in after ||
       'strokeStyle' in after ||
-      'id' in after // Carrier: CARRIERNAME 변경 시 가시성 재판정
+      'id' in after ||
+      'EMPTYTYPE' in after ||
+      'CARRIERSTATUS' in after
     ) {
-      this.update()
+      // 연속 setState에 의한 다중 rebuild 방지: 한 프레임에 한 번만 실행
+      if (!this._updatePending) {
+        this._updatePending = true
+        queueMicrotask(() => {
+          this._updatePending = false
+          this.update()
+        })
+      }
       return
     }
 
     super.onchange(after, before)
   }
 
-  // RealObjectGroup 기본 동작 비활성화 (update()에서 일괄 처리)
+  /**
+   * 상판 텍스처: 컴포넌트의 2D render()를 캔버스에 그려서 텍스처로 사용
+   */
+  protected buildTopTexture(w: number, h: number): THREE.MeshBasicMaterial {
+    const scale = 4
+    const cw = this.nextPow2(w * scale)
+    const ch = this.nextPow2(h * scale)
+    const canvas = document.createElement('canvas')
+    canvas.width = cw
+    canvas.height = ch
+    const ctx = canvas.getContext('2d')!
+
+    const statusColor = '#' + this.resolveColor().toString(16).padStart(6, '0')
+    const emptyType = (this.component.state as any)?.EMPTYTYPE || ''
+    const text = emptyType === 'FULL' ? 'F' : emptyType === 'EMPTY' ? 'E' : emptyType === 'EMPTYEMPTY' ? 'X' : ''
+
+    // 실제 사용 영역 (nextPow2 이전 크기)
+    const usedW = w * scale
+    const usedH = h * scale
+
+    // 바탕: 캐리어 상태 색상 (사용 영역만)
+    ctx.fillStyle = statusColor
+    ctx.fillRect(0, 0, usedW, usedH)
+
+    // 텍스트 (사용 영역 중앙)
+    if (text) {
+      const fontSize = Math.round(Math.min(usedW, usedH) * 0.7)
+      ctx.font = `bold ${fontSize}px Arial`
+      ctx.textAlign = 'center'
+      ctx.textBaseline = 'middle'
+      ctx.fillStyle = '#000000'
+      ctx.fillText(text, usedW / 2, usedH / 2)
+    }
+
+    const texture = new THREE.CanvasTexture(canvas)
+    texture.offset.set(0, 1 - usedH / ch)
+    texture.repeat.set(usedW / cw, usedH / ch)
+    texture.colorSpace = THREE.SRGBColorSpace
+
+    return new THREE.MeshBasicMaterial({
+      map: texture,
+      transparent: true,
+      side: THREE.DoubleSide,
+    })
+  }
+
+  private nextPow2(n: number): number {
+    if (!(n > 0)) return 1
+    let v = Math.ceil(n)
+    v--
+    v |= v >> 1; v |= v >> 2; v |= v >> 4; v |= v >> 8; v |= v >> 16
+    return v + 1
+  }
+
+  /**
+   * 자신의 mesh만 제거 후 rebuild.
+   * 기본 update()는 clear()로 object3d의 모든 children을 제거하는데,
+   * 컨테이너(Port 등)의 경우 자식 컴포넌트(Carrier 등)의 3D 오브젝트도 함께 제거됨.
+   * 이를 방지하기 위해 자신이 생성한 mesh만 제거한다.
+   */
+  update() {
+    // 자신의 mesh만 제거 (자식 컴포넌트 3D 오브젝트 보존)
+    if (this._ownMesh) {
+      this.object3d.remove(this._ownMesh)
+      disposeObject3D(this._ownMesh)
+      this._ownMesh = undefined
+    }
+
+    this.build()
+    this.updateTransform()
+    this.updateAlpha()
+    this.updateHidden()
+  }
+
+  // RealObjectGroup 기본 동작 비활성화
   updateDimension() {}
-  updateAlpha() {}
+
+  updateAlpha() {
+    const { alpha = 1 } = this.component.state
+    const configOpacity = this._config.opacity
+    const effective = configOpacity * alpha
+
+    this.object3d.traverse((o: any) => {
+      if (!o.material) return
+      const materials = Array.isArray(o.material) ? o.material : [o.material]
+      for (const m of materials) {
+        if (!m.visible) continue // openTop invisible face 무시
+        if (m.map) continue // 텍스처 material은 자체 transparent 유지
+        m.opacity = effective
+        m.transparent = effective < 1
+      }
+    })
+  }
 }
 
 // ── 팩토리 등록 헬퍼 ─────────────────────────────────────
@@ -483,14 +610,18 @@ registerRealObjectFactory('STOCKER', (component: Component) => new StockerRealOb
 //  Unit (이동체 · 홀더) — 낮은 depth, 불투명
 // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
-register('Port', {
+// Port: 상부 개방 5면 박스
+const PORT_CONFIG: MCS3DConfig = {
+  ...DEFAULTS,
   depthRatio: 0.5,
   defaultZPosFromParent: true,
   opacity: 0.5,
   metalness: 0.4,
   roughness: 0.6,
   defaultColor: 0xb0a090,
-})
+  openTop: true,
+}
+registerRealObjectFactory('Port', (component: Component) => new MCSRealObject3D(component, PORT_CONFIG))
 
 register('Shelf', {
   depthRatio: 0.25,
@@ -499,14 +630,127 @@ register('Shelf', {
   defaultColor: 0xaabbcc,
 })
 
-register('Carrier', {
+// Carrier: CARRIERSTATUS에 따른 3D 애니메이션 지원
+const CARRIER_CONFIG: MCS3DConfig = {
+  ...DEFAULTS,
   depthRatio: 0.5,
   metalness: 0.2,
   roughness: 0.8,
   defaultColor: 0x66bb66,
   isVisible: (c: Component) => !!(c.state as any).id,
   sizeRatio: 0.8,
-})
+  texturedTop: true,
+}
+
+class CarrierRealObject3D extends MCSRealObject3D {
+  private _animRaf: number | null = null
+  private _animStartTime = 0
+
+  constructor(component: Component) {
+    super(component, CARRIER_CONFIG)
+  }
+
+  build() {
+    super.build()
+    this.startCarrierAnimation()
+  }
+
+  /**
+   * CARRIERSTATUS의 애니메이션 설정을 읽어 3D에서 직접 실행.
+   * things-scene의 delta 시스템과 독립적으로 동작.
+   */
+  private startCarrierAnimation() {
+    this.stopCarrierAnimation()
+
+    const comp = this.component as any
+    if (!comp.app?.isViewMode) return
+
+    const carrierStatus = comp.state?.CARRIERSTATUS
+    if (!carrierStatus) return
+
+    // 애니메이션 설정 가져오기
+    const config = comp.getAnimationConfig?.(carrierStatus)
+    if (!config?.animation) return
+
+    const { type, duration = 2000, scale: animScale = 1.3 } = config.animation
+    if (!type) return
+
+    this._animStartTime = performance.now()
+
+    // 애니메이션 대상: group(object3d) — mesh 개별 변환 대신 group 전체를 변환하여
+    // 회전/스케일 중심이 component의 3D 위치(= 2D 중심)와 정확히 일치하도록 함
+    const obj = this.object3d
+
+    const animate = () => {
+      if (!this._ownMesh) return
+
+      const elapsed = performance.now() - this._animStartTime
+      const progress = (elapsed % duration) / duration // 0~1 반복
+
+      switch (type) {
+        case 'heartbeat': {
+          const t = progress < 0.5 ? progress * 2 : (1 - progress) * 2
+          const s = 1 + (animScale - 1) * t
+          obj.scale.set(s, 1, s)
+          break
+        }
+        case 'rotation': {
+          obj.rotation.y = progress * Math.PI * 2
+          break
+        }
+        case 'vibration': {
+          const theta = config.animation.theta ?? 0.26
+          const current = Math.sin(progress * Math.PI * 2) * theta
+          obj.rotation.y = current
+          break
+        }
+        case 'fade': {
+          const alpha = 0.3 + 0.7 * (progress < 0.5 ? progress * 2 : (1 - progress) * 2)
+          obj.traverse((o: any) => {
+            if (o.material && !o.material.map) {
+              o.material.opacity = alpha
+              o.material.transparent = true
+            }
+          })
+          break
+        }
+      }
+
+      this._animRaf = requestAnimationFrame(animate)
+    }
+
+    this._animRaf = requestAnimationFrame(animate)
+  }
+
+  // 자체 애니메이션이 실행 중이면 things-scene의 syncAnimationDelta 비활성화
+  syncAnimationDelta() {
+    if (!this._animRaf) {
+      super.syncAnimationDelta()
+    }
+  }
+
+  private stopCarrierAnimation() {
+    if (this._animRaf) {
+      cancelAnimationFrame(this._animRaf)
+      this._animRaf = null
+    }
+    // group 스케일/회전 초기화
+    this.object3d.scale.set(1, 1, 1)
+    this.object3d.rotation.y = 0
+  }
+
+  update() {
+    this.stopCarrierAnimation()
+    super.update()
+  }
+
+  clear() {
+    this.stopCarrierAnimation()
+    return super.clear()
+  }
+}
+
+registerRealObjectFactory('Carrier', (component: Component) => new CarrierRealObject3D(component))
 
 // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 //  Gauge (용량 게이지) — 얇은 바

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

@@ -12,7 +12,7 @@
 import * as THREE from 'three'
 import * as BufferGeometryUtils from 'three/examples/jsm/utils/BufferGeometryUtils.js'
 import { RoundedBoxGeometry } from 'three/examples/jsm/geometries/RoundedBoxGeometry.js'
-import { RealObjectGroup, registerRealObjectFactory } from '@hatiolab/things-scene'
+import { RealObjectGroup, registerRealObjectFactory, disposeObject3D } from '@hatiolab/things-scene'
 import type { Component } from '@hatiolab/things-scene'
 import { TRANSPORT_SURFACE_HEIGHT } from './machine-3d.js'
 
@@ -24,6 +24,7 @@ const DEFAULT_BODY_COLOR = 0x6688cc
 const OHT_RAIL_HEIGHT = 6 * TRANSPORT_SURFACE_HEIGHT
 
 export class OHT3D extends RealObjectGroup {
+  private _ownMeshes: THREE.Mesh[] = []
   get effectiveDepth(): number {
     const { depth } = this.component.state
     return depth || TRANSPORT_SURFACE_HEIGHT
@@ -89,7 +90,6 @@ export class OHT3D extends RealObjectGroup {
     const gripperMesh = new THREE.Mesh(gripperGeo, frameMat)
     gripperMesh.position.y = gripperBarH / 2
     gripperMesh.castShadow = true
-    this.object3d.add(gripperMesh)
 
     // ── 2. 호이스트 암 (좌우 수직 기둥 + 하단 가로연결) ──
     const armBaseY = gripperBarH
@@ -111,7 +111,6 @@ export class OHT3D extends RealObjectGroup {
 
     const armMesh = new THREE.Mesh(BufferGeometryUtils.mergeGeometries(armGeometries), frameMat)
     armMesh.castShadow = true
-    this.object3d.add(armMesh)
 
     // ── 3. 본체 하우징 (statusColor 적용) ──
     const bodyBaseY = armBaseY + armH
@@ -126,7 +125,6 @@ export class OHT3D extends RealObjectGroup {
     bodyMesh.position.y = bodyBaseY + bodyH / 2
     bodyMesh.castShadow = true
     bodyMesh.receiveShadow = true
-    this.object3d.add(bodyMesh)
 
     // ── 4. 상단 트롤리 플레이트 (납작하고 넓은 레일 클램프) ──
     const trolleyBaseY = bodyBaseY + bodyH + gap
@@ -141,27 +139,53 @@ export class OHT3D extends RealObjectGroup {
     const trolleyMesh = new THREE.Mesh(trolleyGeo, trolleyMat)
     trolleyMesh.position.y = trolleyBaseY + trolleyH / 2
     trolleyMesh.castShadow = true
-    this.object3d.add(trolleyMesh)
 
     // ── 5. 좌우 바퀴 (트롤리 위, 레일을 타는 원통형 바퀴) ──
     const wheelBaseY = trolleyBaseY + trolleyH
     const wheelRadius = wheelH / 2
     const wheelDepth = h * 0.2
+    const wheelMeshes: THREE.Mesh[] = []
     for (const xSign of [-1, 1]) {
       const wheelGeo = new THREE.CylinderGeometry(wheelRadius, wheelRadius, wheelDepth, 12)
       wheelGeo.rotateX(Math.PI / 2)
       const wheelMesh = new THREE.Mesh(wheelGeo, trolleyMat)
       wheelMesh.position.set(xSign * (trolleyW * 0.35), wheelBaseY + wheelRadius, 0)
       wheelMesh.castShadow = true
-      this.object3d.add(wheelMesh)
+      wheelMeshes.push(wheelMesh)
     }
+
+    this._ownMeshes = [gripperMesh, armMesh, bodyMesh, trolleyMesh, ...wheelMeshes]
+    for (const m of this._ownMeshes) this.object3d.add(m)
   }
 
   updateDimension() {}
-  updateAlpha() {}
+
+  update() {
+    for (const m of this._ownMeshes) {
+      this.object3d.remove(m)
+      disposeObject3D(m)
+    }
+    this._ownMeshes = []
+    this.build()
+    this.updateTransform()
+    this.updateAlpha()
+    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
+      }
+    }
+  }
 
   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) {
+    if ('width' in after || 'height' in after || 'depth' in after ||
+        'fillStyle' in after || 'strokeStyle' in after || 'id' in after) {
       this.update()
       return
     }

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

@@ -12,7 +12,7 @@
 
 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, disposeObject3D } from '@hatiolab/things-scene'
 import type { Component } from '@hatiolab/things-scene'
 import { TRANSPORT_SURFACE_HEIGHT } from './machine-3d.js'
 
@@ -21,6 +21,7 @@ const FORK_COLOR = 0x777777
 const DEFAULT_BODY_COLOR = 0x6688cc
 
 export class Shuttle3D extends RealObjectGroup {
+  private _ownMeshes: THREE.Mesh[] = []
   get effectiveDepth(): number {
     const { depth } = this.component.state
     return depth || TRANSPORT_SURFACE_HEIGHT
@@ -80,7 +81,6 @@ export class Shuttle3D extends RealObjectGroup {
     baseMesh.position.y = baseH / 2
     baseMesh.castShadow = true
     baseMesh.receiveShadow = true
-    this.object3d.add(baseMesh)
 
     // ── 2. 좌우 마스트 기둥 (statusColor 적용) ──
     const mastBaseY = baseH
@@ -109,7 +109,6 @@ export class Shuttle3D extends RealObjectGroup {
 
     const mastMesh = new THREE.Mesh(BufferGeometryUtils.mergeGeometries(mastGeometries), mastMat)
     mastMesh.castShadow = true
-    this.object3d.add(mastMesh)
 
     // ── 3. 상단 포크 (2개의 평행 암 + 백 플레이트) ──
     const forkBaseY = mastBaseY + mastH
@@ -141,14 +140,39 @@ export class Shuttle3D extends RealObjectGroup {
 
     const forkMesh = new THREE.Mesh(BufferGeometryUtils.mergeGeometries(forkGeometries), forkMat)
     forkMesh.castShadow = true
-    this.object3d.add(forkMesh)
+
+    this._ownMeshes = [baseMesh, mastMesh, forkMesh]
+    for (const m of this._ownMeshes) this.object3d.add(m)
   }
 
   updateDimension() {}
-  updateAlpha() {}
+
+  update() {
+    for (const m of this._ownMeshes) {
+      this.object3d.remove(m)
+      disposeObject3D(m)
+    }
+    this._ownMeshes = []
+    this.build()
+    this.updateTransform()
+    this.updateAlpha()
+    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
+      }
+    }
+  }
 
   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) {
+    if ('width' in after || 'height' in after || 'depth' in after ||
+        'fillStyle' in after || 'strokeStyle' in after || 'id' in after) {
       this.update()
       return
     }