20-10

Trang web 3D chúc mừng ngày 20-10, tập trung vào trải nghiệm thị giác với trái tim phát sáng, hệ hạt động và các vòng chữ bao quanh.

Demo

• Bản demo trực tuyến: https://yoshimura178.github.io/20-10/

Mục tiêu dự án

• Tạo một landing page 3D ngắn gọn, dễ mở và dễ chia sẻ qua link.
• Dùng thử nghiệm kết hợp geometry + particle + text texture trong Three.js.
• Truyền tải thông điệp chúc mừng theo phong cách sinh động, có chuyển động liên tục.

Tính năng nổi bật

• Trái tim 3D (OBJ) được nạp động và đặt làm trung tâm scene.
• Hiệu ứng "beat" làm biến dạng mesh theo chu kỳ để tạo cảm giác tim đập.
• Hệ hạt (sparks) lấy màu ngẫu nhiên theo bảng màu hồng, đỏ, tím, phân bố trên bề mặt trái tim.
• Các text ring hình trụ mở (open cylinder) bao quanh tim, xoay quanh trục Y.
• Camera có TrackballControls để người xem có thể xoay, zoom và quan sát từ nhiều góc.

Công nghệ sử dụng

• Three.js
• MeshSurfaceSampler
• OBJLoader
• TrackballControls
• simplex-noise
• GSAP