Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
Three.js, React ve GSAP ile 3 Boyutlu Web Geliştirme (2025)
Rating: 4.1 out of 5(8 ratings)
461 students

Three.js, React ve GSAP ile 3 Boyutlu Web Geliştirme (2025)

Three.js, React ve GSAP ile 3 Boyutlu Etkişelimli Web Animasyonları Oluşturmayı Öğrenin
Created byMirza Şahi̇n
Last updated 1/2026
Turkish
Turkish [Auto],

What you'll learn

  • React ve Three.js ile etkileşimli 3D sahneler nasıl oluşturulur
  • GSAP ile 3D objeler üzerinde animasyonlar nasıl tanımlanır ve kontrol edilir
  • React Three Fiber ve drei ile 3D komponent mimarisi geliştirme
  • 3D objelere tıklanıldığında animasyon ve ses gibi kullanıcı etkileşimlerini tetikleme

Course content

3 sections • 22 lectures • 58m total length

  • Giriş0:27

    Bu kısa giriş videosu, kursun genel yapısını, kullanacağımız teknolojileri (Three.js, React ve GSAP) ve proje hedeflerini hızlıca tanıtır. Kursta neler öğreneceğinizi ve hangi araçlarla nasıl bir 3D web animasyonu geliştireceğimizi özetler.

  • Proje Kurulumu – Vite, React, Three.js ve GSAP ile Başlangıç1:44

    React ve Vite kullanarak sıfırdan bir proje oluşturuyoruz. Ardından Three.js, GSAP, R3F ve react-three-drei gibi kütüphaneleri projeye dahil ediyoruz.

  • Canvas Yapısı – 3D Sahne için Komponent Mimarisi7:40
  • GSAP ile İlk Animasyon – 3D Nesneleri Hareketlendirme2:48

    GSAP kütüphanesiyle sahnedeki 3D objeleri nasıl canlandıracağımızı gösteriyoruz. İlk animasyonları tanımlıyor ve temel zamanlamaları öğretiyoruz.

  • Etkileşim Ekleme – Tıklama ile 3D Model Animasyonu2:06

    Kullanıcının tıklama etkileşimiyle sahnedeki bir modelin animasyonunu tetikliyoruz. React ile GSAP'i etkileşimli bir şekilde nasıl bağlayacağınızı öğreniyorsunuz.

  • Yeni Geometriler – Sahneye 3 Boyutlu Geometri Ekleme1:22

    Sahneye yeni geometrik şekiller (box, sphere, torus vb.) ekliyoruz. Bu şekillerin konumlandırılması ve özelleştirilmesini ele alıyoruz.

  • Kamera Ayarları – Perspektif ve Görüş Alanı Düzenlemeleri0:49

    Three.js'de kameranın konumunu ve açısını ayarlayarak, sahnenin nasıl görüneceğini kontrol ediyoruz. Dinamik kamera açılarıyla sahne derinliği katıyoruz.

  • Işık ve Gölge – 3D Modellerin Gölge Ayarları1:20

    Sahneye ışık kaynakları ekliyor ve gölgelerin doğru şekilde oluşmasını sağlıyoruz. Realistik bir görünüm için ambient ve directional light kullanımı anlatılıyor.

  • Hover Animasyonları – Nesneleri Havada Asılı Gibi Gösterme1:15

    GSAP animasyonlarını kullanarak objeleri havada süzülüyormuş gibi gösterecek sürekli hareketler tanımlıyoruz. Yumuşak geçişli hover animasyonlarını ele alıyoruz.

  • Ses Efekti ve Çıkış – Tıklamayla Ses ve Projenin Sonu1:01

    Bir objeye tıklandığında rastgele bir ses efekti çalınmasını sağlıyoruz. Bu etkileşimi tamamladıktan sonra projeyi toparlıyor ve kursu bitiriyoruz.

  • Bölüm Değerlendirme Testi

Requirements

  • Web geliştirme temellerine aşinalık (HTML, JavaScript) faydalı olabilir

Description

Bu kurs, modern web uygulamalarında 3D animasyonları kullanmak isteyen geliştiriciler ve tasarımcılar için hazırlanmış bir eğitimdir. React, Three.js ve GSAP (GreenSock Animation Platform) gibi güçlü kütüphaneleri birleştirerek etkileşimli, görsel açıdan çekici ve akıcı kullanıcı deneyimleri oluşturmanın temellerini adım adım öğreneceksiniz.

Eğitim, Vite altyapısıyla proje kurulumu yaparak başlar. Ardından, react-three-fiber kullanarak 3D sahneler oluşturmaya ve bu sahnelere GSAP ile animasyonlar eklemeye geçilir. Kullanıcı etkileşimlerine dayalı animasyonları nasıl entegre edeceğinizi de bu süreçte öğrenirsiniz. Kamera kontrolleri, ışıklandırma ve gölge ayarları gibi önemli 3D sahne öğeleriyle çalışarak, gerçek dünyadaki uygulamalara benzer projeler geliştirirsiniz.

Bu kurs, yalnızca temel teknik bilgileri öğretmekle kalmaz, aynı zamanda bu bilgileri pratik bir proje üzerinde nasıl uygulayacağınızı gösterir. Bu süreçte, bir yandan React ve Three.js'in gücünden yararlanarak dinamik 3D sahneler oluşturacak, diğer yandan GSAP ile animasyonları daha verimli ve etkileyici hale getireceksiniz. Kurs boyunca, farklı etkileşimli unsurları kullanarak, kullanıcıların ilgisini çekecek ve onların deneyimlerini zenginleştirecek 3D animasyonlar tasarlamayı öğreneceksiniz.

Kurs boyunca geliştireceğiniz proje, kamera hareketlerinden model animasyonlarına, ışıklandırmadan ses efektlerine kadar çeşitli 3D öğeleri kapsayacak şekilde ilerleyecek. Bu sayede, 3D web animasyonlarıyla ilgili temel ve uygulamalı bilgi kazanarak, profesyonel seviyede 3D görsellik oluşturma yeteneği kazanacaksınız. Hem teknik hem de tasarımsal açıdan güçlü bir temel elde edeceğiniz bu kurs, 3D web animasyonlarına dair bilgilerinizi geliştirirken pratik beceriler kazanmanıza da olanak sağlayacak.

Who this course is for:

  • Web'de etkileşimli ve görsel olarak güçlü projeler geliştirmek isteyen React geliştiricileri
  • Three.js ve GSAP kullanarak 3D animasyonlara giriş yapmak isteyen tasarımcı ve yazılımcılar
  • Kullanıcı deneyimini 3 boyutlu arayüzlerle zenginleştirmek isteyen frontend geliştiriciler
  • Portföyüne yenilikçi ve çarpıcı projeler eklemek isteyen kreatif geliştiriciler

Report abuse