# Maak een interactief 3D-personage met variabelen - 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. [Tutorials](https://spline.design/nl/academy/tutorials)
3. Maak een interactief 3D-personage met variabelen

# Maak een interactief 3D-personage met variabelen

Spline 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

## Onderdeel van

- [Spline gevorderd | De functies tot in detail](https://spline.design/nl/academy/collections/spline-advanced-feature-deep-dive/create-an-interactive-3d-character-using-variables)

## Gerelateerde tutorials

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

[Interactieve 3D-scènes insluiten in Wix-websitesSpline 3DBeginner5 min](https://spline.design/nl/academy/tutorials/embed-interactive-3d-scenes-into-wix-websites)[Bouw een AI-spraakassistent in 3DSpline 3DGevorderd13 min](https://spline.design/nl/academy/tutorials/build-an-ai-voice-assistant-in-3d)[Look At-animaties toevoegen aan 3D-objectenSpline 3DBeginner10 min](https://spline.design/nl/academy/tutorials/add-look-at-animations-to-3d-objects)

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