# Maak een interactief 3D-personage met variabelen - Spline gevorderd | De functies tot in detail - Spline Academy (https://spline.design/nl/academy/tutorials/create-an-interactive-3d-character-using-variables)

> Hoi! In deze video laten we zien hoe je een schattig interactief 3D-kogelvisje tot leven brengt. Bekijk Spline: https://spline.design/

1. [Academy](https://spline.design/nl/academy)
2. [Cursussen](https://spline.design/nl/academy/collections)
3. [Spline gevorderd | De functies tot in detail](https://spline.design/nl/academy/collections/spline-advanced-feature-deep-dive)
4. Maak een interactief 3D-personage met variabelen

# Maak een interactief 3D-personage met variabelen

Les 5 van 17Spline 3DGevorderd17 min

Hoi! In deze video laten we zien hoe je een schattig interactief 3D-kogelvisje tot leven brengt. Bekijk Spline: <https://spline.design/>

We gebruiken variabelen om events te starten die de grootte en positie van het visje veranderen. Hoe vaker je op de kogelvis klikt, hoe boller hij wordt, tot hij uiteindelijk naar de bovenkant van de landingspagina drijft.

We laten ook zien hoe je verschillende elementen van de kogelvis maakt en animeert. Je ziet ze meegroeien met de vis en we voegen speelse effecten toe, zoals stuiteren als de muis dichtbij komt.

Dus duik erin, ontdek de magie van variabelen en heb plezier met het maken van interactieve scènes!

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

Meer over variabelen: 👉 <https://youtu.be/Id%5FSZVCUVMM> 📘 <https://docs.spline.design/>

✨ Word lid van onze Spline-community voor inspiratie en deel je designs. <https://community.spline.design/>

💬 ❤️ Deel je suggesties voor tutorials in de reacties.

## Wat je leert

1. [0:00Intro](https://www.youtube.com/watch?v=eCxLYk2rNzg&t=0s)
2. [0:34Variabelen maken en gebruiken](https://www.youtube.com/watch?v=eCxLYk2rNzg&t=34s)
3. [4:29Verschillende elementen toevoegen](https://www.youtube.com/watch?v=eCxLYk2rNzg&t=269s)
4. [8:34Elementen animeren en ze laten meegroeien](https://www.youtube.com/watch?v=eCxLYk2rNzg&t=514s)
5. [15:02Interactieve effecten en exporteren](https://www.youtube.com/watch?v=eCxLYk2rNzg&t=902s)

## Gerelateerde bronnen

- [Pufferfish Template](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)
- [VariablesDocument](https://docs.spline.design/interaction-states-events-and-actions/variables)
- [Variable Change EventDocument](https://docs.spline.design/interaction-states-events-and-actions/events/variable-change-event)
- [Conditional ActionDocument](https://docs.spline.design/interaction-states-events-and-actions/actions/conditional-action)

## Overzicht

- Spline 3D
- 17 min
- Gevorderd

## Hierna

[Een 3D-carrouselinteractie maken16 minGevorderd](https://spline.design/nl/academy/collections/spline-advanced-feature-deep-dive/how-to-create-a-3d-carousel-interaction)[Verder](https://spline.design/nl/academy/collections/spline-advanced-feature-deep-dive/how-to-create-a-3d-carousel-interaction)

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

De 3D- en 2D-editor voor teams en hun agents. Publiceer op het web, iOS en Android.

#### Vraag AI naar Spline

#### Producten

- [3D-design](https://spline.design/nl/3d-design)
- [Hana](https://spline.design/nl/hana)
- [Omma](https://omma.build)
- [3D genereren met AI](https://spline.design/nl/ai-generate)
- [Spline MCP](https://spline.design/nl/mcp)
- [Spline Arena](https://spline.design/nl/arena)
- [Prijzen](https://spline.design/nl/pricing)
- [Enterprise](https://spline.design/nl/enterprise)

#### Runtimes

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

#### Apps

- [Downloaden](https://spline.design/nl/download)
- [Spline Mirror](https://spline.design/spline-mirror)
- [Spline Mirror downloaden](https://spline.design/download-mirror)

#### Leren

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

#### Community

- [Spline Community](https://community.spline.design)
- [Blog](https://spline.design/nl/blog)
- [Changelog](https://spline.design/nl/changelog)
- [Onderwijs](https://spline.design/nl/education)
- [Contra](https://spline.design/contra)
- [Affiliates](https://spline.design/nl/affiliate)

#### Bedrijf

- [Klanten](https://spline.design/nl/customers)
- [Vacatures](https://www.ycombinator.com/companies/spline/jobs)
- [Beveiliging](https://spline.design/nl/security)

#### Juridisch

- [Algemene voorwaarden](https://spline.design/terms)
- [Privacy](https://spline.design/privacy)

#### Contact

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

© 2026 - Spline, Inc.