Chữ Tương Tác ✋

three.js mediapipe svelte webgl
launch project

Trải nghiệm Particle Text Dispersion ấn tượng với nhận diện tay AI. Chạm vào chữ và xem hàng nghìn hạt vỡ tung rồi ghép lại theo thời gian thực!

Công Nghệ Sử Dụng

  • Three.js: Hệ thống hạt 3D đẹp mắt với 2000+ particles.
  • MediaPipe Hands: Nhận diện ngón tay AI thời gian thực.
  • Canvas 2D Sampling: Chuyển đổi text thành tọa độ particles.
  • Spring Physics: Animation đẩy và ghép lại mượt mà.
  • Svelte Stores: Quản lý state tập trung.

Tính Năng Chính

  • 👆 Đẩy Hạt: Particles vỡ tung khi ngón tay chạm vào.
  • 🔄 Ghép Lại Mượt: Particles trở về hình dạng chữ.
  • 🎯 Tracking Chính Xác: Camera unprojection cho ánh xạ 3D chính xác.
  • ✨ Physics Thời Gian Thực: Mô phỏng vật lý 60 FPS.
  • 🎨 Vẻ Đẹp Hạt: Hàng nghìn điểm sáng tạo thành chữ.

Cách Hoạt Động

  1. Text được render lên canvas 2D và lấy mẫu vị trí pixel
  2. Mỗi pixel trắng trở thành một particle 3D với thuộc tính vật lý
  3. Vị trí ngón tay được chiếu vào không gian 3D qua camera unprojection
  4. Particles gần ngón tay nhận lực đẩy ra xa
  5. Lực lò xo kéo particles về vị trí gốc
  6. Damping làm mượt chuyển động cho cảm giác tự nhiên

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

  • Config Tập Trung: Các tham số vật lý trong config.ts
  • JSDoc Documentation: Tài liệu code đầy đủ
  • Tách Biệt Rõ Ràng: Hand tracking, physics và rendering độc lập

Khám phá sự kỳ diệu của WebGL tương tác và vật lý hạt AI!