Zum Hauptinhalt springen

Wie nutze ich GLB-Animationen?

Der K3-Konfigurator unterstützt Animationen in GLB-Dateien. Dies ermöglicht dynamische Produktpräsentationen, bei denen sich Teile bewegen oder Funktionsweisen visuell demonstriert werden können – beispielsweise das Öffnen einer Tür, das Ausfahren eines Mechanismus oder die Rotation einzelner Komponenten.

Voraussetzungen​

  • Ihr 3D-Modell muss im GLB-Format vorliegen und Animationen enthalten
  • Die Animationen müssen im 3D-Programm (z.B. Blender) definiert und beim Export in die GLB-Datei eingebettet worden sein
  • Das Modell muss in Ihren Konfigurator hochgeladen und in der Szene platziert sein (als Hintergrundmodell oder per Regelaktion)

Animationen per Layout-Komponente steuern​

Sie können Animationen über einen Button im Frontend auslösen, den Ihre Kunden anklicken können.

Animation-Button hinzufügen​

  1. Öffnen Sie den Editor Ihres Konfigurators
  2. Klicken Sie im Hauptmenü auf
    Loading...
  3. Wechseln Sie zum Tab Layout
  4. Fügen Sie im Layout-Editor die Animation-Button-Komponente hinzu:
<AnimationButton name="animation1" variant="text" />

Animation-Button konfigurieren​

Nach dem Speichern können Sie den Button über die Dynamischen Einstellungen konfigurieren:

  1. Öffnen Sie die Dynamischen Einstellungen des Animation-Buttons
  2. Konfigurieren Sie folgende Optionen:

Grundeinstellungen​

  • Icon: Wählen Sie ein Icon für den Button
  • Label: Definieren Sie die Beschriftung des Buttons (mehrsprachig)

Animationen​

Fügen Sie eine oder mehrere Animationen hinzu. Für jeden Eintrag können Sie festlegen:

  • Modell: Wählen Sie das 3D-Modell aus, das animiert werden soll
  • Animationsname: Geben Sie den Namen der Animation an (wie im GLB-Modell definiert). Leer lassen = alle Animationen abspielen
  • Zeitversatz (optional): Verschieben Sie den Start der Animation um eine bestimmte Zeit in Sekunden (z.B. 0.5 für halbe Sekunde Verzögerung)
Tipp

Wenn Sie mehrere Animationen gleichzeitig abspielen möchten, fügen Sie mehrere Einträge mit unterschiedlichen Modellen oder Animationen hinzu. Mit dem Zeitversatz können Sie interessante Choreografien erstellen.

Animationen per Regel steuern​

Für mehr Kontrolle können Sie Animationen auch über Regeln auslösen. Dies ist besonders nützlich, wenn Animationen automatisch beim Auswählen bestimmter Werte ablaufen sollen.

Animation-Regelaktion erstellen​

  1. Öffnen Sie den Regel-Editor
  2. Erstellen Sie eine neue Regel oder bearbeiten Sie eine bestehende
  3. Fügen Sie eine Animation-Aktion hinzu
  4. Konfigurieren Sie die Aktion:

Parameter der Animation-Aktion​

  • Modell: Das 3D-Modell, das animiert werden soll
  • Animationsname: Name der Animation aus dem GLB-Modell

Animations-Typ​

  • Start: Die Animation wird einmal abgespielt, sobald die Regel aktiv wird
  • Loop: Die Animation läuft in Dauerschleife, solange die Regel aktiv ist
  • Ende: Die Animation wird einmal abgespielt, wenn die Regel inaktiv wird

Sie können auch Kombinationen verwenden:

  • Start + Loop: Animation startet einmal, geht dann in Dauerschleife über
  • Start + Loop + Ende: Vollständiger Zyklus mit Anfang, Schleife und Abschluss
  • Loop + Ende: Dauerhafte Schleife mit definiertem Abschluss

Erweiterte Parameter​

  • Richtung:

    • Vorwärts: Animation läuft normal ab
    • Rückwärts: Animation läuft rückwärts ab

  • Verzögerung: Zeitversatz in Sekunden vor dem Start der Animation

  • Laufzeit: Dauer der Animation in Sekunden (überschreibt die ursprüngliche Länge)

  • Animations-Kurve: Bestimmt die Beschleunigung der Animation

    • Linear: Gleichmäßige Geschwindigkeit
    • Ease-In: Langsamer Start, schnelles Ende
    • Ease-Out: Schneller Start, langsames Ende
    • Ease-In-Out: Langsamer Start und Ende, schnelle Mitte
Wichtig

Die Animation wird nur dann abgespielt, wenn sich der Zustand der Regel ändert. Bleibt die Regel bei einer Nutzerinteraktion weiterhin gültig, wird die Animation nicht erneut gestartet.

Beispiel: Animierte Tür​

Ein praktisches Beispiel für eine animierte Tür:

  1. Merkmal anlegen: Erstellen Sie ein Ja/Nein-Merkmal "Tür offen"
  2. Regel erstellen:
    • Bedingung: "Tür offen" = "Ja"
    • Aktion: Animation
      • Modell: "Haustür"
      • Animation: "TuerOeffnen"
      • Typ: Start
  3. Regel für Schließen (optional):
    • Bedingung: "Tür offen" = "Nein"
    • Aktion: Animation
      • Modell: "Haustür"
      • Animation: "TuerOeffnen"
      • Typ: Start
      • Richtung: Rückwärts

Wenn der Kunde nun "Tür offen" auf "Ja" setzt, öffnet sich die Tür. Bei "Nein" schließt sie sich wieder.

Tipps für optimale Animationen​

  • Benennung: Vergeben Sie sprechende Namen für Ihre Animationen im 3D-Programm (z.B. "TuerOeffnen", "SchubladeAusziehen")
  • Länge: Halten Sie Animationen kurz (1-3 Sekunden), um die Benutzerfreundlichkeit zu gewährleisten
  • Performance: Zu viele gleichzeitige Animationen können die Performance beeinträchtigen
  • Testing: Testen Sie Ihre Animationen in verschiedenen Browsern und auf mobilen Geräten
  • Fallback: Stellen Sie sicher, dass Ihr Konfigurator auch ohne Animationen funktional bleibt