Maniquí de construcción en volumen — Reguladores Preston Blair

Maniquí de construcción en volumen — Reguladores Preston Blair

https://mario55666.github.io/S17_Disperso3d/

El objetivo es construir una herramienta interactiva para estudiantes de ilustración, animación y diseño de personajes. La aplicación debe permitir crear y transformar un maniquí 3D mediante controles visuales, explicando de forma práctica proporción, volumen, gesto, línea de acción y exageración caricaturesca.

ENTREGABLE

- Devuelve un único archivo HTML autocontenido con HTML, CSS y JavaScript.

- Usa import maps y CDN para `three@0.170.0` y `animejs@4.5.0`.

- Debe abrirse en navegadores modernos con WebGL.

- El código debe estar organizado por secciones con comentarios claros: escena, materiales, construcción, controles, animación y eventos.

- No uses frameworks como React, Vue o Angular.

- Prioriza que funcione antes que incluir efectos decorativos.

DISEÑO VISUAL

- Estética de mesa de trabajo oscura, profesional y pedagógica.

- Fondo oscuro con una cuadrícula sutil de perspectiva.

- Colores principales:

  - Fondo: tonos grafito/carbón.

  - Masa del modelo: azul claro translúcido.

  - Malla: azul muy claro.

  - Línea de acción: naranja/ámbar de alto contraste.

  - Guías de cabeza: azul celeste.

  - Atributos añadidos: naranja coral.

  - Texto principal: blanco cálido.

- Tipografías Google Fonts:

  - Syne para títulos.

  - DM Sans para interfaz.

  - DM Mono para datos técnicos y etiquetas.

- Encabezado superior izquierdo:

  - Texto pequeño: “Proyecto Ilustración · Hoja de modelo”.

  - Título: “Maniquí de construcción en volumen”.

  - Resaltar “construcción” o “en volumen” en azul celeste.

- Incluir una lectura informativa superior con:

  - Tipo de personaje seleccionado.

  - Número de cabezas.

  - Tipo de proporción.

  - Forma base.

  - Nivel de exageración.

  - Atributos activos.

- El panel de controles debe estar a la derecha en escritorio.

- El panel debe ser fijo, oscuro, semitransparente, con blur, borde claro y scroll interno.

- En móvil, el panel debe pasar a la parte inferior y ocupar casi todo el ancho.

- Todos los campos `select` deben tener ALTO CONTRASTE:

  - Texto seleccionado blanco.

  - Fondo del campo gris azulado oscuro.

  - Borde visible.

  - Opciones desplegadas con fondo blanco y texto oscuro.

  - Estados focus y hover claramente visibles.

PIE DE PÁGINA

- Incluir el logo institucional IDC en la esquina inferior izquierda.

- El logo debe estar integrado dentro del HTML mediante Base64 o una ruta local clara.

- Al lado del logo incluir el texto:

  “Modelo diseñado para uso educativo”

- Mantener el crédito en la esquina inferior derecha:

  “Mg. Mario Quiroz Martínez · Curso Proyecto Ilustración · 2026”

- El footer no debe bloquear la interacción del lienzo 3D.

ESCENA 3D

- Crear una escena Three.js con:

  - `WebGLRenderer` con antialias.

  - Sombras suaves habilitadas.

  - Cámara `PerspectiveCamera`.

  - Plano de suelo.

  - GridHelper o retícula de piso.

  - Luz ambiental.

  - Spotlight principal con sombra.

  - Luz de relleno azulada.

- La cámara debe iniciar aproximadamente en:

  `x: 0, y: 2.3, z: 5.6`

- La cámara debe mirar al centro del maniquí.

- Permitir interacción:

  - Arrastrar con pointer events para rotar el conjunto 3D.

  - Rueda del mouse para zoom.

  - Limitar el zoom para que el modelo no desaparezca.

- Añadir cursor grab/grabbing sobre el canvas.

MODELO 3D

