--- title: "Dati di allenamento in 3D" date: 2025-03-10 language: it topics: ["data", "gran fondo", "running", "web"] source_url: https://willem.com/it/2025-03-10_dati-di-allenamento-in-3d/ --- # Dati di allenamento in 3D *Esplorare la grafica 3D sul web per i dati fitness* > Mentre correvo i miei giri intorno al paese, mi è venuto in mente che potevo usare ThreeJS per creare una rappresentazione 3D dinamica dei miei dati di allenamento. Leggi cosa ho costruito: è un work in progress, ma è un'esplorazione entusiasmante del concetto. Sto esplorando modi per visualizzare i dati di allenamento, usando tecnologie web per la compatibilità tra dispositivi, per Gran_Fondo (https://willem.com/en/2025-03-06_open-sourcing-gran-fondo/), la mia app di corsa e ciclismo. ThreeJS (https://threejs.org/), uno strumento di rendering 3D per i browser, funziona senza problemi sia su schermi grandi che piccoli. Uso il formato TCX per i dati di allenamento perché si presta bene a essere letto con le tecnologie standard del browser e del web. Per questo progetto ho preso una sessione registrata della mia corsa del 9 marzo: il mio solito giro di 1,8KM intorno al paese, ripetuto 6 volte identiche (11KM in tutto). Mi piace questo percorso: poco traffico e poche distrazioni, così posso concentrarmi sulla corsa. Ho raccolto i dati TCX con l'app RunnerUp; fa il suo lavoro ma sembra un po' datata e non permette di analizzare ed esplorare i dati in modo interattivo. ![RunnerUp: ha registrato la mia corsa di 11K e ha prodotto il file TCX con i dati dell'allenamento](https://willem.com/global/images/54e7cade7a7a.webp) Come prova di concetto per esplorare la presentazione in 3D, ho costruito un prototipo che carica il file TCX con i dati dell'allenamento. Il browser li legge e genera due visualizzazioni: un rendering 3D con ThreeJS e un grafico lineare 2D del ritmo. Il colore rappresenta la velocità: più la linea è verde, più il ritmo è veloce. La visualizzazione 3D ruota come un disco in vinile e mostra i miei sei giri intorno al paese, con una forma che corrisponde alla mappa. Per collegare i due grafici ho aggiunto un cerchio bianco che segna lo stesso istante in entrambi, per far capire il legame tra le due viste.
Demo del rendering 3D di Gran Fondo: una visualizzazione interattiva dei dati di allenamento con ThreeJS
 La visualizzazione è fatta al 100% con tecnologie web: ThreeJS disegna il percorso 3D della corsa, un secondo canvas HTML5 sovrappone un grafico 2D del ritmo e un unico ciclo di animazione unisce le due scene con un punto che scorre, tenendo sincronizzati percorso e grafico. Fa parte di una fase di sperimentazione in cui "penso ad alta voce", cercando modi innovativi per visualizzare i dati fitness. È una demo per la mia prossima app Gran Fondo, che punta a migliorare il tracciamento interattivo dell'attività fisica con visualizzazioni ricche e coinvolgenti. Guarda la visualizzazione sul tuo computer aprendo questa pagina: demo (https://willem.com/etcetera/2025-03-10_GranFondo-3D-rendering/) Tieni presente che non è una demo rifinita, è "appena uscita dal banco di lavoro" e funziona bene soprattutto con la finestra in orizzontale. Le versioni future saranno molto più curate, con tutti gli elementi adattati a un design responsive. L'app Gran Fondo includerà frequenza cardiaca, cadenza e potenza per analisi più approfondite. L'interattività permetterà di ruotare il grafico 3D con il tocco e di ingrandire i dettagli. Il mio obiettivo è rendere l'analisi dell'allenamento più immersiva, intuitiva e coinvolgente per gli atleti che vogliono una visione completa delle proprie prestazioni. ## Conclusione La sperimentazione è una parte fondamentale della progettazione del software: ti permette di provare idee, affinare concetti e raccogliere il parere degli altri. Questa visualizzazione 3D dell'allenamento ne è un esempio. C'è ancora molto da esplorare. Resta sintonizzato su questo blog per i prossimi aggiornamenti mentre continuo a sviluppare Gran Fondo!