# Skapa en interaktiv 3D-karaktär med variabler - 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. [Tutorials](https://spline.design/sv/academy/tutorials)
3. Skapa en interaktiv 3D-karaktär med variabler

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

Spline 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

## Del av

- [Spline Advanced | Fördjupning i funktionerna](https://spline.design/sv/academy/collections/spline-advanced-feature-deep-dive/create-an-interactive-3d-character-using-variables)

## Relaterade tutorials

[Alla tutorials](https://spline.design/sv/academy/tutorials)

[Bädda in interaktiva 3D-scener på Wix-webbplatserSpline 3DNybörjare5 min](https://spline.design/sv/academy/tutorials/embed-interactive-3d-scenes-into-wix-websites)[Bygg en AI-röstassistent i 3DSpline 3DAvancerad13 min](https://spline.design/sv/academy/tutorials/build-an-ai-voice-assistant-in-3d)[Lägg till Look At-animationer på 3D-objektSpline 3DNybörjare10 min](https://spline.design/sv/academy/tutorials/add-look-at-animations-to-3d-objects)

[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.