@operato/scene-transport 10.0.0-beta.22

package/src/worker-3d.ts

@@ -0,0 +1,232 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ *
+ * Worker 3D — a stylized humanoid figure built from primitives.
+ *
+ * LO-POLY but recognizably industrial-worker. The signature parts:
+ *
+ *   - boots (two flat-top boxes — workboots, not sneakers)
+ *   - legs (two cylinders, slight stance — not perfectly parallel)
+ *   - belt with tool pouch
+ *   - torso + hi-vis vest (cylinder, vest color from legend)
+ *   - reflective stripes on vest (two horizontal bands — ANSI 107 hi-vis)
+ *   - shoulders + slight A-pose arms (arms angled slightly away from body)
+ *   - hands (small spheres at arm ends)
+ *   - badge / nametag hint on chest
+ *   - neck (small cylinder between torso and head)
+ *   - head (skin-tone sphere, smaller than minimal anatomy)
+ *   - full helmet (not just top hemisphere — covers the whole upper head)
+ *   - chinstrap hint
+ *
+ * Heights are proportioned against `depth` (= worker height ~1700mm).
+ */
+
+import * as THREE from 'three'
+import { RealObjectGroup } from '@hatiolab/things-scene'
+
+const SKIN_COLOR = 0xc89878
+const PANTS_COLOR = 0x2a3a55
+const BOOT_COLOR = 0x141414
+const BELT_COLOR = 0x1a1a1a
+const POUCH_COLOR = 0x2c1810
+const REFLECTIVE_COLOR = 0xeaeaea
+const BADGE_COLOR = 0xeeeeee
+
+export class Worker3D extends RealObjectGroup {
+  build() {
+    super.build()
+
+    const { width, height, depth = 1700 } = this.component.state
+    const vestColor = (this.component.state.vestColor as string) || '#FFD700'
+    const helmetEmissive = (this.component.state.helmetEmissive as string) || '#222222'
+    const status = this.component.state.status
+    const helmetIntensity = status && status !== 'idle' ? 1.2 : 0.0
+
+    // Body part heights (proportional to total height = depth)
+    const bootH = depth * 0.04
+    const legH = depth * 0.42
+    const beltH = depth * 0.025
+    const torsoH = depth * 0.30
+    const neckH = depth * 0.025
+    const headR = depth * 0.06
+    const helmetR = headR * 1.10
+    const helmetH = headR * 1.4
+
+    let yCursor = -depth / 2
+
+    // ── Boots (two flat-top boxes — work boots) ──────────────────────
+    const bootW = depth * 0.06
+    const bootD = depth * 0.13
+    const bootMaterial = new THREE.MeshStandardMaterial({ color: BOOT_COLOR, roughness: 0.85 })
+    for (const xSign of [-1, 1]) {
+      const bootGeo = new THREE.BoxGeometry(bootW, bootH, bootD)
+      const bootMesh = new THREE.Mesh(bootGeo, bootMaterial)
+      bootMesh.position.set(xSign * bootW * 0.7, yCursor + bootH / 2, bootD * 0.10)
+      bootMesh.castShadow = true
+      this.object3d.add(bootMesh)
+    }
+    yCursor += bootH
+
+    // ── Legs (two cylinders, slight stance) ──────────────────────────
+    const legR = depth * 0.038
+    const legSpacing = legR * 1.3
+    const pantsMaterial = new THREE.MeshStandardMaterial({ color: PANTS_COLOR, roughness: 0.7 })
+    for (const xSign of [-1, 1]) {
+      const legGeo = new THREE.CylinderGeometry(legR, legR * 1.05, legH, 20)
+      const legMesh = new THREE.Mesh(legGeo, pantsMaterial)
+      legMesh.position.set(xSign * legSpacing, yCursor + legH / 2, 0)
+      legMesh.castShadow = true
+      this.object3d.add(legMesh)
+    }
+    yCursor += legH
+
+    // ── Belt + tool pouch ────────────────────────────────────────────
+    const torsoR = depth * 0.085
+    const beltGeo = new THREE.CylinderGeometry(torsoR * 1.05, torsoR * 1.05, beltH, 24)
+    const beltMaterial = new THREE.MeshStandardMaterial({ color: BELT_COLOR, roughness: 0.6 })
+    const beltMesh = new THREE.Mesh(beltGeo, beltMaterial)
+    beltMesh.position.set(0, yCursor + beltH / 2, 0)
+    this.object3d.add(beltMesh)
+
+    // Tool pouch on the right side
+    const pouchW = torsoR * 0.7
+    const pouchH = beltH * 2.5
+    const pouchD = torsoR * 0.5
+    const pouchGeo = new THREE.BoxGeometry(pouchW, pouchH, pouchD)
+    const pouchMesh = new THREE.Mesh(
+      pouchGeo,
+      new THREE.MeshStandardMaterial({ color: POUCH_COLOR, roughness: 0.8 })
+    )
+    pouchMesh.position.set(torsoR * 1.0, yCursor + beltH / 2 - pouchH * 0.2, 0)
+    this.object3d.add(pouchMesh)
+    yCursor += beltH
+
+    // ── Torso + hi-vis vest ──────────────────────────────────────────
+    const vestMaterial = new THREE.MeshStandardMaterial({
+      color: vestColor,
+      metalness: 0.05,
+      roughness: 0.6
+    })
+    const torsoGeo = new THREE.CylinderGeometry(torsoR, torsoR * 0.92, torsoH, 24)
+    const torsoMesh = new THREE.Mesh(torsoGeo, vestMaterial)
+    torsoMesh.position.set(0, yCursor + torsoH / 2, 0)
+    torsoMesh.castShadow = true
+    this.object3d.add(torsoMesh)
+
+    // Reflective stripes on vest (ANSI 107 — two horizontal bands)
+    const stripeMaterial = new THREE.MeshStandardMaterial({
+      color: REFLECTIVE_COLOR,
+      metalness: 0.4,
+      roughness: 0.2
+    })
+    const stripeH = torsoH * 0.07
+    for (const yFrac of [0.30, 0.55]) {
+      const stripeGeo = new THREE.CylinderGeometry(torsoR * 1.005, torsoR * 0.93, stripeH, 24)
+      const stripeMesh = new THREE.Mesh(stripeGeo, stripeMaterial)
+      stripeMesh.position.set(0, yCursor + torsoH * yFrac, 0)
+      this.object3d.add(stripeMesh)
+    }
+
+    // Badge / nametag on chest
+    const badgeGeo = new THREE.BoxGeometry(torsoR * 0.55, torsoR * 0.35, torsoR * 0.05)
+    const badgeMesh = new THREE.Mesh(
+      badgeGeo,
+      new THREE.MeshStandardMaterial({ color: BADGE_COLOR, roughness: 0.5 })
+    )
+    badgeMesh.position.set(-torsoR * 0.45, yCursor + torsoH * 0.78, torsoR * 0.95)
+    this.object3d.add(badgeMesh)
+
+    // ── Arms + hands (slight A-pose, hands at sides) ─────────────────
+    const skinMaterial = new THREE.MeshStandardMaterial({ color: SKIN_COLOR, roughness: 0.7 })
+    const armR = depth * 0.026
+    const armH = torsoH * 1.05
+    // Arms angled outward by ~10 degrees
+    const armAngle = Math.PI * 0.05
+    for (const xSign of [-1, 1]) {
+      const armGeo = new THREE.CylinderGeometry(armR, armR, armH, 16)
+      armGeo.rotateZ(xSign * -armAngle)
+      // After rotation, the arm's center is offset slightly outward and down
+      const armMesh = new THREE.Mesh(armGeo, skinMaterial)
+      const armCx = xSign * (torsoR + armR + armH * 0.5 * Math.sin(armAngle))
+      const armCy = yCursor + torsoH * 0.85 - armH / 2
+      armMesh.position.set(armCx, armCy, 0)
+      armMesh.castShadow = true
+      this.object3d.add(armMesh)
+
+      // Hand (small sphere at arm end)
+      const handR = armR * 1.2
+      const handGeo = new THREE.SphereGeometry(handR, 24, 8)
+      const handMesh = new THREE.Mesh(handGeo, skinMaterial)
+      const handCx = armCx + xSign * (armH / 2) * Math.sin(armAngle)
+      const handCy = armCy - armH / 2 - handR * 0.5
+      handMesh.position.set(handCx, handCy, 0)
+      this.object3d.add(handMesh)
+    }
+    yCursor += torsoH
+
+    // ── Neck ─────────────────────────────────────────────────────────
+    const neckR = headR * 0.55
+    const neckGeo = new THREE.CylinderGeometry(neckR, neckR * 1.15, neckH, 16)
+    const neckMesh = new THREE.Mesh(neckGeo, skinMaterial)
+    neckMesh.position.set(0, yCursor + neckH / 2, 0)
+    this.object3d.add(neckMesh)
+    yCursor += neckH
+
+    // ── Head ─────────────────────────────────────────────────────────
+    const headGeo = new THREE.SphereGeometry(headR, 20, 12)
+    const headMesh = new THREE.Mesh(headGeo, skinMaterial)
+    headMesh.position.set(0, yCursor + headR, 0)
+    headMesh.castShadow = true
+    this.object3d.add(headMesh)
+
+    // ── Helmet (full hard hat — top sphere + brim) ───────────────────
+    // Top: half-sphere covering upper head (3/5 of sphere)
+    const helmetMaterial = new THREE.MeshStandardMaterial({
+      color: vestColor, // matches vest base
+      emissive: helmetEmissive,
+      emissiveIntensity: helmetIntensity,
+      metalness: 0.1,
+      roughness: 0.45
+    })
+    const helmetTopGeo = new THREE.SphereGeometry(helmetR, 24, 16, 0, Math.PI * 2, 0, Math.PI * 0.6)
+    const helmetTopMesh = new THREE.Mesh(helmetTopGeo, helmetMaterial)
+    helmetTopMesh.position.set(0, yCursor + headR * 0.7, 0)
+    helmetTopMesh.castShadow = true
+    this.object3d.add(helmetTopMesh)
+
+    // Brim: thin disk in front
+    const brimGeo = new THREE.CylinderGeometry(helmetR * 1.05, helmetR * 1.05, helmetR * 0.12, 16, 1, false, -Math.PI * 0.6, Math.PI * 1.2)
+    const brimMesh = new THREE.Mesh(brimGeo, helmetMaterial)
+    brimMesh.position.set(0, yCursor + headR * 0.85, headR * 0.1)
+    this.object3d.add(brimMesh)
+
+    // Chinstrap hint (thin ring around lower head)
+    const strapGeo = new THREE.TorusGeometry(headR * 0.95, headR * 0.03, 6, 16)
+    strapGeo.rotateX(Math.PI / 2)
+    const strapMesh = new THREE.Mesh(
+      strapGeo,
+      new THREE.MeshStandardMaterial({ color: BELT_COLOR, roughness: 0.6 })
+    )
+    strapMesh.position.set(0, yCursor + headR * 0.6, 0)
+    this.object3d.add(strapMesh)
+  }
+
+  updateDimension() {}
+
+  onchange(after: Record<string, unknown>, before: Record<string, unknown>) {
+    if (
+      'status' in after ||
+      'vestColor' in after ||
+      'helmetEmissive' in after ||
+      'width' in after ||
+      'height' in after ||
+      'depth' in after
+    ) {
+      this.update()
+      return
+    }
+    super.onchange(after, before)
+  }
+
+  updateAlpha() {}
+}

