TP025

Lông Vũ Arena — Sân cầu lông

Sân & CLB cầu lông: VĐV đập cầu dựng 3D từ ảnh với quả cầu bay ra từ vợt, đặt sân theo giờ, phòng thí nghiệm đường cầu mô phỏng đúng khí động học, lớp học và shop vợt.

Điểm nổi bật

VĐV 3D nghiêng theo chuột, quả cầu bay ra từ vợt có vệt sáng và đồng hồ tốc độ đập cầu
Đặt sân: 7 ngày × 8 sân × 17 khung giờ, giá giờ vàng/cuối tuần, tổng tiền, mã đặt sân
Phòng thí nghiệm: đập, phông, bỏ nhỏ, tạt — vận tốc giới hạn 6,8 m/s, báo trong/ngoài/chạm lưới
Lớp học, shop vợt có thông số + thanh sức mạnh, giải đấu đếm ngược, thẻ hội viên; song ngữ

Three.js
Canvas 2D
Motion
Lenis
Vite
GPT Image
Depth Anything V2
Sports
Booking
Physics
AI photography

Trong gói tải về

Toàn bộ source code template (chạy bằng Vite, build ra web tĩnh — host ở bất kỳ đâu)
PROMPT.md — prompt để dựng lại / mở rộng trang bằng AI builder
README.md — hướng dẫn chạy & tuỳ biến (chính là nội dung bên dưới)

Website song ngữ (VI/EN) cho sân cầu lông, CLB thể thao hoặc trung tâm đào tạo: VĐV đập cầu dựng 3D từ ảnh (bản đồ độ sâu) với quả cầu bay ra từ vợt, đặt sân theo giờ, phòng thí nghiệm đường cầu mô phỏng khí động học thật, lớp học, shop vợt, giải đấu và thẻ hội viên.

Chạy thử

Cần Node.js 18+.

npm install
npm run dev       # mở http://localhost:5173
npm run build     # xuất bản tĩnh vào dist/ — upload lên hosting bất kỳ

Mặc định tiếng Việt; thêm ?lang=en để mở tiếng Anh.

Cấu trúc

index.html             Khung trang (mọi section)
src/hero-scene.js      VĐV 3D (depth relief) + quả cầu bay có vệt sáng
src/flight.js          Mô phỏng đường cầu (lực cản ∝ v²) vẽ trên canvas
src/main.js            Đặt sân, phòng thí nghiệm, shop, đếm ngược
src/locales.js         TOÀN BỘ nội dung chữ (vi + en)
src/style.css          Giao diện (biến màu ở :root)
src/relief.js          Ảnh + độ sâu → bề mặt 3D có ánh sáng
src/fx.js + fx.css     Bộ motion: preloader, tách chữ, con trỏ, marquee
public/images/         Ảnh webp (+ player-depth.webp)
asset-prompts.json     Prompt tạo lại từng ảnh bằng AI
scripts/depth-map.mjs  Tạo bản đồ độ sâu cho ảnh mới (chạy local)
PROMPT.md              Prompt dựng lại trang bằng AI builder

Tuỳ biến nhanh

Muốn đổi	Sửa ở
Số sân, khung giờ	`COURTS`, `HOURS` trong `src/main.js`
Giá giờ thường / giờ vàng / cuối tuần	hàm `priceOf()` và `isPeak()`
Kết nối đặt sân thật	thay `taken()` bằng dữ liệu từ API, gửi form `[data-book-form]` lên backend
Cú đánh trong phòng thí nghiệm	bảng `SHOTS` trong `src/flight.js` (vị trí, độ cao, góc, km/h)
Vợt & thông số	mảng `RACKETS` trong `src/main.js`
Vị trí vợt để phóng cầu	`racketUv` trong `src/hero-scene.js`
Màu & font	`:root` trong `src/style.css` + link Google Fonts trong `index.html`

Ảnh & bản đồ độ sâu

Ảnh tạo bằng AI theo prompt trong asset-prompts.json. Thay bằng ảnh thật: giữ tên file, xuất .webp.
Ảnh VĐV cần bản đồ độ sâu player-depth.webp (trắng = gần):

npm i -D @huggingface/transformers sharp
node scripts/depth-map.mjs vdv-moi.png public/images/player-depth.webp

Ghi chú

Thương hiệu, giá và lịch trong template là minh hoạ. Lưới đặt sân hiện mô phỏng ô đã đặt — cần backend để dùng thật.
Thư viện: Three.js (MIT), Motion (MIT), Lenis (MIT), Vite (MIT). Font Google (OFL).