StadiView is a procedural 3D football stadium concept demo that lets users explore a fully generated stadium, select seats, and preview the view from each seat.

Stars

349

7-day growth

+55

Forks

68

Open issues

0

License

NOASSERTION

Last updated

2026-07-18

Why it is worth attention

It demonstrates a fully procedural stadium with no imported 3D models, efficient seat rendering via instancing, and animated first-person seat previews, all built as a self-contained HTML experience with Three.js and GSAP.

Who it is for

  • Web developers interested in procedural 3D generation
  • Football fans who want to explore stadium seat views virtually
  • UX/UI designers exploring interactive 3D interfaces for ticketing
  • Creative technologists prototyping stadium or venue experiences

Use cases

  • Pre‑purchase seat view exploration for simulated ticketing demos
  • Learning how to build procedural 3D environments with Three.js
  • Prototyping interactive stadium maps with seat selection and camera flights
  • Showcasing efficient instancing techniques for rendering thousands of objects

Strengths

  • Fully procedural stadium generation without any external 3D assets
  • Thousands of individually selectable seats rendered efficiently with instancing
  • Smooth animated camera flights and first‑person seat previews
  • Self‑contained in a single index.html, easy to run locally with minimal setup

Considerations

  • A concept demo – ticketing data (pricing, availability, checkout) is simulated, not real
  • Licensed under PolyForm Noncommercial 1.0.0, not OSI‑approved open source, and commercial use requires a separate license
  • Limited to a single stadium concept; no customization or editing tools provided

README quick start

StadiView

Experience every seat before match day.

StadiView is an interactive, procedural 3D football stadium concept. Explore the stadium, select from thousands of generated seats, and fly into a first person preview of the view from each one.

[!NOTE] StadiView is a concept demo. The fixture, prices, seat availability, checkout, and other ticketing data are simulated; no real tickets are sold through this project.

Highlights

  • A fully procedural stadium with no imported 3D models
  • Thousands of individually selectable seats rendered efficiently with instancing
  • Animated camera flights and first person seat views
  • Generated seat previews, pricing, availability, tiers, blocks, and benefits
  • Animated players, ball, crowd, lighting, scoreboards, and pitch side displays
  • Stadium overview, mini map, orbit controls, keyboard support, and reduced motion handling
  • A self contained experience in index.html, powered by Three.js and GSAP

Try it locally

npm install
npm run dev

Then open the local address shown by Vite.

Controls

ActionControl
Rotate around the stadiumClick or touch and drag
ZoomMouse wheel or on screen controls
Preview a seatClick a seat
Look around from a seatDrag while in seat view
Leave seat viewPress Esc or use “Back to stadium”
Confirm the demo selectionPress Enter or use “Grab seat”

Support the project

If StadiView sparked an idea or you would like to support more experimental, vibe coded projects like this, you can buy me a coffee through PayPal. No pressure. The best support is enjoying the project and sharing it with someone who might like it. ☕

Licensing

StadiView is available under the PolyForm Noncommercial License 1.0.0. You may study, share, and adapt it for permitted noncommercial purposes while keeping the required copyright and license notices.

Commercial use requires a separate commercial license. This includes use in a paid product, client project, ticketing platform, stadium or club experience, or other bus

Description

A 3D football stadium to visualize where you sit in the seat before you buy it

Related repositories

Similar projects matched by category, topics, and programming language.

osama-fawad
osama-fawad GitHub avatar

Pekingman

Pekingman is a multimodal agent system that integrates perception, long-term memory, human-like reasoning, emotional consistency, and real-time action to create believable NPC behavior.

HTML
933
syabro
syabro GitHub avatar

neat-annotations

A CSS-only library for adding hand-drawn arrows and handwritten labels to any webpage using a single self-contained stylesheet, no JavaScript or build tools required.

HTML
378
xiaohuailabs
xiaohuailabs GitHub avatar

xiaohu-ip-studio

Xiaohu IP Studio is an open-source Agent Skill that provides a Chinese article illustration methodology with 31 hand-drawn original IP characters, enabling AI agents to automatically generate consistent, character-driven illustrations for articles.

HTML
254