# Skapa animerade 3D-blobbar som reagerar på musen - Spline 101 | Bygg din första interaktiva scen - Spline Academy (https://spline.design/sv/academy/tutorials/create-animated-3d-blobs-that-react-to-your-mouse)

> I den här nybörjarvänliga tutorialen börjar vi från noll och lär oss att skapa färgglada, animerade och interaktiva 3D-blobbar med Shape Blend.

1. [Academy](https://spline.design/sv/academy)
2. [Kurser](https://spline.design/sv/academy/collections)
3. [Spline 101 | Bygg din första interaktiva scen](https://spline.design/sv/academy/collections/spline-101-build-your-first-interactive-scene)
4. Skapa animerade 3D-blobbar som reagerar på musen

# Skapa animerade 3D-blobbar som reagerar på musen

Lektion 15 av 16Spline 3DNybörjare12 min

I den här nybörjarvänliga tutorialen börjar vi från noll och lär oss att skapa färgglada, animerade och interaktiva 3D-blobbar med Shape Blend.

Vi går igenom några enkla tips för att lägga på färger och texturer som ger mjuka övergångar och naturliga övertoningar.

Dessutom utforskar vi hur du lägger till interaktiva händelser, som att blobbens form ändras när du hovrar över den.

\--

Upptäck fler fantastiska kreatörer och projekt #MadeInSpline på <https://community.spline.design/>

## Det här lär du dig

1. [0:00Intro](https://www.youtube.com/watch?v=l32kDk5DU00&t=0s)
2. [0:24Skapa en blobb med Shape Blend](https://www.youtube.com/watch?v=l32kDk5DU00&t=24s)
3. [1:31Lägga till färger](https://www.youtube.com/watch?v=l32kDk5DU00&t=91s)
4. [3:21Lägga till glödeffekter och texturer](https://www.youtube.com/watch?v=l32kDk5DU00&t=201s)
5. [5:20Animera blobben](https://www.youtube.com/watch?v=l32kDk5DU00&t=320s)
6. [6:49Så får du animationen att loopa](https://www.youtube.com/watch?v=l32kDk5DU00&t=409s)
7. [8:32Interaktiv effekt med muspekaren](https://www.youtube.com/watch?v=l32kDk5DU00&t=512s)
8. [9:44Snabba tips](https://www.youtube.com/watch?v=l32kDk5DU00&t=584s)
9. [10:38Fler exempel på interaktiva scener med Shape Blend](https://www.youtube.com/watch?v=l32kDk5DU00&t=638s)
10. [11:00Vår Spline Community](https://www.youtube.com/watch?v=l32kDk5DU00&t=660s)
11. [11:05Bli vår nästa Designer of the Week!](https://www.youtube.com/watch?v=l32kDk5DU00&t=665s)

## Relaterade resurser

- [Animated Shape BlendMall](https://app.spline.design/academy/tutorials/create-animated-3d-blobs-that-react-to-your-mouse?redirect-duplicate-template-uuid=546ba9b3-f563-43e4-bbd7-a72c5941902e&is-2d-file=false)
- [Shape BlendDokument](https://docs.spline.design/designing-in-3-d/shape-blend)
- [Materials & ShadingDokument](https://docs.spline.design/#%F0%9F%8C%88-materials-&-shading)
- [How state-based animation worksDokument](https://docs.spline.design/interaction-states-events-and-actions/how-state-based-animation-works)
- [Follow EventDokument](https://docs.spline.design/interaction-states-events-and-actions/events/follow-event)

## Översikt

- Spline 3D
- 12 min
- Nybörjare

## Nästa

[Gör dina Spline-designer till interaktiva webbupplevelser10 minNybörjare](https://spline.design/sv/academy/collections/spline-101-build-your-first-interactive-scene/turn-your-spline-designs-into-interactive-web-experiences)[Fortsätt](https://spline.design/sv/academy/collections/spline-101-build-your-first-interactive-scene/turn-your-spline-designs-into-interactive-web-experiences)

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