TP014

Atlas Sinh Vật Việt

Bảo tàng số các loài quý hiếm: ảnh mẫu vật AI được dựng thành khối 3D thật từ bản đồ độ sâu — kéo để xoay, đèn soi theo chuột, chuyển loài bằng hiệu ứng tan cháy.

Điểm nổi bật

Trình xem mẫu vật 3D: ảnh + bản đồ độ sâu → bề mặt 3D thật, đèn soi theo chuột, xoay, cận cảnh
Giao diện kiểu ứng dụng bách khoa: danh sách loài, tìm kiếm, bảng đặc điểm
10 phần: tuyên ngôn chữ sáng theo cuộn, sinh cảnh ghim ảnh, nhật ký cuộn ngang, nhận nuôi, mốc thời gian
Preloader, cuộn mượt Lenis, con trỏ tuỳ biến, nút từ tính, song ngữ VI/EN

Three.js
Motion
Lenis
Vite
GPT Image
Depth Anything V2
Depth relief
Atlas UI
Scroll storytelling
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ữ (VI/EN) cho tổ chức bảo tồn hoặc bảo tàng số: ảnh mẫu vật AI được dựng thành khối 3D thật từ bản đồ độ sâu — kéo để xoay, đèn soi theo chuột, chuyển loài bằng hiệu ứng tan cháy.

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/viewer.js         Trình xem mẫu vật 3D (xoay, cận cảnh, chuyển loài)
src/relief.js         Ảnh + độ sâu → bề mặt 3D có ánh sáng
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`
Thêm / đổi loài	mảng `SPECIES` trong `src/main.js` + khoá `sp.<id>.*` trong `src/locales.js` + ảnh `public/images/<id>.webp` và `<id>-depth.webp`
Độ nổi 3D của mẫu vật	`strength` trong `createRelief(...)` ở `src/viewer.js`
Góc xoay tối đa	`rot.ty` clamp (±0.62) trong `src/viewer.js`
Gói nhận nuôi, số tiền	`index.html` (khối `.tiers`, `.amounts`) + `ad.*` trong locales

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