🎄 Christmas Tree – Cây thông Noel 3D tương tác bằng chuyển động tay
Christmas Tree là một dự án web mang không khí Giáng Sinh hiện đại, kết hợp giữa đồ họa 3D, hiệu ứng hạt (Particle System) và tương tác bằng cử chỉ tay, biến cây thông Noel quen thuộc thành một trải nghiệm thị giác sống động và đầy bất ngờ.
Ngay khi trang web được khởi chạy, người xem sẽ bước vào một không gian lễ hội rực rỡ:
Hàng ngàn hạt ánh sáng nhỏ bé dần hội tụ, tạo thành hình dáng cây thông Noel 3D.
Những ngôi sao, ánh đèn và hộp quà lấp lánh phân bố khắp thân cây, chuyển động nhẹ nhàng theo thời gian.
Ngôi sao vàng xuất hiện trên đỉnh cây, tỏa sáng và xoay chậm, trở thành điểm nhấn của toàn bộ khung cảnh.
Dòng chữ chúc mừng Giáng Sinh xuất hiện phía trên, hoàn thiện bầu không khí ấm áp và lễ hội.
Đặc biệt, người xem có thể dùng chuyển động tay trước camera để tác động trực tiếp lên cây thông, khiến các hạt ánh sáng thay đổi hình dáng một cách mượt mà và trực quan.
🛠 Công nghệ sử dụng
Three.js: Xây dựng không gian 3D, camera, ánh sáng và Particle System cho cây thông Noel.
Particle System: Tạo hình cây thông từ hàng ngàn hạt ánh sáng thay vì mô hình 3D truyền thống, giúp hiệu ứng nhẹ và linh hoạt.
Canvas Texture: Vẽ các particle dưới dạng ngôi sao, ánh đèn và hộp quà với hiệu ứng phát sáng mềm mại.
WebGL: Đảm bảo hiệu suất và khả năng render mượt trên trình duyệt hiện đại.
Hand Tracking (Web Camera): Nhận diện chuyển động tay để tạo tương tác thời gian thực với cây thông.
HTML / CSS / JavaScript: Xây dựng giao diện, bố cục và điều khiển toàn bộ trải nghiệm.
🎯 Các chức năng chính
Hiển thị cây thông Noel 3D: Cây thông được tạo hoàn toàn từ các particle ánh sáng, có chiều sâu và chuyển động tự nhiên.
Hiệu ứng ánh sáng sống động: Các hạt phát sáng, nhấp nháy nhẹ, tạo cảm giác lung linh như đèn trang trí thật.
Nhiều loại particle: Kết hợp các hạt hình sao, ánh đèn màu và hộp quà, làm cho cây thông trở nên phong phú và sinh động.
Chuyển đổi hình dáng: Các particle có thể tách ra, xoay vòng và tái sắp xếp thành những hình dạng khác nhau.
Hiển thị thông điệp: Dòng chữ chúc mừng Giáng Sinh xuất hiện như một phần của không gian 3D.
✋ Tương tác bằng chuyển động tay
Một điểm đặc biệt của dự án là khả năng điều khiển bằng tay thông qua camera:
Di chuyển tay sang trái hoặc phải để xoay cây thông.
Đưa tay lại gần hoặc ra xa camera để thay đổi mức độ lan tỏa của các hạt ánh sáng.
Chuyển động tay theo chiều lên – xuống để kích hoạt việc biến đổi hình dạng của Particle System.
Các phản hồi đều diễn ra theo thời gian thực, giúp người xem có cảm giác như đang “chạm” vào cây thông Noel bằng không khí.
🖼 Ảnh minh họa
(Bạn có thể thêm ảnh chụp màn hình hoặc GIF thể hiện chuyển động tay và sự biến đổi của cây thông)
🔗 Trải nghiệm ngay
Demo: 🔗 Tại đây
Mã nguồn GitHub: 🔗 Link GitHub