# Een reactieve 3D-bol bouwen met beweging en interactie - Spline gevorderd | De functies tot in detail - 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. [Cursussen](https://spline.design/nl/academy/collections)
3. [Spline gevorderd | De functies tot in detail](https://spline.design/nl/academy/collections/spline-advanced-feature-deep-dive)
4. Een reactieve 3D-bol bouwen met beweging en interactie

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

Les 3 van 17Spline 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

## Hierna

[Gebruik variabelen om interactieve 3D-content te maken24 minGevorderd](https://spline.design/nl/academy/collections/spline-advanced-feature-deep-dive/use-variables-to-create-interactive-3d-content)[Verder](https://spline.design/nl/academy/collections/spline-advanced-feature-deep-dive/use-variables-to-create-interactive-3d-content)

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