# Como criar uma esfera 3D reativa com movimento e interação - Spline avançado | Recursos a fundo - 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. [Cursos](https://spline.design/pt-br/academy/collections)
3. [Spline avançado | Recursos a fundo](https://spline.design/pt-br/academy/collections/spline-advanced-feature-deep-dive)
4. Como criar uma esfera 3D reativa com movimento e interação

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

Aula 3 de 17Spline 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

## A seguir

[Use variáveis para criar conteúdo 3D interativo24 minAvançado](https://spline.design/pt-br/academy/collections/spline-advanced-feature-deep-dive/use-variables-to-create-interactive-3d-content)[Continuar](https://spline.design/pt-br/academy/collections/spline-advanced-feature-deep-dive/use-variables-to-create-interactive-3d-content)

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