TP016

SẤM — Xe máy điện

Ra mắt xe máy điện kiểu showroom: xe 3D dựng từ ảnh có phản chiếu sàn, đèn quét như quảng cáo ô tô, chú thích bám theo từng chi tiết và đổi màu sơn trực tiếp.

Điểm nổi bật

Chữ “SẤM” khổng lồ kẹp chiếc xe 3D ở giữa, phản chiếu trên sàn showroom
Đi qua 5 chi tiết kỹ thuật: đèn soi đúng bộ phận, đường dẫn và thẻ chú thích bám theo
Đổi 5 màu sơn trong shader với vệt sáng quét qua thân xe
Máy tính quãng đường pin, thư viện cuộn ngang, widget app, bảng giá + trả góp, FAQ, form lái thử

Three.js
Motion
Lenis
Vite
GPT Image
Depth Anything V2
Product launch
Configurator
Hotspots
AI product render

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 ra mắt xe máy điện kiểu showroom: xe 3D dựng từ ảnh có phản chiếu sàn, đèn quét như quảng cáo ô tô, đi qua 5 chi tiết kỹ thuật có chú thích bám theo, đổi 5 màu sơn trực tiếp trong shader.

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/garage.js         Xe 3D, phản chiếu sàn, quét đèn, đổi màu sơn, chiếu điểm chú thích
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`
Vị trí các điểm chú thích	mảng `HOTSPOTS` (u, v theo ảnh) trong `src/main.js`
Thêm màu sơn	bảng `PAINTS` trong `src/garage.js` (hue, bão hoà, độ sáng) + nút `.swatch` trong `index.html`
Nhận diện vùng thân xe để sơn	dòng `body = smoothstep(...hsv.x - 0.625...)` trong `PAINT_HOOK` (đổi 0.625 theo màu gốc ảnh xe)
Giá & trả góp	`.plans` trong `index.html` + hàm `renderFinance()`

Ả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).