TP023

Mây — Nội thất mây tre đan

Thương hiệu nội thất mây: “phòng thử” cho khách kéo ghế, đôn, giỏ vào ảnh phòng thật — tự to nhỏ theo phối cảnh, bị che đúng sau đồ vật; bật chế độ đêm để đèn mây hắt bóng hoa văn lên tường.

Điểm nổi bật

Phòng thử: kéo 4 sản phẩm vào ảnh phòng, tự co giãn theo phối cảnh sàn, có bóng đổ chân
Che khuất từng điểm ảnh theo bản đồ độ sâu — đồ đặt sau bàn, sau cây sẽ bị che thật
Chế độ đêm: đèn mây hắt bóng hoa văn đan lên phòng và đồ vật, kéo đèn để di chuyển bóng
Bộ sưu tập nghiêng 3D, quy trình làng nghề cuộn ngang, đổi chất mây, lookbook có điểm sản phẩm, đặt làm riêng; song ngữ

Three.js
Motion
Lenis
Vite
GPT Image
Depth Anything V2
Try-on room
Depth occlusion
E-commerce
AI interior photos

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 nội thất mây tre đan: “phòng thử” cho khách kéo sản phẩm vào ảnh phòng thật (co giãn theo phối cảnh, che khuất theo bản đồ độ sâu); chế độ đêm để đèn mây hắt bóng hoa văn lên phòng.

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 (mọi section)
src/room.js           Phòng thử: kéo thả, phối cảnh, che khuất theo độ sâu, đèn hoa văn (gobo)
src/locales.js        TOÀN BỘ nội dung chữ (vi + en) — sửa ở đây
src/main.js           Ghép trang: preloader, cuộn, tương tác, form
src/style.css         Giao diện: biến màu/font ở `:root`, bố cục, responsive
src/fx.js + fx.css    Bộ motion: preloader, tách chữ, con trỏ, nút từ tính, marquee, đếm số, parallax, mở ảnh
src/smooth-scroll.js  Cuộn mượt (Lenis)
src/i18n.js           Chuyển ngôn ngữ (data-i18n)
public/images/        Ảnh webp (+ `*-depth.webp` = bản đồ độ sâu)
asset-prompts.json    Prompt tạo lại từng ảnh bằng AI
PROMPT.md             Prompt dựng lại trang bằng AI builder
scripts/depth-map.mjs  Tạo bản đồ độ sâu cho ảnh mới (chạy local)

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` + link Google Fonts trong `index.html`
Ảnh phòng	`images/room.webp` + `room-depth.webp` (tạo bằng `node tools/depth-map.mjs`)
Sản phẩm trong khay	bảng `PRODUCTS` trong `src/room.js` + nút `[data-add]` trong `index.html`
Bố trí gợi ý	mảng `LAYOUT` trong `src/main.js`
Vùng sàn cho phép kéo	giới hạn `s.v` (0.02–0.36) trong `src/room.js`
Độ đậm bóng hoa văn ban đêm	hàm `lampLight()` trong `src/room.js`

Ảnh & bản đồ độ sâu

Ảnh tạo bằng AI theo prompt trong asset-prompts.json. Thay bằng ảnh thật của bạn: giữ tên file, xuất .webp.
File *-depth.webp là bản đồ độ sâu (trắng = gần). Tạo cho ảnh mới — miễn phí, chạy ngay trên máy:

npm i -D @huggingface/transformers sharp
node scripts/depth-map.mjs anh-moi.png public/images/anh-moi-depth.webp

(Depth Anything V2 — chạy offline sau lần tải model đầu tiên.)

Ghi chú

Thương hiệu, số liệu và giá trong template là minh hoạ — hãy thay bằng nội dung của bạn.
Hiệu năng: WebGL tự giảm độ phân giải trên mobile và dừng render khi tab ẩn / khi khu vực 3D ra khỏi màn hình.
Thư viện: Three.js (MIT), Motion (MIT), Lenis (MIT), Vite (MIT). Font Google (OFL).