{ "id": 36897, "slug": "2025-03-10_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": "pt", "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": "Dados de treino em 3D", "subtitle": "Explorar gráficos 3D na web para dados de fitness", "summary": "Enquanto dava as minhas voltas à aldeia a correr, ocorreu-me que podia usar o ThreeJS para criar uma representação 3D dinâmica dos dados dos meus treinos. Lê o que criei: é um trabalho em curso, mas serve como uma exploração entusiasmante do conceito.", "topics": [ "data", "gran fondo", "running", "web" ], "author": { "name": "Willem L. Middelkoop", "url": "https://willem.com" }, "provenance": { "kind": "model", "method": "Claude Sonnet, two passes (translation, then proofreading) against a glossary and hunspell (pt_PT)", "date": "2026-10-20", "reviewed_by_native_reader": false, "language": "pt", "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": "de", "title": "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": "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": "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: gravou a minha corrida de 11K e produziu o ficheiro TCX com os dados do treino", "manager_file": "148-bf2d6faf6057f115dc72e82d984e71359f16b48d8c42b4b41c2ee918cf46b556_ContentAsPost_36897_images-1.png" } ], "text": "Ando a explorar formas de visualizar dados de treino, aproveitando as tecnologias web para garantir compatibilidade entre dispositivos no Gran_Fondo (https://willem.com/en/2025-03-06_open-sourcing-gran-fondo/), a minha app de corrida e ciclismo. O ThreeJS (https://threejs.org/), uma ferramenta de renderização 3D para navegadores, funciona na perfeição tanto em ecrãs grandes como pequenos. Uso o formato de dados de treino TCX porque é adequado para ser lido com tecnologia web e de navegador normal. Para este projeto, usei uma sessão gravada da minha corrida de 9 de março: o meu circuito habitual de 1,8KM à volta da aldeia, repetido 6 vezes iguais (11KM no total). Gosto deste percurso; tem pouco trânsito e poucas perturbações, o que me deixa concentrar na corrida. Recolhi os dados TCX com a app RunnerUp; cumpre o seu papel, mas parece um pouco datada e não permite análise nem exploração interativa dos dados de treino.\nComo prova de conceito para explorar a apresentação em 3D, construí um protótipo que carrega o ficheiro TCX com os dados do treino. O navegador lê estes dados e gera duas visualizações: uma renderização 3D com o ThreeJS e um gráfico linear 2D com o ritmo. A cor representa a velocidade: linhas mais verdes indicam um ritmo mais rápido. A visualização 3D roda como um disco de vinil e revela as minhas seis voltas à aldeia, com uma forma igual à do mapa. Para ligar os dois gráficos, acrescentei um círculo branco que marca o mesmo momento em cada um, ajudando a ilustrar a ligação entre as duas vistas.\n
Demonstração da renderização 3D do Gran Fondo: uma visualização interativa de dados de treino com o ThreeJS
\nA visualização é construída a 100% com tecnologias web, usando o ThreeJS para renderizar o percurso 3D da corrida. Um segundo canvas HTML5 sobrepõe um gráfico 2D do ritmo, enquanto um ciclo de animação centralizado liga as duas cenas com um ponto que percorre tudo, sincronizando o percurso e o gráfico. Isto faz parte de uma fase de experimentação a \"pensar em voz alta\", em que exploro formas inovadoras de visualizar dados de fitness. É uma demonstração para a minha futura app Gran Fondo, com o objetivo de melhorar o registo interativo de atividade física com visualizações ricas e envolventes.\nVê a visualização no teu próprio computador abrindo esta página: hora_da_demo (https://willem.com/etcetera/2025-03-10_GranFondo-3D-rendering/) Repara que não é uma demonstração polida, está \"acabada de sair da bancada\" e funciona sobretudo bem com janelas na horizontal. As versões futuras terão muito mais acabamento, para todos os elementos caberem num desenho responsivo.\nA app Gran Fondo vai incluir frequência cardíaca, cadência e potência para análises mais profundas. A interatividade permitirá rodar o gráfico 3D com o toque e ampliar os detalhes. O meu objetivo é tornar a análise de treinos mais imersiva, intuitiva e envolvente para atletas que querem uma visão completa do seu desempenho.\nConclusão\nA experimentação é uma parte crucial do desenho de software: permite testar ideias, refinar conceitos e recolher opiniões de outras pessoas. Esta visualização 3D de treinos é um exemplo. Há muito mais para explorar. Fica atento a este blogue para novidades enquanto continuo a desenvolver o Gran Fondo!", "word_count": 533, "markdown_url": "https://agents.willem.com/pt/posts/2025-03-10_dados-de-treino-em-3d/post.md" }