@7ots/cli 0.1.7 → 0.1.9

package/src/character3d/Character3D.js

@@ -11,6 +11,8 @@
 import * as THREE from 'three';
 import { normalizeCharacter, layout, bodyPoints } from '../character/Character.js';
 import { stylizeSpec } from '../character/styles.js';
+import { applyMods, modPart } from '../character/mods.js';
+import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
 
 /**
  * Acabado 3D de cada estilo artístico (styles.js): la paleta sale de stylizeSpec y aquí se elige
@@ -19,20 +21,34 @@ import { stylizeSpec } from '../character/styles.js';
 const STYLE_FINISH = {
   ukiyoe: 'toon', glass: 'glossy', bauhaus: 'toon', manuscript: 'toon', glitch: 'neon', clay: 'clay', ink: 'sketch',
   pop: 'toon', watercolor: 'soft3d', pixel: 'toon', synthwave: 'neon', nouveau: 'toon', cubism: 'toon', crayon: 'sketch', blueprint: 'neon', pointillism: 'soft3d', woodcut: 'sketch',
+  riso: 'toon', dotmatrix: 'toon', chalk: 'sketch', sticker: 'glossy', felt: 'clay', papercut: 'soft3d', lowpoly: 'toon', marble: 'soft3d', candy: 'glossy',
+  holo: 'glossy', sumie: 'sketch', tarot: 'toon', retro70: 'toon', mosaic: 'toon', neonsign: 'neon', graffiti: 'toon', thermal: 'soft3d',
 };
+/** Piezas del catálogo 2 sin modelo 3D propio → la existente más parecida (campo `as3d` en parts.js). */
+function alias3D(s) {
+  s.eyes = { ...s.eyes, type: as3d('eyes', s.eyes.type) };
+  s.brows = { ...s.brows, type: as3d('brows', s.brows.type) };
+  s.mouth = { ...s.mouth, type: as3d('mouths', s.mouth.type) };
+  s.cheeks = { ...s.cheeks, type: as3d('cheeks', s.cheeks.type) };
+  s.body = { ...s.body, pattern: as3d('patterns', s.body.pattern) };
+  s.finish = as3d('finishes', s.finish);
+  s.accessories = s.accessories.map((a) => ({ ...a, id: as3d('accessories', a.id) }));
+  return s;
+}
 function styled3D(spec) {
-  const s = stylizeSpec(spec);
+  const s = alias3D(stylizeSpec(spec));
   if (!s._style) return s;
   const f2 = s.finish;
   s.finish = STYLE_FINISH[s._style.id] || (f2 === 'clay' || f2 === 'sketch' ? f2 : s._style.lw > 0 ? 'toon' : f2 === 'flat' ? 'soft3d' : f2);
   return s;
 }
-import { shade, luminance } from '../character/parts.js';
+import { shade, luminance, as3d } from '../character/parts.js';
 import { textureOf } from '../character/skin.js';
 import { GESTURES, GESTURE_ALIAS, VISEMES, EASE, clamp, lerp, approach, textToVisemes, babbleVisemes, HAND_POSES, MORPHS, EFFECTS, shapePoints, seeded } from '../character/motion.js';
 import { U, bodyGeometry, surfaceProbe } from './body.js';
 import { bodyMaterials, surfaceMaterial, mat, shadowTexture, CHEEK_IDS } from './materials.js';
 import { FX3D, glyph, disposeFx } from './fx.js';
+import { buildModel, tickModel, modelGesture } from './model.js';
 
 const DEG = Math.PI / 180;
 const TAU = Math.PI * 2;
@@ -93,6 +109,26 @@ const nowMs = () => performance.now();
 const reducedMotion = () => typeof matchMedia === 'function' && matchMedia('(prefers-reduced-motion: reduce)').matches;
 const shared = (o) => { o.userData.shared = true; return o; };
 
