# Einen interaktiven 3D-Charakter mit Variablen erstellen - Spline Academy (https://spline.design/de/academy/tutorials/create-an-interactive-3d-character-using-variables)

> Hallo! In diesem Video zeigen wir dir, wie du einen niedlichen, interaktiven 3D-Kugelfisch zum Leben erweckst. Sieh dir Spline an: https://spline.design/

1. [Academy](https://spline.design/de/academy)
2. [Tutorials](https://spline.design/de/academy/tutorials)
3. Einen interaktiven 3D-Charakter mit Variablen erstellen

# Einen interaktiven 3D-Charakter mit Variablen erstellen

Spline 3DProfi17 Min.

Hallo! In diesem Video zeigen wir dir, wie du einen niedlichen, interaktiven 3D-Kugelfisch zum Leben erweckst. Sieh dir Spline an: <https://spline.design/>

Mit Variablen lösen wir Events aus, die Größe und Position des Kleinen verändern. Je öfter du auf den Kugelfisch klickst, desto mehr bläst er sich auf, bis er schließlich nach oben auf der Landingpage schwebt.

Außerdem zeigen wir dir, wie du verschiedene Elemente des Kugelfischs erstellst und animierst. Du siehst, wie sie mit dem Fisch mitwachsen, und fügst verspielte Effekte hinzu – etwa ein Hüpfen, wenn die Maus näherkommt.

Also los: Tauch mit uns ein, entdecke die Magie der Variablen und hab jede Menge Spaß beim Erstellen interaktiver Szenen!

🐡 Remix: <https://app.spline.design/file/810351d5-4fd8-4f85-92b2-286329f49a3f> 🌐 Live-Website: <https://safe-value-478717.framer.app/>

Mehr über Variablen: 👉 <https://youtu.be/Id%5FSZVCUVMM> 📘 <https://docs.spline.design/>

✨ Tritt unserer Spline-Community bei, hol dir Inspiration und teile deine Designs. <https://community.spline.design/>

💬 ❤️ Teile deine Tutorial-Wünsche in den Kommentaren.

## Das lernst du

1. [0:00Intro](https://www.youtube.com/watch?v=eCxLYk2rNzg&t=0s)
2. [0:34Variablen erstellen und nutzen](https://www.youtube.com/watch?v=eCxLYk2rNzg&t=34s)
3. [4:29Verschiedene Elemente hinzufügen](https://www.youtube.com/watch?v=eCxLYk2rNzg&t=269s)
4. [8:34Elemente animieren und mitwachsen lassen](https://www.youtube.com/watch?v=eCxLYk2rNzg&t=514s)
5. [15:02Interaktive Effekte und Export](https://www.youtube.com/watch?v=eCxLYk2rNzg&t=902s)

## Weitere Ressourcen

- [Pufferfish Vorlage](https://app.spline.design/academy/tutorials/create-an-interactive-3d-character-using-variables?redirect-duplicate-template-uuid=4c31a93c-9867-4864-9e5b-58eb843e508d&is-2d-file=false)
- [VariablesDokument](https://docs.spline.design/interaction-states-events-and-actions/variables)
- [Variable Change EventDokument](https://docs.spline.design/interaction-states-events-and-actions/events/variable-change-event)
- [Conditional ActionDokument](https://docs.spline.design/interaction-states-events-and-actions/actions/conditional-action)

## Überblick

- Spline 3D
- 17 Min.
- Profi

## Teil von

- [Spline für Fortgeschrittene | Funktionen im Detail](https://spline.design/de/academy/collections/spline-advanced-feature-deep-dive/create-an-interactive-3d-character-using-variables)

## Ähnliche Tutorials

[Alle Tutorials](https://spline.design/de/academy/tutorials)

[Interaktive 3D-Szenen in Wix-Websites einbettenSpline 3DEinsteiger5 Min.](https://spline.design/de/academy/tutorials/embed-interactive-3d-scenes-into-wix-websites)[Einen KI-Sprachassistenten in 3D bauenSpline 3DProfi13 Min.](https://spline.design/de/academy/tutorials/build-an-ai-voice-assistant-in-3d)[Look-At-Animationen für 3D-ObjekteSpline 3DEinsteiger10 Min.](https://spline.design/de/academy/tutorials/add-look-at-animations-to-3d-objects)

[Spline](https://spline.design/de)

Der 3D- und 2D-Editor für Teams und ihre Agenten. Veröffentliche im Web, auf iOS und Android.

#### Frag die KI zu Spline

#### Produkte

- [3D-Design](https://spline.design/de/3d-design)
- [Hana](https://spline.design/de/hana)
- [Omma](https://omma.build)
- [KI-3D-Generierung](https://spline.design/de/ai-generate)
- [Spline MCP](https://spline.design/de/mcp)
- [Spline Arena](https://spline.design/de/arena)
- [Preise](https://spline.design/de/pricing)
- [Enterprise](https://spline.design/de/enterprise)

#### Runtimes

- [Web](https://spline.design/de/web)
- [iOS](https://spline.design/de/ios)
- [Android](https://spline.design/de/android)

#### Apps

- [Download](https://spline.design/de/download)
- [Spline Mirror](https://spline.design/spline-mirror)
- [Spline Mirror herunterladen](https://spline.design/download-mirror)

#### Lernen

- [Docs](https://docs.spline.design/)
- [Academy](https://spline.design/de/academy)
- [Spline API](https://www.npmjs.com/package/@splinetool/runtime)
- [Lösungen](https://spline.design/solutions)

#### Community

- [Spline Community](https://community.spline.design)
- [Blog](https://spline.design/de/blog)
- [Changelog](https://spline.design/de/changelog)
- [Bildung](https://spline.design/de/education)
- [Contra](https://spline.design/contra)
- [Affiliate](https://spline.design/de/affiliate)

#### Unternehmen

- [Kunden](https://spline.design/de/customers)
- [Karriere](https://www.ycombinator.com/companies/spline/jobs)
- [Sicherheit](https://spline.design/de/security)

#### Rechtliches

- [AGB](https://spline.design/terms)
- [Datenschutz](https://spline.design/privacy)

#### Kontakt

- [help@spline.design](mailto:help@spline.design)
- [jobs@spline.design](mailto:jobs@spline.design)

© 2026 - Spline, Inc.