agentworkshop 0.2.1

package/scripts/build-anime-models.mjs

@@ -0,0 +1,339 @@
+/**
+ * 二次元 chibi 角色 + 工业设备模型 GLB 生成器(带节点动画,Blender 可直接导入)。
+ *
+ * 产出(写入 public/assets/game/…):
+ *  - character/hero-anime-1..4.glb —— 4 个二次元角色(樱花/苍梧/寒川/紫檀),
+ *    idle + walk 两段动画挂在命名节点上(非骨骼,glTF node TRS channels,Blender 导入为 actions);
+ *  - devices/device-scanner.glb / device-console.glb / device-robot-arm.glb —— 工业设备(带待机动画)。
+ *
+ * 动画语义(与 Agent3D.playWalkAnim 对齐):clips[0]=idle, clips[1]=walk。
+ * 运行: node scripts/build-anime-models.mjs
+ */
+import * as THREE from 'three'
+import { GLTFExporter } from 'three/examples/jsm/exporters/GLTFExporter.js'
+import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
+import { mkdirSync, writeFileSync } from 'node:fs'
+import { join, resolve } from 'node:path'
+
+// GLTFExporter(binary 路径)在纯 Node 环境需要 FileReader;Blob.arrayBuffer 等价 polyfill
+globalThis.FileReader ??= class FileReaderPolyfill {
+  result = null
+  onload = null
+  onloadend = null
+  onerror = null
+  readAsArrayBuffer(blob) {
+    blob.arrayBuffer().then(
+      (b) => {
+        this.result = b
+        this.onload?.()
+        this.onloadend?.()
+      },
+      (e) => {
+        this.onerror?.({ error: e })
+        this.onloadend?.()
+      },
+    )
+  }
+}
+
+const ROOT = resolve(process.cwd(), 'public/assets/game')
+const CHAR_DIR = join(ROOT, 'character')
+const DEV_DIR = join(ROOT, 'devices')
+mkdirSync(CHAR_DIR, { recursive: true })
+mkdirSync(DEV_DIR, { recursive: true })
+
+// ---------- 小工具 ----------
+
+function eulerQ(x = 0, y = 0, z = 0) {
+  return new THREE.Quaternion().setFromEuler(new THREE.Euler(x, y, z))
+}
+
+function mat(color, opts = {}) {
+  return new THREE.MeshStandardMaterial({ color, roughness: 0.55, metalness: 0.08, ...opts })
+}
+
+/** 位置轨道(秒,值数组) */
+function posTrack(node, times, values) {
+  return new THREE.VectorKeyframeTrack(`${node.name}.position`, times, values)
+}
+
+/** 旋转轨道:传入每个关键帧的 euler {x,y,z}[] */
+function rotTrack(node, times, eulers) {
+  const qs = []
+  for (const e of eulers) {
+    qs.push(...eulerQ(e.x, e.y, e.z).toArray())
+  }
+  return new THREE.QuaternionKeyframeTrack(`${node.name}.quaternion`, times, qs)
+}
+
+// ---------- 二次元 chibi 角色 ----------
+
+const PALETTES = [
+  { hair: 0xf7a8c8, hairShade: 0xe989b4, body: 0xffffff, accent: 0xef6fa8, eye: 0xff7eb0, label: '樱叶少女' },
+  { hair: 0x74c7f0, hairShade: 0x4da3dc, body: 0xf3f7fb, accent: 0x3f9de0, eye: 0x4fc3ff, label: '苍梧少年' },
+  { hair: 0xffb26b, hairShade: 0xf08f3c, body: 0xf7f2ea, accent: 0xe8742c, eye: 0xffa04d, label: '寒川工程师' },
+  { hair: 0xb79af0, hairShade: 0x9a79e0, body: 0xf6f2ff, accent: 0x8a63e8, eye: 0xbd9bff, label: '紫檀智子' },
+]
+
+function buildAnimeCharacter(pal) {
+  const root = new THREE.Group()
+  root.name = 'hero'
+  const hips = new THREE.Group()
+  hips.name = 'hips'
+  hips.position.y = 0.9
+  root.add(hips)
+
+  // 腿(从髋部垂下的细圆柱,pivot 在髋)
+  const legGeo = new THREE.CylinderGeometry(0.09, 0.11, 0.6, 8)
+  const legMat = mat(pal.body)
+  const legL = new THREE.Group()
+  legL.name = 'legL'
+  legL.position.set(-0.14, -0.16, 0)
+  const legLm = new THREE.Mesh(legGeo, legMat)
+  legLm.position.y = -0.3
+  legL.add(legLm)
+  const legR = new THREE.Group()
+  legR.name = 'legR'
+  legR.position.set(0.14, -0.16, 0)
+  const legRm = new THREE.Mesh(legGeo, legMat)
+  legRm.position.y = -0.3
+  legR.add(legRm)
+  hips.add(legL, legR)
+
+  // 躯干(胶囊 + 小裙)
+  const torso = new THREE.Mesh(new THREE.CapsuleGeometry(0.24, 0.32, 6, 12), mat(pal.body))
+  torso.name = 'torso'
+  torso.position.y = 0.18
+  const skirt = new THREE.Mesh(new THREE.ConeGeometry(0.34, 0.28, 16), mat(pal.accent))
+  skirt.position.y = 0.02
+  hips.add(torso, skirt)
+
+  // 手臂(pivot 在肩)
+  const armGeo = new THREE.CylinderGeometry(0.075, 0.085, 0.5, 8)
+  const armMat = mat(pal.body)
+  const armL = new THREE.Group()
+  armL.name = 'armL'
+  armL.position.set(-0.32, 0.42, 0)
+  const armLm = new THREE.Mesh(armGeo, armMat)
+  armLm.position.y = -0.26
+  armL.add(armLm)
+  const armR = new THREE.Group()
+  armR.name = 'armR'
+  armR.position.set(0.32, 0.42, 0)
+  const armRm = new THREE.Mesh(armGeo, armMat)
+  armRm.position.y = -0.26
+  armR.add(armRm)
+  hips.add(armL, armR)
+
+  // 大脑袋(二次元 chibi 比例)+ 头发 + 呆毛 + 眼睛
+  const head = new THREE.Group()
+  head.name = 'head'
+  head.position.y = 0.88
+  const skull = new THREE.Mesh(new THREE.SphereGeometry(0.34, 20, 16), mat(pal.body))
+  head.add(skull)
+  const hair = new THREE.Group()
+  hair.name = 'hair'
+  const hairCap = new THREE.Mesh(
+    new THREE.SphereGeometry(0.365, 18, 14, 0, Math.PI * 2, 0, Math.PI * 0.62),
+    mat(pal.hair),
+  )
+  hairCap.position.y = 0.05
+  const ahoge = new THREE.Mesh(new THREE.ConeGeometry(0.05, 0.24, 6), mat(pal.hairShade))
+  ahoge.position.set(0.02, 0.42, 0)
+  ahoge.rotation.z = -0.5
+  hair.add(hairCap, ahoge)
+  const eyeGeo = new THREE.SphereGeometry(0.055, 10, 8)
+  const eyeMat = new THREE.MeshBasicMaterial({ color: pal.eye })
+  const eyeL = new THREE.Mesh(eyeGeo, eyeMat)
+  eyeL.position.set(-0.13, 0.02, 0.3)
+  const eyeR = new THREE.Mesh(eyeGeo, eyeMat)
+  eyeR.position.set(0.13, 0.02, 0.3)
+  head.add(hair, eyeL, eyeR)
+  hips.add(head)
+
+  // 胸口核灯(二次元科技感)
+  const core = new THREE.Mesh(new THREE.SphereGeometry(0.07, 10, 8), new THREE.MeshBasicMaterial({ color: pal.accent }))
+  core.position.set(0, 0.32, 0.22)
+  hips.add(core)
+
+  return { root, hips, head, hair, armL, armR, legL, legR }
+}
+
+/** 角色动画:idle(呼吸/摆臂/点头) + walk(摆腿摆臂/跳跃);与 Agent3D clips[0]=idle,clips[1]=walk 对齐 */
+function animeClips(a) {
+  const { hips, head, hair, armL, armR, legL, legR } = a
+  // idle 2.4s
+  const it = [0, 0.6, 1.2, 1.8, 2.4]
+  const idle = new THREE.AnimationClip('idle', 2.4, [
+    posTrack(hips, it, [0, 0.9, 0, 0, 0.95, 0, 0, 0.9, 0, 0, 0.95, 0, 0, 0.9, 0]),
+    rotTrack(armL, it, [{ z: 0.05 }, { z: 0.12 }, { z: 0.05 }, { z: 0.12 }, { z: 0.05 }]),
+    rotTrack(armR, it, [{ z: -0.05 }, { z: -0.12 }, { z: -0.05 }, { z: -0.12 }, { z: -0.05 }]),
+    rotTrack(head, it, [{ z: 0.02 }, { z: 0.06 }, { z: 0.02 }, { z: 0.06 }, { z: 0.02 }]),
+    rotTrack(hair, it, [{ z: 0 }, { z: 0.04 }, { z: 0 }, { z: 0.04 }, { z: 0 }]),
+  ])
+  // walk 1.0s(四拍)
+  const wt = [0, 0.25, 0.5, 0.75, 1]
+  const walk = new THREE.AnimationClip('walk', 1, [
+    rotTrack(legL, wt, [{ x: 0.75 }, { x: 0 }, { x: -0.75 }, { x: 0 }, { x: 0.75 }]),
+    rotTrack(legR, wt, [{ x: -0.75 }, { x: 0 }, { x: 0.75 }, { x: 0 }, { x: -0.75 }]),
+    rotTrack(armL, wt, [{ x: -0.55 }, { x: 0 }, { x: 0.55 }, { x: 0 }, { x: -0.55 }]),
+    rotTrack(armR, wt, [{ x: 0.55 }, { x: 0 }, { x: -0.55 }, { x: 0 }, { x: 0.55 }]),
+    rotTrack(head, wt, [{ z: 0.05 }, { z: -0.05 }, { z: 0.05 }, { z: -0.05 }, { z: 0.05 }]),
+    posTrack(hips, wt, [0, 1.0, 0, 0, 1.02, 0, 0, 1.0, 0, 0, 1.02, 0, 0, 1.0, 0]),
+  ])
+  return [idle, walk]
+}
+
+// ---------- 工业设备 ----------
+
+function buildScanner() {
+  const g = new THREE.Group()
+  g.name = 'scanner'
+  const pillar = new THREE.BoxGeometry(0.9, 6, 0.9)
+  const pm = mat(0x35414f, { metalness: 0.6, roughness: 0.4 })
+  const pl = new THREE.Mesh(pillar, pm)
+  pl.position.set(-3.4, 3, 0)
+  const pr = new THREE.Mesh(pillar, pm)
+  pr.position.set(3.4, 3, 0)
+  const top = new THREE.Mesh(new THREE.BoxGeometry(8.4, 0.9, 1.1), mat(0x2b3644, { metalness: 0.6 }))
+  top.position.y = 6.2
+  const base = new THREE.Mesh(new THREE.BoxGeometry(8.6, 0.4, 1.4), mat(0x1e2733))
+  base.position.y = 0.2
+  // 扫描光带(待机往返)
+  const scan = new THREE.Group()
+  scan.name = 'scan'
+  const strip = new THREE.Mesh(
+    new THREE.BoxGeometry(0.7, 4.8, 0.5),
+    new THREE.MeshBasicMaterial({ color: 0x59d9ff, transparent: true, opacity: 0.9 }),
+  )
+  strip.position.y = 3.2
+  scan.add(strip)
+  const beam = new THREE.Mesh(
+    new THREE.BoxGeometry(6.6, 0.18, 0.9),
+    new THREE.MeshBasicMaterial({ color: 0x59d9ff, transparent: true, opacity: 0.35 }),
+  )
+  beam.position.y = 3.2
+  scan.add(beam)
+  g.add(pl, pr, top, base, scan)
+  return g
+}
+
+function buildConsole() {
+  const g = new THREE.Group()
+  g.name = 'console'
+  const desk = new THREE.Mesh(new THREE.BoxGeometry(4.6, 2.6, 1.8), mat(0x3a4656, { metalness: 0.5, roughness: 0.45 }))
+  desk.position.y = 1.3
+  const screen = new THREE.Mesh(new THREE.BoxGeometry(4.0, 2.0, 0.24), new THREE.MeshBasicMaterial({ color: 0x5fd6ff }))
+  screen.name = 'screen'
+  screen.position.set(0, 2.6, 0.55)
+  screen.rotation.x = -0.28
+  const antenna = new THREE.Group()
+  antenna.name = 'antenna'
+  const pole = new THREE.Mesh(new THREE.CylinderGeometry(0.09, 0.09, 1.6, 8), mat(0x2b3644))
+  pole.position.y = 3.6
+  const tip = new THREE.Mesh(new THREE.SphereGeometry(0.22, 10, 8), new THREE.MeshBasicMaterial({ color: 0xffb35c }))
+  tip.position.y = 4.4
+  antenna.add(pole, tip)
+  const base = new THREE.Mesh(new THREE.BoxGeometry(5.0, 0.35, 2.2), mat(0x1e2733))
+  base.position.y = 0.18
+  g.add(desk, screen, antenna, base)
+  return g
+}
+
+function buildRobotArm() {
+  const g = new THREE.Group()
+  g.name = 'robotArm'
+  const base = new THREE.Group()
+  base.name = 'base'
+  const pedestal = new THREE.Mesh(new THREE.CylinderGeometry(0.9, 1.15, 0.9, 12), mat(0x2b3644, { metalness: 0.55 }))
+  pedestal.position.y = 0.45
+  base.add(pedestal)
+  const arm = new THREE.Group()
+  arm.name = 'arm'
+  arm.position.y = 1.0
+  const link1 = new THREE.Mesh(new THREE.BoxGeometry(0.5, 2.8, 0.5), mat(0x59d9ff, { metalness: 0.5, roughness: 0.35 }))
+  link1.position.y = 1.4
+  const elbow = new THREE.Group()
+  elbow.name = 'elbow'
+  elbow.position.y = 2.8
+  const link2 = new THREE.Mesh(new THREE.BoxGeometry(0.4, 2.2, 0.4), mat(0x35414f, { metalness: 0.5 }))
+  link2.position.y = 1.1
+  const tipMesh = new THREE.Mesh(new THREE.SphereGeometry(0.3, 10, 8), new THREE.MeshBasicMaterial({ color: 0xffb35c }))
+  tipMesh.position.y = 2.2
+  elbow.add(link2, tipMesh)
+  arm.add(link1, elbow)
+  base.add(arm)
+  g.add(base)
+  return g
+}
+
+function deviceClips(g, kind) {
+  if (kind === 'scanner') {
+    const scan = g.getObjectByName('scan')
+    return [new THREE.AnimationClip('idle', 2, [
+      posTrack(scan, [0, 0.5, 1, 1.5, 2], [-2.6, 0, 0, 0, 0, 0, 2.6, 0, 0, 0, 0, 0, -2.6, 0, 0]),
+    ])]
+  }
+  if (kind === 'console') {
+    const antenna = g.getObjectByName('antenna')
+    return [new THREE.AnimationClip('idle', 2.4, [
+      rotTrack(antenna, [0, 0.6, 1.2, 1.8, 2.4], [{ z: 0 }, { z: 0.1 }, { z: 0 }, { z: 0.1 }, { z: 0 }]),
+    ])]
+  }
+  // robotArm:基座旋转 + 肘部摆动
+  const base = g.getObjectByName('base')
+  const arm = g.getObjectByName('arm')
+  return [new THREE.AnimationClip('idle', 4, [
+    rotTrack(base, [0, 1, 2, 3, 4], [{ y: -0.7 }, { y: 0 }, { y: 0.7 }, { y: 0 }, { y: -0.7 }]),
+    rotTrack(arm, [0, 1, 2, 3, 4], [{ z: 0.15 }, { z: 0.65 }, { z: 0.15 }, { z: -0.3 }, { z: 0.15 }]),
+  ])]
+}
+
+// ---------- 导出 ----------
+
+async function saveGlb(object, clips, outPath) {
+  const exporter = new GLTFExporter()
+  const result = await new Promise((resolveP, rejectP) => {
+    exporter.parse(object, res => resolveP(res), err => rejectP(err), { binary: true, animations: clips })
+  })
+  const buf = result instanceof ArrayBuffer ? Buffer.from(result) : Buffer.from(result)
+  writeFileSync(outPath, buf)
+  console.log('  ✓', outPath, `${(buf.length / 1024).toFixed(1)} KB, anims=${clips.map(c => c.name).join(',')}`)
+  return buf
+}
+
+async function validateGlb(buf, label) {
+  try {
+    const loader = new GLTFLoader()
+    const gltf = await new Promise((resolveP, rejectP) => {
+      loader.parse(buf.slice().buffer, '', resolveP, rejectP)
+    })
+    console.log(`  ✓ 校验 ${label}: nodes=${gltf.scene.children.length}, anims=${gltf.animations.map(a => `${a.name}(${a.tracks.length})`).join(',')}`)
+  }
+  catch (e) {
+    console.log(`  ✗ 校验 ${label}: ${String(e).slice(0, 180)}`)
+  }
+}
+
+console.log('=== 二次元角色(character/) ===')
+for (let i = 0; i < PALETTES.length; i++) {
+  const pal = PALETTES[i]
+  const obj = buildAnimeCharacter(pal)
+  const clips = animeClips(obj)
+  const buf = await saveGlb(obj.root, clips, join(CHAR_DIR, `hero-anime-${i + 1}.glb`))
+  await validateGlb(buf, `hero-anime-${i + 1}(${pal.label})`)
+}
+
+console.log('=== 工业设备(devices/) ===')
+const devices = [
+  { name: 'device-scanner.glb', kind: 'scanner', build: buildScanner },
+  { name: 'device-console.glb', kind: 'console', build: buildConsole },
+  { name: 'device-robot-arm.glb', kind: 'robotArm', build: buildRobotArm },
+]
+for (const d of devices) {
+  const obj = d.build()
+  const clips = deviceClips(obj, d.kind)
+  const buf = await saveGlb(obj, clips, join(DEV_DIR, d.name))
+  await validateGlb(buf, d.name)
+}
+console.log('全部完成 🎉')

