# Skapa en interaktiv 3D-karaktär med variabler - Spline Advanced | Fördjupning i funktionerna - Spline Academy (https://spline.design/sv/academy/tutorials/create-an-interactive-3d-character-using-variables)

> Hej! I den här videon visar vi hur du väcker en söt, interaktiv blåsfisk i 3D till liv. Kolla in Spline: https://spline.design/

1. [Academy](https://spline.design/sv/academy)
2. [Kurser](https://spline.design/sv/academy/collections)
3. [Spline Advanced | Fördjupning i funktionerna](https://spline.design/sv/academy/collections/spline-advanced-feature-deep-dive)
4. Skapa en interaktiv 3D-karaktär med variabler

# Skapa en interaktiv 3D-karaktär med variabler

Lektion 5 av 17Spline 3DAvancerad17 min

Hej! I den här videon visar vi hur du väcker en söt, interaktiv blåsfisk i 3D till liv. Kolla in Spline: <https://spline.design/>

Vi använder variabler för att utlösa händelser som ändrar den lilla krabatens storlek och position. Ju mer du klickar på blåsfisken, desto mer blåser den upp sig, och till slut flyter den upp till toppen av landningssidan.

Vi går också igenom hur du skapar och animerar olika delar av blåsfisken. Du får se dem växa med fisken och lägga till lekfulla effekter som att den studsar när musen kommer nära.

Så nu dyker vi ner, utforskar variablernas magi och har riktigt kul med att skapa interaktiva scener!

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

Läs mer om variabler: 👉 <https://youtu.be/Id%5FSZVCUVMM> 📘 <https://docs.spline.design/>

✨ Gå med i Spline Community för inspiration och dela dina designer. <https://community.spline.design/>

💬 ❤️ Dela dina förslag på tutorials i kommentarerna.

## Det här lär du dig

1. [0:00Intro](https://www.youtube.com/watch?v=eCxLYk2rNzg&t=0s)
2. [0:34Skapa och använda variabler](https://www.youtube.com/watch?v=eCxLYk2rNzg&t=34s)
3. [4:29Lägga till olika element](https://www.youtube.com/watch?v=eCxLYk2rNzg&t=269s)
4. [8:34Animera element och få dem att följa tillväxten](https://www.youtube.com/watch?v=eCxLYk2rNzg&t=514s)
5. [15:02Interaktiva effekter och export](https://www.youtube.com/watch?v=eCxLYk2rNzg&t=902s)

## Relaterade resurser

- [Pufferfish Mall](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)

## Översikt

- Spline 3D
- 17 min
- Avancerad

## Nästa

[Så skapar du en 3D-karusell16 minAvancerad](https://spline.design/sv/academy/collections/spline-advanced-feature-deep-dive/how-to-create-a-3d-carousel-interaction)[Fortsätt](https://spline.design/sv/academy/collections/spline-advanced-feature-deep-dive/how-to-create-a-3d-carousel-interaction)

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

3D- och 2D-editorn för team och deras agenter. Publicera på webben, iOS och Android.

#### Fråga AI om Spline

#### Produkter

- [3D-design](https://spline.design/sv/3d-design)
- [Hana](https://spline.design/sv/hana)
- [Omma](https://omma.build)
- [3D-generering med AI](https://spline.design/sv/ai-generate)
- [Spline MCP](https://spline.design/sv/mcp)
- [Spline Arena](https://spline.design/sv/arena)
- [Priser](https://spline.design/sv/pricing)
- [Företag](https://spline.design/sv/enterprise)

#### Runtimes

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

#### Appar

- [Ladda ner](https://spline.design/sv/download)
- [Spline Mirror](https://spline.design/spline-mirror)
- [Ladda ner Spline Mirror](https://spline.design/download-mirror)

#### Lär dig

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

#### Community

- [Spline Community](https://community.spline.design)
- [Blog](https://spline.design/sv/blog)
- [Ändringslogg](https://spline.design/sv/changelog)
- [Utbildning](https://spline.design/sv/education)
- [Contra](https://spline.design/contra)
- [Affiliate](https://spline.design/sv/affiliate)

#### Företaget

- [Kunder](https://spline.design/sv/customers)
- [Karriär](https://www.ycombinator.com/companies/spline/jobs)
- [Säkerhet](https://spline.design/sv/security)

#### Juridik

- [Villkor](https://spline.design/terms)
- [Integritet](https://spline.design/privacy)

#### Kontakt

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

© 2026 - Spline, Inc.