# 3D-knopinteracties maken - Spline 101 | Bouw je eerste interactieve scène - 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. [Cursussen](https://spline.design/nl/academy/collections)
3. [Spline 101 | Bouw je eerste interactieve scène](https://spline.design/nl/academy/collections/spline-101-build-your-first-interactive-scene)
4. 3D-knopinteracties maken

# 3D-knopinteracties maken

Les 5 van 16Spline 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

## Hierna

[Look At-animaties toevoegen aan 3D-objecten10 minBeginner](https://spline.design/nl/academy/collections/spline-101-build-your-first-interactive-scene/add-look-at-animations-to-3d-objects)[Verder](https://spline.design/nl/academy/collections/spline-101-build-your-first-interactive-scene/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.