1. Einführung in das Tutorial

Der 3D-Weihnachtsbaum ist ein innovatives Projekt, das von moleculemmeng020425 im November 2025 ins Leben gerufen wurde. Er bietet ein immersives, filmisches visuelles Erlebnis. Basierend auf React und Three.js (R3F) nutzt das Projekt fortschrittliche KI-Gestenerkennung, mit der Nutzer die Form des Weihnachtsbaums (Zusammenziehen und Auseinanderziehen) und die Ansicht per Gestensteuerung einfach anpassen können. Es ist nicht nur ein gewöhnlicher Weihnachtsbaum, sondern eine interaktive digitale Kunstgalerie voller Erinnerungen. Tausende exquisite Partikeleffekte, faszinierende Lichtshows und schwebende Polaroid-Fotos verschmelzen zu einem luxuriösen und lebendigen virtuellen Weihnachtsbaum und bieten Nutzern ein unvergleichliches Sinneserlebnis.

Dieses Tutorial verwendet die CPU als Ressource.

2. Projektbeispiele

3. Bedienungsschritte

1. Klicken Sie nach dem Starten des Containers auf die API-Adresse, um die Weboberfläche aufzurufen

2. Anwendungsschritte

1. Fotos vorbereiten

Suchen Sie im Projektverzeichnis den Ordner `/openbayes/home/christmas-tree/public/photos/`. Benennen Sie das Titelbild `top.jpg` (es wird auf dem 3D-Fünfzackstern an der Baumspitze angezeigt). Benennen Sie die Fotos des Baumstamms mit 1.jpg, 2.jpg, 3.jpg usw. Empfehlung: Verwenden Sie Bilder im quadratischen Format oder im 4:3-Format und achten Sie auf geringe Dateigrößen (idealerweise unter 500 KB pro Bild, um eine flüssige Wiedergabe zu gewährleisten).

2. Ersetzen Sie das Foto

Kopieren Sie einfach Ihre eigenen Fotos in den Ordner /openbayes/home/christmas-tree/public/photos und überschreiben Sie die vorhandenen Bilder. Bitte behalten Sie das Dateinamensformat bei (1.jpg, 2.jpg usw.). 

3. Passen Sie die Anzahl der Fotos an (erhöhen oder verringern)

Wenn Sie weitere Fotos hinzufügen (z. B. von den standardmäßigen 31 auf 100 erhöhen), müssen Sie die Datei „dependencies.sh“ öffnen. Dort finden Sie die Zeile: „export VITE_TOTAL_PHOTOS=31“. Ändern Sie die Zahl „31“ in die gewünschte Anzahl an Bildern, schließen Sie anschließend den Container und starten Sie ihn neu. 

4. Gestensteuerungsanleitung

Dieses Projekt verfügt über ein integriertes KI-Gestenerkennungssystem. Bitte stellen Sie sich zur Bedienung vor die Kamera (in der unteren rechten Ecke des Bildschirms befindet sich eine DEBUG-Schaltfläche, um das Kamerabild anzuzeigen):

🖐 Offene Handfläche zerstreuen: Der Weihnachtsbaum explodiert in einen Schauer aus Partikeln und Fotos.

✊ Balle deine Faust (geschlossene Faust) und setze alles zusammen. Alle Elemente fügen sich im Handumdrehen zu einem perfekten Weihnachtsbaum zusammen.

👋 Bewege deine Handfläche nach links und rechts, um die Ansicht zu drehen. Bewege deine Hand nach links, und der Baum dreht sich nach links; bewege deine Hand nach rechts, und der Baum dreht sich nach rechts.