package/src/worker.ts

@@ -0,0 +1,164 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+import { Component, ComponentNature, RealObject, RectPath, Shape, sceneComponent } from '@hatiolab/things-scene'
+import {
+  Legendable,
+  Placeable,
+  type Alignment,
+  type Heights,
+  type LegendBinding,
+  type PlacementArchetype
+} from '@operato/scene-base'
+
+import { Worker3D } from './worker-3d.js'
+
+/**
+ * Worker status — what a human operator is currently doing.
+ *
+ * - `idle`     — present at station but not actively working
+ * - `walking`  — moving between stations
+ * - `working`  — actively performing a task
+ * - `alarm`    — emergency / call-for-help (e.g. line-stop pull-cord)
+ *
+ * Notably no `loaded` or `running` — workers don't carry the same kind of
+ * payload semantics as a forklift, and "running" is ambiguous for a person.
+ */
+export type WorkerStatus = 'idle' | 'walking' | 'working' | 'alarm'
+
+/**
+ * Vest color — the hi-vis safety vest is the most visible status indicator
+ * for human workers in a smart factory floor view.
+ */
+const VEST_LEGEND = {
+  idle: '#FFD700',     // standard hi-vis yellow
+  walking: '#FFD700',
+  working: '#FF8C00',  // orange tint (busy)
+  alarm: '#FF1744',    // bright red (emergency)
+  default: '#FFD700'
+}
+
+/** Helmet emissive — small accent indicator visible from above (camera view). */
+const HELMET_EMISSIVE_LEGEND = {
+  idle: '#222222',
+  walking: '#44ff44',
+  working: '#44aaff',
+  alarm: '#ff3333',
+  default: '#222222'
+}
+
+const NATURE: ComponentNature = {
+  mutable: false,
+  resizable: true,
+  rotatable: true,
+  properties: [
+    {
+      type: 'select',
+      label: 'status',
+      name: 'status',
+      property: {
+        options: [
+          { display: 'Idle', value: 'idle' },
+          { display: 'Walking', value: 'walking' },
+          { display: 'Working', value: 'working' },
+          { display: 'Alarm', value: 'alarm' }
+        ]
+      }
+    },
+    {
+      type: 'string',
+      label: 'name',
+      name: 'workerName'
+    }
+  ],
+  help: 'scene/component/worker'
+}
+
+const Base = Legendable(Placeable(RectPath(Shape))) as unknown as typeof Component
+
+@sceneComponent('worker')
+export default class Worker extends Base {
+  static legends: Record<string, LegendBinding> = {
+    vestColor: { from: 'status', legend: VEST_LEGEND },
+    helmetEmissive: { from: 'status', legend: HELMET_EMISSIVE_LEGEND }
+  }
+
+  /**
+   * Worker stands on the floor — `floor` archetype with `bottom` alignment.
+   * Default depth is ~1700mm (typical adult height); the head reaches just
+   * above the operation surface, which makes a worker visually adjacent to a
+   * conveyor in a side view but clearly above it in a front view.
+   *
+   * Note this is human height, not "operation - floor" — the worker is taller
+   * than the conveyor by design. Use the explicit number form rather than the
+   * heights-derived function form.
+   */
+  static placement: PlacementArchetype = 'floor'
+  static align: Alignment = 'bottom'
+  static defaultDepth = 1700
+
+  get nature() {
+    return NATURE
+  }
+
+  get anchors() {
+    return []
+  }
+
+  /**
+   * 2D — top-down view of a person from above: shoulders / vest as the main
+   * filled silhouette (auto-filled with vestColor), helmet circle drawn over
+   * it in postrender(). The helmet sits at the *facing* direction (top of
+   * the bounds), so the orientation is readable.
+   */
+  render(ctx: CanvasRenderingContext2D) {
+    const { width, height, left, top } = this.state
+    // Shoulders: a rounded rect, wider than tall (chest seen from above)
+    const shoulderH = height * 0.55
+    const shoulderY = top + height * 0.30
+    const radius = Math.min(width, shoulderH) * 0.30
+    ctx.beginPath()
+    ctx.roundRect(left, shoulderY, width, shoulderH, radius)
+  }
+
+  postrender(ctx: CanvasRenderingContext2D) {
+    super.postrender?.(ctx)
+
+    const { width, height, left, top } = this.state
+    const cx = left + width / 2
+    const helmetEmissive = (this.state.helmetEmissive as string) || '#222'
+
+    ctx.save()
+
+    // Reflective stripes across the vest (two horizontal bands)
+    ctx.fillStyle = '#eaeaea'
+    ctx.fillRect(left + width * 0.08, top + height * 0.45, width * 0.84, height * 0.04)
+    ctx.fillRect(left + width * 0.08, top + height * 0.65, width * 0.84, height * 0.04)
+
+    // Helmet circle at the top (facing direction)
+    const helmetR = Math.min(width, height * 0.4) * 0.45
+    ctx.fillStyle = (this.state.vestColor as string) || '#FFD700'
+    ctx.strokeStyle = '#222'
+    ctx.lineWidth = 1
+    ctx.beginPath()
+    ctx.ellipse(cx, top + helmetR + height * 0.02, helmetR, helmetR, 0, 0, Math.PI * 2)
+    ctx.fill()
+    ctx.stroke()
+
+    // Emissive helmet status accent (small dot on helmet)
+    ctx.fillStyle = helmetEmissive
+    ctx.beginPath()
+    ctx.ellipse(cx, top + helmetR + height * 0.02, helmetR * 0.4, helmetR * 0.4, 0, 0, Math.PI * 2)
+    ctx.fill()
+
+    ctx.restore()
+  }
+
+  get fillStyle() {
+    return (this.state.vestColor as string) || '#FFD700'
+  }
+
+  buildRealObject(): RealObject | undefined {
+    return new Worker3D(this as any)
+  }
+}

