TP027

Trân Châu Lab — Quán trà sữa

Website quán trà sữa với 5 model 3D: bàn xoay 3 ly kéo để chọn món, máy “tự pha” dựng ly 3D có vệt đường đen, đá nổi và trân châu rơi theo vật lý, linh vật Bé Châu biết nói, thẻ tích điểm đóng dấu.

Điểm nổi bật

Intro chữ TRÂN CHÂU được rót đầy trà theo tiến độ tải thật, rồi bị “hút” lên như ống hút — không có số %
Bàn xoay gỗ 3 ly: tự xoay, kéo có quán tính, ly phía trước to lên và hiện tên, mô tả, giá
Tự pha: 5 vị nền, độ ngọt đổi vệt đường hổ vằn, đá nổi, 5 topping rơi vào ly va chạm thật, kem cheese, size, tổng tiền, niêm nắp + ống hút khi đặt
Thực đơn thẻ nghiêng 3D, quy trình, linh vật 3D biết nói, thẻ tích 10 dấu, gallery, túi giao hàng 3D; song ngữ

Three.js
GLTF + meshopt
Motion
Lenis
Vite
Tripo 3D
GPT Image
3D models
Product builder
Physics
F&B

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 quán trà sữa, cà phê, nước ép: bàn xoay 3 ly 3D, máy tự pha ly với trân châu rơi theo vật lý, linh vật 3D, thẻ tích điểm và giao hàng.

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 ở
`cup-brown-sugar`, `cup-taro`, `cup-fruit`	Bàn xoay hero (ảnh cùng tên làm thumbnail thực đơn)
`mascot`	Khối “Gặp Bé Châu”
`bag`	Khối cửa hàng & giao hàng

GLB ở public/models/, danh sách trong public/models/manifest.json. Chưa có GLB → tự dùng ảnh + bản đồ độ sâu làm bản tạm.
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

Ly trong máy tự pha không cần model — dựng bằng code (src/builder.js) để đổi màu trà, đá, topping tức thì.

Cấu trúc

src/susan.js     Bàn xoay 3 ly (kéo, tự xoay, báo ly phía trước)
src/builder.js   Ly 3D tự dựng: vị trà, vệt đường, đá, topping + vật lý va chạm, nắp & ống hút
src/intro.js     Intro chữ được rót đầy theo tiến độ tải, rồi hút lên
src/slots.js     Model gắn vào ô HTML (linh vật, túi)
src/models.js    Tải GLB / bản tạm từ ảnh, hiệu ứng hiện dùng chung
src/main.js      Thực đơn, form tự pha, tích điểm
src/locales.js   Toàn bộ chữ vi + en

Tuỳ biến nhanh

Muốn đổi	Sửa ở
Món trên bàn xoay / thực đơn	`DRINKS` trong `src/main.js`
Vị nền, topping, size và giá	`OPTS` trong `src/main.js`
Màu trà, màu vệt đường	`BASES` trong `src/builder.js`
Số hạt, kích thước topping	`TOPPINGS` trong `src/builder.js`
Câu nói của linh vật	`m.lines` trong `src/locales.js` (ngăn bằng `	`)

Ghi chú

Thương hiệu, giá, địa chỉ là minh hoạ. Form đặt hàng chỉ tạo mã ở trình duyệt — cần backend/POS để dùng thật.
Thư viện: Three.js, Motion, Lenis, Vite (MIT). Font Google (OFL).