TP026

BƯỚC — Thương hiệu sneaker

Trang thương hiệu giày sneaker với 4 model 3D: giày xoay 360° theo cuộn kèm chú thích bám theo chi tiết, rồi bay vào phòng phối màu đổi màu trực tiếp trên model; kệ bộ sưu tập 3D, lookbook cuộn ngang, đếm ngược drop.

Điểm nổi bật

Intro dây giày đan chéo rồi kéo mở màn hình — không có bộ đếm 0→100%
Giày xoay 360° theo cuộn, 3 chú thích bám đúng điểm trên đế, upper, gót khi giày xoay
Một đôi giày bay liền mạch từ hero vào phòng phối màu: 5 màu đổi trực tiếp trên model, kéo để xoay, chọn size
Kệ 4 model 3D lọc theo dòng giày, lookbook cuộn ngang, drop đếm ngược có model, tìm size theo chiều dài chân; song ngữ

Three.js
GLTF + meshopt
Motion
Lenis
Vite
Tripo 3D
GPT Image
3D models
Product configurator
E-commerce
Scroll story

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 giày: giày 3D xoay theo cuộn với chú thích bám chi tiết, phòng phối màu đổi màu trực tiếp trên model, kệ bộ sưu tập 3D, lookbook cuộn ngang, đếm ngược drop và công cụ tìm size.

Chạy thử

Cần Node.js 18+.

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 ở
`shoe-runner`	Hero xoay + phòng phối màu
`shoe-court`, `shoe-trail`	Kệ bộ sưu tập
`shoe-high`	Kệ + khối drop

Model nằm ở public/models/<tên>.glb, danh sách ở public/models/manifest.json.
Chưa có file GLB → trang tự dùng ảnh public/images/<tên>.webp + bản đồ độ sâu làm bản tạm (không lỗi).
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 của bạn: đặt GLB gốc vào assets-in/models/<tên>.glb rồi chạy

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

Script giảm lưới (≤ 80k tam giác), nén texture WebP và meshopt, cập nhật manifest.

Ảnh tham chiếu để tạo model bằng Tripo (Image to 3D): prompt "model": true trong asset-prompts.json.
Model quay sai hướng: chỉnh rotationY khi gọi loadModel() trong src/shoe-stage.js / src/shelf.js.

Cấu trúc

src/shoe-stage.js   Giày hero: xoay theo cuộn → bay vào phòng phối màu, kéo xoay, đổi màu
src/shelf.js        Hàng model 3D gắn vào thẻ HTML (bộ sưu tập + drop)
src/intro.js        Intro dây giày
src/models.js       Tải GLB (meshopt) / bản tạm từ ảnh, hiệu ứng hiện + đổi màu dùng chung
src/view.js         Renderer, map khung HTML → không gian 3D, kéo xoay
src/main.js         Ghép trang: phối màu, bộ lọc, lookbook, đếm ngược, size
src/locales.js      Toàn bộ chữ vi + en
src/style.css       Giao diện (biến màu ở :root)

Tuỳ biến nhanh

Muốn đổi	Sửa ở
Màu phối (độ xoay sắc độ / tô màu)	`COLORWAYS` trong `src/main.js` (`hue` radian, hoặc `tint`)
Vị trí 3 chú thích trên giày	`ANCHORS` (tỉ lệ trong khung bao model)
Giày trên kệ, giá, nhóm lọc	`SHOES`
Ngày drop	`DROP` (mặc định thứ Sáu kế tiếp, 20:00)
Bảng quy đổi size	`renderSize()`

Ghi chú

Thương hiệu, giá, cửa hàng là minh hoạ. Ảnh tạo bằng AI theo asset-prompts.json.
Thư viện: Three.js, Motion, Lenis, Vite (MIT). Font Google (OFL).