TP030

Sương Mai — Mỹ phẩm thiên nhiên

Website mỹ phẩm với 4 model 3D: lọ serum giữa những giọt sương khúc xạ thật né theo chuột, quy trình 4 bước có chế độ sáng/tối đổi màu cả trang, ảnh thành phần có điểm chạm, đồi trà 3D từ ảnh và quiz chọn sản phẩm.

Điểm nổi bật

Intro giọt sương rơi xuống mặt nước, trang hiện ra qua các vòng gợn sóng lan rộng — không có số %
Hero lọ serum 3D xoay chậm giữa 16 giọt nước khúc xạ thật, rẽ ra khi rê chuột; nền buổi sáng hồng nhạt ↔ buổi tối xanh đêm
Quy trình 4 sản phẩm 3D trong thẻ vòm; bấm PM: cả trang chuyển màu đêm, bước chống nắng mờ đi, mô tả đổi theo giờ
Thành phần có điểm chạm, đồi trà Thái Nguyên dựng 3D từ ảnh + sương trôi, quiz 3 câu gợi ý sản phẩm, đánh giá; song ngữ

Three.js
GLTF + meshopt
Motion
Lenis
Vite
Tripo 3D
GPT Image
Depth Anything V2
3D models
Refraction
Quiz
Beauty

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 mỹ phẩm, skincare, spa: lọ serum 3D giữa những giọt sương khúc xạ thật, quy trình sáng/tối đổi màu cả trang, thành phần có điểm chạm, đồi trà 3D từ ảnh, quiz chọn sản phẩm.

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 ở
`serum`	Hero (giữa các giọt sương) + quy trình
`toner`, `cream-jar`, `sunscreen`	Quy trình 4 bước, kết quả quiz

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/dew-scene.js    Hero: lọ serum + giọt nước khúc xạ (transmission), nền sáng/tối
src/field-scene.js  Đồi trà: ảnh + bản đồ độ sâu thành bề mặt 3D, sương trôi
src/intro.js        Intro giọt sương + vòng gợn sóng
src/slots.js        Model gắn vào thẻ quy trình
src/main.js         AM/PM, điểm chạm thành phần, quiz
src/locales.js      Toàn bộ chữ vi + en

Tuỳ biến nhanh

Muốn đổi	Sửa ở
Sản phẩm & giá	`PRODUCTS`, `ORDER` trong `src/main.js`
Câu hỏi quiz & luật gợi ý	`QUESTIONS`, `recommend()`
Điểm chạm trên ảnh thành phần	`--x --y` của `.spot` trong `index.html` + `ING`
Màu chế độ tối	`body[data-mode='pm']` trong `src/style.css`
Số giọt nước	`N` trong `src/dew-scene.js`

Ghi chú

Thương hiệu, công dụng, giá là minh hoạ — khi dùng thật cần tuân thủ quy định quảng cáo mỹ phẩm.
Ảnh đồi trà có bản đồ độ sâu field-depth.webp; ảnh mới: node scripts/depth-map.mjs anh.png public/images/field-depth.webp.
Thư viện: Three.js, Motion, Lenis, Vite (MIT). Font Google (OFL).