{ "id": 36897, "slug": "2025-03-10_trainingsdaten-in-3d", "url": "https://agents.willem.com/de/posts/2025-03-10_trainingsdaten-in-3d/", "source_url": "https://willem.com/de/2025-03-10_trainingsdaten-in-3d/", "language": "de", "date": "2025-03-10", "published": "2025-03-10T00:00:00+01:00", "created": "2025-06-26T21:29:41.554000+02:00", "updated": "2026-10-20T09:21:55.458000+02:00", "title": "Trainingsdaten in 3D", "subtitle": "Webbasierte 3D-Grafik für Fitnessdaten erkunden", "summary": "Auf meinen Runden durchs Dorf kam mir der Gedanke, mit ThreeJS eine dynamische 3D-Darstellung meiner Trainingsdaten zu bauen. Lies weiter und sieh, was dabei entstanden ist. Es ist noch in Arbeit, aber ein spannender Versuch, das Konzept auszuloten.", "topics": [ "data", "gran fondo", "running", "web" ], "author": { "name": "Willem L. Middelkoop", "url": "https://willem.com" }, "provenance": { "kind": "model", "method": "Gemini translation (2025), reviewed and corrected by Claude Sonnet (20 Oct 2026) against a glossary and hunspell", "date": "2026-10-20", "reviewed_by_native_reader": false, "language": "de", "source_language": "en" }, "translations": [ { "language": "en", "title": "Workout data in 3D", "url": "https://agents.willem.com/en/posts/2025-03-10_workout-data-in-3d/", "source_url": "https://willem.com/en/2025-03-10_workout-data-in-3d/" }, { "language": "nl", "title": "Trainingsdata in 3D", "url": "https://agents.willem.com/nl/posts/2025-03-10_trainingsdata-in-3d/", "source_url": "https://willem.com/nl/2025-03-10_trainingsdata-in-3d/" }, { "language": "es", "title": "Datos de entrenamiento en 3D", "url": "https://agents.willem.com/es/posts/2025-03-10_datos-de-entrenamiento-en-3d/", "source_url": "https://willem.com/es/2025-03-10_datos-de-entrenamiento-en-3d/" }, { "language": "fr", "title": "Données d'entraînement en 3D", "url": "https://agents.willem.com/fr/posts/2025-03-10_donnees-d-entrainement-en-3d/", "source_url": "https://willem.com/fr/2025-03-10_donnees-d-entrainement-en-3d/" }, { "language": "it", "title": "Dati di allenamento in 3D", "url": "https://agents.willem.com/it/posts/2025-03-10_dati-di-allenamento-in-3d/", "source_url": "https://willem.com/it/2025-03-10_dati-di-allenamento-in-3d/" }, { "language": "pt", "title": "Dados de treino em 3D", "url": "https://agents.willem.com/pt/posts/2025-03-10_dados-de-treino-em-3d/", "source_url": "https://willem.com/pt/2025-03-10_dados-de-treino-em-3d/" }, { "language": "pap", "title": "Data di Entrenamentu den 3D", "url": "https://agents.willem.com/pap/posts/2025-03-10_data-di-entrenamentu-den-3d/", "source_url": "https://willem.com/pap/2025-03-10_data-di-entrenamentu-den-3d/" }, { "language": "fy", "title": "Trainingsgegevens yn 3D", "url": "https://agents.willem.com/fy/posts/2025-03-10_trainingsgegevens-yn-3d/", "source_url": "https://willem.com/fy/2025-03-10_trainingsgegevens-yn-3d/" } ], "image": "https://willem.com/global/images/9121ad1c6c99.webp", "image_width": 2560, "images": [ { "url": "https://willem.com/global/images/54e7cade7a7a.webp", "description": "RunnerUp: hat meinen 11-KM-Lauf aufgezeichnet und eine TCX-Datei mit den Trainingsdaten erzeugt", "manager_file": "148-bf2d6faf6057f115dc72e82d984e71359f16b48d8c42b4b41c2ee918cf46b556_ContentAsPost_36897_images-1.png" } ], "text": "Ich suche nach Wegen, Trainingsdaten zu visualisieren, und setze dafür auf Webtechnologien, damit alles auf allen Geräten funktioniert. Das Ganze ist für Gran_Fondo (https://willem.com/en/2025-03-06_open-sourcing-gran-fondo/), meine Lauf- und Rad-App. ThreeJS (https://threejs.org/), ein 3D-Rendering-Werkzeug für Browser, läuft auf großen wie kleinen Bildschirmen reibungslos. Ich verwende das TCX-Format für Trainingsdaten, weil es sich mit Standard-Browser- und Webtechnik gut einlesen lässt. Für dieses Projekt habe ich eine aufgezeichnete Einheit von meinem Lauf am 9. März genommen: meine Standardrunde ums Dorf, 1,8 KM lang, sechsmal identisch gelaufen (insgesamt 11 KM). Ich mag diese Strecke, es gibt wenig Verkehr und Ablenkung, sodass ich mich ganz aufs Laufen konzentrieren kann. Die TCX-Daten habe ich mit der App RunnerUp aufgezeichnet. Sie erfüllt ihren Zweck, wirkt aber etwas altbacken und bietet keine interaktive Analyse und Erkundung der Trainingsdaten.\nAls Proof of Concept für die 3D-Darstellung habe ich einen Prototyp gebaut, der die TCX-Datei mit den Trainingsdaten lädt. Der Browser liest die Daten ein und erzeugt zwei Visualisierungen: ein 3D-Rendering mit ThreeJS und eine lineare 2D-Grafik des Tempos. Die Farbe steht für die Geschwindigkeit: Je grüner die Linie, desto schneller das Tempo. Die 3D-Visualisierung dreht sich wie eine Schallplatte und zeigt meine sechs Runden ums Dorf, deren Form der Karte entspricht. Damit man beide Grafiken miteinander verbinden kann, habe ich einen weißen Kreis eingebaut, der in beiden denselben Zeitpunkt markiert und so den Zusammenhang der zwei Ansichten sichtbar macht.\n
Demo des Gran Fondo 3D-Renderings: eine interaktive Visualisierung von Trainingsdaten mit ThreeJS
\nDie Visualisierung besteht zu 100 % aus Webtechnologien: ThreeJS rendert die 3D-Laufstrecke. Ein zweites HTML5-Canvas legt eine 2D-Tempografik darüber, und eine zentrale Animationsschleife verbindet beide Szenen mit einem wandernden Punkt, der Strecke und Grafik synchron hält. Das gehört zu einer Experimentierphase des \"lauten Denkens\", in der ich neue Wege suche, Fitnessdaten sichtbar zu machen. Es ist eine Demo für meine kommende Gran-Fondo-App, die das interaktive Fitnesstracking durch reichhaltige, ansprechende Visualisierungen verbessern soll.\nProbier die Visualisierung auf deinem eigenen Computer aus, indem du diese Seite öffnest: demo_time (https://willem.com/etcetera/2025-03-10_GranFondo-3D-rendering/) Bedenke, dass das keine ausgefeilte Demo ist, sondern \"frisch von der Werkbank\". Sie funktioniert vor allem im Querformat gut. Spätere Versionen bekommen viel mehr Feinschliff, damit sich alle Elemente in ein responsives Design fügen.\nDie Gran-Fondo-App bekommt Herzfrequenz, Trittfrequenz und Leistung für tiefere Einblicke. Dank Interaktion kannst du die 3D-Grafik per Touch drehen und in Details hineinzoomen. Mein Ziel ist es, die Trainingsanalyse für alle, die ein umfassendes Bild ihrer Leistung wollen, immersiver, intuitiver und spannender zu machen.\nFazit\nExperimentieren ist ein wichtiger Teil des Softwaredesigns: Du kannst Ideen testen, Konzepte verfeinern und Rückmeldungen von anderen einholen. Diese 3D-Visualisierung von Trainingsdaten ist ein Beispiel dafür. Es gibt noch viel zu entdecken. Bleib dran an diesem Blog, ich entwickle Gran Fondo weiter und berichte bald mehr!", "word_count": 467, "markdown_url": "https://agents.willem.com/de/posts/2025-03-10_trainingsdaten-in-3d/post.md" }