# 3D düğme etkileşimleri nasıl oluşturulur - Spline 101 | İlk etkileşimli sahneni oluştur - Spline Academy (https://spline.design/tr/academy/tutorials/how-to-create-3d-button-interactions)

> Bu eğitimde basit bir 3D düğme oluşturmayı ve fare olaylarıyla boyut ayarı, renk değişimi ve konum geçişi gibi temel etkileşimli özellikler eklemeyi…

1. [Academy](https://spline.design/tr/academy)
2. [Kurslar](https://spline.design/tr/academy/collections)
3. [Spline 101 | İlk etkileşimli sahneni oluştur](https://spline.design/tr/academy/collections/spline-101-build-your-first-interactive-scene)
4. 3D düğme etkileşimleri nasıl oluşturulur

# 3D düğme etkileşimleri nasıl oluşturulur

Ders 5 / 16Spline 3DBaşlangıç10 dk

Bu eğitimde basit bir 3D düğme oluşturmayı ve fare olaylarıyla boyut ayarı, renk değişimi ve konum geçişi gibi temel etkileşimli özellikler eklemeyi gösteriyoruz.

🏡 Ardından dönerek bir sahneyi ortaya çıkaran bir düğme oluşturmayı ve düğmeni bir URL açacak şekilde bağlamayı göstereceğiz.

Bu eğitim, etkileşimli 3D tasarıma ilgi duyan yeni başlayanlar için birebir!

Öğrenmek istediğin başka bir şey varsa yorumlarda bize söyle!

Kendi 3D düğme versiyonunu topluluğumuzda paylaş! 💖

🔮 Spline Topluluğu → <https://community.spline.design>

## Neler öğreneceksin

1. [0:00Giriş](https://www.youtube.com/watch?v=B8o5O7PyKjY&t=0s)
2. [0:153D bir düğme tasarlamak](https://www.youtube.com/watch?v=B8o5O7PyKjY&t=15s)
3. [1:29Boyut değiştirmek - Mouse Hover olayı](https://www.youtube.com/watch?v=B8o5O7PyKjY&t=89s)
4. [2:57Renk değiştirme efekti](https://www.youtube.com/watch?v=B8o5O7PyKjY&t=177s)
5. [4:04Aç/kapat - Mouse Down olayı](https://www.youtube.com/watch?v=B8o5O7PyKjY&t=244s)
6. [5:29Etkileşimli 3D sahneyi ortaya çıkaran düğme](https://www.youtube.com/watch?v=B8o5O7PyKjY&t=329s)
7. [8:41URL’lere bağlantı vermek - Open Link aksiyonu](https://www.youtube.com/watch?v=B8o5O7PyKjY&t=521s)

## İlgili kaynaklar

- [House ButtonŞablon](https://app.spline.design/academy/tutorials/how-to-create-3d-button-interactions?redirect-duplicate-template-uuid=eaa257e7-bf12-4666-8fe0-26bc66f59075&is-2d-file=false)
- [Extruding 2D objects in 3DDoküman](https://docs.spline.design/designing-in-3-d/extruding-2d-objects-in-3-d)
- [How state-based animation worksDoküman](https://docs.spline.design/interaction-states-events-and-actions/how-state-based-animation-works)
- [Key Down EventDoküman](https://docs.spline.design/interaction-states-events-and-actions/events/key-down-event)
- [Transition ActionDoküman](https://docs.spline.design/interaction-states-events-and-actions/actions/transition-action)

## Genel bakış

- Spline 3D
- 10 dk
- Başlangıç

## Sıradaki

[3D nesnelere Look At animasyonları ekle10 dkBaşlangıç](https://spline.design/tr/academy/collections/spline-101-build-your-first-interactive-scene/add-look-at-animations-to-3d-objects)[Devam et](https://spline.design/tr/academy/collections/spline-101-build-your-first-interactive-scene/add-look-at-animations-to-3d-objects)

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