--- title: "Datos de entrenamiento en 3D" date: 2025-03-10 language: es topics: ["data", "gran fondo", "running", "web"] source_url: https://willem.com/es/2025-03-10_datos-de-entrenamiento-en-3d/ --- # Datos de entrenamiento en 3D *Explorando los gráficos 3D en la web para datos de fitness* > Mientras daba mis vueltas por el pueblo corriendo, se me ocurrió que podría usar ThreeJS para crear una representación 3D dinámica de mis datos de entrenamiento. Sigue leyendo para ver lo que he hecho: es un trabajo en curso, pero sirve como una exploración emocionante del concepto. Estoy explorando formas de visualizar datos de entrenamiento, y para ello recurro a tecnologías web que funcionan en cualquier dispositivo, para Gran_Fondo (https://willem.com/en/2025-03-06_open-sourcing-gran-fondo/), mi app de running y ciclismo. ThreeJS (https://threejs.org/), una herramienta de renderizado 3D para navegadores, funciona igual de bien en pantallas grandes y pequeñas. Uso el formato de datos de entrenamiento TCX porque se puede leer sin problemas con la tecnología web y de navegador estándar. Para este proyecto aproveché una sesión grabada de mi carrera del 9 de marzo: mi circuito habitual de 1,8 km alrededor del pueblo, repetido 6 veces idénticas (11 km en total). Me gusta esta ruta: apenas hay tráfico ni distracciones y puedo concentrarme en correr. Recogí los datos TCX con la app RunnerUp; cumple su función, pero se ve un poco anticuada y no permite analizar ni explorar los datos del entrenamiento de forma interactiva. ![RunnerUP: grabó mi carrera de 11K y generó un archivo TCX con los datos del entrenamiento](https://willem.com/global/images/54e7cade7a7a.webp) Como prueba de concepto para explorar la presentación en 3D, construí un prototipo que carga el archivo TCX con los datos del entrenamiento. El navegador lee esos datos y genera dos visualizaciones: un render 3D con ThreeJS y un gráfico lineal 2D que muestra el ritmo. El color representa la velocidad: cuanto más verde la línea, más rápido el ritmo. La visualización 3D gira como un disco de vinilo y revela mis seis vueltas al pueblo, con una forma que coincide con el mapa. Para enlazar los dos gráficos añadí un círculo blanco que marca el mismo instante en cada uno, y así se ve mejor la conexión entre ambas vistas.
Demo del renderizado 3D de Gran Fondo: una visualización interactiva de datos de entrenamiento con ThreeJS
 La visualización está hecha al 100 % con tecnologías web: ThreeJS dibuja en 3D el recorrido de la carrera. Un segundo canvas HTML5 superpone un gráfico 2D del ritmo, y un único bucle de animación une las dos escenas con un punto que avanza, de modo que ruta y gráfico van sincronizados. Esto forma parte de una fase de experimentación en la que "pienso en voz alta" y exploro formas innovadoras de visualizar datos de fitness. Es una demo de mi futura app Gran Fondo, que quiere mejorar el seguimiento interactivo del ejercicio con visualizaciones ricas y atractivas. Puedes ver la visualización en tu propio ordenador abriendo esta página: ver_la_demo (https://willem.com/etcetera/2025-03-10_GranFondo-3D-rendering/) Ojo: no es una demo pulida, está "recién salida del banco" y funciona sobre todo bien con la ventana en horizontal. Las versiones futuras tendrán mucho más acabado para que todos los elementos encajen en un diseño adaptable. La app Gran Fondo incluirá frecuencia cardíaca, cadencia y potencia para ofrecer datos más detallados. Con la interactividad podrás girar el gráfico 3D con el dedo y acercarte a los detalles. Mi objetivo es que analizar un entrenamiento sea más inmersivo, intuitivo y atractivo para los deportistas que quieren una visión completa de su rendimiento. ## Conclusión Experimentar es una parte esencial del diseño de software: te permite probar ideas, pulir conceptos y recoger opiniones de otros. Esta visualización 3D de entrenamientos es un ejemplo. Queda mucho por explorar. ¡Sigue atento a este blog para futuras novedades mientras continúo desarrollando Gran Fondo!