TP036

LỰC — Phòng gym sức mạnh

Website phòng gym với 5 model 3D rơi theo vật lý thật: tạ ấm, tạ tay, hộp whey, bình lắc, bánh tạ đập xuống sàn cao su làm rung màn hình, bấm để hất tung; lịch lớp lọc theo môn, khu tập mở rộng khi rê, tính macro + whey theo mục tiêu.

Điểm nổi bật

Intro chữ L–Ự–C đập xuống nảy từng chữ làm rung màn hình, rồi máy quay lao xuyên qua chữ C vào trang — không có số %
Hero vật lý: 5 dụng cụ rơi xuống sàn, va chạm, lăn, đổ bóng dưới đèn rọi; bấm để hất tung, va mạnh thì rung camera và hiện vận tốc va chạm
Lịch lớp 7 ngày × 6 khung giờ lọc theo môn, 4 khu tập dạng tấm mở rộng khi rê chuột
Tính dinh dưỡng: mục tiêu × cân nặng × số buổi → kcal, đạm/tinh bột/béo (vòng SVG), số muỗng whey kèm model 3D; HLV, 3 gói hội viên; song ngữ

Three.js
cannon-es
GLTF + meshopt
SVG
Motion
Lenis
Vite
Tripo 3D
GPT Image
3D models
Physics
Fitness
Calculator

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 phòng gym, CLB thể hình, thương hiệu thực phẩm bổ sung: dụng cụ tập 3D rơi theo vật lý thật, lịch lớp, khu tập, tính dinh dưỡng, huấn luyện viên và gói hội viên.

Chạy thử

npm install
npm run dev       # http://localhost:5173
npm run build     # xuất bản tĩnh vào dist/

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

Model 3D

Model	Dùng ở
`kettlebell`, `dumbbell`, `protein-tub`, `shaker`, `plate`	Hero vật lý
`protein-tub`, `shaker`	Khối dinh dưỡng

Va chạm dùng hộp / trụ tính theo kích thước model (KIT trong src/drop-zone.js: kích thước, khối lượng, loại collider).
Chưa có GLB → dùng ảnh + bản đồ độ sâu; bản tạm chỉ lăn trong mặt phẳng màn hình để không lộ độ mỏng.
Tạo model mới từ ảnh: dùng Image to 3D của Meshy (bật texture PBR), tải về định dạng GLB.
Thay model: đặt GLB gốc vào assets-in/models/<tên>.glb, rồi:

npm i -D @gltf-transform/core @gltf-transform/extensions @gltf-transform/functions meshoptimizer sharp
node scripts/optimize-models.mjs

Cấu trúc

src/drop-zone.js  Hero: thế giới cannon-es, sàn, tường vô hình, collider, hất tung, rung camera
src/intro.js      Intro chữ LỰC đập xuống + lao xuyên chữ
src/slots.js      Model gắn vào ô (khối dinh dưỡng)
src/main.js       Lịch lớp, khu tập, tính macro/whey, gói hội viên
src/locales.js    Toàn bộ chữ vi + en

Tuỳ biến nhanh

Muốn đổi	Sửa ở
Dụng cụ, khối lượng, collider	`KIT` trong `src/drop-zone.js`
Trọng lực, độ nảy	`gravity` của `CANNON.World`
Lịch lớp (đang giả lập)	`classAt()` / `SLOTS` trong `src/main.js` — thay bằng dữ liệu thật
Hệ số dinh dưỡng theo mục tiêu	`GOALS`
Quyền lợi gói	`j.*.l` trong `locales.js` (ngăn bằng `	`)

Ghi chú

Thương hiệu, HLV, giá và con số dinh dưỡng là minh hoạ, không thay cho tư vấn chuyên môn.
Thư viện: Three.js, cannon-es, Motion, Lenis, Vite (MIT). Font Google (OFL).