Reguladores de construcción de figura (Preston Blair × Three.js × anime.js)

 # PROMPT — Reguladores de construcción de figura (Preston Blair × Three.js × anime.js)

## ROL

Actúa como ingeniero creativo de herramientas de dibujo 3D y como director de

construcción de personajes formado en *Advanced Animation* de Preston Blair.

Extiende un "maniquí de construcción en volumen" existente (hoja de modelo

interactiva) para un curso universitario de Ilustración.

## CONTEXTO TÉCNICO (NO ROMPER)

Parto del archivo `maniqui3d.html`, un único HTML sin build:

- Stack por CDN vía `<script type="importmap">`: `three@0.170`,

  `animejs@4.5` y `animejs/adapters/three`. No añadir dependencias npm,

  no bundlers, no frameworks. Todo debe seguir funcionando abriendo el archivo.

- Colores y tokens se leen del CSS con `utils.get($container, '--hex-*')`.

  Cualquier color nuevo se declara como variable CSS en `:root` y se lee así,

  nunca hardcodeado en JS.

- La escena ya tiene: `container` (Group con giro), `figura`, `reticula`,

  `lineaAccion`, suelo + `GridHelper`, luz `spot` + ambiental + relleno.

- El estado vive en un objeto `estado` y **toda** la geometría se reconstruye

  con `construir()`, que vacía `figura/reticula/lineaAccion` y vuelve a armar.

- Helpers existentes a REUTILIZAR (no reinventar): `masa(geo,pos,escala,rot)`,

  `miembro(a,b,r1,r2)`, `cono()`, `capsula()`, `guiasCabeza()`, `rostro()`,

  `aplicarCapas()`. Los cinco esquemas actuales son `bipedo`, `cuadrupedo`,

  `ave`, `objeto`, `criatura`, y la altura total siempre es `ALTO = 3`

  (cambia la unidad-cabeza, no el tamaño en pantalla).

- El panel `.panel` ya tiene `<select>`, `input[type=range]` y botones `.mini`

  con estilos. Los reguladores nuevos deben reutilizar esas mismas clases y

  el mismo patrón de listeners (`$('id').addEventListener('input'|'click', …)`).

## OBJETIVO

Añadir un panel completo de **reguladores** que permitan manipular los atributos

de la figura central según los parámetros ilustrativos de Preston Blair, más

DOS catálogos insertables. Cada regulador escribe en `estado`, dispara

`construir()` (si cambia geometría) o `aplicarCapas()` (si solo cambia material),

y el HUD lateral (`.lectura`) refleja los valores en lenguaje de hoja de modelo.

## GRUPO 1 — CONSTRUCCIÓN (formas y proporción, Preston Blair)

1. **Esquema** (ya existe) — mantener los 5 tipos.

2. **Altura en cabezas** (ya existe, 2–8.5). Añadir etiqueta pedagógica:

   2–3 = bebé/cute · 4–5 = cómico · 6 = estándar · 7–8 = heroico/estilizado.

3. **Tipo de personaje (preset)** — `cute | comico | rudo | heroico | recto`.

   Cada preset ajusta de golpe: nº de cabezas, tamaño de cabeza, grosor de

   masas y exageración (proporción bebé = cabeza enorme + cuerpo corto;

   rudo = pecho/mandíbula pesados; heroico = 7–8 cabezas, miembros largos).

4. **Forma base de las masas (CATÁLOGO A, ver abajo)** — selector que cambia

   la primitiva con que se construye tronco/cabeza.

5. **Exageración / caricatura** (slider 0–100 %) — multiplicador maestro que

   empuja las proporciones ya calculadas (agranda lo grande, encoge lo pequeño).

## GRUPO 2 — GESTO Y VOLUMEN (principios Disney/Blair)

6. **Línea de acción** — intensidad (0–100 %) y modo `C | S | recta`. Debe

   curvar el eje que ya devuelve cada esquema y por el que se genera el tubo

   `lineaAccion`; toda la figura debe leerse "colgada" de esa curva.

7. **Squash & Stretch** — slider −100…+100 conservando volumen

   (si `sy = 1+s`, entonces `sx = sz = 1/√(1+s)`). Aplicar al Group `figura`.

8. **Inclinación / eje de la cabeza (rueda de construcción)** — tilt e giro de

   la cabeza reusando `guiasCabeza()` como meridiano + línea de ojos.

