1. Introduction au tutoriel

« Sapin de Noël 3D » est un projet novateur lancé par moleculemmeng020425 en novembre 2025. Il offre une expérience visuelle immersive et cinématographique. Développé avec React et Three.js (R3F), ce projet utilise une technologie avancée de reconnaissance gestuelle par IA, permettant aux utilisateurs de contrôler facilement la forme du sapin (en le rassemblant et en le dispersant) et de faire pivoter librement le point de vue par des gestes. Bien plus qu'un simple sapin de Noël, il s'agit d'une galerie d'art numérique interactive remplie de souvenirs. Des milliers d'effets de particules raffinés, des jeux de lumière éblouissants et de précieuses photos Polaroid suspendues s'entremêlent pour créer un sapin de Noël virtuel luxueux et vibrant, offrant aux utilisateurs une expérience sensorielle inédite.

Ce tutoriel utilise le processeur comme ressource.

2. Exemples de projets

3. Étapes de l'opération

1. Après avoir démarré le conteneur, cliquez sur l'adresse API pour accéder à l'interface Web

2. Étapes d'utilisation

1. Préparer les photos

Dans le répertoire du projet, repérez le dossier `/openbayes/home/christmas-tree/public/photos/`. Nommez l'image de couverture `top.jpg` (elle apparaîtra sur l'étoile 3D à cinq branches au sommet du sapin). Nommez les photos du tronc 1.jpg, 2.jpg, 3.jpg, etc. Recommandation : utilisez des images carrées ou au format 4:3 et veillez à ce que leur taille soit légère (idéalement moins de 500 ko par image pour une lecture fluide).

2. Remplacez la photo

Copiez simplement vos photos dans le dossier /openbayes/home/christmas-tree/public/photos, en remplaçant les images existantes. Veuillez conserver le format du nom de fichier (1.jpg, 2.jpg, etc.). 

3. Ajuster le nombre de photos (augmenter ou diminuer)

Si vous ajoutez des photos (par exemple, en passant de 31 à 100), ouvrez le fichier dependencies.sh. Vous y trouverez la ligne : export VITE_TOTAL_PHOTOS=31. Remplacez « 31 » par le nombre de photos souhaité, puis fermez le conteneur et redémarrez-le. 

4. Instructions de contrôle gestuel

Ce projet intègre un système de reconnaissance gestuelle par IA. Veuillez vous placer devant la caméra pour l'utiliser (un bouton DEBUG se trouve en bas à droite de l'écran pour visualiser le flux vidéo).

🖐 Dispersion de la paume ouverte : Le sapin de Noël explose en une pluie de particules et de photos.

✊ Serrez le poing (poing fermé) et assemblez. Tous les éléments s'assemblent instantanément pour former un sapin de Noël parfait.

👋 Déplacez votre paume de gauche à droite pour faire pivoter la vue. Déplacez votre main vers la gauche, et l'arbre tournera vers la gauche ; déplacez votre main vers la droite, et l'arbre tournera vers la droite.