Bio3D es un visor 3D interactivo controlado mediante seguimiento de mano en tiempo real, ejecutado completamente en el navegador usando Three.js y MediaPipe Hands.
Permite rotar, hacer zoom y desplazar modelos 3D utilizando únicamente gestos naturales con la mano, sin dispositivos adicionales.
Todos los derechos reservados
Este proyecto no es Open-Source y fue desarrollado con fines demostrativos y experimentales.
Bio3D nace como un experimento técnico con un enfoque claro:
Explorar la interacción humano-computadora basada en visión artificial directamente desde el navegador.
Demuestra que es posible crear experiencias 3D avanzadas y control gestual en tiempo real sin backend, sin instalaciones y sin software adicional.
El sistema está dividido en tres bloques principales:
- Motor: Three.js
- Cámara perspectiva
- Iluminación dinámica
- Carga de modelos
.glb/.gltf - Normalización automática de escala
- Sistema de suavizado (LERP)
- Motor: MediaPipe Hands
- Detección en tiempo real desde webcam
- Modelo ligero (
modelComplexity: 0) - Una sola mano activa
- Mano abierta → Rotación + Zoom
- Puño cerrado → Paneo (Arrastrar)
- Zoom basado en tamaño relativo de la mano
- Movimiento suavizado mediante interpolación física
Todo ocurre en el navegador.
Sin servidores.
Sin almacenamiento externo.
Sin procesamiento en la nube.
- La posición horizontal controla rotación Y
- La posición vertical controla rotación X
- El tamaño de la mano controla la distancia de cámara
Zoom calculado usando:
Distancia muñeca → punta del dedo medio
Mano más grande = más cerca de la cámara
Mano más pequeña = más lejos
Cuando el sistema detecta que el meñique está plegado:
- Se activa modo desplazamiento
- Se mueve el grupo 3D en eje X/Y
- Se desactiva rotación y zoom
Formatos soportados:
.glb.gltf
Proceso automático:
- Eliminación del modelo anterior
- Cálculo del bounding box
- Normalización de escala
- Centrado del modelo
- Inserción en el grupo principal
Incluye un modelo base si no se carga ningún archivo.
Incluye:
- HUD de estado
- Indicador de gesto activo
- Visualización del esqueleto de la mano
- Indicador porcentual de tamaño de mano
- Botón para cargar modelo
- Botón para resetear vista
El canvas de MediaPipe se superpone al render 3D con transparencia parcial.
- Modelo de detección en modo ligero
- Render optimizado con antialias
- Interpolación suave para evitar jitter
- Vanilla JS + ES Modules
- No se almacenan imágenes
- No se envían datos a servidores
- No hay backend
- No hay cuentas
- Procesamiento completamente local
- Webcam funcional
- 2GB RAM recomendados
- Navegador actualizado
Navegadores recomendados:
- ✅ Google Chrome
- ✅ Microsoft Edge
- ✅ Safari
- ✅ Firefox
- ✅ Vivaldi
- Estado: Terminado
- Naturaleza: Experimental
- Enfoque: Investigación en interacción 3D basada en visión
- Three.js --- Renderizado 3D
- MediaPipe Hands --- Seguimiento de mano
- WebGL --- Aceleración gráfica en navegador
No, se cargan temporalmente en memoria.
No. El procesamiento es temporal y local.