9. **Peso / balance** — desplaza el centro de gravedad y reparte masa entre

   parte alta y baja (barriga vs. pecho).

## GRUPO 3 — RASGOS FÍSICOS (sliders finos)

- **Tamaño de cabeza** · **Separación de ojos** · **Tamaño de ojos**

- **Proyección de hocico/nariz/pico** · **Grosor de miembros** (delgado↔grueso)

- **Tamaño de manos/pies** (el "pie grande" de caricatura)

- **Volumen de torso** (barriga/pecho). Todos escriben en `estado` y se

  aplican dentro de los 5 esquemas usando `H` (unidad-cabeza) como base.

## GRUPO 4 — CAPAS Y ANIMACIÓN (ya existe, extender)

- Conmutadores actuales: Malla · Retícula · Línea de acción · Giro · Silueta.

- Añadir: **Ejes/guías de cabeza** on/off y **Sombra** on/off.

- **Animación (anime.js, adaptador three)**: añadir un toggle de "prueba de

  gesto" que use `createTimeline`/`animate` para animar `squash`, `rotateY`

  del `container` y un pequeño rebote (bounce) mapeado por el adaptador three

  a `position.y`/`scale`. Respetar el patrón existente:

  `.add(target, { rotateY:360, x/y/z, scale, color:'var(--hex-*)' }, 0)` con

  `ease:'inOutSine'`, `alternate`, `loop`, y `createTimer({onUpdate: render})`.

  Nada de rAF manual: usar `createTimer`.

## CATÁLOGO A — FORMAS BASE (intercambiables como masa principal)

Selector que reconstruye tronco/cabeza con la primitiva elegida, todas ya

soportadas o triviales en three:

`esfera` · `huevo/óvalo` (esfera escalada en Y) · `pera` (dos esferas fundidas

o `LatheGeometry`) · `caja` · `cilindro/cono` · `cápsula` · `frijol/riñón`.

Corresponden a las formas con que Blair construye TODO personaje (círculo y

pera como base). Al cambiar la forma, la malla de construcción (`WireframeGeometry`)

debe seguir mostrándose encima, como en el lápiz de la hoja de modelo.

## CATÁLOGO B — ATRIBUTOS FÍSICOS INSERTABLES (se "clavan" en la figura central)

Paleta de botones/tags (clase `.mini`) que AÑADEN piezas ancladas a un punto de

anclaje de la figura (cabeza, espalda, cadera, cara). Cada atributo es una

función que crea `masa()`/`miembro()` sobre `figura` y se guarda en

`estado.atributos[]` para reconstruirse en `construir()`:

- **Cabeza**: orejas · cuernos · cresta · antenas · pico · trompa · melena

- **Espalda/torso**: alas · joroba · caparazón · aletas · panza extra

- **Extremidades**: cola (curva por `CatmullRomCurve3`) · garras · pezuñas

- **Cara**: cejas · bigote/hocico · colmillos

Cada atributo respeta la escala en unidad-cabeza `H`, la opacidad de masas y

el modo silueta. Deben poder acumularse y quitarse (toggle) sin recargar.

## HUD / LECTURA (hoja de modelo)

El bloque `.lectura` debe mostrar en vivo: tipo, altura en cabezas + etiqueta de

proporción, forma base activa, nivel de exageración y atributos insertados.

Lenguaje de hoja de modelo, no de UI ("5,0 cabezas · proporción cómica").

## REGLAS DE CALIDAD

- No romper: giro por arrastre, zoom por rueda, resize, aviso de CDN caído.

- Reconstrucción idempotente: `construir()` no debe acumular geometría huérfana

  (vaciar Groups y `mallas/masas` como ya hace). Liberar geometrías/materiales

  nuevos si procede.

- Un solo archivo. Comentarios en español, en el mismo tono del código actual.

- Todo color nuevo = variable CSS leída con `utils.get`. Mismos estilos de panel.

- Accesibilidad mínima: `<label for>`, `aria-pressed` en toggles, foco visible.

## ENTREGABLE

El `maniqui3d.html` completo y actualizado, con el panel de reguladores

agrupado (Construcción · Gesto · Rasgos · Catálogos · Capas), los dos catálogos

funcionando, y una breve nota `.nota` explicando el fundamento Blair de cada

grupo. Incluye al final un comentario-resumen del mapeo

"parámetro Preston Blair → regulador → propiedad three/anime".