为什么值得关注

它完全程序化生成体育场，无需导入任何 3D 模型，通过实例化高效渲染数千个座位，并提供动画化的一人称座位预览，全部基于 Three.js 和 GSAP 构建于单个 HTML 文件中。

适合谁使用

对程序化 3D 生成感兴趣的 Web 开发者
希望在购票前虚拟体验座位视角的足球爱好者
探索交互式 3D 票务界面的用户体验/界面设计师
原型化体育场或场馆体验的创意技术人员

典型使用场景

模拟票务演示中的购票前座位视角探索
学习使用 Three.js 构建程序化 3D 环境
原型化带有座位选择与摄像机飞行的交互式体育场地图
展示通过实例化高效渲染数千个对象的技巧

项目优势

完全程序化生成体育场，无需外部 3D 资产
通过实例化高效渲染数千个独立可选的座位
流畅的动画化摄像机飞行与第一人称座位预览
自包含在单个 index.html 中，本地运行简单便捷

使用前须知

概念演示 – 票务数据（价格、可用性、结算）均为模拟，非真实信息
采用 PolyForm Noncommercial 1.0.0 许可证，非 OSI 批准的开源项目，商业使用需单独许可
仅包含单个体育场概念，未提供定制或编辑工具

README 快速开始

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

Action	Control
Rotate around the stadium	Click or touch and drag
Zoom	Mouse wheel or on screen controls
Preview a seat	Click a seat
Look around from a seat	Drag while in seat view
Leave seat view	Press Esc or use “Back to stadium”
Confirm the demo selection	Press 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

项目描述

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

football-stadium