TP028

Mochi Toys — Art toy blind box

Website thương hiệu art toy với 6 model 3D: 5 nhân vật bay lơ lửng theo chuột, hộp blind box 3D lắc rồi nổ confetti ra figure ngẫu nhiên theo đúng tỉ lệ, bản bí mật là bóng đen cho tới khi bạn mở trúng, bộ sưu tập lưu lại.

Điểm nổi bật

Intro viên gacha rơi nảy 2 lần, lắc rồi tách đôi — trang hiện ra qua lỗ tròn mở rộng, không có số %
Hero 5 nhân vật 3D xếp vòng cung, mỗi bé ở một độ sâu, trôi theo chuột (parallax), bản bí mật là bóng đen
Mở blind box: hộp 3D lắc mạnh dần, tan biến trong confetti, figure bật ra lò xo; bốc ngẫu nhiên đúng tỉ lệ 1/72, thẻ độ hiếm
Bộ sưu tập lưu theo trình duyệt (x/5), thẻ figure 3D, nghệ sĩ, sự kiện, shop 3 gói; song ngữ

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

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 art toy, figure, đồ sưu tầm: nhân vật 3D trôi theo chuột, mở blind box 3D có tỉ lệ thật, bản bí mật hiện bóng đen, bộ sưu tập lưu lại, nghệ sĩ, sự kiện và shop.

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 ở
`fig-banh-bao`, `fig-ca-phe`, `fig-nem`, `fig-che`	Hero, mở hộp, bộ sưu tập
`fig-rong`	Bản bí mật (bóng đen cho tới khi mở trúng)
`blind-box`	Khối mở hộp

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

Cấu trúc

src/opener.js    Hộp blind box 3D: lắc, tan biến, confetti, figure bật ra
src/intro.js     Intro viên gacha rơi – nảy – tách đôi
src/slots.js     Model gắn vào ô HTML (hero, thẻ bộ sưu tập)
src/models.js    Tải GLB / bản tạm từ ảnh, hiệu ứng hiện, bóng đen (silhouette)
src/main.js      Tỉ lệ bốc, bộ sưu tập (localStorage), sự kiện
src/locales.js   Toàn bộ chữ vi + en (tên & tính cách nhân vật)

Tuỳ biến nhanh

Muốn đổi	Sửa ở
Nhân vật, màu thẻ	`FIGS` trong `src/main.js`
Tỉ lệ bản bí mật	`SECRET_ODDS` (mặc định 1/72)
Vị trí các bé ở hero	thuộc tính `--x --y --w --d` của `.hs` trong `index.html`
Ngày sự kiện	`renderEvents()` (tính từ hôm nay)

Ghi chú

Thương hiệu, nhân vật, giá là minh hoạ. Mở hộp online chỉ để trải nghiệm — kết quả không phải giao dịch thật.
Lần mở đầu tiên luôn ra bản thường để người xem thấy ngay một bé dễ thương.
Thư viện: Three.js, Motion, Lenis, Vite (MIT). Font Google (OFL).