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

> Hoje mostramos-te como criar esta esfera 3D interativa de inspiração tecnológica com o cloner e os eventos do rato no Spline, perfeita para qualquer projeto…

1. [Academy](https://spline.design/pt-pt/academy)
2. [Tutoriais](https://spline.design/pt-pt/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 3DIntermédio7 min

Hoje mostramos-te como criar esta esfera 3D interativa de inspiração tecnológica com o cloner e os eventos do rato no Spline, perfeita para qualquer projeto web, como landing pages, montras de produto ou qualquer projeto de design que queiras.

Esta cena foi feita por Vlad Kolokolnikov. Explora a comunidade do Spline para encontrares esta e outras cenas 3D gratuitas para fazer remix.

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

## O que vais aprender

1. [0:00Introdução](https://www.youtube.com/watch?v=ol3f-vwZhBI&t=0s)
2. [0:18Criar o objeto base e adicionar materiais](https://www.youtube.com/watch?v=ol3f-vwZhBI&t=18s)
3. [1:30Usar o Cloner](https://www.youtube.com/watch?v=ol3f-vwZhBI&t=90s)
4. [2:25Adicionar um evento Follow](https://www.youtube.com/watch?v=ol3f-vwZhBI&t=145s)
5. [3:46Adicionar um evento Distance](https://www.youtube.com/watch?v=ol3f-vwZhBI&t=226s)
6. [4:32Aperfeiçoar a animação](https://www.youtube.com/watch?v=ol3f-vwZhBI&t=272s)
7. [5:17Animar 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
- Intermédio

## Faz parte de

- [Spline avançado | A fundo nas funcionalidades](https://spline.design/pt-pt/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-pt/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-pt/academy/tutorials/how-to-create-3d-data-visualizations-in-spline-using-variables-and-real-time-apis)[Cria materiais Liquid Glass em 3DSpline 3DPrincipiante12 min](https://spline.design/pt-pt/academy/tutorials/create-liquid-glass-materials-in-3d)[Cria um interruptor interativo com desfocagem progressiva e gradientesHanaPrincipiante4 min](https://spline.design/pt-pt/academy/tutorials/create-an-interactive-switch-with-progressive-blur-and-gradients)

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

O editor 3D e 2D para equipas e os seus agentes. Publica na web, em iOS e em Android.

#### Pergunta à IA sobre o Spline

#### Produtos

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

#### Runtimes

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

#### Apps

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

#### Aprender

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

#### Comunidade

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

#### Empresa

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

#### Informação legal

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

#### Contacto

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

© 2026 - Spline, Inc.