TP010

Nhà Gió Studio

Studio kiến trúc nhiệt đới: căn nhà gạch bông gió dựng hoàn toàn bằng code, kéo thanh giờ trong ngày để mặt trời đổi hướng, bóng nắng lướt qua sân, đêm đến nhà sáng như đèn lồng.

Điểm nổi bật

Nhà nhiệt đới dựng bằng code: sàn đua, mái vườn, hồ bơi, cây đại
Hai bức tường gạch bông gió (instancing) đổ bóng hoa văn thật
Thanh trượt / cuộn trang điều khiển giờ: quỹ đạo, màu nắng, bầu trời, đèn đêm
Giao diện Swiss grid tự chuyển chế độ đêm, bảng dự án, song ngữ VI/EN

Three.js
Motion
Vite
Procedural
Lighting
Swiss grid
Interactive

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 studio kiến trúc: ngôi nhà nhiệt đới gạch bông gió dựng bằng code, kéo giờ trong ngày để xem nắng, bóng đổ và đèn đêm.

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          Ngôi nhà procedural, gạch bông gió, mặt trời theo giờ
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`
Hình khối ngôi nhà	các lệnh `box(...)` trong `src/scene.js`
Hoa văn gạch bông gió	hàm `breezeBlockGeometry()`
Màu trời theo giờ	mảng `SKY` trong `src/scene.js`
Khoảng giờ khi cuộn	`setHour(7.5 + ...)` trong `src/main.js`
Bảng dự án	`index.html` + `src/locales.js`

Ghi chú

Không dùng ảnh hay model. "Nhà Gió Studio" là thương hiệu minh hoạ.
Thư viện: Three.js (MIT), Motion (MIT), Vite (MIT). Font Google (OFL).