TP040

Gỗ Bé Học — Đồ chơi gỗ giáo dục

Website đồ chơi gỗ Montessori với 5 model 3D trên bàn chơi có vật lý thật: khối chữ cái tiếng Việt rơi, lăn, kéo thả xếp chồng, gõ tên bé để các khối rơi thành chữ; thanh độ tuổi làm nổi bật đồ chơi phù hợp, an toàn, phương pháp, workshop.

Điểm nổi bật

Intro khối gỗ rơi nảy xếp thành “GỖ BÉ HỌC”, lắc lư rồi đổ ào khỏi màn hình — không có số %
Bàn chơi vật lý: khối chữ Ă Â Đ Ơ Ư… vẽ trên mặt gỗ, kéo để nhấc – thả để xếp chồng; gõ tên bé hoặc bấm BA / MẸ / BÉ / YÊU để khối rơi thành chữ
5 đồ chơi 3D (tháp vòng, hộp thả hình, ngựa bập bênh, đầu tàu, bàn tính) đứng quanh bàn làm vật cản thật
Thanh độ tuổi 0–6: kỹ năng theo giai đoạn, đồ chơi hợp tuổi sáng lên (còn lại xám đi); an toàn, Montessori tại nhà, workshop sơn đồ chơi; song ngữ

Three.js
cannon-es
GLTF + meshopt
Motion
Lenis
Vite
Tripo 3D
GPT Image
3D models
Physics
Education
Kids

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 đồ chơi gỗ, trường mầm non, trung tâm Montessori: bàn chơi vật lý với khối chữ cái tiếng Việt kéo thả xếp chồng, đồ chơi 3D, gợi ý theo độ tuổi, an toàn, phương pháp và workshop.

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 ở
`ring-stacker`, `shape-sorter`, `rocking-horse`, `train`, `abacus`	Quanh bàn chơi (vật cản tĩnh) + thẻ đồ chơi

Vị trí đồ chơi trên bàn: SPOTS trong src/play-table.js.
Khối chữ cái dựng bằng code (texture vẽ canvas với font Shantell Sans), không cần model.
GLB ở public/models/, danh sách trong public/models/manifest.json. Chưa có GLB → dùng ảnh + bản đồ độ sâu.
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/play-table.js  Bàn chơi: cannon-es, khối chữ, kéo thả, spell(), scatter(), đồ chơi làm vật cản
src/intro.js       Intro khối gỗ xếp chữ rồi đổ
src/slots.js       Model gắn vào thẻ đồ chơi
src/main.js        Ô gõ tên, độ tuổi, đồ chơi, workshop
src/locales.js     Toàn bộ chữ vi + en

Tuỳ biến nhanh

Muốn đổi	Sửa ở
Đồ chơi, độ tuổi (tháng), giá	`TOYS` trong `src/main.js`
Giai đoạn tuổi & kỹ năng	`BANDS` + `ag.*` trong `locales.js`
Màu khối, kích thước khối	`COLORS`, `SIZE` trong `src/play-table.js`
Bảng chữ cái khi thêm khối	`ALPHA` trong `scatter()`
Lịch workshop	`renderWorkshop()` (các thứ Bảy kế tiếp)

Ghi chú

Thương hiệu, giá, chứng nhận là minh hoạ — khi bán thật cần chứng nhận an toàn đồ chơi hợp lệ.
Thư viện: Three.js, cannon-es, Motion, Lenis, Vite (MIT). Font Google (OFL).