+// glb de los mods: uno por url, compartido entre ots (sus geometrías no se liberan con el rig)
+const GLB = new Map();
+function loadGlb(url) {
+  if (!GLB.has(url)) {
+    const p = new Promise((res, rej) => {
+      const loader = new GLTFLoader();
+      const done = (g) => res(g.scene);
+      if (url.startsWith('data:')) {
+        const bin = atob(url.slice(url.indexOf(',') + 1));
+        const buf = new Uint8Array(bin.length);
+        for (let i = 0; i < bin.length; i++) buf[i] = bin.charCodeAt(i);
+        loader.parse(buf.buffer, '', done, rej);
+      } else loader.load(url, done, undefined, rej);
+    });
+    p.catch(() => GLB.delete(url));
+    GLB.set(url, p);
+  }
+  return GLB.get(url);
+}
+
 /** Malla con posición/rotación/escala opcionales. */
 function M(geo, material, p, r, s) {
   const m = new THREE.Mesh(geo, material);
@@ -143,7 +179,10 @@ export class Character3D {
     this.clearMorphObjects();
     for (const f of this.fxs) disposeFx(f.obj);
     this.fxs = [];
-    const s = (this.spec = styled3D(normalizeCharacter(spec)));
+    const s = (this.spec = styled3D(applyMods(normalizeCharacter(spec), normalizeCharacter)));
+    this.modelMode = false;
+    this.modelTok = null;
+    if (s._model && s._model.url !== this.modelFailed) return this.buildModel(s); // mod de cuerpo completo (model.js)
     const st = s._style; // estilo artístico: sin pelo, con su paleta y su contorno
     const pts = bodyPoints(s);
     const L = (this.L = layout(s));
@@ -155,7 +194,7 @@ export class Character3D {
     const kk = (this.kk = Math.sqrt(W * H) / 1.25); // escala de accesorios (1 ≈ ot medio)
     const Y = (this.Y = (y) => (B.bottom - y) * U);
     const X = (this.X = (x) => (x - L.cx) * U);
-    const tex = (this.tex = textureOf(s));
+    const tex = (this.tex = as3d('textures', textureOf(s)));
     const plush = (this.plush = !st && ((this.opts.material || 'plush') === 'plush' || ['fur', 'fuzz', 'feathers'].includes(tex)));
     const furLen = (this.furLen = plush ? (tex === 'fuzz' || tex === 'none' ? 0.05 : 0.065) * kk : 0);
     const density = (this.density = furLen ? (this.quality === 'high' ? 1 / (furLen * 0.2) : 1 / (furLen * 0.32)) : 0);
@@ -287,7 +326,7 @@ export class Character3D {
       if (!o) continue;
       // pivote en el centro del accesorio: escala/giro de la spec alrededor de sí mismo
       o.updateMatrixWorld(true);
-      const c = o.userData.surface ? new THREE.Vector3() : new THREE.Box3().setFromObject(o).getCenter(new THREE.Vector3());
+      const c = o.userData.surface ? new THREE.Vector3() : o.userData.pivot ? o.userData.pivot.clone() : new THREE.Box3().setFromObject(o).getCenter(new THREE.Vector3());
       const piv = G(o);
       o.position.sub(c);
       piv.position.copy(c);
@@ -1147,16 +1186,77 @@ export class Character3D {
         return g;
       }
       default:
-        return null;
+        return this.spec._modParts?.[id] ? this.buildModPart(this.spec._modParts[id], a, c) : null;
     }
   }
 
+  /**
+   * Pieza de un mod: su glb (unidades del mod: 1 = 1 px de un ot de 120 de ancho, y hacia
+   * arriba) o, si no trae, su SVG en un plano. Se carga en segundo plano; el pivote es el ancla.
+   */
+  buildModPart(p, a, c) {
+    const { L, X, Y, probe } = c;
+    const at = L.anchors[p.anchor] || L.anchors.center;
+    const sc = (L.box.w / 120) * U;
+    const x0 = X(at.x);
+    const y0 = Y(at.y);
+    const z0 = p.depth === 'center' ? 0 : (probe.front(x0, y0)?.p.z ?? 0) + this.furLen;
+    const g = G();
+    g.position.set(x0, y0, z0);
+    g.userData.pivot = g.position.clone();
+    const plane = () => this.modPlane(p, a, sc);
+    if (!p.glb) return g.add(plane()), g;
+    const holder = G();
+    holder.scale.setScalar(sc);
+    g.add(holder);
+    const tint = p.tint === 'body' ? this.spec.body.color : p.tint === 'color' ? a.color : '';
+    loadGlb(p.glb).then((scene) => {
+      const o = scene.clone(true);
+      o.traverse((m) => {
+        if (!m.isMesh) return;
+        m.geometry.userData.shared = true;
+        if (tint) {
+          m.material = m.material.clone();
+          m.material.color?.set(tint);
+          m.userData.ownMaterial = true;
+        }
+      });
+      holder.add(o);
+    }).catch(() => g.add(plane()));
+    return g;
+  }
+
+  /** SVG de una pieza de mod pintado en un plano (respaldo 3D de los mods sin glb). */
+  modPlane(p, a, sc) {
+    const [vx, vy, vw, vh] = p.view;
+    const def = modPart(this.spec, a.id, shade);
+    const inner = def ? def.draw({ k: 1, color: a.color, color2: a.color2, body: this.spec.body.color }) : '';
+    const px = 256 / Math.max(vw, vh);
+    const cv = document.createElement('canvas');
+    cv.width = Math.max(2, Math.round(vw * px));
+    cv.height = Math.max(2, Math.round(vh * px));
+    const tex = new THREE.CanvasTexture(cv);
+    tex.colorSpace = THREE.SRGBColorSpace;
+    const img = new Image();
+    img.onload = () => {
+      cv.getContext('2d').drawImage(img, 0, 0, cv.width, cv.height);
+      tex.needsUpdate = true;
+    };
+    img.src = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="${vx} ${vy} ${vw} ${vh}" width="${cv.width}" height="${cv.height}">${inner}</svg>`)}`;
+    const m = new THREE.Mesh(new THREE.PlaneGeometry(vw * sc, vh * sc), new THREE.MeshBasicMaterial({ map: tex, transparent: true, depthWrite: false, side: THREE.DoubleSide }));
+    m.position.set((vx + vw / 2) * sc, -(vy + vh / 2) * sc, p.layer === 'back' ? -0.01 : 0.01);
+    m.userData.ownMaterial = true;
+    return m;
+  }
+
   disposeRig() {
     this.rig.traverse((m) => {
       if (!m.isMesh) return;
       if (!m.geometry.userData.shared) m.geometry.dispose();
       if (m.userData.ownMaterial) m.material.dispose();
     });
+    this.model?.mixer?.stopAllAction();
+    this.model = null;
     this.rig.clear();
     if (this.shadow) {
       this.shadow.material.dispose();
@@ -1176,6 +1276,7 @@ export class Character3D {
 
   /** Avanza un frame. t: performance.now() ms; dt: ms. */
   tick(t, dt) {
+    if (this.modelMode) return this.tickModel(t, dt);
     const rm = reducedMotion();
     const idle = this.opts.idle !== false;
     // parpadeo y miradas espontáneas
@@ -1228,26 +1329,7 @@ export class Character3D {
     }
     if (rm) Object.assign(pose, { x: 0, y: 0, r: 0, sx: 1, sy: 1 });
 
-    // metamorfosis: fases como en 2D (entra con rebote, sale suave)
-    let ksx = 1;
-    let ksy = 1;
-    const act = {};
-    for (const [slot, mm] of this.morphs) {
-      if (mm.phase !== 'out' && t >= mm.until) { mm.phase = 'out'; mm.outAt = t; mm.k0 = mm.k; }
-      if (mm.phase === 'in') {
-        const q = clamp((t - mm.start) / MORPH_IN);
-        mm.k = rm ? 1 : mm.shape ? EASE.inOut(q) : EASE.backOut(q);
-        if (q >= 1) mm.phase = 'on';
-      } else if (mm.phase === 'on') mm.k = 1;
-      else {
-        const q = clamp((t - mm.outAt) / MORPH_OUT);
-        mm.k = rm ? 0 : mm.k0 * (1 - EASE.inOut(q));
-        if (q >= 1) { this.morphs.delete(slot); this.endMorph(slot); continue; }
-      }
-      act[slot] = mm;
-      const sc = SCALE_MORPH[slot];
-      if (sc) { const [a, b] = sc(mm.k); ksx *= a; ksy *= b; }
-    }
+    const { ksx, ksy, act } = this.tickMorphs(t, rm);
     if (act.shape && !act.shape.ready) this.startShape(act.shape);
     const shapeK = act.shape?.ready ? act.shape.k : 0;
     this.bodyU.uMorph.value.set(act.melt?.k || 0, rm ? 0 : act.jelly?.k || 0, shapeK, 0);
@@ -1385,7 +1467,42 @@ export class Character3D {
       hnd.scale.setScalar(Math.max(0.01, mhd.k * (p.s || 1)) * (type === 'open' ? 1 : 0.9));
     }
 
-    // efectos
+    const blush = this.tickEffects(t, rm);
+    this.bodyU.uBlush.value = blush;
+    this.fxg.position.copy(rig.position);
+    this.fxg.rotation.y = this.yaw;
+
+    for (const f of this.furs) f.u.uTime.value = sec;
+    for (const a of this.anims) a(rm ? 0 : sec);
+  }
+
+  /** Pinchos: conos instanciados en el contorno (sin la base) y en la espalda. */
+  /** Fases de las metamorfosis como en 2D (entra con rebote, sale suave): { ksx, ksy, act }. */
+  tickMorphs(t, rm) {
+    let ksx = 1;
+    let ksy = 1;
+    const act = {};
+    for (const [slot, mm] of this.morphs) {
+      if (mm.phase !== 'out' && t >= mm.until) { mm.phase = 'out'; mm.outAt = t; mm.k0 = mm.k; }
+      if (mm.phase === 'in') {
+        const q = clamp((t - mm.start) / MORPH_IN);
+        mm.k = rm ? 1 : mm.shape ? EASE.inOut(q) : EASE.backOut(q);
+        if (q >= 1) mm.phase = 'on';
+      } else if (mm.phase === 'on') mm.k = 1;
+      else {
+        const q = clamp((t - mm.outAt) / MORPH_OUT);
+        mm.k = rm ? 0 : mm.k0 * (1 - EASE.inOut(q));
+        if (q >= 1) { this.morphs.delete(slot); this.endMorph(slot); continue; }
+      }
+      act[slot] = mm;
+      const sc = SCALE_MORPH[slot];
+      if (sc) { const [a, b] = sc(mm.k); ksx *= a; ksy *= b; }
+    }
+    return { ksx, ksy, act };
+  }
+
+  /** Avanza los efectos; devuelve el rubor que piden. */
+  tickEffects(t, rm) {
     let blush = 0;
     if (this.fxs.length) {
       const c = this.fxc;
@@ -1409,15 +1526,9 @@ export class Character3D {
         return true;
       });
     }
-    this.bodyU.uBlush.value = blush;
-    this.fxg.position.copy(rig.position);
-    this.fxg.rotation.y = this.yaw;
-
-    for (const f of this.furs) f.u.uTime.value = sec;
-    for (const a of this.anims) a(rm ? 0 : sec);
+    return blush;
   }
 
-  /** Pinchos: conos instanciados en el contorno (sin la base) y en la espalda. */
   makeSpikes(color) {
     const L = this.L;
     const list = [];
@@ -1515,7 +1626,7 @@ export class Character3D {
 
   /** Limpia lo que deja una metamorfosis al terminar. */
   endMorph(slot) {
-    if (slot === 'shape') {
+    if (slot === 'shape' && this.B) {
       for (const b of this.bodyMeshes) b.geometry = this.B.geometry;
       this.shapeGeo?.dispose();
       this.shapeGeo = null;
@@ -1794,3 +1905,5 @@ export class Character3D {
     this.root.removeFromParent();
   }
 }
+
+Object.assign(Character3D.prototype, { buildModel, tickModel, modelGesture });

package/src/character3d/index.js

@@ -93,6 +93,7 @@ export function createCharacter3D(el, spec, opts = {}) {
   const ch = new Character3D(spec, { quality: opts.quality || 'high', material: opts.material || 'plush', moodFx: opts.moodFx });
   scene.add(ch.root);
   let aspect = 0;
+  let rev = ch.boundsRev;
   const frame = () => {
     const b = ch.bounds;
     const size = b.getSize(new THREE.Vector3());
@@ -114,8 +115,9 @@ export function createCharacter3D(el, spec, opts = {}) {
     bleed: opts.bleed || 0,
     tick(t, dt) {
       const a = this.rect.width / this.rect.height;
-      if (Math.abs(a - aspect) > 1e-3) {
+      if (Math.abs(a - aspect) > 1e-3 || rev !== ch.boundsRev) {
         aspect = a;
+        rev = ch.boundsRev; // un mod de cuerpo completo cambia la caja al cargar su modelo
         camera.aspect = a;
         frame();
       }
@@ -239,6 +241,10 @@ export function createCrowd3D(el, opts = {}) {
         camera.aspect = a;
         fit();
       }
+      if (chars.some((c) => c.boundsRev !== c.seenRev)) {
+        for (const c of chars) c.seenRev = c.boundsRev;
+        fit();
+      }
       for (const c of chars) {
         c.tick(t, dt);
         c.lod(pixelHeight(this, c));

package/src/character3d/model.js

@@ -0,0 +1,367 @@
+/**
+ * Mod de cuerpo completo: un modelo 3D (VRM o GLB) en lugar del cuerpo procedural del ot.
+ *
+ * El modelo vive dentro del mismo `rig` de Character3D, así que gestos sin animación propia,
+ * efectos, ánimos y el encuadre siguen funcionando. Lo que el modelo traiga se aprovecha:
+ *   - VRM (0.x y 1.0): expresiones estándar (aa/ih/ou/ee/oh, blink, happy, angry, sad,
+ *     relaxed, surprised) y el hueso de la cabeza para mirar.
+ *   - GLB: morph targets por nombre (blink, jawOpen/mouthOpen, happy/smile, sad, angry,
+ *     surprised) y un hueso «head» si lo hay.
+ *   - Animaciones: «idle» en bucle; las que se llamen como un gesto (wave, dance, yes, no,
+ *     jump, thumbsup…) sustituyen a la pose procedural de ese gesto.
+ * Unidades: el modelo se escala a la altura de un ot (su caja), con y hacia arriba y de frente a +z
+ * (los VRM 0.x miran a -z y se giran solos).
+ */
+
+import * as THREE from 'three';
+import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
+import { layout } from '../character/Character.js';
+import { EASE, clamp, approach } from '../character/motion.js';
+import { U } from './body.js';
+import { shadowTexture } from './materials.js';
+
+const DEG = Math.PI / 180;
+const TAU = Math.PI * 2;
+
+/** Animación del modelo para cada gesto de 7ots (por nombre del clip). */
+const CLIP_FOR = {
+  wave: /wave|hello|greet|hi\b/i,
+  dance: /dance/i,
+  celebrate: /victory|celebrat|cheer|dance/i,
+  jump: /jump/i,
+  bounce: /jump|hop/i,
+  nod: /\byes\b|nod/i,
+  shake: /^no$|\bno\b|shake_?head/i,
+  thumbsup: /thumbs?_?up|\byes\b/i,
+  thumbsdown: /thumbs?_?down|\bno\b/i,
+  bow: /bow/i,
+  think: /think/i,
+  clap: /clap/i,
+  point: /point/i,
+  laugh: /laugh/i,
+  stomp: /stomp|punch/i,
+  shrug: /shrug/i,
+  dizzy: /dizz|death|die/i,
+  yawn: /yawn|sit/i,
+  fly: /fly/i,
+};
+const IDLE = /idle|breath|stand/i;
+
+/** Nombre de expresión VRM 0.x → VRM 1.0. */
+const VRM0 = { a: 'aa', i: 'ih', u: 'ou', e: 'ee', o: 'oh', joy: 'happy', sorrow: 'sad', fun: 'relaxed', angry: 'angry', blink: 'blink', surprised: 'surprised' };
+/** Morph targets de un GLB cualquiera → expresión. */
+const MORPH_NAMES = [
+  ['aa', /jaw_?open|mouth_?open|viseme_?aa|^v_?aa$|^aa$|^a$/i],
+  ['oh', /viseme_?(oh|o|ou)$|^oh$|^o$|mouth_?(funnel|pucker)/i],
+  ['blink', /^blink$|blink_?both|eyes?_?clos|^eyeblink$|^blink/i],
+  ['happy', /happy|joy|smile/i],
+  ['sad', /sad|sorrow/i],
+  ['angry', /angry|anger|\bmad\b/i],
+  ['surprised', /surpris|shock/i],
+];
+/** Ánimo de 7ots → expresiones del modelo (con su peso). */
+const MOOD_EXPR = {
+  happy: { happy: 0.8 },
+  love: { happy: 0.7, relaxed: 0.3 },
+  angry: { angry: 0.85 },
+  disgust: { angry: 0.5 },
+  sad: { sad: 0.85 },
+  fear: { surprised: 0.5, sad: 0.3 },
+  surprised: { surprised: 0.9 },
+  sleep: { relaxed: 0.6 },
+};
+
+function loadGltf(url) {
+  return new Promise((res, rej) => {
+    const loader = new GLTFLoader();
+    if (url.startsWith('data:')) {
+      const bin = atob(url.slice(url.indexOf(',') + 1));
+      const buf = new Uint8Array(bin.length);
+      for (let i = 0; i < bin.length; i++) buf[i] = bin.charCodeAt(i);
+      loader.parse(buf.buffer, '', res, rej);
+    } else loader.load(url, res, undefined, rej);
+  });
+}
+
+const meshesUnder = (obj) => {
+  const out = [];
+  obj.traverse((o) => { if (o.isMesh && o.morphTargetInfluences) out.push(o); });
+  return out;
+};
+
+/** Expresiones del modelo: { nombre: [{ mesh, index, w }] }. */
+async function expressionsOf(gltf) {
+  const ex = {};
+  const add = (name, mesh, index, w) => { if (Number.isInteger(index)) (ex[name] ||= []).push({ mesh, index, w }); };
+  const { parser } = gltf;
+  const ext = parser.json.extensions || {};
+  if (ext.VRMC_vrm) {
+    const all = { ...ext.VRMC_vrm.expressions?.preset, ...ext.VRMC_vrm.expressions?.custom };
+    for (const [name, e] of Object.entries(all)) {
+      for (const b of e?.morphTargetBinds || []) {
+        const node = await parser.getDependency('node', b.node).catch(() => null);
+        if (node) for (const m of meshesUnder(node)) add(name, m, b.index, b.weight ?? 1);
+      }
+    }
+  } else if (ext.VRM) {
+    const byMesh = new Map();
+    gltf.scene.traverse((o) => {
+      const a = parser.associations.get(o);
+      if (o.isMesh && a?.meshes != null) (byMesh.get(a.meshes) || byMesh.set(a.meshes, []).get(a.meshes)).push(o);
+    });
+    for (const g of ext.VRM.blendShapeMaster?.blendShapeGroups || []) {
+      const name = VRM0[String(g.presetName || '').toLowerCase()];
+      if (!name) continue;
+      for (const b of g.binds || []) for (const m of byMesh.get(b.mesh) || []) add(name, m, b.index, (b.weight ?? 100) / 100);
+    }
+  } else {
+    gltf.scene.traverse((o) => {
+      if (!o.isMesh || !o.morphTargetDictionary) return;
+      for (const [key, index] of Object.entries(o.morphTargetDictionary)) {
+        const hit = MORPH_NAMES.find(([, re]) => re.test(key));
+        if (hit) add(hit[0], o, index, 1);
+      }
+    });
+  }
+  return ex;
+}
+
+/** Hueso de la cabeza (VRM humanoid, o el primer hueso «head»). */
+async function headOf(gltf) {
+  const { parser } = gltf;
+  const ext = parser.json.extensions || {};
+  const idx = ext.VRMC_vrm?.humanoid?.humanBones?.head?.node ?? ext.VRM?.humanoid?.humanBones?.find((b) => b.bone === 'head')?.node;
+  if (idx != null) return parser.getDependency('node', idx).catch(() => null);
+  let head = null;
+  const re = /^(mixamorig:?)?head$|^head[_\d]*$/i;
+  gltf.scene.traverse((o) => { if (!head && o.isBone && re.test(o.name)) head = o; });
+  // sin esqueleto: un nodo «head» rígido (modelos hechos por partes) también sirve
+  if (!head) gltf.scene.traverse((o) => { if (!head && !o.isMesh && re.test(o.name)) head = o; });
+  return head;
+}
+
+/**
+ * Construye el ot como modelo (llamado desde Character3D.build con la ficha ya resuelta).
+ * `this` es la instancia de Character3D.
+ */
+export function buildModel(s) {
+  const m = s._model;
+  const L = (this.L = layout(s));
+  const W = (this.W = L.box.w * U);
+  const H = (this.H = Math.max(L.box.h * U, W) * 1.2);
+  this.modelMode = true;
+  this.kk = Math.sqrt(W * H) / 1.25;
+  this.depth = W * 0.6;
+  this.furLen = 0;
+  this.plush = false;
+  this.maxShells = 0;
+  this.pal = { body: s.body.color };
+  this.furs = [];
+  this.parts = [];
+  this.anims = [];
+  this.bodyMeshes = [];
+  this.eyes = [];
+  this.brows = [];
+  this.hands = [];
+  this.eyeY = H * 0.86;
+  this.r3 = W * 0.07;
+  this.model = { ex: {}, w: {}, head: null, q0: null, mixer: null, clips: [], idle: null, act: null, ready: false };
+  this.fxc = { W, H, D: this.depth, eyeY: this.eyeY, r: this.r3, sp: W * 0.12, mouth: new THREE.Vector3(0, H * 0.78, this.depth * 0.5), low: this.quality === 'low', tears: [] };
+
+  const sh = new THREE.Mesh(new THREE.PlaneGeometry(1, 1), new THREE.MeshBasicMaterial({ map: shadowTexture(), transparent: true, depthWrite: false, toneMapped: false }));
+  sh.rotation.x = -Math.PI / 2;
+  sh.position.y = 0.002;
+  sh.scale.set(W * 1.2, this.depth * 2, 1);
+  sh.renderOrder = -1;
+  this.shadow = sh;
+  this.root.add(sh);
+
+  // caja provisional mientras carga (el encuadre se rehace al llegar el modelo)
+  this.bounds = new THREE.Box3(new THREE.Vector3(-W / 2, 0, -this.depth / 2), new THREE.Vector3(W / 2, H, this.depth / 2));
+  this.boundsRev = (this.boundsRev || 0) + 1;
+
+  const tok = (this.modelTok = {});
+  loadGltf(m.url)
+    .then(async (gltf) => {
+      if (this.modelTok !== tok) return;
+      const scene = gltf.scene;
+      const ext = gltf.parser.json.extensions || {};
+      if (ext.VRM) scene.rotation.y = Math.PI; // VRM 0.x mira a -z
+      scene.traverse((o) => {
+        if (!o.isMesh) return;
+        o.frustumCulled = false;
+        if (!Array.isArray(o.material)) o.userData.ownMaterial = true;
+      });
+      scene.updateMatrixWorld(true);
+      const box = new THREE.Box3().setFromObject(scene);
+      const size = box.getSize(new THREE.Vector3());
+      const c = box.getCenter(new THREE.Vector3());
+      if (!(size.y > 0)) throw new Error('empty model');
+      scene.position.set(-c.x, -box.min.y, -c.z);
+      const holder = new THREE.Group();
+      holder.add(scene);
+      const k = (H / size.y) * m.scale;
+      holder.scale.setScalar(k);
+      holder.rotation.y = m.rot * DEG;
+      holder.position.y = m.y * H;
+      this.rig.add(holder);
+
+      const md = this.model;
+      md.ex = await expressionsOf(gltf);
+      md.head = await headOf(gltf);
+      if (this.modelTok !== tok) return;
+      if (md.head) md.q0 = md.head.quaternion.clone();
+      if (gltf.animations.length) {
+        md.mixer = new THREE.AnimationMixer(scene);
+        md.clips = gltf.animations;
+        const idle = md.clips.find((a) => IDLE.test(a.name));
+        if (idle) {
+          md.idle = md.mixer.clipAction(idle);
+          md.idle.play();
+        }
+        md.mixer.addEventListener('finished', (e) => {
+          if (e.action !== md.act) return;
+          md.act = null;
+          e.action.fadeOut(0.25);
+          md.idle?.reset().fadeIn(0.25).play();
+        });
+      }
+      md.ready = true;
+
+      // encuadre y puntos de los efectos con el modelo real
+      this.rig.updateMatrixWorld(true);
+      const rb = new THREE.Box3().setFromObject(holder);
+      this.bounds = rb;
+      this.depth = Math.max(0.05, rb.max.z - rb.min.z);
+      this.W = Math.max(0.05, rb.max.x - rb.min.x);
+      this.shadow.scale.set(this.W * 1.1, this.depth * 1.6, 1);
+      if (md.head) {
+        const hp = md.head.getWorldPosition(new THREE.Vector3());
+        this.rig.worldToLocal(hp);
+        this.eyeY = this.fxc.eyeY = hp.y + H * 0.04;
+        this.fxc.mouth.set(hp.x, hp.y - H * 0.01, rb.max.z * 0.6);
+      }
+      this.fxc.W = this.W;
+      this.fxc.D = this.depth;
+      this.boundsRev++;
+    })
+    .catch((e) => {
+      if (this.modelTok !== tok) return;
+      console.warn('[7ots] modelo 3D del mod no disponible:', e?.message || e);
+      // sin modelo: un ot normal (la ficha sin el modelo)
+      const { _model, ...rest } = s;
+      this.modelFailed = m.url;
+      this.build({ ...rest, mods: (rest.mods || []).filter((x) => !x.model) });
+    });
+}
+
+/** Gesto con la animación propia del modelo, si la trae. Devuelve true si la usó. */
+export function modelGesture(name) {
+  const md = this.model;
+  if (!md?.mixer) return false;
+  const re = CLIP_FOR[name];
+  const clip = re && md.clips.find((a) => re.test(a.name) && !IDLE.test(a.name));
+  if (!clip) return false;
+  const a = md.mixer.clipAction(clip);
+  if (md.act && md.act !== a) md.act.fadeOut(0.2);
+  a.reset();
+  a.setLoop(THREE.LoopOnce, 1);
+  a.clampWhenFinished = false;
+  a.fadeIn(0.2).play();
+  md.idle?.fadeOut(0.2);
+  md.act = a;
+  return true;
+}
+
+/** Un frame del ot-modelo (equivale a Character3D.tick). */
+export function tickModel(t, dt) {
+  const rm = typeof matchMedia === 'function' && matchMedia('(prefers-reduced-motion: reduce)').matches;
+  const idle = this.opts.idle !== false;
+  const md = this.model;
+  if (idle && t >= this.nextBlink) {
+    if (this.moodName !== 'sleep' && !rm) {
+      this.blinkAt = t;
+      if (t - this.look.at > 3000 && Math.random() < 0.45) {
+        this.look.tx = Math.random() < 0.5 ? 0 : (Math.random() - 0.5) * 0.9;
+        this.look.ty = Math.random() < 0.5 ? 0 : (Math.random() - 0.5) * 0.5;
+      }
+    }
+    this.nextBlink = t + 1800 + Math.random() * 3600;
+  }
+  if (this.speech && !this.speech.tick(t)) this.endSpeech();
+  const mo = this.mo;
+  mo.open = approach(mo.open, mo.target, dt, mo.target > mo.open ? 35 : 70);
+  mo.msx = approach(mo.msx, mo.tmsx, dt, 60);
+  const look = this.look;
+  look.x = rm ? look.tx : approach(look.x, look.tx, dt, 70);
+  look.y = rm ? look.ty : approach(look.y, look.ty, dt, 70);
+  this.sleepK = approach(this.sleepK, this.moodName === 'sleep' ? 1 : 0, dt, rm ? 1 : 260);
+
+  // gesto: la animación del modelo, o la pose procedural sobre todo el cuerpo
+  const pose = { x: 0, y: 0, r: 0, sx: 1, sy: 1, blink: 0 };
+  let spin = 0;
+  const gest = this.gest;
+  if (gest) {
+    const age = t - gest.start;
+    const tt = clamp(age / gest.ms);
+    if (gest.clip === undefined) gest.clip = md.ready && this.modelGesture(gest.name);
+    if (!gest.clip) {
+      Object.assign(pose, gest.def.pose(tt, rm ? 0 : age, gest));
+      if (gest.dir < 0) { pose.x = -pose.x; pose.r = -pose.r; }
+      pose.sx = 1 + (pose.sx - 1) * 0.4; // un muñeco se aplasta menos que un ot
+      pose.sy = 1 + (pose.sy - 1) * 0.4;
+      if (gest.name === 'spin') spin = EASE.inOut(clamp((tt - 0.12) / 0.76)) * TAU;
+    }
+    for (const f of gest.def.fx || []) {
+      if (tt >= f[0] && !gest.fired.has(f)) {
+        gest.fired.add(f);
+        this.effect(f[1], { dir: gest.dir, ...(f[2] || {}) });
+      }
+    }
+    if (tt >= 1) this.endGesture();
+  }
+  if (rm) Object.assign(pose, { x: 0, y: 0, r: 0, sx: 1, sy: 1 });
+  const { ksx, ksy } = this.tickMorphs(t, rm);
+
+  const W = this.W;
+  const H = this.H;
+  const sec = t / 1000;
+  const breath = rm || !idle || md.idle ? 0 : Math.sin(sec * TAU / 3.4 + this.phase);
+  const rig = this.rig;
+  rig.position.set(pose.x * W, -pose.y * H, 0);
+  rig.rotation.set(md.head ? 0 : look.y * 0.1, this.yaw + look.x * (md.head ? 0.12 : 0.3) + spin + (rm || !idle ? 0 : Math.sin(sec * 0.7 + this.phase) * 0.03), -(pose.r + look.x * 1.5) * DEG);
+  rig.scale.set(pose.sx * ksx * (1 - 0.004 * breath), pose.sy * ksy * (1 + 0.01 * breath), pose.sx * ksx);
+  const air = Math.max(0, -pose.y);
+  this.shadow.material.opacity = 1 - air * 1.5;
+
+  // animaciones y cabeza
+  if (md.head && md.q0) md.head.quaternion.copy(md.q0);
+  md.mixer?.update(rm ? 0 : dt / 1000);
+  if (md.head && md.head.parent) {
+    const pw = md.head.parent.getWorldQuaternion(new THREE.Quaternion());
+    const rw = rig.getWorldQuaternion(new THREE.Quaternion());
+    const d = new THREE.Quaternion().setFromEuler(new THREE.Euler(look.y * 0.35, look.x * 0.55, 0, 'YXZ'));
+    d.premultiply(rw).multiply(rw.clone().invert()); // giro en el espacio del ot
+    md.head.quaternion.premultiply(pw.clone().invert().multiply(d).multiply(pw));
+  }
+
+  // expresiones
+  const blink = Math.max(this.blinkValue(t), pose.blink, this.sleepK > 0.02 ? Math.min(1, this.sleepK * 1.1) : 0);
+  const round = clamp((1 - mo.msx) / 0.35);
+  const want = { ...(MOOD_EXPR[this.moodName] || {}) };
+  for (const k in md.w) if (!(k in want)) want[k] = 0;
+  for (const k in want) md.w[k] = rm ? want[k] : approach(md.w[k] || 0, want[k], dt, 120);
+  const val = { ...md.w, blink: Math.max(blink, md.w.blink || 0), aa: mo.open * (md.ex.oh ? 1 - round : 1), oh: mo.open * round };
+  if (val.happy > 0.3) val.blink = Math.max(val.blink * (1 - val.happy), 0); // VRM: happy ya entrecierra los ojos
+  const touched = new Set();
+  for (const name in md.ex) for (const b of md.ex[name]) if (!touched.has(b)) { b.mesh.morphTargetInfluences[b.index] = 0; touched.add(b); }
+  for (const name in md.ex) {
+    const v = val[name] || 0;
+    if (!v) continue;
+    for (const b of md.ex[name]) b.mesh.morphTargetInfluences[b.index] = Math.min(1, b.mesh.morphTargetInfluences[b.index] + v * b.w);
+  }
+
+  this.tickEffects(t, rm);
+  this.fxg.position.copy(rig.position);
+  this.fxg.rotation.y = this.yaw;
+}