# Créer un orbe 3D réactif avec du mouvement et de l’interaction - 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. [Tutoriels](https://spline.design/fr/academy/tutorials)
3. 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

Spline 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

## Fait partie de

- [Spline avancé | Plongée dans les fonctionnalités](https://spline.design/fr/academy/collections/spline-advanced-feature-deep-dive/how-to-build-a-reactive-3d-orb-with-motion-and-interaction)

## Tutoriels associés

[Tous les tutoriels](https://spline.design/fr/academy/tutorials)

[Créer des visualisations de données 3D dans Spline avec des variables et des API en temps réelSpline 3DAvancé15 min](https://spline.design/fr/academy/tutorials/how-to-create-3d-data-visualizations-in-spline-using-variables-and-real-time-apis)[Créer des matériaux Liquid Glass en 3DSpline 3DDébutant12 min](https://spline.design/fr/academy/tutorials/create-liquid-glass-materials-in-3d)[Créer un interrupteur interactif avec flou progressif et dégradésHanaDébutant4 min](https://spline.design/fr/academy/tutorials/create-an-interactive-switch-with-progressive-blur-and-gradients)

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