Christmas-tree

🎄 Christmas Tree 3D - Interactive Hand-Controlled

A beautiful 3D Christmas tree made with Three.js, controlled by hand gestures using MediaPipe. Upload photos and watch them become part of the magical tree!

🚀 Quick Start (Online - Share with Friends!)

Deploy in 2 Minutes:

Easiest Method - Netlify:

1. Go to: https://app.netlify.com/drop
2. Drag and drop your entire Christmas-tree folder
3. Get instant URL
4. Share the URL with your friend!

See DEPLOY.md for detailed instructions!

---

🎮 How to Use

1. Allow camera access when prompted
2. Hand gestures:
   • Pinch (thumb + index close): Zoom to a random photo
   • Closed hand: Return to tree formation
   • Open palm: Scatter all particles
   • Move hand (in scatter mode): Rotate the tree
3. Upload more photos: Click “Thêm ảnh” button
4. Hide controls: Press ‘H’ key

📁 Files Included

• noel_v2.html - Main application
• image/ - Folder with 4 Christmas tree images (auto-loaded)
• DEPLOY.md - Detailed deployment instructions
• HOW_TO_SHARE.md - Sharing guide

🌐 Deployment Options

• ✅ Netlify (Easiest - drag & drop)
• ✅ Vercel (Free, fast)
• ✅ GitHub Pages (Free, needs GitHub account)

All methods are FREE and take less than 5 minutes!

💡 Features

• ✨ 3D particle-based Christmas tree
• 📸 Auto-loads 4 images from image/ folder
• 🤲 Hand gesture control (MediaPipe)
• 📷 Upload your own photos
• 🎨 Beautiful bloom effects and PBR materials
• 🌟 4000+ particles with smooth animations

🛠️ Local Development

If you want to test locally:

# Python 3
python -m http.server 8000

# Then open:
# http://localhost:8000/noel_v2.html

Or double-click START_SERVER.bat (Windows)

---

Made with ❤️ using Three.js and MediaPipe