# Hareket ve etkileşimle tepki veren bir 3D küre nasıl oluşturulur - Spline Academy (https://spline.design/tr/academy/tutorials/how-to-build-a-reactive-3d-orb-with-motion-and-interaction)

> Bugün Spline’da cloner ve fare olaylarını kullanarak teknoloji esintili bu etkileşimli 3D küreyi nasıl oluşturacağını gösteriyoruz. Açılış sayfaları, ürün…

1. [Academy](https://spline.design/tr/academy)
2. [Eğitimler](https://spline.design/tr/academy/tutorials)
3. Hareket ve etkileşimle tepki veren bir 3D küre nasıl oluşturulur

# Hareket ve etkileşimle tepki veren bir 3D küre nasıl oluşturulur

Spline 3DOrta7 dk

Bugün Spline’da cloner ve fare olaylarını kullanarak teknoloji esintili bu etkileşimli 3D küreyi nasıl oluşturacağını gösteriyoruz. Açılış sayfaları, ürün vitrinleri ya da istediğin herhangi bir tasarım projesi gibi tüm web projeleri için birebir.

Bu sahneyi Vlad Kolokolnikov yaptı. Bunu ve remikslemesi ücretsiz daha fazla 3D sahneyi bulmak için Spline topluluğuna göz at.

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

## Neler öğreneceksin

1. [0:00Giriş](https://www.youtube.com/watch?v=ol3f-vwZhBI&t=0s)
2. [0:18Temel nesneyi oluşturmak ve malzeme eklemek](https://www.youtube.com/watch?v=ol3f-vwZhBI&t=18s)
3. [1:30Cloner’ı kullanmak](https://www.youtube.com/watch?v=ol3f-vwZhBI&t=90s)
4. [2:25Follow olayı eklemek](https://www.youtube.com/watch?v=ol3f-vwZhBI&t=145s)
5. [3:46Distance olayı eklemek](https://www.youtube.com/watch?v=ol3f-vwZhBI&t=226s)
6. [4:32Animasyonu cilalamak](https://www.youtube.com/watch?v=ol3f-vwZhBI&t=272s)
7. [5:17Cloner grubunu canlandırmak](https://www.youtube.com/watch?v=ol3f-vwZhBI&t=317s)
8. [5:47Son tasarım](https://www.youtube.com/watch?v=ol3f-vwZhBI&t=347s)
9. [6:13Dışa aktarma ipuçları](https://www.youtube.com/watch?v=ol3f-vwZhBI&t=373s)
10. [6:20Kapanış](https://www.youtube.com/watch?v=ol3f-vwZhBI&t=380s)

## İlgili kaynaklar

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

## Genel bakış

- Spline 3D
- 7 dk
- Orta

## Ait olduğu kurs:

- [Spline ileri seviye | Özelliklere derinlemesine bakış](https://spline.design/tr/academy/collections/spline-advanced-feature-deep-dive/how-to-build-a-reactive-3d-orb-with-motion-and-interaction)

## İlgili eğitimler

[Tüm eğitimler](https://spline.design/tr/academy/tutorials)

[Spline’da değişkenler ve gerçek zamanlı API’lerle 3D veri görselleştirmeleri nasıl oluşturulurSpline 3Dİleri15 dk](https://spline.design/tr/academy/tutorials/how-to-create-3d-data-visualizations-in-spline-using-variables-and-real-time-apis)[3D’de Liquid Glass malzemeleri oluşturSpline 3DBaşlangıç12 dk](https://spline.design/tr/academy/tutorials/create-liquid-glass-materials-in-3d)[Progressive blur ve gradyanlarla etkileşimli bir anahtar oluşturHanaBaşlangıç4 dk](https://spline.design/tr/academy/tutorials/create-an-interactive-switch-with-progressive-blur-and-gradients)

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

Ekipler ve ajanları için 3D ve 2D editör. Web’de, iOS’ta ve Android’de yayınla.

#### Spline’ı yapay zekaya sor

#### Ürünler

- [3D Tasarım](https://spline.design/tr/3d-design)
- [Hana](https://spline.design/tr/hana)
- [Omma](https://omma.build)
- [Yapay Zekayla 3D Üretim](https://spline.design/tr/ai-generate)
- [Spline MCP](https://spline.design/tr/mcp)
- [Spline Arena](https://spline.design/tr/arena)
- [Fiyatlandırma](https://spline.design/tr/pricing)
- [Kurumsal](https://spline.design/tr/enterprise)

#### Runtime’lar

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

#### Uygulamalar

- [İndir](https://spline.design/tr/download)
- [Spline Mirror](https://spline.design/spline-mirror)
- [Spline Mirror’ı indir](https://spline.design/download-mirror)

#### Öğren

- [Docs](https://docs.spline.design/)
- [Academy](https://spline.design/tr/academy)
- [Spline API](https://www.npmjs.com/package/@splinetool/runtime)
- [Çözümler](https://spline.design/solutions)

#### Topluluk

- [Spline Topluluğu](https://community.spline.design)
- [Blog](https://spline.design/tr/blog)
- [Sürüm Notları](https://spline.design/tr/changelog)
- [Eğitim](https://spline.design/tr/education)
- [Contra](https://spline.design/contra)
- [Ortaklık](https://spline.design/tr/affiliate)

#### Şirket

- [Müşteriler](https://spline.design/tr/customers)
- [Kariyer](https://www.ycombinator.com/companies/spline/jobs)
- [Güvenlik](https://spline.design/tr/security)

#### Yasal

- [Şartlar ve Koşullar](https://spline.design/terms)
- [Gizlilik](https://spline.design/privacy)

#### İletişim

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

© 2026 - Spline, Inc.