Mar. 10, 2025

Trainingsdaten in 3D

Webbasierte 3D-Grafiken für Fitnessdaten erkunden

Während meiner Runden durchs Dorf kam mir die Idee, meine Trainingsdaten mit ThreeJS in einer dynamischen 3D-Darstellung zu visualisieren. Lesen Sie weiter, um zu sehen, was ich erstellt habe – es ist noch in Arbeit, aber eine spannende Auseinandersetzung mit dem Konzept.

Ich erforsche Möglichkeiten zur Visualisierung von Trainingsdaten und nutze Webtechnologien für die Kompatibilität über verschiedene Geräte hinweg für Gran Fondo, meine Lauf- und Fahrrad-App. ThreeJS, ein 3D-Rendering-Tool für Browser, funktioniert sowohl auf großen als auch auf kleinen Bildschirmen einwandfrei. Ich verwende das TCX-Trainingsdatenformat, da es sich für das Parsen mit Standardbrowser- und Webtechnologie eignet. Für dieses Projekt habe ich eine aufgezeichnete Sitzung von meinem Lauf am 9. März verwendet – meine Standard-1,8-KM-Runde um das Dorf, sechsmal wiederholt (insgesamt 11 KM). Ich mag diese Strecke; sie hat wenig Verkehr und Störungen, so dass ich mich auf den Lauf konzentrieren kann. Ich habe die TCX-Daten mit der RunnerUp-App gesammelt; sie erfüllt ihren Zweck, sieht aber etwas veraltet aus und es fehlt an interaktiver Analyse und Erforschung der Trainingsdaten.

Als Proof of Concept zur Erforschung der 3D-Darstellung habe ich einen Prototyp erstellt, der die TCX-Datei mit den Trainingsdaten lädt. Der Browser analysiert diese Daten und generiert zwei Visualisierungen: ein 3D-Rendering mit ThreeJS und ein lineares 2D-Diagramm, das das Tempo anzeigt. Die Farbe repräsentiert die Geschwindigkeit – grünere Linien zeigen ein schnelleres Tempo an. Die 3D-Visualisierung dreht sich wie eine Schallplatte und zeigt meine sechs Runden um das Dorf, wobei die Form mit der Karte übereinstimmt. Um beide Diagramme zu verknüpfen, habe ich einen weißen Kreis hinzugefügt, der denselben Zeitpunkt auf jedem Diagramm markiert und so die Verbindung zwischen den beiden Ansichten veranschaulicht.

Die Visualisierung ist zu 100 % mit Webtechnologien erstellt, wobei ThreeJS zum Rendern der 3D-Laufstrecke verwendet wird. Ein zweiter HTML5-Canvas überlagert ein 2D-Tempodiagramm, während eine zentrale Animationsschleife beide Szenen mit einem sich bewegenden Punkt verbindet und so die Strecke und das Diagramm synchronisiert. Dies ist Teil einer "laut denkenden" Experimentierphase, in der ich innovative Wege zur Visualisierung von Fitnessdaten erforsche. Es ist eine Demo für meine kommende Gran Fondo App, die darauf abzielt, interaktives Fitnesstracking mit reichhaltigen, ansprechenden Visualisierungen zu verbessern.

Testen Sie die Visualisierung auf Ihrem eigenen Computer, indem Sie diese Seite öffnen: demo time Bitte beachten Sie, dass dies keine ausgefeilte Demo ist, sie ist "frisch von der Werkbank" und funktioniert hauptsächlich gut bei Querformat-Fensterausrichtungen. Zukünftige Versionen werden viel mehr Feinschliff haben, damit alle Elemente in ein responsives Design passen.

Die Gran Fondo App wird Herzfrequenz, Trittfrequenz und Leistung für tiefere Einblicke enthalten. Die Interaktivität wird eine berührungsbasierte Drehung des 3D-Diagramms und das Zoomen in Details ermöglichen. Mein Ziel ist es, die Trainingsanalyse für Sportler, die eine umfassende Sicht auf ihre Leistung wünschen, immersiver, intuitiver und ansprechender zu gestalten.

Fazit

Experimentieren ist ein entscheidender Teil des Softwaredesigns – es ermöglicht Ihnen, Ideen zu testen, Konzepte zu verfeinern und Feedback von anderen einzuholen. Diese 3D-Trainingsvisualisierung ist ein Beispiel dafür. Es gibt noch viel mehr zu entdecken. Bleiben Sie dran an diesem Blog für zukünftige Updates, während ich Gran Fondo weiterentwickle!