TP015

An Lâm Villas Phú Quốc

Resort & biệt thự nghỉ dưỡng: ảnh phong cảnh trở thành không gian 3D bước vào được — thị sai che khuất theo độ sâu, camera tiến sâu vào ảnh khi cuộn, chuyển cảnh theo lớp gần–xa.

Điểm nổi bật

Hành trình 5 cảnh: mỗi ảnh có chiều sâu thật, rê chuột để nhìn quanh, cuộn để bước vào
Chuyển cảnh theo độ sâu: lớp gần cháy tan trước, lộ cảnh sau qua vệt nắng
Accordion biệt thự, mặt bằng SVG tương tác, máy tính lợi nhuận đầu tư
Trải nghiệm có ảnh theo con trỏ, bản đồ vị trí, đánh giá, đặt phòng; song ngữ VI/EN

Three.js
Motion
Lenis
Vite
GPT Image
Depth Anything V2
3D photo
Scroll journey
Real estate
AI photography

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ữ cho resort, biệt thự nghỉ dưỡng hoặc dự án BĐS: 5 ảnh phong cảnh thành không gian 3D bước vào được (thị sai che khuất theo độ sâu), cuộn để tiến vào ảnh, chuyển cảnh theo lớp gần–xa.

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/scene.js          Shader “ảnh 3D bước vào được” + chuyển cảnh theo độ sâu
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`
Đổi các cảnh hành trình	mảng `SCENES` trong `src/main.js` (mỗi cảnh cần ảnh + `-depth.webp`)
Độ mạnh thị sai / tiến vào ảnh	`uView * 0.035` và `dolly * 0.16` trong `src/scene.js`
Màu vệt nắng khi chuyển cảnh	uniform `uSeam` trong `src/scene.js`
Công thức lợi nhuận đầu tư	hàm `calc()` trong `src/main.js`
Mặt bằng biệt thự	SVG `.plan-svg` trong `index.html` (mỗi phòng một `path data-room`)

Ả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).