TP031

Lò Bánh Gió — Tiệm bánh Pháp

Website tiệm bánh với 5 model 3D: cuộn trang là máy quay trượt dọc tủ kính, từng chiếc bánh dưới đèn rọi có tem giá; thiết kế bánh kem 3D nhiều tầng, sốt chảy viền, chữ viết tay lên mặt bánh; giờ ra lò từng mẻ tính theo giờ thật.

Điểm nổi bật

Intro logo trên bảng nâu, rồi một nắm bột mì tung kín màn hình và lắng xuống để lộ tiệm — không có số %
Hero tủ kính 3D: cuộn để máy quay trượt qua 5 chiếc bánh trên đĩa sứ, đèn rọi, mặt đá cẩm thạch, vệt phản chiếu kính chạy ngược
Thiết kế bánh kem: 3 kích thước, 1–3 tầng rơi xuống nảy, 4 màu kem, sốt chảy viền, dâu/macaron/nến cháy, chữ viết tay trên mặt bánh, giá + số người ăn
Mẻ bánh tiếp theo theo giờ thật, câu chuyện thợ bánh, lớp học có chỗ trống, trạng thái mở cửa; song ngữ

Three.js
GLTF + meshopt
Motion
Lenis
Vite
Tripo 3D
GPT Image
3D models
Scroll story
Product builder
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 tiệm bánh, cà phê, patisserie: máy quay trượt dọc tủ kính 3D theo cuộn, thiết kế bánh kem 3D có chữ viết tay, mẻ bánh ra lò theo giờ thật, câu chuyện, lớp học, thông tin cửa 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 ở
`croissant`, `macaron`, `entremet`, `tart`, `cake-slice`	Tủ kính hero (ảnh cùng tên dùng làm thumbnail thực đơn & mẻ bánh)

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

Bánh kem trong khối “Thiết kế bánh” dựng bằng code (src/cake.js), không cần model.

Cấu trúc

src/vitrine.js   Tủ kính 3D: quầy đá, đĩa sứ, đèn rọi, kính phản chiếu, máy quay trượt theo cuộn
src/cake.js      Bánh kem tự dựng: tầng, kem, sốt chảy, topping, chữ trên mặt bánh
src/intro.js     Intro bột mì
src/main.js      Thực đơn, giá bánh kem, mẻ bánh theo giờ, lớp học
src/locales.js   Toàn bộ chữ vi + en

Tuỳ biến nhanh

Muốn đổi	Sửa ở
Bánh trong tủ & giá	`PASTRIES` trong `src/main.js` (model trùng `id`)
Giá bánh kem, số người ăn	`OPTIONS.size` + công thức trong `renderControls()`
Màu kem / sốt	`FROSTING`, `DRIP` trong `src/cake.js`
Mẻ bánh (mỗi 30 phút)	`BATCH`, `renderBatches()`
Giờ mở cửa	`renderBatches()` (06:30 – 21:30)

Ghi chú

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