- Construir el maniquí mediante primitivas Three.js:

  - SphereGeometry.

  - BoxGeometry.

  - CylinderGeometry.

  - CapsuleGeometry.

  - ConeGeometry.

  - LatheGeometry para forma de pera.

  - TubeGeometry para línea de acción y cola/trompa.

- Aplicar material translúcido azul a las masas principales.

- Crear malla alámbrica visible mediante `WireframeGeometry`.

- El maniquí debe tener ojos simples y pupilas.

- Las guías de cabeza deben incluir:

  - Meridiano vertical.

  - Línea de ojos horizontal.

- La cabeza debe tener un grupo pivote independiente para inclinación y giro.

TIPOS DE ESQUEMA

Implementa cinco tipos de construcción funcionales:

1. Bípedo humanoide.

2. Cuadrúpedo.

3. Ave.

4. Objeto animado.

5. Criatura fantástica.

Cada tipo debe reconstruir completamente el maniquí al seleccionarse y conservar los reguladores activos.

FORMAS BASE

Ofrece las siguientes formas para cabeza y masas principales:

- Esfera/círculo.

- Huevo/óvalo.

- Pera.

- Caja.

- Cilindro.

- Cápsula.

- Frijol/riñón.

CONTROLES DEL PANEL

1. CONSTRUCCIÓN — Preston Blair

- Esquema:

  - Bípedo humanoide.

  - Cuadrúpedo.

  - Ave.

  - Objeto animado.

  - Criatura fantástica.

- Tipo de personaje:

  - Recto estándar.

  - Bebé cute.

  - Cómico.

  - Rudo/villano.

  - Heroico.

- Forma base.

- Altura en cabezas: rango de 2 a 8.5, pasos de 0.5.

- Exageración caricatura: rango de 0 a 100.

2. GESTO Y VOLUMEN — Preston Blair

- Línea de acción:

  - Curva C.

  - Curva S.

  - Recta.

- Intensidad de la línea: rango de 0 a 100.

- Squash & stretch: rango de -100 a 100.

- Peso/balance: rango de 0 a 100, indicando “arriba”, “centrado” o “abajo”.

- Inclinación de cabeza: rango de -40 a 40 grados.

- Giro de cabeza: rango de -60 a 60 grados.

IMPORTANTE PARA LA LÍNEA DE ACCIÓN

- La línea de acción debe ser claramente perceptible.

- Debe generarse a partir de una `CatmullRomCurve3`.

- Debe utilizar `TubeGeometry`.

- Debe tener color naranja/ámbar, opacidad alta, grosor visible y un punto/nodo de inicio.

- Debe renderizarse por delante del modelo usando `depthTest: false` si es necesario.

- La selección Curva C, Curva S o Recta debe modificar la geometría de manera evidente.

- El control “Intensidad de la línea” debe mostrar visualmente la variación de curvatura.

- La figura debe inclinarse levemente en respuesta a la línea de acción para reforzar el gesto.

3. RASGOS FÍSICOS

- Tamaño de cabeza: 60 a 160.

- Separación de ojos: 50 a 160.

- Tamaño de ojos: 50 a 180.

- Proyección de hocico: 0 a 100.

- Grosor de miembros: 50 a 170.

- Tamaño de manos/pies: 50 a 200.

- Volumen de torso: 60 a 160.

4. ATRIBUTOS INSERTABLES

Crear botones tipo toggle para añadir o retirar:

- Orejas.

- Cuernos.

- Cresta.

- Pico.

- Trompa.

- Melena.

- Cejas.

- Colmillos.

- Alas.

- Joroba.

- Panza.

- Cola.

Los atributos deben anclarse dinámicamente a cabeza, torso o cadera según corresponda. Deben poder acumularse y eliminarse sin recargar la página.

5. CAPAS

Crear botones toggle para:

- Malla.

- Retícula.

- Línea de acción.

- Guías de cabeza.

- Giro automático.

- Sombra.

- Silueta.

- Gesto animado.

COMPORTAMIENTO DE CAPAS

- Malla: muestra u oculta wireframes.

- Retícula: muestra u oculta anillos de proporción por cabeza.

- Línea de acción: muestra u oculta la curva naranja.

