TP005

Lò Gốm Mộc · Bát Tràng

Bàn xoay gốm 3D: khách tự nặn dáng bình bằng chuột, chọn men — men dâng từ đáy lên như nhúng thật — và nhận báo giá theo dung tích.

Điểm nổi bật

Nặn bình trực tiếp: kéo ngang lên thân bình đang xoay
4 dáng mẫu morph mượt: bình hoa, bát, lọ tỳ bà, chum
5 loại men AI (mộc, lam, rạn, nâu, tro), hiệu ứng men dâng có vệt chảy
Báo giá tự động theo dung tích + loại men, song ngữ VI/EN

Three.js
Motion
Vite
GPT Image
Product configurator
Interactive
Procedural
AI textures

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 xưởng gốm: khách tự nặn dáng bình trên bàn xoay 3D, chọn men (men dâng từ đáy lên như nhúng thật) và nhận báo giá theo dung tích.

Chạy thử

Cần Node.js 18+.

npm install
npm run dev       # mở http://localhost:5173
npm run build     # xuất bản tĩnh vào dist/ — upload lên hosting bất kỳ

Mặc định trang mở tiếng Việt; thêm ?lang=en để mở tiếng Anh.

Cấu trúc

index.html            Khung trang
src/locales.js        TOÀN BỘ nội dung chữ (vi + en) — sửa ở đây
src/main.js           Ghép giao diện + hiệu ứng Motion
src/scene.js          Bàn xoay, lathe nặn được, shader nhúng men
public/glazes/        4 texture men (webp)
asset-prompts.json    Prompt tạo lại texture men bằng AI
src/style.css         Giao diện (màu, font, bố cục)
src/i18n.js           Bộ chuyển ngôn ngữ (data-i18n)
src/ui-motion.js      Hiệu ứng chữ & cuộn dùng chung
PROMPT.md             Prompt dựng lại trang bằng AI builder

Tuỳ biến nhanh

Muốn đổi	Sửa ở
Chữ, giá, địa chỉ	`src/locales.js`
Màu nền / chữ / font	biến `:root` trong `src/style.css`
Dáng mẫu	`PRESETS` trong `src/scene.js` (14 bán kính + chiều cao)
Thêm men	ảnh vào `public/glazes/`, khai báo trong `glazeTex`, `ROUGH` và một nút `data-glaze`
Công thức báo giá	`BASE`, `PER_LITRE`, `GLAZE_PREMIUM` trong `src/main.js`
Độ nhạy khi nặn	hệ số `* 4` và `/ 3.2` trong sự kiện `pointermove` của `src/scene.js`
Nút đặt làm	sự kiện click `[data-order]` — gửi kèm `wheel.getShape()` để lưu thiết kế

Ghi chú

Texture men được tạo bằng AI (prompt trong asset-prompts.json); men mộc vẽ bằng canvas.
"Lò Gốm Mộc" là thương hiệu minh hoạ.
Thư viện: Three.js (MIT), Motion (MIT), Vite (MIT). Font Google (OFL).