# 3D-knopinteracties maken - Spline Academy (https://spline.design/nl/academy/tutorials/how-to-create-3d-button-interactions)

> In deze tutorial laten we zien hoe je een eenvoudige 3D-knop maakt en met muisevents eenvoudige interactieve functies toevoegt, zoals een andere grootte,…

1. [Academy](https://spline.design/nl/academy)
2. [Tutorials](https://spline.design/nl/academy/tutorials)
3. 3D-knopinteracties maken

# 3D-knopinteracties maken

Spline 3DBeginner10 min

In deze tutorial laten we zien hoe je een eenvoudige 3D-knop maakt en met muisevents eenvoudige interactieve functies toevoegt, zoals een andere grootte, kleurwisselingen en positie-toggles.

🏡 Daarna laten we zien hoe je een knop maakt die draait en een scène onthult, en hoe je je knop een URL laat openen.

Deze tutorial is perfect voor beginners die interesse hebben in interactief 3D-design!

Laat in de reacties weten wat je nog meer wilt leren!

Deel je eigen versie van je 3D-knop in onze community! 💖

🔮 Spline Community → <https://community.spline.design>

## Wat je leert

1. [0:00Intro](https://www.youtube.com/watch?v=B8o5O7PyKjY&t=0s)
2. [0:15Een 3D-knop ontwerpen](https://www.youtube.com/watch?v=B8o5O7PyKjY&t=15s)
3. [1:29Grootte veranderen - Mouse Hover-event](https://www.youtube.com/watch?v=B8o5O7PyKjY&t=89s)
4. [2:57Effect voor kleurverandering](https://www.youtube.com/watch?v=B8o5O7PyKjY&t=177s)
5. [4:04Toggle - Mouse Down-event](https://www.youtube.com/watch?v=B8o5O7PyKjY&t=244s)
6. [5:29Knop die een interactieve 3D-scène onthult](https://www.youtube.com/watch?v=B8o5O7PyKjY&t=329s)
7. [8:41Naar URL’s linken - Open Link-action](https://www.youtube.com/watch?v=B8o5O7PyKjY&t=521s)

## Gerelateerde bronnen

- [House ButtonTemplate](https://app.spline.design/academy/tutorials/how-to-create-3d-button-interactions?redirect-duplicate-template-uuid=eaa257e7-bf12-4666-8fe0-26bc66f59075&is-2d-file=false)
- [Extruding 2D objects in 3DDocument](https://docs.spline.design/designing-in-3-d/extruding-2d-objects-in-3-d)
- [How state-based animation worksDocument](https://docs.spline.design/interaction-states-events-and-actions/how-state-based-animation-works)
- [Key Down EventDocument](https://docs.spline.design/interaction-states-events-and-actions/events/key-down-event)
- [Transition ActionDocument](https://docs.spline.design/interaction-states-events-and-actions/actions/transition-action)

## Overzicht

- Spline 3D
- 10 min
- Beginner

## Onderdeel van

- [Spline 101 | Bouw je eerste interactieve scène](https://spline.design/nl/academy/collections/spline-101-build-your-first-interactive-scene/how-to-create-3d-button-interactions)

## Gerelateerde tutorials

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

[Een reactieve 3D-bol bouwen met beweging en interactieSpline 3DGemiddeld7 min](https://spline.design/nl/academy/tutorials/how-to-build-a-reactive-3d-orb-with-motion-and-interaction)[3D-datavisualisaties maken in Spline met variabelen en realtime API’sSpline 3DGevorderd15 min](https://spline.design/nl/academy/tutorials/how-to-create-3d-data-visualizations-in-spline-using-variables-and-real-time-apis)[Voeg muisinteracties toe aan 3D-objectenSpline 3DBeginner14 min](https://spline.design/nl/academy/tutorials/add-mouse-based-interactions-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.