package/scripts/build-character-models.mjs

@@ -0,0 +1,175 @@
+/**
+ * 角色模型库素材生成器(可拖拽加载到小镇的"自定义模型")。
+ * 产出 public/assets/game/character/ 下的多张 4 帧精灵表(48x88→192x88),
+ * 帧布局与内置 wu-* 员工一致,运行时走同一套 wu-bob-<key> 动画。
+ * 依赖:pngjs。运行:node scripts/build-character-models.mjs
+ */
+import { PNG } from 'pngjs'
+import fs from 'node:fs'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
+const OUT_DIR = path.resolve(__dirname, '../public/assets/game/character')
+fs.mkdirSync(OUT_DIR, { recursive: true })
+
+const clamp = (v, a, b) => Math.max(a, Math.min(b, v))
+const mix = (c1, c2, t) => [c1[0] + (c2[0] - c1[0]) * t, c1[1] + (c2[1] - c1[1]) * t, c1[2] + (c2[2] - c1[2]) * t]
+
+class Surface {
+  constructor(w, h) {
+    this.w = w
+    this.h = h
+    this.png = new PNG({ width: w, height: h })
+    this.png.data.fill(0)
+  }
+
+  blend(x, y, c, a) {
+    const i = (Math.round(y) * this.w + Math.round(x)) * 4
+    if (i < 0 || i + 3 >= this.png.data.length) return
+    const da = this.png.data[i + 3] / 255
+    const sa = clamp(a, 0, 1)
+    const outA = sa + da * (1 - sa)
+    if (outA <= 0) return
+    this.png.data[i] = Math.round((c[0] * sa + this.png.data[i] * da * (1 - sa)) / outA)
+    this.png.data[i + 1] = Math.round((c[1] * sa + this.png.data[i + 1] * da * (1 - sa)) / outA)
+    this.png.data[i + 2] = Math.round((c[2] * sa + this.png.data[i + 2] * da * (1 - sa)) / outA)
+    this.png.data[i + 3] = Math.round(outA * 255)
+  }
+
+  radialGlow(cx, cy, r, c, intensity) {
+    for (let y = cy - r; y <= cy + r; y++)
+      for (let x = cx - r; x <= cx + r; x++) {
+        const d = Math.hypot(x - cx, y - cy)
+        const a = Math.pow(clamp(1 - d / r, 0, 1), 1.9) * intensity
+        if (a > 0.004) this.blend(x, y, c, a)
+      }
+  }
+
+  save(name) { fs.writeFileSync(path.join(OUT_DIR, name), PNG.sync.write(this.png)) }
+}
+
+const FW = 48, FH = 88, FRAMES = 4
+
+/** 画一帧角色:主体根据 type 采用不同轮廓(骑士/法师/机甲),共用飘带裙摆+发光核心 */
+function drawFrame(img, frame, p, type) {
+  const fx = frame * FW
+  const bobY = frame === 0 ? 3 : frame === 2 ? -3 : 0
+  const cx = fx + FW / 2
+  const top = 8 + bobY
+  const hy = top + 8
+
+  // 底部消散飘带(通用)
+  for (let t = 0; t < 3; t++) {
+    const sway = (t - 1) * 7 + Math.sin(frame * 1.1 + t) * 2
+    for (let y = 46 + t * 3; y < FH - 4; y += 1) {
+      const prog = (y - 46) / (FH - 4)
+      const x = cx + sway * prog * (1 + prog * 0.6)
+      img.blend(x, y, mix(p.robe, p.robeDeep, prog), (1 - prog) * 0.85)
+      if (prog > 0.6) img.blend(x + 1.5, y, mix(p.robe, p.glow, prog), (1 - prog) * 0.4)
+    }
+  }
+
+  // 躯干(差异:骑士更宽、机甲方形、法师渐窄)
+  let taper = 0.55
+  let shoulder = 11
+  if (type === 'knight') {
+    taper = 0.48
+    shoulder = 13
+  }
+  if (type === 'bot') {
+    shoulder = 12
+    taper = 0.35
+  }
+  for (let y = 30; y < 52; y++) {
+    const prog = (y - 30) / 22
+    const half = shoulder * (1 - prog * taper)
+    const c = mix(p.robe, p.robeDeep, prog)
+    for (let x = cx - half; x <= cx + half; x++) {
+      const edge = 1 - Math.abs(x - cx) / half
+      img.blend(x, y, c, 0.5 + edge * 0.35)
+    }
+  }
+
+  // 胸口发光核心
+  for (let y = 34; y < 50; y++)
+    for (let x = cx - 6; x <= cx + 6; x++) {
+      const d = Math.hypot(x - cx, y - 41)
+      if (d < 6) img.blend(x, y, p.glow, clamp((6 - d) / 6, 0, 1) * 0.8)
+    }
+
+  // 肩部披帛飘带
+  for (let s = -1; s <= 1; s += 2) {
+    for (let t = 0; t < 22; t++) {
+      const x = cx + s * (8 + t * 1.15) + Math.sin(frame * 0.8 + t * 0.2) * 1.5
+      const y = 31 + t * 0.45
+      img.blend(x, y, s < 0 ? p.ribbon : p.ribbon2, (1 - t / 24) * 0.9)
+    }
+  }
+
+  // 头部 + 发丝(差异:法师戴尖帽,骑士戴羽盔,机甲方形头+天线)
+  for (let y = hy - 6; y < hy + 20; y++)
+    for (let x = cx - 9; x <= cx + 9; x++) {
+      const d = Math.hypot((x - cx) * 1.0, (y - hy) * 0.85)
+      if (d < 9) img.blend(x, y, p.hair, 0.92)
+    }
+  // 马尾/披发(机甲则改为脑后天线)
+  if (type === 'bot') {
+    for (let t = 0; t < 15; t++) img.blend(cx + 9, hy - 8 - t * 0.9, p.trim, (1 - t / 16) * 0.9)
+    img.radialGlow(cx + 9, hy - 22, 5, p.glow, 0.7)
+  }
+  else {
+    for (let t = 0; t < 24; t++) img.blend(cx + 7 + t * 0.9 + Math.sin(frame * 1.0 + t * 0.15) * 1.5, hy - 2 + t * 0.55, p.hair, (1 - t / 26) * 0.9)
+  }
+  // 脸庞
+  for (let y = hy - 2; y < hy + 8; y++)
+    for (let x = cx - 4; x <= cx + 4; x++) {
+      const d = Math.hypot(x - cx, y - (hy + 3))
+      if (d < 4.5) img.blend(x, y, [240, 224, 214], 0.95)
+    }
+  // 眼部
+  img.blend(cx - 2, hy + 2, [80, 60, 80], 0.7)
+  img.blend(cx + 2, hy + 2, [80, 60, 80], 0.7)
+
+  // 头顶饰物(差异)
+  if (type === 'mage') {
+    // 尖帽
+    for (let t = 0; t < 14; t++) {
+      const hw = 9 * (1 - t / 14)
+      const yy = hy - 12 - t * 0.5
+      for (let x = cx - hw; x <= cx + hw; x++) img.blend(x, yy, mix(p.trim, p.robeDeep, t / 14), 0.9)
+    }
+    img.radialGlow(cx, hy - 22, 6, p.glow, 0.5)
+  }
+  else if (type === 'knight') {
+    // 羽盔(两侧对称拨羽)
+    for (let s = -1; s <= 1; s += 2) {
+      for (let t = 0; t < 8; t++) img.blend(cx + s * (3 + t * 1.1), hy - 11 + t * 0.7, p.trim, (1 - t / 9) * 0.95)
+    }
+    for (let y = hy - 12; y < hy - 4; y++) img.blend(cx, y, p.hair, 0.95)
+  }
+  else {
+    // 机甲方形头 + 双侧饰条
+    for (let y = hy - 5; y < hy + 9; y++)
+      for (let x = cx - 6; x <= cx + 6; x++) img.blend(x, y, p.hair, 0.85)
+    for (let s = -1; s <= 1; s += 2) for (let t = 0; t < 6; t++) img.blend(cx + s * (6 + t * 0.5), hy, p.trim, (1 - t / 7) * 0.8)
+  }
+
+  // 全身外发光 + 落点辉光
+  img.radialGlow(cx, 40, 26, p.glow, 0.35)
+  img.radialGlow(cx, 80, 13, p.glow, 0.5)
+}
+
+const models = {
+  knight: { robe: [210, 222, 240], robeDeep: [120, 140, 178], hair: [60, 70, 110], ribbon: [150, 168, 214], ribbon2: [110, 128, 178], trim: [230, 240, 255], glow: [150, 190, 255] },
+  mage: { robe: [226, 200, 246], robeDeep: [140, 100, 180], hair: [110, 70, 160], ribbon: [200, 170, 240], ribbon2: [150, 110, 200], trim: [236, 214, 250], glow: [205, 160, 255] },
+  bot: { robe: [196, 226, 218], robeDeep: [90, 150, 150], hair: [70, 120, 128], ribbon: [150, 200, 196], ribbon2: [100, 160, 160], trim: [170, 240, 214], glow: [150, 240, 206] },
+}
+
+for (const [key, p] of Object.entries(models)) {
+  const s = new Surface(FW * FRAMES, FH)
+  for (let f = 0; f < FRAMES; f++) drawFrame(s, f, p, key)
+  s.save(`${key}.png`)
+}
+
+console.log('Character models written to', OUT_DIR, '->', ['knight.png', 'mage.png', 'bot.png'].join(', '))