# Show HN: Three.js로 만든 축구 패스 시각화 도구

> Clean Markdown view of GeekNews topic #16086. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=16086](https://news.hada.io/topic?id=16086)
- GeekNews Markdown: [https://news.hada.io/topic/16086.md](https://news.hada.io/topic/16086.md)
- Type: GN+
- Author: [neo](https://news.hada.io/@neo)
- Published: 2024-07-30T10:02:06+09:00
- Updated: 2024-07-30T10:02:06+09:00
- Original source: [statsbomb-3d-viz.vercel.app](https://statsbomb-3d-viz.vercel.app/)
- Points: 1
- Comments: 1

## Topic Body

- 이벤트가 선택되지 않음
- 필터 적용
- 필터 지우기
- 카메라 리셋
- StatsBomb 3D 시각화 도구
- StatsBomb 이벤트 데이터 파일의 URL을 붙여넣기
- 데이터 로드
- 예제 로드
- 예시: @c_mnzs / gh: @carlos-menezes

### GN⁺의 정리
- 이 도구는 StatsBomb 이벤트 데이터를 3D로 시각화할 수 있는 기능을 제공함
- 사용자는 이벤트 데이터 파일의 URL을 입력하여 데이터를 로드할 수 있음
- 필터를 적용하거나 지우는 기능을 통해 원하는 데이터를 선택할 수 있음
- 카메라 리셋 기능을 통해 시각화된 데이터를 초기 상태로 되돌릴 수 있음
- 이 도구는 데이터 분석과 시각화에 관심 있는 사람들에게 유용할 수 있음

## Comments



### Comment 27680

- Author: neo
- Created: 2024-07-30T10:02:06+09:00
- Points: 1

###### [Hacker News 의견](https://news.ycombinator.com/item?id=41095839) 
- 무료 데이터를 활용한 멋진 프로젝트를 보는 것은 항상 즐거움
  - 수천 개의 무료 축구 경기가 GitHub에 있음
  - Lionel Messi와 Tom Brady의 경기 데이터도 수집 중임

- 2D 시각화를 좋아함
  - 예전에 PUBG 분석 도구를 만들었음
  - 프로 축구팀도 비슷한 도구를 사용하고 있을지 궁금함

- 프로젝트를 통해 three.js를 배우고 있음
  - deck.gl이나 kepler.gl도 고려할 만함
  - 더 높은 수준의 시각화와 성능 최적화를 제공함
  - 빠른 프로토타이핑이 가능함

- 인터페이스가 훌륭함
  - raw json을 직접 찾아서 변경할 수 있음
  - three.js 사용 이유가 명확하지 않음
  - whoscored의 패스 경로가 더 직관적임

- 선수들의 포지션이 경기에서 어떻게 반영되는지 흥미로움
  - Bayer Leverkusen vs. Werder Bremen 경기를 예로 든 것이 좋음

- 프로젝트가 멋짐
  - 시간 기반 애니메이션 추가를 요청함
  - 데이터를 탐색하는 것이 첫 단계임

- 색상의 의미가 궁금함
  - 패스의 방향과 속도를 표시하는 방법 제안
  - 각 선수와 팀의 통계 요약을 제공하는 것도 좋음

- 시간 순서대로 패스를 재생할 수 있으면 좋겠음

- "Load Example" 기능이 유용했음
  - 실시간 게임 카메라와 결합하면 강력할 것임

- 파일 로드에 실패함
  - 다양한 URL 형식을 시도했으나 작동하지 않음
  - 예제 형식이나 오류 메시지 개선이 필요함
  - 메인 엔진이 완성된 후 더 많은 필터가 추가되면 좋겠음