TP034

Tháp Sông — Dự án căn hộ ven sông

Website dự án bất động sản với 5 model 3D maquette: sa bàn 3D có sông, đường, công viên — rê để xem toà nhà, bấm để camera bay tới, kéo giờ mặt trời để xem bóng đổ; chọn tầng, chọn căn trên mặt bằng, tính khoản vay trả góp và đặt lịch xem nhà.

Điểm nổi bật

Intro bản vẽ blueprint tự vẽ từng nét (sông, đường, khối nhà, kích thước) rồi trượt lên như tờ giấy — không có số %
Sa bàn 3D: 3 tháp, 3 biệt thự, clubhouse và 15 cây; rê hiện vòng đồng + tên toà, bấm để camera bay tới và mở thẻ thông tin
Thanh giờ mặt trời 6:00–18:00 xoay nguồn sáng đổ bóng và đổi màu trời; mô hình tự xoay chậm, kéo để xoay
Chọn toà → tầng (thanh còn trống) → căn trên mặt bằng SVG có trạng thái, giá theo tầng & hướng; tính trả góp dư nợ giảm dần; đặt lịch; song ngữ

Three.js
GLTF + meshopt
SVG
Motion
Lenis
Vite
Tripo 3D
GPT Image
3D models
Real estate
Configurator
Calculator

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 dự án căn hộ, khu đô thị, resort: sa bàn 3D tương tác với giờ mặt trời, chọn toà – tầng – căn trên mặt bằng, tiện ích, tính khoản vay và đặt lịch xem nhà mẫu.

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 (maquette trắng)

Model	Dùng ở
`tower-a` (×2), `tower-b`	Toà căn hộ trên sa bàn
`villa` (×3), `clubhouse`	Biệt thự, nhà câu lạc bộ
`tree` (×15)	Cây xanh

Mỗi model chỉ tải một lần rồi nhân bản. Vị trí, chiều cao, góc xoay: mảng SITE trong src/masterplan.js; vị trí cây: spots.
GLB ở public/models/, danh sách trong public/models/manifest.json. Chưa có GLB → dùng ảnh + bản đồ độ sâu, luôn quay về phía camera.
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/masterplan.js  Sa bàn: đế, sông, đường, model, mặt trời đổ bóng, raycast, camera bay
src/intro.js       Intro blueprint
src/main.js        Thẻ thông tin, chọn tầng/căn (mặt bằng SVG), tính khoản vay, đặt lịch
src/locales.js     Toàn bộ chữ vi + en (tên toà, loại căn…)

Tuỳ biến nhanh

Muốn đổi	Sửa ở
Bố cục sa bàn	`SITE`, `riverShape()` trong `src/masterplan.js`
Số tầng, giá cơ sở mỗi toà	`TOWERS` trong `src/main.js`
Căn trên mỗi sàn (loại, m², hướng, vị trí trên mặt bằng)	`UNITS`
Công thức giá theo tầng / hướng sông	`priceOf()`
Trạng thái căn (đang giả lập)	`statusOf()` — thay bằng dữ liệu thật từ API

Ghi chú

Dự án, giá, lãi suất, tiến độ là minh hoạ. Khi dùng thật cần cập nhật pháp lý, giá bán và dữ liệu căn từ hệ thống bán hàng.
Thư viện: Three.js, Motion, Lenis, Vite (MIT). Font Google (OFL).