# Créer un orbe 3D réactif avec du mouvement et de l’interaction - Spline avancé | Plongée dans les fonctionnalités - Spline Academy (https://spline.design/fr/academy/tutorials/how-to-build-a-reactive-3d-orb-with-motion-and-interaction)

> Aujourd’hui, nous vous montrons comment créer cet orbe 3D interactif d’inspiration tech avec le cloner et les événements de souris de Spline, idéal pour…

1. [Academy](https://spline.design/fr/academy)
2. [Cours](https://spline.design/fr/academy/collections)
3. [Spline avancé | Plongée dans les fonctionnalités](https://spline.design/fr/academy/collections/spline-advanced-feature-deep-dive)
4. Créer un orbe 3D réactif avec du mouvement et de l’interaction

# Créer un orbe 3D réactif avec du mouvement et de l’interaction

Leçon 3 sur 17Spline 3DIntermédiaire7 min

Aujourd’hui, nous vous montrons comment créer cet orbe 3D interactif d’inspiration tech avec le cloner et les événements de souris de Spline, idéal pour tous vos projets web comme les landing pages, les vitrines de produits ou n’importe quel projet de design.

Cette scène a été réalisée par Vlad Kolokolnikov. Retrouvez-la sur la communauté Spline, avec bien d’autres scènes 3D à remixer gratuitement.

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

## Ce que vous allez apprendre

1. [0:00Intro](https://www.youtube.com/watch?v=ol3f-vwZhBI&t=0s)
2. [0:18Créer l’objet de base et ajouter les matériaux](https://www.youtube.com/watch?v=ol3f-vwZhBI&t=18s)
3. [1:30Utiliser le Cloner](https://www.youtube.com/watch?v=ol3f-vwZhBI&t=90s)
4. [2:25Ajouter un événement Follow](https://www.youtube.com/watch?v=ol3f-vwZhBI&t=145s)
5. [3:46Ajouter un événement Distance](https://www.youtube.com/watch?v=ol3f-vwZhBI&t=226s)
6. [4:32Peaufiner l’animation](https://www.youtube.com/watch?v=ol3f-vwZhBI&t=272s)
7. [5:17Animer le groupe du cloner](https://www.youtube.com/watch?v=ol3f-vwZhBI&t=317s)
8. [5:47Design final](https://www.youtube.com/watch?v=ol3f-vwZhBI&t=347s)
9. [6:13Conseils d’export](https://www.youtube.com/watch?v=ol3f-vwZhBI&t=373s)
10. [6:20Conclusion](https://www.youtube.com/watch?v=ol3f-vwZhBI&t=380s)

## Ressources associées

- [Reactive OrbModèle](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)

## Présentation

- Spline 3D
- 7 min
- Intermédiaire

## À suivre

[Utiliser des variables pour créer du contenu 3D interactif24 minAvancé](https://spline.design/fr/academy/collections/spline-advanced-feature-deep-dive/use-variables-to-create-interactive-3d-content)[Continuer](https://spline.design/fr/academy/collections/spline-advanced-feature-deep-dive/use-variables-to-create-interactive-3d-content)

[Spline](https://spline.design/fr)

L’éditeur 3D et 2D pour les équipes et leurs agents. Publiez sur le web, iOS et Android.

#### Interrogez l’IA sur Spline

#### Produits

- [Design 3D](https://spline.design/fr/3d-design)
- [Hana](https://spline.design/fr/hana)
- [Omma](https://omma.build)
- [Génération 3D par IA](https://spline.design/fr/ai-generate)
- [Spline MCP](https://spline.design/fr/mcp)
- [Spline Arena](https://spline.design/fr/arena)
- [Tarifs](https://spline.design/fr/pricing)
- [Enterprise](https://spline.design/fr/enterprise)

#### Runtimes

- [Web](https://spline.design/fr/web)
- [iOS](https://spline.design/fr/ios)
- [Android](https://spline.design/fr/android)

#### Apps

- [Télécharger](https://spline.design/fr/download)
- [Spline Mirror](https://spline.design/spline-mirror)
- [Télécharger Spline Mirror](https://spline.design/download-mirror)

#### Apprendre

- [Docs](https://docs.spline.design/)
- [Academy](https://spline.design/fr/academy)
- [API Spline](https://www.npmjs.com/package/@splinetool/runtime)
- [Solutions](https://spline.design/solutions)

#### Communauté

- [Communauté Spline](https://community.spline.design)
- [Blog](https://spline.design/fr/blog)
- [Nouveautés](https://spline.design/fr/changelog)
- [Éducation](https://spline.design/fr/education)
- [Contra](https://spline.design/contra)
- [Affiliation](https://spline.design/fr/affiliate)

#### Entreprise

- [Clients](https://spline.design/fr/customers)
- [Carrières](https://www.ycombinator.com/companies/spline/jobs)
- [Sécurité](https://spline.design/fr/security)

#### Mentions légales

- [Conditions générales](https://spline.design/terms)
- [Confidentialité](https://spline.design/privacy)

#### Contact

- [help@spline.design](mailto:help@spline.design)
- [jobs@spline.design](mailto:jobs@spline.design)

© 2026 - Spline, Inc.