TP017

Non Nước — Game Sơn Tinh Thủy Tinh

Landing đăng ký trước cho game nhập vai: chiến trường 2.5D nhiều lớp có chiều sâu thật, mưa bão và chớp sáng chiếu lên từng khối 3D — cuộn để xem truyền thuyết “nước dâng, núi dâng”.

Điểm nổi bật

7 lớp ảnh AI (trời, núi, sóng, giao long, 2 thần, đá) dựng thành cảnh 3D, rê chuột để nhìn xuyên lớp
Truyền thuyết 3 hồi chạy theo cuộn: trời yên → nước dâng → núi dâng ngang trời
Chọn tướng 3D: tướng cũ cháy tan, tướng mới trồi lên, vòng phù văn và tàn lửa theo màu tướng
Đếm ngược ra mắt, trùm cuối, thẻ ảnh xoè theo cuộn, mốc phần thưởng đăng ký trước; song ngữ VI/EN

Three.js
Motion
Lenis
Vite
GPT Image
Depth Anything V2
Game landing
2.5D diorama
Scroll storytelling
AI concept art

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)

Landing đăng ký trước cho game: chiến trường 2.5D 7 lớp ảnh AI có chiều sâu thật, mưa bão và chớp sáng chiếu lên từng lớp; cuộn để xem truyền thuyết 3 hồi; chọn tướng 3D với hiệu ứng tan cháy.

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 trang mở tiếng Việt; thêm ?lang=en để mở tiếng Anh.

Cấu trúc

index.html            Khung trang (mọi section)
src/diorama.js        Cảnh nhiều lớp, mưa, chớp, kịch bản theo cuộn (`STATES`)
src/showcase.js       Chọn tướng 3D + vòng phù văn + tàn lửa
src/relief.js         Ảnh + độ sâu → bề mặt 3D có ánh sáng
src/locales.js        TOÀN BỘ nội dung chữ (vi + en) — sửa ở đây
src/main.js           Ghép trang: preloader, cuộn, tương tác, form
src/style.css         Giao diện: biến màu/font ở `:root`, bố cục, responsive
src/fx.js + fx.css    Bộ motion: preloader, tách chữ, con trỏ, nút từ tính, marquee, đếm số, parallax, mở ảnh
src/smooth-scroll.js  Cuộn mượt (Lenis)
src/i18n.js           Chuyển ngôn ngữ (data-i18n)
public/images/        Ảnh webp (+ `*-depth.webp` = bản đồ độ sâu)
asset-prompts.json    Prompt tạo lại từng ảnh bằng AI
PROMPT.md             Prompt dựng lại trang bằng AI builder
scripts/depth-map.mjs  Tạo bản đồ độ sâu cho ảnh mới (chạy local)

Tuỳ biến nhanh

Muốn đổi	Sửa ở
Chữ, giá, địa chỉ	`src/locales.js`
Màu nền / chữ / font	biến `:root` trong `src/style.css` + link Google Fonts trong `index.html`
Thay lớp cảnh	mảng `LAYERS` trong `src/diorama.js` (ảnh nền trong suốt + `-depth.webp`)
Kịch bản từng hồi	đối tượng `STATES` (vị trí/tỉ lệ từng lớp, mưa, bão, nắng ấm)
Tướng, chỉ số, màu	mảng `HEROES` trong `src/main.js` + `h.*` trong locales
Ngày ra mắt, mốc đăng ký	hằng `LAUNCH`, biến `total` và `.ms` 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 của bạn: giữ tên file, xuất .webp.
File *-depth.webp là bản đồ độ sâu (trắng = gần). Tạo cho ảnh mới — miễn phí, chạy ngay trên máy:

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

(Depth Anything V2 — chạy offline sau lần tải model đầu tiên.)

Ghi chú

Thương hiệu, số liệu và giá trong template là minh hoạ — hãy thay bằng nội dung của bạn.
Hiệu năng: WebGL tự giảm độ phân giải trên mobile và dừng render khi tab ẩn / khi khu vực 3D ra khỏi màn hình.
Thư viện: Three.js (MIT), Motion (MIT), Lenis (MIT), Vite (MIT). Font Google (OFL).