package/things-scene.config.js

@@ -0,0 +1,5 @@
+import templates from './dist/templates/index.js'
+
+export default {
+  templates
+}

package/translations/en.json

@@ -0,0 +1,9 @@
+{
+  "component.forklift": "forklift",
+  "component.worker": "worker",
+  "component.agv": "AGV",
+  "component.tugger": "tugger",
+  "label.fork-height": "Fork Height",
+  "label.battery": "Battery",
+  "label.name": "Name"
+}

package/translations/ja.json

@@ -0,0 +1,9 @@
+{
+  "component.forklift": "フォークリフト",
+  "component.worker": "作業者",
+  "component.agv": "AGV",
+  "component.tugger": "タガー",
+  "label.fork-height": "フォーク高さ",
+  "label.battery": "バッテリー",
+  "label.name": "名前"
+}

package/translations/ko.json

@@ -0,0 +1,9 @@
+{
+  "component.forklift": "지게차",
+  "component.worker": "작업자",
+  "component.agv": "AGV",
+  "component.tugger": "터거",
+  "label.fork-height": "포크 높이",
+  "label.battery": "배터리",
+  "label.name": "이름"
+}

package/translations/ms.json

@@ -0,0 +1,9 @@
+{
+  "component.forklift": "forklift",
+  "component.worker": "pekerja",
+  "component.agv": "AGV",
+  "component.tugger": "tugger",
+  "label.fork-height": "Tinggi Garpu",
+  "label.battery": "Bateri",
+  "label.name": "Nama"
+}

package/translations/zh.json

@@ -0,0 +1,9 @@
+{
+  "component.forklift": "叉车",
+  "component.worker": "工人",
+  "component.agv": "AGV",
+  "component.tugger": "牵引车",
+  "label.fork-height": "叉高",
+  "label.battery": "电池",
+  "label.name": "名称"
+}

package/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "target": "es2022",
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "noEmitOnError": true,
+    "lib": ["es2022", "dom"],
+    "strict": true,
+    "esModuleInterop": false,
+    "allowJs": true,
+    "allowSyntheticDefaultImports": true,
+    "experimentalDecorators": true,
+    "importHelpers": true,
+    "outDir": "dist",
+    "sourceMap": true,
+    "inlineSources": true,
+    "rootDir": "src",
+    "declaration": true,
+    "incremental": true,
+    "skipLibCheck": true
+  },
+  "include": ["**/*.ts", "*.d.ts"]
+}