TP012

Ngọc Trai Hạ Long

Trang sức ngọc trai cao cấp: chuỗi ngọc được ray-trace ngay trong shader — ánh xà cừ, phản chiếu lẫn nhau, bóng đổ — treo bằng vật lý dây, rê chuột để làm chuỗi ngọc đung đưa.

Điểm nổi bật

17 viên ngọc ray-trace: ánh xà cừ thin-film, phản xạ một lần nảy, bóng & AO
Chuỗi treo bằng mô phỏng dây Verlet, chạm chuột là đung đưa
Nền caustic nước vịnh, camera xoay chậm
Header chia đôi kiểu thương hiệu xa xỉ, ảnh editorial mở dần, song ngữ VI/EN

Three.js
Motion
Vite
GPT Image
Ray tracing
Physics
Luxury
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 thương hiệu trang sức: chuỗi ngọc trai ray-trace trong shader (xà cừ, phản chiếu, bóng), treo bằng vật lý dây, chạm chuột để đung đưa.

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          Ray tracing ngọc trai + mô phỏng dây Verlet
public/images/        Ảnh editorial (webp)
asset-prompts.json    Prompt tạo lại ảnh bằng AI
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`
Số viên, kích thước ngọc	`N` và mảng `radii` trong `src/scene.js`
Màu ngọc / ánh óng	hàm `nacre()` trong `fragmentShader`
Ánh sáng studio	hàm `env()` trong `fragmentShader`
Vị trí chuỗi theo cuộn	đoạn `side` / `lift` trong vòng lặp `loop`
Sản phẩm, giá	`index.html` + `src/locales.js`

Ghi chú

Ảnh editorial tạo bằng AI (prompt trong asset-prompts.json). "Ngọc Trai Hạ Long" là thương hiệu minh hoạ.
Ray tracing chạy theo từng pixel — độ phân giải được giới hạn để mượt trên máy yếu.
Thư viện: Three.js (MIT), Motion (MIT), Vite (MIT). Font Google (OFL).