- Guías de cabeza: muestra u oculta meridiano y línea de ojos.

- Giro: activa o pausa el giro lento de la escena.

- Sombra: activa o desactiva sombras.

- Silueta: reemplaza masas por un material claro opaco y oculta la malla.

- Gesto animado: aplica un bucle de rebote y squash/stretch suave.

PRESETS

Implementa presets que actualicen estado e interfaz:

- Recto estándar: aproximadamente 6 cabezas.

- Bebé cute: aproximadamente 2.5 cabezas, cabeza grande y extremidades suaves.

- Cómico: aproximadamente 4.5 cabezas y exageración moderada.

- Rudo/villano: torso amplio, extremidades gruesas y cabeza menor.

- Heroico: aproximadamente 8 cabezas, torso equilibrado y extremidades más estilizadas.

ARQUITECTURA DEL CÓDIGO

- Centraliza todos los valores en un objeto `estado`.

- Implementa una función `construir()` que:

  1. Limpie los grupos actuales.

  2. Recalcule proporciones.

  3. Construya el tipo seleccionado.

  4. Dibuje la retícula de cabezas.

  5. Dibuje la línea de acción.

  6. Inserte atributos activos.

  7. Aplique capas, transformaciones y HUD.

- Implementa funciones reutilizables:

  - `masa()`

  - `masaBase()`

  - `miembro()`

  - `guiasCabeza()`

  - `rostro()`

  - `iniciarCabeza()`

  - `finalizarCabeza()`

  - `aplicarCapas()`

  - `aplicarTransform()`

  - `actualizarHUD()`

  - `syncUI()`

- No redeclarar la misma variable para el contenedor HTML y el grupo Three.js:

  - Usa `$container` para el elemento HTML.

  - Usa `escenaGrupo` o `grupoEscena` para el grupo Three.js.

- Verifica que todos los objetos y referencias de animación usen el grupo Three.js correcto.

- Si usas Anime.js para el giro, anima `escenaGrupo`, no el elemento HTML.

- Incluye manejo de error si WebGL no puede inicializarse.

- Muestra un mensaje si las librerías CDN no cargan o no se crea el canvas.

ANIMACIÓN

- Usa Anime.js para:

  - Rotación continua de `escenaGrupo`.

  - Gesto animado con proxy numérico y actualización de escala del maniquí.

- La rotación automática debe poder pausarse con el botón “Giro”.

- La animación de gesto debe poder activarse y pausarse con el botón “Gesto animado”.

- Renderiza continuamente la escena con un timer o un bucle `requestAnimationFrame`.

ACCESIBILIDAD

- Agrega etiquetas `aria-label` a controles importantes.

- El canvas debe incluir:

  `role="img"`

  y una descripción de uso para rotación y zoom.

- Garantiza contraste legible para textos, etiquetas, botones y selects.

- Incluye estilos `:focus-visible`.

RESPONSIVE

- Escritorio: panel a la derecha, encabezado superior izquierdo, footer inferior.

- Ancho menor a 820 px: panel de ancho completo con márgenes laterales.

- Ancho menor a 700 px: panel fijo inferior con scroll interno; ocultar información secundaria si es necesario.

- El lienzo 3D debe ocupar toda la pantalla en todos los tamaños.

CRITERIOS DE ACEPTACIÓN

- Al cargar, se ve un maniquí 3D bípedo completo.

- El canvas aparece sin errores de JavaScript.

- Se puede arrastrar para rotar y usar rueda para zoom.

- El panel aparece al lado derecho en escritorio.

- Las opciones de “Esquema”, “Tipo de personaje”, “Forma base” y demás desplegables son legibles.

- Curva C, Curva S y Recta producen diferencias visibles.

- Al subir “Intensidad de la línea”, la curvatura se hace más evidente.

- Los botones de capas funcionan.

- Los atributos se añaden y se eliminan.

- El logo IDC aparece abajo a la izquierda.

- El texto “Modelo diseñado para uso educativo” aparece junto al logo.

- El diseño tiene una apariencia profesional, didáctica y clara.