# Animeer interactieve 3D-blokken - Animatie en interacties in Spline - Spline Academy (https://spline.design/nl/academy/tutorials/animate-interactive-3d-boxes)

> Hoi! In deze tutorial leren we op een leuke manier hoe je een interactie maakt waarbij meerdere kubussen speels van positie en kleur veranderen als je met…

1. [Academy](https://spline.design/nl/academy)
2. [Cursussen](https://spline.design/nl/academy/collections)
3. [Animatie en interacties in Spline](https://spline.design/nl/academy/collections/animation-interactions-in-spline)
4. Animeer interactieve 3D-blokken

# Animeer interactieve 3D-blokken

Les 5 van 14Spline 3DGemiddeld4 min

Hoi! In deze tutorial leren we op een leuke manier hoe je een interactie maakt waarbij meerdere kubussen speels van positie en kleur veranderen als je met je cursor over ze beweegt.

En dat kost ons nog geen 5 minuten! 👀 Bekijk Spline: <https://spline.design/>

Remix 👉 <https://app.spline.design/file/8f4650a0-c475-415a-a6d5-c914d47c16bd>

Deel je versie in onze community op <https://community.spline.design/> We kunnen niet wachten om het te zien 🤩

Veel leerplezier!

## Wat je leert

1. [0:00Introductie](https://www.youtube.com/watch?v=RmC2xEtXobE&t=0s)
2. [0:12Een kubus maken](https://www.youtube.com/watch?v=RmC2xEtXobE&t=12s)
3. [0:31Kleuren en materialen toevoegen](https://www.youtube.com/watch?v=RmC2xEtXobE&t=31s)
4. [1:29Diepte toevoegen](https://www.youtube.com/watch?v=RmC2xEtXobE&t=89s)
5. [1:56Een Mouse Hover-interactie maken](https://www.youtube.com/watch?v=RmC2xEtXobE&t=116s)
6. [2:39De kubus dupliceren](https://www.youtube.com/watch?v=RmC2xEtXobE&t=159s)
7. [4:00Exportopties en inspiratie uit de community](https://www.youtube.com/watch?v=RmC2xEtXobE&t=240s)

## Gerelateerde bronnen

- [Interactive Cubes ExperienceTemplate](https://app.spline.design/academy/tutorials/animate-interactive-3d-boxes?redirect-duplicate-template-uuid=3274b34e-60fa-4a92-bb4a-2fb5383f3021&is-2d-file=false)
- [Mouse Hover EventDocument](https://docs.spline.design/interaction-states-events-and-actions/events/mouse-hover-event)
- [Cloner MotionDocument](https://docs.spline.design/designing-in-3-d/cloner-motion)
- [ComponentsDocument](https://docs.spline.design/designing-in-3-d/components)
- [Transition ActionDocument](https://docs.spline.design/interaction-states-events-and-actions/actions/transition-action)

## Overzicht

- Spline 3D
- 4 min
- Gemiddeld

## Hierna

[Een draaiend 3D-icoon maken15 minBeginner](https://spline.design/nl/academy/collections/animation-interactions-in-spline/how-to-create-a-spinning-3d-icon)[Verder](https://spline.design/nl/academy/collections/animation-interactions-in-spline/how-to-create-a-spinning-3d-icon)

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