Cây Thông Giáng Sinh 🎄

three.js mediapipe svelte webgl
launch project

Trải nghiệm cây thông Giáng Sinh 3D kỳ diệu với điều khiển cử chỉ tay được hỗ trợ bởi AI. Điều khiển hơn 900 hạt sáng bằng tay và xem chúng phản hồi theo thời gian thực!

Công Nghệ Sử Dụng

  • Three.js: Đồ họa 3D đẹp mắt với hơn 900 hạt phát sáng.
  • MediaPipe Hands: Nhận diện tay AI thời gian thực.
  • Web Worker: Render 60 FPS mượt mà tách biệt khỏi main thread.
  • Svelte Stores: Quản lý state tập trung.
  • Atomic Design: Kiến trúc component modular.

Tính Năng Chính

  • ✋ Mở Bàn Tay: Tỏa các hạt ra xung quanh ở chế độ floating.
  • ✊ Nắm Tay: Gom các hạt về lại hình dáng cây thông.
  • 🤏 Cử Chỉ Pinch: Kích hoạt hiệu ứng LED flash bảy sắc cầu vồng.
  • 👋 Di Chuyển Tay: Xoay và điều khiển camera 3D.
  • 🎵 Nhạc Lễ Hội: Không khí Giáng Sinh sống động.

Điểm Nổi Bật Kiến Trúc

  • OffscreenCanvas: Render 3D chạy trong Web Worker.
  • Spring Physics: Chuyển động hạt mượt mà.
  • Gesture Detection: Tách logic phát hiện cử chỉ để dễ test.

Hoàn hảo để lan tỏa niềm vui lễ hội và khám phá sự kỳ diệu của WebGL + AI!