Skip to main content

How do I use GLB animations?

The K3 configurator supports animations in GLB files. This enables dynamic product presentations in which parts move or functions can be visually demonstrated - for example, the opening of a door, the extension of a mechanism or the rotation of individual components.

Requirements​

  • Your 3D model must be in GLB format and contain animations
  • The animations must have been defined in the 3D program (e.g. Blender) and embedded in the GLB file during export
  • The model must be in Ihren Konfigurator hochgeladen and placed in the scene (as a background model or by rule action)

Control animations via layout component​

You can trigger animations via a button in the frontend that your customers can click on.

Add animation button​

  1. Open the editor of your configurator
  2. Click on
    Loading...
    in the main menu
  3. Switch to the Layout tab
  4. Add the animation button component in the layout editor:
<AnimationButton name="animation1" variant="text" />

Configure animation button​

After saving, you can configure the button via the dynamic settings:

  1. Open the Dynamic settings of the animation button
  2. Configure the following options:

Basic settings​

  • Icon: Select an icon for the button
  • Label: Define the label for the button (multilingual)

Animations​

Add one or more animations. You can specify for each entry:

  • Model: Select the 3D model to be animated
  • Animation name: Specify the name of the animation (as defined in the GLB model). Leave empty = play all animations
  • Time offset (optional): Delay the start of the animation by a specified time in seconds (e.g. 0.5 for half second delay)
Tip

If you want to play several animations at the same time, add several entries with different models or animations. You can use the time offset to create interesting choreographies.

Control animations by rule​

For more control, you can also trigger animations using rules. This is particularly useful if you want animations to run automatically when certain values are selected.

Create animation rule action​

  1. Open the Rule editor
  2. Create a new rule or edit an existing one
  3. Add an Animation action
  4. Configure the action:

Animation action parameters​

  • Model: The 3D model to be animated
  • Animation name: Name of the animation from the GLB model

Animation type​

  • Start: The animation is played once as soon as the rule becomes active
  • Loop: The animation runs in a continuous loop as long as the rule is active
  • End: The animation is played once when the rule becomes inactive

You can also use combinations:

  • Start + Loop: Animation starts once, then goes into a continuous loop
  • Start + Loop + End: Complete cycle with start, loop and end
  • Loop + End: Continuous loop with defined end

Extended parameters​

  • Direction:

    • Forward: Animation runs normally
    • Backwards: Animation runs backwards

  • Delay: Time delay in seconds before the animation starts

  • Runtime: Duration of the animation in seconds (overwrites the original length)

  • Animation curve: Determines the acceleration of the animation

    • Linear: Uniform speed
    • Ease-In: Slow start, fast end
    • Ease-Out: Fast start, slow end
    • Ease-In-Out: Slow start and end, fast middle
Important

The animation is only played if the status of the rule changes. If the rule remains valid during a user interaction, the animation is not restarted.

Example: Animated door​

A practical example of an animated door:

  1. Create feature: Create a yes/no feature "Door open"
  2. Create rule:
    • Condition: "Door open" = "Yes"
    • Action: Animation
      • Model: "Front door"
      • Animation: "Open door"
      • Type: Start
  3. Rule for closing (optional):
    • Condition: "Door open" = "No"
    • Action: Animation
      • Model: "Front door"
      • Animation: "Open door"
      • Type: Start
      • Direction: Backwards

If the customer now sets "Door open" to "Yes", the door opens. If "No" is selected, it closes again.

Tips for optimal animations​

  • Naming: Assign descriptive names for your animations in the 3D program (e.g. "TuerOeffnen", "SchubladeAusziehen")
  • Length: Keep animations short (1-3 seconds) to ensure user-friendliness
  • Performance: Too many simultaneous animations can affect performance
  • Testing: Test your animations in different browsers and on mobile devices
  • Fallback: Ensure that your configurator remains functional even without animations