TP039

Vali Gió — Vali & đồ du lịch

Website thương hiệu vali với 5 model 3D chạy trên băng chuyền hành lý sân bay; intro và bảng khởi hành kiểu split-flap lật từng chữ; mô phỏng xếp đồ theo giới hạn thể tích/cân nặng hãng bay; bộ sưu tập 3D, kiểm định bảo hành 10 năm.

Điểm nổi bật

Intro bảng khởi hành split-flap: từng ô lật chữ thành “VALI GIÓ / ĐI ĐÂU CŨNG NHẸ”, báo lên máy bay rồi kéo lên như rèm
Hero băng chuyền hành lý 3D: 72 thanh cao su chạy vòng sân vận động, vali – balo – túi trống – ví hộ chiếu đi theo; món ở phía trước hiện thẻ giá, rê chuột để băng chạy chậm
Thử xếp đồ: chọn vali Cabin 7 kg / Ký gửi 23 kg, bấm thêm 9 loại đồ, đồng hồ thể tích & cân nặng, cảnh báo quá cân / không đóng được nắp
Bộ sưu tập 3D, bảng khởi hành lật chữ đổi ảnh điểm đến, kiểm định bảo hành có số đếm, dải ảnh hành trình; song ngữ

Three.js
GLTF + meshopt
Motion
Lenis
Vite
Tripo 3D
GPT Image
3D models
E-commerce
Interactive
Travel

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 thương hiệu vali, balo, phụ kiện du lịch, hãng lữ hành: băng chuyền hành lý 3D, bảng khởi hành split-flap, mô phỏng xếp đồ theo giới hạn hãng bay, bộ sưu tập 3D và bảo hành.

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 ở
`cabin`, `large`, `backpack`, `duffel`, `passport`	Băng chuyền hero + bộ sưu tập

GLB ở public/models/, danh sách trong public/models/manifest.json. Chưa có GLB → dùng ảnh + bản đồ độ sâu (luôn quay mặt về camera trên băng chuyền).
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/carousel.js  Băng chuyền: đường chạy sân vận động theo độ dài cung, thanh cao su, hành lý
src/flap.js      Bảng split-flap dùng chung (intro + khởi hành)
src/intro.js     Intro bảng khởi hành
src/slots.js     Model gắn vào thẻ bộ sưu tập
src/main.js      Sản phẩm, mô phỏng xếp đồ, bảng khởi hành
src/locales.js   Toàn bộ chữ vi + en

Tuỳ biến nhanh

Muốn đổi	Sửa ở
Sản phẩm & giá	`PRODUCTS` trong `src/main.js`
Giới hạn vali (lít, kg, tự trọng)	`CASES`
Đồ có thể xếp (lít, kg, màu)	`ITEMS`
Tuyến bay trên bảng	`ROUTES`
Kích thước băng chuyền	`R`, `L` trong `src/carousel.js`

Ghi chú

Thương hiệu, giá, tuyến bay và số liệu kiểm định là minh hoạ.
Thư viện: Three.js, Motion, Lenis, Vite (MIT). Font Google (OFL).