# Como criar uma esfera 3D reativa com movimento e interação - Spline Academy (https://spline.design/pt-br/academy/tutorials/how-to-build-a-reactive-3d-orb-with-motion-and-interaction)

> Hoje vamos mostrar como criar esta esfera 3D interativa de inspiração tecnológica usando o cloner e eventos de mouse no Spline, perfeita para qualquer…

1. [Academy](https://spline.design/pt-br/academy)
2. [Tutoriais](https://spline.design/pt-br/academy/tutorials)
3. Como criar uma esfera 3D reativa com movimento e interação

# Como criar uma esfera 3D reativa com movimento e interação

Spline 3DIntermediário7 min

Hoje vamos mostrar como criar esta esfera 3D interativa de inspiração tecnológica usando o cloner e eventos de mouse no Spline, perfeita para qualquer projeto web, como landing pages, vitrines de produtos ou qualquer projeto de design que você quiser.

Esta cena foi criada por Vlad Kolokolnikov. Confira a comunidade do Spline para encontrar esta e outras cenas 3D gratuitas para fazer remix.

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

## O que você vai aprender

1. [0:00Introdução](https://www.youtube.com/watch?v=ol3f-vwZhBI&t=0s)
2. [0:18Criando o objeto base e adicionando materiais](https://www.youtube.com/watch?v=ol3f-vwZhBI&t=18s)
3. [1:30Usando o Cloner](https://www.youtube.com/watch?v=ol3f-vwZhBI&t=90s)
4. [2:25Adicionando um evento Follow](https://www.youtube.com/watch?v=ol3f-vwZhBI&t=145s)
5. [3:46Adicionando um evento Distance](https://www.youtube.com/watch?v=ol3f-vwZhBI&t=226s)
6. [4:32Refinando a animação](https://www.youtube.com/watch?v=ol3f-vwZhBI&t=272s)
7. [5:17Animando o grupo do 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:13Dicas de exportação](https://www.youtube.com/watch?v=ol3f-vwZhBI&t=373s)
10. [6:20Encerramento](https://www.youtube.com/watch?v=ol3f-vwZhBI&t=380s)

## Recursos relacionados

- [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 MotionDocumento](https://docs.spline.design/designing-in-3-d/cloner-motion)
- [How state-based animation worksDocumento](https://docs.spline.design/interaction-states-events-and-actions/how-state-based-animation-works)
- [Materials & ShadingDocumento](https://docs.spline.design/#%F0%9F%8C%88-materials-&-shading)

## Visão geral

- Spline 3D
- 7 min
- Intermediário

## Parte de

- [Spline avançado | Recursos a fundo](https://spline.design/pt-br/academy/collections/spline-advanced-feature-deep-dive/how-to-build-a-reactive-3d-orb-with-motion-and-interaction)

## Tutoriais relacionados

[Todos os tutoriais](https://spline.design/pt-br/academy/tutorials)

[Como criar visualizações de dados 3D no Spline com variáveis e APIs em tempo realSpline 3DAvançado15 min](https://spline.design/pt-br/academy/tutorials/how-to-create-3d-data-visualizations-in-spline-using-variables-and-real-time-apis)[Crie materiais de Liquid Glass em 3DSpline 3DIniciante12 min](https://spline.design/pt-br/academy/tutorials/create-liquid-glass-materials-in-3d)[Crie um switch interativo com desfoque progressivo e gradientesHanaIniciante4 min](https://spline.design/pt-br/academy/tutorials/create-an-interactive-switch-with-progressive-blur-and-gradients)

[Spline](https://spline.design/pt-br)

O editor 3D e 2D para equipes e seus agentes. Publique na web, no iOS e no Android.

#### Pergunte à IA sobre o Spline

#### Produtos

- [Design 3D](https://spline.design/pt-br/3d-design)
- [Hana](https://spline.design/pt-br/hana)
- [Omma](https://omma.build)
- [Geração 3D com IA](https://spline.design/pt-br/ai-generate)
- [Spline MCP](https://spline.design/pt-br/mcp)
- [Spline Arena](https://spline.design/pt-br/arena)
- [Preços](https://spline.design/pt-br/pricing)
- [Empresas](https://spline.design/pt-br/enterprise)

#### Runtimes

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

#### Apps

- [Download](https://spline.design/pt-br/download)
- [Spline Mirror](https://spline.design/spline-mirror)
- [Baixar o Spline Mirror](https://spline.design/download-mirror)

#### Aprenda

- [Docs](https://docs.spline.design/)
- [Academy](https://spline.design/pt-br/academy)
- [API do Spline](https://www.npmjs.com/package/@splinetool/runtime)
- [Soluções](https://spline.design/solutions)

#### Comunidade

- [Comunidade do Spline](https://community.spline.design)
- [Blog](https://spline.design/pt-br/blog)
- [Novidades](https://spline.design/pt-br/changelog)
- [Educação](https://spline.design/pt-br/education)
- [Contra](https://spline.design/contra)
- [Afiliados](https://spline.design/pt-br/affiliate)

#### Empresa

- [Clientes](https://spline.design/pt-br/customers)
- [Carreiras](https://www.ycombinator.com/companies/spline/jobs)
- [Segurança](https://spline.design/pt-br/security)

#### Jurídico

- [Termos e condições](https://spline.design/terms)
- [Privacidade](https://spline.design/privacy)

#### Contato

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

© 2026 - Spline, Inc.