# Een reactieve 3D-bol bouwen met beweging en interactie - Spline Academy (https://spline.design/nl/academy/tutorials/how-to-build-a-reactive-3d-orb-with-motion-and-interaction)

> Vandaag laten we zien hoe je deze technisch geïnspireerde interactieve 3D-bol maakt met de cloner en muisevents in Spline. Perfect voor allerlei…

1. [Academy](https://spline.design/nl/academy)
2. [Tutorials](https://spline.design/nl/academy/tutorials)
3. Een reactieve 3D-bol bouwen met beweging en interactie

# Een reactieve 3D-bol bouwen met beweging en interactie

Spline 3DGemiddeld7 min

Vandaag laten we zien hoe je deze technisch geïnspireerde interactieve 3D-bol maakt met de cloner en muisevents in Spline. Perfect voor allerlei webprojecten, zoals landingspagina’s, productshowcases of welk designproject je maar wilt.

Deze scène is gemaakt door Vlad Kolokolnikov. Kijk in de Spline-community om deze en meer 3D-scènes te vinden die je gratis kunt remixen.

Demo: <https://app.spline.design/community/file/306ca2a5-d1ab-46ac-a27c-198575c82db0>

## Wat je leert

1. [0:00Intro](https://www.youtube.com/watch?v=ol3f-vwZhBI&t=0s)
2. [0:18Basisobject maken en materialen toevoegen](https://www.youtube.com/watch?v=ol3f-vwZhBI&t=18s)
3. [1:30De Cloner gebruiken](https://www.youtube.com/watch?v=ol3f-vwZhBI&t=90s)
4. [2:25Een Follow-event toevoegen](https://www.youtube.com/watch?v=ol3f-vwZhBI&t=145s)
5. [3:46Een Distance-event toevoegen](https://www.youtube.com/watch?v=ol3f-vwZhBI&t=226s)
6. [4:32De animatie afwerken](https://www.youtube.com/watch?v=ol3f-vwZhBI&t=272s)
7. [5:17De cloner-groep animeren](https://www.youtube.com/watch?v=ol3f-vwZhBI&t=317s)
8. [5:47Eindontwerp](https://www.youtube.com/watch?v=ol3f-vwZhBI&t=347s)
9. [6:13Exporttips](https://www.youtube.com/watch?v=ol3f-vwZhBI&t=373s)
10. [6:20Outro](https://www.youtube.com/watch?v=ol3f-vwZhBI&t=380s)

## Gerelateerde bronnen

- [Reactive OrbTemplate](https://app.spline.design/academy/tutorials/how-to-build-a-reactive-3d-orb-with-motion-and-interaction?redirect-duplicate-template-uuid=684c8aec-6fec-4d6b-ae37-a3a1fd5fac27&is-2d-file=false)
- [Cloner MotionDocument](https://docs.spline.design/designing-in-3-d/cloner-motion)
- [How state-based animation worksDocument](https://docs.spline.design/interaction-states-events-and-actions/how-state-based-animation-works)
- [Materials & ShadingDocument](https://docs.spline.design/#%F0%9F%8C%88-materials-&-shading)

## Overzicht

- Spline 3D
- 7 min
- Gemiddeld

## Onderdeel van

- [Spline gevorderd | De functies tot in detail](https://spline.design/nl/academy/collections/spline-advanced-feature-deep-dive/how-to-build-a-reactive-3d-orb-with-motion-and-interaction)

## Gerelateerde tutorials

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

[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)[Liquid glass-materialen maken in 3DSpline 3DBeginner12 min](https://spline.design/nl/academy/tutorials/create-liquid-glass-materials-in-3d)[Maak een interactieve schakelaar met progressive blur en gradiëntenHanaBeginner4 min](https://spline.design/nl/academy/tutorials/create-an-interactive-switch-with-progressive-blur-and-gradients)

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