Sistema web desplegable

Control facial para rostro robótico con sincronización de piel y mecanismo

Este archivo es una base web autónoma lista para colocar en un servidor. Usa un estado paramétrico compartido para manejar dos vistas: piel externa a la izquierda y estructura mecánica a la derecha. El siguiente salto natural será sustituir estas vistas SVG por una malla 3D real.

Ruta sugerida
1. Validar controles y rangos de movimiento.
2. Conectar estos parámetros a un modelo 3D GLB.
3. Implementar puntos de control reales por región facial.
4. Crear biblioteca de expresiones y animaciones.
5. Integrar, en otra etapa, deformación de piel con pesos por vértice.
Para alojarlo en tu servidor basta con guardar este archivo como index.html o rostro_robotico.html dentro de tu directorio público, por ejemplo /var/www/html/rostro/. No requiere Node ni proceso de compilación para esta fase.

Vista izquierda · piel externa

superficie sincronizada
Esta vista representa la capa externa. Más adelante debe reemplazarse por una malla de piel 3D con deformación suave, pero leyendo exactamente el mismo estado facial.

Vista derecha · modelo robótico

puntos de control mecánicos
Haz clic en los nodos verdes para seleccionar un punto de control y luego ajustarlo con el panel derecho.

Controles paramétricos

Activo: Sonrisa
Recomendación: conserva este modelo de datos aunque después migres a Three.js. El frontend debe seguir teniendo una capa semántica de controles por encima del motor gráfico.

Fase 1 · Servidor web listo

Arranca con esta versión HTML autónoma para validar interacción, biblioteca de expresiones y persistencia básica de configuraciones.

Fase 2 · Backend opcional

Agrega un backend en PHP o Python para guardar poses, usuarios, escenas, secuencias y perfiles de actuadores en MySQL.

Fase 3 · 3D real

Sustituye estas vistas SVG por Three.js con un archivo GLB. Conserva el mismo objeto de estado y los mismos presets.