# Animeer interactieve 3D-blokken - 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. [Tutorials](https://spline.design/nl/academy/tutorials)
3. Animeer interactieve 3D-blokken

# Animeer interactieve 3D-blokken

Spline 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

## Onderdeel van

- [Animatie en interacties in Spline](https://spline.design/nl/academy/collections/animation-interactions-in-spline/animate-interactive-3d-boxes)

## Gerelateerde tutorials

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

[Breng een interactieve 3D-robot tot levenSpline 3DBeginner13 min](https://spline.design/nl/academy/tutorials/bring-an-interactive-3d-robot-to-life)[Exporteer interactieve ervaringen native voor iOS en visionOSSpline 3DGemiddeld15 min](https://spline.design/nl/academy/tutorials/export-interactive-experiences-natively-for-ios-and-visionos)[Native 3D exporteren voor AndroidSpline 3DGemiddeld12 min](https://spline.design/nl/academy/tutorials/how-to-export-native-3d-for-android)

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