Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
THREE.JS UYGULAMALI 3D WEB GELİŞTİRME — İLK ADIM
New

THREE.JS UYGULAMALI 3D WEB GELİŞTİRME — İLK ADIM

Three.js ile 3D web geliştirmeye başlayın; sahne, kamera, geometri, materyal, nesne ve animasyon sistemlerini ayrıntılı
Created byOkan Kaplan
Last updated 8/2026
Turkish

What you'll learn

  • Three.js kullanarak temel 3B web sahneleri oluşturabilecek ve Scene, Camera, Renderer ve 3B nesneler arasındaki ilişkiyi açıklayabileceksiniz.
  • PerspectiveCamera, OrthographicCamera ve diğer temel kamera yapılarını kullanarak 3B sahnelerin görüntüsünü farklı bakış açılarıyla kontrol edebileceksiniz.
  • BoxGeometry, CapsuleGeometry, CircleGeometry, ConeGeometry, CylinderGeometry, DodecahedronGeometry ve ExtrudeGeometry gibi temel geometrileri kullanarak farklı
  • Three.js nesnelerinin position, rotation ve scale değerlerini kullanarak nesneleri 3B uzayda konumlandırabilecek, döndürebilecek ve ölçeklendirebileceksiniz.
  • Three.js'in temel matematik yapılarını, özellikle Vector3 ve Quaternion yapılarını, 3B nesnelerin konumlandırılması ve dönüşlerinin yönetilmesinde kullanabilece
  • AnimationClip, AnimationAction ve AnimationMixer yapılarını kullanarak Three.js içerisinde temel animasyon sistemleri oluşturabilecek ve animasyonları kontrol e
  • NumberKeyframeTrack, VectorKeyframeTrack, QuaternionKeyframeTrack ve ColorKeyframeTrack gibi keyframe yapılarını kullanarak farklı veri türlerini zaman içerisin
  • Three.js kodlarını dokümantasyon üzerinden inceleyerek sınıfların, özelliklerin ve metotların kullanım amaçlarını anlayabilecek ve bunları kendi 3B web uygulama
  • Öğrendiğiniz Three.js yapılarını bir araya getirerek çalışan, etkileşimli ve animasyonlu temel 3B web uygulamaları geliştirebileceksiniz.

Course content

3 sections • 26 lectures • 2h 15m total length
  • BÖLÜM 12:41
  • Three.js AnimationAction6:44

    `AnimationAction`, bir `AnimationClip`'i (animasyon verisini) alıp, bir `AnimationMixer` aracılığıyla çalıştıran, durduran, hızlandıran, yavaşlatan, iki animasyon arasında geçiş yapan ve daha birçok işlemi yapabilen bir kontrolcüdür. Bu ders, resmi Three.js dokümantasyonunu temel alarak her özelliği ve metodu detaylıca açıklar ve sonunda çalışan bir örnek sunar.

  • Three.js AnimationClip6:12

    `AnimationClip`, bir animasyonu oluşturan tüm `KeyframeTrack`'leri (zaman eksenindeki konum, dönüş, ölçek ve diğer özellik değerleri) bir araya getiren, yeniden kullanılabilir bir veri yapısıdır. Bu ders, resmi Three.js dokümantasyonunu temel alarak `AnimationClip`'in her yönünü detaylıca açıklar ve sonunda çalışan bir örnek sunar.

  • Three.js AnimationMixer6:12

    `AnimationMixer`, bir sahnedeki belirli bir nesne (Object3D) üzerindeki tüm animasyonları oynatan, durduran, hızlandıran, senkronize eden ve yöneten ana motordur. Her nesne için ayrı bir `AnimationMixer` kullanılabilir. Bu ders, resmi Three.js dokümantasyonunu temel alarak `AnimationMixer`'ın her özelliğini ve metodunu detaylıca açıklar ve sonunda çalışan bir örnek sunar.

  • Three.js AnimationObjectGroup6:01

    `AnimationObjectGroup`, birden fazla `Object3D`'yi tek bir çatı altında toplayarak hepsinin **aynı animasyon durumunu (zaman, hız, ağırlık vb.) paylaşmasını** sağlayan özel bir gruptur. Bu sayede, her nesne için ayrı ayrı `AnimationAction` oluşturmak zorunda kalmazsınız; tüm grup tek bir `AnimationMixer` ile yönetilir ve tüm nesneler aynı anda aynı animasyonu oynatır. Bu ders, resmi Three.js dokümantasyonunu temel alarak `AnimationObjectGroup`'un her özelliğini ve metodunu detaylıca açıklar.

  • Three.js AnimationUtils5:55

    `AnimationUtils`, animasyonlarla çalışırken ihtiyaç duyulan çeşitli yardımcı işlemleri (dizi dönüştürme, sıralama, alt klip oluşturma, additif dönüşüm vb.) sağlayan statik metotlardan oluşan bir yardımcı sınıftır. Bu ders, resmi Three.js dokümantasyonunu temel alarak `AnimationUtils`'in her bir statik metodunu detaylıca açıklar ve sonunda çalışan bir örnek sunar.

  • Three.js ColorKeyframeTrack5:17

    `ColorKeyframeTrack`, bir nesnenin rengini (örneğin `material.color`) zaman içinde değiştirmek için kullanılan özel bir `KeyframeTrack` alt sınıfıdır. Renk değerleri RGB (kırmızı, yeşil, mavi) bileşenleri olarak saklanır ve üç boyutlu bir vektör gibi işlenir. Bu ders, resmi Three.js dokümantasyonunu temel alarak `ColorKeyframeTrack`'in her yönünü detaylıca açıklar ve sonunda çalışan bir örnek sunar.


  • Three.js NumberKeyframeTrack5:33

    `NumberKeyframeTrack`, tek bir sayısal değeri (float) animasyonlamak için kullanılan özel bir `KeyframeTrack` alt sınıfıdır. Bu track, her anahtar karede **tek bir değer** (skaler) saklar ve bu sayede opaklık, ölçek, morf hedef ağırlıkları, ışık yoğunluğu gibi tek boyutlu özellikleri kolayca animasyonlamanızı sağlar. Bu ders, resmi Three.js dokümantasyonunu temel alarak `NumberKeyframeTrack`'in her yönünü detaylıca açıklar ve sonunda çalışan bir örnek sunar.

  • Three.js PropertyMixer5:04

    `PropertyMixer`, bir `PropertyBinding` ile ilişkilendirilmiş bir özelliğe gelen **ağırlıklı animasyon verilerini biriktiren (accumulate)** ve uygulayan (apply) dahili bir sınıftır. Birden fazla `AnimationAction` aynı özelliği hedeflediğinde, her action'ın ağırlığı (weight) ile çarpılan değerler toplanır ve sonuç özelliğe yazılır. Bu ders, resmi Three.js dokümantasyonunu temel alarak `PropertyMixer`'ın her yönünü detaylıca açıklar ve sonunda çalışan bir örnek sunar.

  • Three.js QuaternionKeyframeTrack5:06

    `QuaternionKeyframeTrack`, bir nesnenin dönüşünü quaternion (x, y, z, w) değerleriyle animasyonlamak için kullanılan özel bir `KeyframeTrack` alt sınıfıdır. Quaternion kullanmanın en büyük avantajı, **gimbal lock** sorununu ortadan kaldırması ve **slerp (spherical linear interpolation)** ile daha düzgün rotasyon geçişleri sağlamasıdır. Bu ders, resmi Three.js dokümantasyonunu temel alarak `QuaternionKeyframeTrack`'in her yönünü detaylıca açıklar ve sonunda çalışan bir örnek sunar.

  • Three.js VectorKeyframeTrack5:08

    `VectorKeyframeTrack`, vektör türündeki (2D, 3D veya 4D) özellikleri animasyonlamak için kullanılan genel amaçlı bir `KeyframeTrack` alt sınıfıdır. Bu track, `position`, `scale`, `velocity` gibi birden fazla bileşeni olan özellikler için idealdir ve `.ValueTypeName` değeri `'vector'` olarak ayarlanmıştır. Bu ders, resmi Three.js dokümantasyonunu temel alarak `VectorKeyframeTrack`'in her yönünü detaylıca açıklar ve sonunda çalışan bir örnek sunar.

Requirements

  • Temel düzeyde HTML bilgisi önerilir, ancak ileri düzey HTML bilgisi gerekli değildir.
  • Temel düzeyde JavaScript bilgisi önerilir; değişkenler, fonksiyonlar, koşullar ve temel nesne kullanımı gibi kavramları bilmek öğrenme sürecini kolaylaştırır.
  • Three.js veya 3B web geliştirme konusunda önceden deneyim sahibi olmanız gerekmez.
  • Özel bir 3B modelleme veya grafik programı kullanmayı bilmeniz gerekmez.
  • Güncel bir web tarayıcısı ve kod yazabileceğiniz bir bilgisayar yeterlidir.
  • Temel düzeyde bilgisayar ve dosya yönetimi bilgisine sahip olmanız yeterlidir.
  • Fizik motorları, gelişmiş 3B kütüphaneler veya grafik programlama konusunda önceden bilgi sahibi olmanız gerekmez.

Description

Three.js Uygulamalı 3D Web Geliştirme: İlk Adım

Three.js'in temel yapısını, çekirdek sınıflarını ve 3B web geliştirme araçlarını gerçek kod örnekleri ve uygulamalı projeler üzerinden öğrenin.

Web tarayıcıları artık yalnızca metin, görsel, bağlantı ve formlardan oluşan klasik sayfaları görüntülemek için kullanılan ortamlar değildir. Tarayıcı üzerinde üç boyutlu sahneler oluşturmak, nesneleri farklı açılardan görüntülemek, geometrik modeller meydana getirmek, materyaller uygulamak, ışıklandırma oluşturmak, nesneleri hareket ettirmek, animasyonlar hazırlamak ve kullanıcı etkileşimlerine tepki veren dinamik 3B uygulamalar geliştirmek mümkündür. Three.js, JavaScript kullanarak bu üç boyutlu çalışma alanına giriş yapmayı ve tarayıcı üzerinde gerçek zamanlı 3B içerikler oluşturmayı sağlayan güçlü bir JavaScript kütüphanesidir.

Three.js Uygulamalı 3D Web Geliştirme: İlk Adım kursu, Three.js öğrenmeye başlayan kişilerin sağlam ve sistemli bir temel oluşturmasını amaçlar. Kurs boyunca Three.js'in temel çalışma mantığını yalnızca teorik olarak açıklamakla kalmayacak, anlatılan yapıların tamamını gerçek kod örnekleri üzerinde inceleyecek ve çalışan uygulamalar üzerinden gözlemleyeceğiz. Böylece bir sınıfın veya metodun yalnızca adını öğrenmek yerine, hangi problemi çözdüğünü, hangi yapılarla birlikte kullanıldığını ve gerçek bir 3B uygulamada nasıl görev aldığını anlayacaksınız.

Bu kursun temel yaklaşımı anlatım, kod, uygulama ve gözlem üzerine kuruludur. Her konu ayrıntılı biçimde açıklanır. Ardından ilgili yapı kod içerisinde kullanılır. Kodun çalışma mantığı incelenir ve ortaya çıkan sonuç tarayıcı üzerinde gözlemlenir. Parametrelerin değiştirilmesiyle meydana gelen farklılıklar değerlendirilir. Böylece öğrenme süreci yalnızca videoyu izlemekten ibaret kalmaz; kullanılan yapıların davranışlarını anlayabileceğiniz uygulamalı bir çalışma sürecine dönüşür.

Three.js ile 3B web geliştirmeye giriş

Three.js öğrenmeye başladığınızda ilk olarak bir 3B uygulamanın hangi temel parçalardan meydana geldiğini anlamanız gerekir. Bir 3B sahne oluşturmak yalnızca ekrana bir şekil çizmekten ibaret değildir. Sahnenin kendisi, sahneyi görüntüleyen kamera, görüntünün oluşturulmasını sağlayan renderer, sahne içerisinde bulunan nesneler, nesnelerin geometrileri, materyalleri, ışık kaynakları ve animasyon sistemleri birlikte çalışır.

Kursun başlangıcında bu temel ilişkiyi adım adım inceleyeceğiz.

Bir sahne oluşturacağız. Sahneye nesneler ekleyeceğiz. Bu nesnelerin geometrilerini belirleyeceğiz. Geometrilere materyaller uygulayacağız. Kamerayı konumlandıracağız. Renderer ile sahneyi tarayıcı ekranına aktaracağız. Ardından animasyon döngüsünü kullanarak sahneyi zaman içerisinde değiştireceğiz.

Bu temel yapı, ilerleyen bütün Three.js çalışmalarının başlangıç noktasıdır.

Örneğin genel çalışma mantığı şu şekilde düşünülebilir:

Scene → Camera → Objects → Geometry → Material → Renderer → Animation Loop

Bu yapıyı anlayan bir öğrenci, daha karmaşık Three.js örneklerinin nasıl oluşturulduğunu çok daha kolay kavrayabilir.

Three.js çekirdek yapısını anlamak

Kursun önemli bir bölümü Three.js'in çekirdek sınıflarını anlamaya ayrılmıştır. Çünkü Three.js öğrenirken karşılaşacağınız farklı sınıfların birbirinden bağımsız olmadığını görmek gerekir.

Bir Object3D, sahne içerisindeki nesnelerin temel davranışlarını anlamamızı sağlar. Bir Mesh, geometri ile materyali bir araya getirerek görüntülenebilir bir 3B nesne oluşturur. Bir Camera, sahnenin hangi açıdan görüntüleneceğini belirler. Bir Geometry veya güncel Three.js yapısında kullanılan BufferGeometry, nesnenin geometrik verisini temsil eder. Bir Material, yüzeyin nasıl görüneceğini belirler. Bir Renderer ise bütün bu bilgileri görüntüye dönüştürür.

Bu ilişkileri yalnızca tanım olarak değil, çalışan kodlarla inceleyeceğiz.

Örneğin bir küp oluşturduğunuzda aslında tek bir kavram kullanmış olmazsınız. Bir geometri oluşturulur, bu geometriye bir materyal atanır, geometri ve materyal bir mesh içerisinde birleştirilir, mesh sahneye eklenir, kamera bu nesneyi görüntüler ve renderer sonucu ekrana aktarır.

Bu zinciri kavradığınızda Three.js kodları daha anlaşılır hale gelir.

Sahne oluşturma mantığı

Bir 3B uygulamanın merkezi Scene yapısıdır. Sahne, üç boyutlu dünyadaki nesnelerin bir araya getirildiği çalışma alanıdır.

Kurs içerisinde sahnenin nasıl oluşturulduğunu, sahneye nesnelerin nasıl eklendiğini ve sahnedeki nesnelerin nasıl yönetildiğini uygulamalı olarak inceleyeceğiz.

Sahne kavramını yalnızca bir kapsayıcı olarak görmek yerine, Three.js içerisindeki nesne hiyerarşisinin temel noktalarından biri olarak ele alacağız.

Bir nesnenin sahneye eklenmesi, başka bir nesnenin altına yerleştirilmesi veya nesnelerin grup halinde yönetilmesi gibi işlemler üç boyutlu uygulama mimarisinin temelini oluşturur.

Bu nedenle Object3D, grup yapıları, ebeveyn ve çocuk ilişkileri gibi konular ilerleyen uygulamalarda tekrar tekrar kullanılacak önemli bilgiler sağlar.

Kamera sistemleri

Üç boyutlu bir sahne oluşturduktan sonra bu sahnenin nasıl görüntüleneceğini belirlememiz gerekir. Bu noktada kamera sistemi devreye girer.

Kurs içerisinde Three.js'in temel kamera yapılarını ayrıntılı biçimde ele alacağız.

PerspectiveCamera, gerçek dünyadaki perspektif algısına benzer biçimde çalışan ve genel amaçlı 3B uygulamalarda sıklıkla kullanılan kamera türüdür. Uzak nesnelerin daha küçük görünmesi ve perspektif etkisinin oluşturulması bu kamera yapısının temel özelliklerindendir.

OrthographicCamera ise perspektif etkisinin bulunmadığı bir görüntüleme yaklaşımı sağlar. Teknik görselleştirmeler, haritalar, arayüz benzeri 3B çalışmalar ve belirli tasarım ihtiyaçları için kullanılabilir.

Bunların yanında Three.js içerisinde bulunan farklı kamera sınıflarını da tanıyacağız. ArrayCamera, CubeCamera ve StereoCamera gibi yapılarla karşılaştığınızda bunların hangi amaçlarla kullanıldığını anlayabilecek bir temel oluşturacağız.

Kamera konumu, yönü, görüş alanı ve diğer temel parametrelerin değiştirilmesiyle aynı sahnenin nasıl farklı şekilde görüntülenebildiğini uygulamalı olarak göreceğiz.

Geometri sistemleri

Bir 3B nesnenin fiziksel şeklini oluşturmak için geometri sistemini kullanırız.

Kurs içerisinde Three.js tarafından sağlanan farklı temel geometrileri uygulamalı biçimde inceleyeceğiz.

BoxGeometry ile kutu ve küp biçimli nesneler, CircleGeometry ile dairesel yapılar, ConeGeometry ile konik yapılar, CylinderGeometry ile silindirik yapılar ve CapsuleGeometry ile kapsül biçimli nesneler oluşturacağız.

Bunun yanında DodecahedronGeometry, ExtrudeGeometry ve diğer temel geometri sınıflarının kullanım mantığını da inceleyeceğiz.

Buradaki amaç yalnızca farklı geometrilerin isimlerini ezberlemek değildir.

Bir geometrinin hangi parametrelerle oluşturulduğunu, bu parametrelerin sonucu nasıl değiştirdiğini ve farklı geometrilerin hangi durumlarda tercih edilebileceğini uygulamalı olarak göreceğiz.

Örneğin bir silindirin yarıçapını, yüksekliğini veya segment sayısını değiştirdiğimizde ortaya çıkan geometrinin nasıl değiştiğini doğrudan gözlemleyebileceksiniz.

Böylece geometrilerin hazır şekiller olmaktan öte, parametrelerle oluşturulan veri yapıları olduğunu anlayacaksınız.

Geometrinin arkasındaki veri

Three.js öğrenirken geometriyi yalnızca ekranda gördüğümüz şekil olarak değerlendirmek yeterli değildir.

Bir 3B geometrinin arkasında konum, normal, UV ve indeks gibi çeşitli geometrik veriler bulunur. Özellikle BufferGeometry yapısını anlamak, Three.js'in daha ileri seviyelerini öğrenmek açısından önemli bir temel oluşturur.

Kurs içerisinde bu veri yapısının temel mantığını açıklayacağız.

Bir geometrinin yalnızca “küp” veya “küre” olarak düşünülmesinin yeterli olmadığını; bilgisayarın bu nesneyi belirli geometrik veriler aracılığıyla temsil ettiğini göreceğiz.

Bu yaklaşım, ilerleyen Three.js çalışmalarında özel geometriler, parçacık sistemleri, gelişmiş materyaller ve shader tabanlı uygulamalar gibi konulara geçildiğinde önemli bir altyapı sağlayacaktır.

Materyaller ve yüzey görünümü

Geometri nesnenin şeklini belirlerken materyal, bu nesnenin yüzeyinin nasıl görüneceğini belirleyen temel yapılardan biridir.

Kurs içerisinde Three.js materyal sisteminin temel mantığını inceleyeceğiz. Farklı materyal türlerinin hangi özelliklere sahip olduğunu, materyallerin geometrilerle nasıl birleştirildiğini ve materyal özelliklerinin sahnedeki görüntüyü nasıl etkilediğini uygulamalı örneklerle göreceğiz.

Bir nesnenin yalnızca geometriden oluşmadığını; görüntü oluşturmak için geometri ile materyalin birlikte çalıştığını anlayacağız.

Bu bilgi, daha sonra ışıklandırma ve renderer konularıyla birleştiğinde üç boyutlu görüntünün nasıl meydana geldiğine ilişkin daha bütünlüklü bir anlayış sağlayacaktır.

Nesneler ve dönüşümler

Three.js içerisinde bir nesnenin sahnedeki konumunu, dönüşünü ve boyutunu kontrol etmek temel işlemlerden biridir.

Bu nedenle position, rotation ve scale kavramlarını uygulamalı biçimde inceleyeceğiz.

Bir nesneyi X, Y ve Z eksenlerinde hareket ettireceğiz. Döndüreceğiz. Boyutunu değiştireceğiz. Daha sonra bu dönüşümlerin birlikte kullanılmasıyla üç boyutlu sahnelerin nasıl düzenlendiğini göreceğiz.

Burada önemli olan yalnızca bir nesneyi hareket ettirmek değildir. Üç boyutlu koordinat sisteminin mantığını anlamaktır.

X, Y ve Z eksenlerinin sahnedeki anlamını, nesnelerin koordinat sistemindeki konumlarını ve dönüşümlerin birbirleriyle ilişkisini uygulamalı olarak inceleyeceğiz.

Vektörler ve matematiksel temel

Three.js yalnızca görsel nesnelerden oluşan bir sistem değildir. Üç boyutlu grafik programlamanın önemli bir bölümü matematiksel veri yapılarıyla çalışır.

Bu nedenle Three.js içerisinde kullanılan temel matematik sınıflarının mantığını da anlayacağız.

Özellikle Vector3, üç boyutlu uygulamalarda sürekli karşımıza çıkacak önemli yapılardan biridir. Konum, yön, hareket ve çeşitli geometrik hesaplamalarda kullanılabilir.

Vektörleri yalnızca matematiksel bir kavram olarak değil, Three.js içerisindeki gerçek kullanım alanlarıyla inceleyeceğiz.

Bu sayede ilerleyen uygulamalarda bir nesnenin konumunu, hareket yönünü veya iki nokta arasındaki ilişkiyi anlamak daha kolay hale gelecektir.

Quaternion ve dönüş mantığı

Üç boyutlu grafik sistemlerinde dönüşler yalnızca basit açı değerlerinden ibaret değildir. Three.js içerisinde quaternion tabanlı dönüş sistemi de önemli bir yere sahiptir.

Kurs içerisinde Quaternion yapısının temel kullanım mantığını ele alacağız ve quaternion tabanlı dönüşlerin neden kullanıldığını açıklayacağız.

Bu konunun özellikle animasyon sistemleri ve karmaşık nesne dönüşleri açısından neden önemli olduğunu uygulamalı örneklerle göreceğiz.

Amaç, öğrenciyi gereksiz matematiksel ayrıntılarla boğmak değil; Three.js kodlarında karşılaşılan quaternion yapılarını okuyabilecek ve temel kullanım mantığını anlayabilecek seviyeye getirmektir.

Animasyon sistemi

Three.js'in önemli özelliklerinden biri animasyon sistemidir.

Kurs içerisinde animasyonun yalnızca bir nesnenin position değerini sürekli değiştirmekten ibaret olmadığını göreceğiz. Three.js, animasyon verilerini yönetmek için daha kapsamlı bir sistem sunar.

AnimationClip, AnimationAction, AnimationMixer, AnimationObjectGroup ve çeşitli KeyframeTrack sınıflarını uygulamalı olarak inceleyeceğiz.

Animasyon verisinin zaman içerisindeki değişimini anlamak için keyframe mantığını ele alacağız.

NumberKeyframeTrack, VectorKeyframeTrack, QuaternionKeyframeTrack ve ColorKeyframeTrack gibi yapıların hangi tür verilerle çalıştığını göreceğiz.

Daha sonra bu yapıların nasıl bir araya gelerek bir animasyon sistemi oluşturduğunu inceleyeceğiz.

Bu bölümde temel hedef, Three.js animasyon sisteminin parçalarını birbirinden bağımsız ezberlemek değil, aralarındaki ilişkiyi anlamaktır.

Genel yapı şu şekilde düşünülebilir:

KeyframeTrack → AnimationClip → AnimationAction → AnimationMixer → Nesne

Bu ilişkiyi gerçek kod üzerinde gördüğünüzde Three.js animasyon sisteminin nasıl çalıştığı çok daha anlaşılır hale gelecektir.

AnimationMixer ve AnimationAction

Animasyon sisteminde AnimationMixer, animasyonların çalıştırılması ve güncellenmesi açısından merkezi yapılardan biridir.

AnimationAction ise belirli bir animasyonun oynatılması, durdurulması, tekrarlanması ve zaman içerisindeki davranışının yönetilmesinde kullanılır.

Kurs içerisinde bu iki yapının birbirleriyle nasıl çalıştığını uygulamalı olarak inceleyeceğiz.

Animasyonların başlatılması, durdurulması, tekrar oynatılması ve farklı animasyonların yönetilmesi gibi işlemleri gerçek kod örnekleri üzerinde göreceğiz.

Böylece Three.js'in animasyon sistemini yalnızca teorik olarak tanımak yerine, çalışan bir uygulama içerisinde kullanabilecek bir temel kazanacaksınız.

KeyframeTrack yapısı

Animasyon verilerinin önemli bir bölümü KeyframeTrack yapısı üzerinden yönetilir.

Bir değerin zaman içerisindeki değişimini temsil eden keyframe verilerinin nasıl oluşturulduğunu ve farklı veri türlerinin farklı track sınıflarıyla nasıl ifade edildiğini inceleyeceğiz.

Sayısal değerler için NumberKeyframeTrack, vektör değerleri için VectorKeyframeTrack, quaternion dönüşleri için QuaternionKeyframeTrack ve renk değerleri için ColorKeyframeTrack gibi yapıların kullanım amaçlarını ele alacağız.

Bu yaklaşım, animasyon sisteminin yalnızca “nesneyi hareket ettirme” işleminden ibaret olmadığını; farklı veri türlerinin zaman içerisinde yönetilebildiğini anlamanızı sağlayacaktır.

Renderer ve görüntü oluşturma

Bir 3B sahne oluşturduktan sonra bu sahnenin tarayıcı ekranında görüntülenmesi gerekir. Bunun için renderer sistemi kullanılır.

Renderer'ın sahne, kamera, geometri, materyal ve ışık gibi bileşenlerle nasıl birlikte çalıştığını uygulamalı olarak inceleyeceğiz.

WebGL tabanlı görüntü oluşturma mantığını Three.js'in sağladığı kullanım kolaylığı üzerinden ele alacağız.

Buradaki amaç, grafik işlemcisi seviyesindeki bütün ayrıntıları öğrenmek değil; Three.js kodunda renderer'ın neden bulunduğunu ve temel çalışma döngüsündeki görevini doğru anlamaktır.

Animasyon döngüsü

Gerçek zamanlı 3B uygulamalarda sahnenin sürekli güncellenmesi gerekir.

Bu nedenle animasyon döngüsü Three.js uygulamalarının temel parçalarından biridir.

Kamera veya nesnelerin hareketini, animasyonların güncellenmesini ve renderer'ın sahneyi tekrar görüntülemesini bir döngü içerisinde nasıl gerçekleştireceğimizi uygulamalı olarak inceleyeceğiz.

Zaman kavramının neden önemli olduğunu ve deltaTime gibi değerlerin animasyonların farklı bilgisayarlarda daha tutarlı çalışmasına nasıl yardımcı olduğunu göreceğiz.

Böylece yalnızca statik bir 3B görüntü değil, zaman içerisinde değişen gerçek bir 3B uygulamanın temel çalışma mantığını kavrayacağız.

Kod örnekleriyle öğrenme

Bu kursun önemli özelliklerinden biri, konuların gerçek kod örnekleri üzerinden anlatılmasıdır.

Kod örnekleri yalnızca sonuç göstermek amacıyla kullanılmayacaktır. Kodun içerisindeki yapıların görevlerini anlayacağız.

Bir sınıfın nasıl oluşturulduğunu, hangi parametreleri kabul ettiğini, hangi özelliklere sahip olduğunu ve hangi metotlarla kontrol edildiğini inceleyeceğiz.

Daha sonra kod üzerinde değişiklikler yaparak farklı sonuçları gözlemleyeceğiz.

Örneğin bir geometriye ait parametreyi değiştirdiğimizde şeklin nasıl değiştiğini, kameranın konumunu değiştirdiğimizde görüntünün nasıl farklılaştığını, bir nesnenin dönüşünü değiştirdiğimizde sahnedeki davranışının nasıl değiştiğini ve animasyon değerlerini değiştirdiğimizde hareketin nasıl farklılaştığını uygulama üzerinde göreceğiz.

Bu yöntem, hazır kodu ezberlemek yerine kodun mantığını anlamayı destekler.

Dokümantasyonla çalışabilme

Three.js geniş bir API'ye sahiptir. Bu nedenle bütün sınıfları ve metotları ezberlemek yerine dokümantasyonu okuyabilmek çok daha önemli bir beceridir.

Kurs boyunca sınıf, özellik ve metot kavramlarını sistemli biçimde inceleyerek dokümantasyon okuma alışkanlığının temelini oluşturacağız.

Bir sınıf gördüğünüzde bunun ne işe yaradığını anlayabilmek, parametrelerini inceleyebilmek ve kullanım biçimini kendi projenize aktarabilmek Three.js öğrenme sürecinin önemli bir parçasıdır.

Bu nedenle kurs, yalnızca belirli örnekleri çalıştırmayı değil, yeni bir Three.js yapısıyla karşılaştığınızda onu anlayabilmenizi hedefler.

Uygulamalı öğrenme yaklaşımı

Kurs boyunca temel bir öğrenme döngüsü kullanacağız:

Kavramı öğren → Kodu incele → Kodu çalıştır → Parametreyi değiştir → Sonucu gözlemle → Yapıyı yeniden kullan.

Bu yaklaşım sayesinde her konu bir önceki konuyla bağlantı kurar.

Örneğin önce sahne oluşturmayı öğreniriz. Sonra sahneye kamera ekleriz. Daha sonra geometri ve materyal ekleyerek bir mesh oluştururuz. Mesh'i sahneye ekleriz. Renderer ile görüntüleriz. Daha sonra ışık ve animasyon sistemlerini ekleyerek uygulamayı geliştiririz.

Böylece küçük parçalar zaman içerisinde birleşerek çalışan bir 3B web uygulamasına dönüşür.

Kimler için uygundur?

Bu kurs, Three.js öğrenmeye başlamak ve 3B web geliştirme konusunda sistemli bir temel oluşturmak isteyen kişiler için hazırlanmıştır.

JavaScript bilgisi bulunan ve tarayıcı üzerinde üç boyutlu uygulamalar geliştirmek isteyen kişiler için uygun bir başlangıç noktasıdır.

Aynı zamanda Three.js'i daha önce denemiş ancak sınıflar ve API yapısı arasındaki ilişkileri tam olarak anlayamamış kişiler için de kapsamlı bir tekrar ve sistemleştirme kaynağı olarak kullanılabilir.

Kurs boyunca konuların ayrıntılı biçimde açıklanması, kod örneklerinin gösterilmesi ve uygulamaların çalışma mantığının incelenmesi, öğrencinin yalnızca sonucu görmesini değil, sonuca nasıl ulaşıldığını anlamasını amaçlar.

Bu kursun sınırları

Bu kurs, Three.js'in temelini oluşturmak üzere tasarlanmıştır.

Bu nedenle kursun ana amacı fizik motorlarını veya ileri seviye harici sistemleri öğretmek değildir.

Burada öncelikle Three.js'in kendi temel yapısını öğreneceğiz.

Bu temel oluşturulduktan sonra Three.js ile birlikte farklı fizik motorları, gelişmiş kütüphaneler, etkileşim sistemleri, efekt sistemleri, gelişmiş animasyon teknikleri ve daha büyük uygulama mimarileri üzerine ayrı eğitimlerle ilerlemek mümkün hale gelecektir.

Bu yaklaşım sayesinde temel bilgiler ile ileri düzey konular birbirine karıştırılmadan aşamalı bir öğrenme yolu oluşturulabilir.

İlk aşamada Three.js'i doğru anlamak, sonraki aşamalarda Three.js'i farklı sistemlerle birleştirmeyi kolaylaştıracaktır.

Kurs sonunda ne kazanacaksınız?

Kursun sonunda Three.js'in temel çalışma mantığını anlayabilecek, temel 3B sahneler oluşturabilecek ve bu sahneleri JavaScript kodu ile yönetebileceksiniz.

Sahne oluşturma, kamera kullanımı, geometrik nesneler oluşturma, materyal uygulama, mesh oluşturma, nesneleri konumlandırma, döndürme ve ölçeklendirme gibi temel işlemleri gerçekleştirebileceksiniz.

Farklı kamera türlerini tanıyabilecek ve ihtiyaçlarınıza göre uygun kamera yapısını seçebileceksiniz.

Farklı geometri sınıflarını kullanabilecek ve parametrelerini değiştirerek farklı 3B şekiller oluşturabileceksiniz.

Three.js'in temel matematik yapılarından olan vektör ve quaternion kavramlarının kullanım alanlarını anlayabileceksiniz.

Animasyon sisteminin temel parçalarını tanıyabilecek; AnimationClip, AnimationAction, AnimationMixer ve farklı KeyframeTrack yapılarını birlikte kullanabileceksiniz.

Kod örneklerini yalnızca kopyalamak yerine, kullanılan yapıların neden tercih edildiğini açıklayabilecek bir temel kazanacaksınız.

Daha önemlisi, Three.js dokümantasyonunda yeni bir sınıf veya özellik gördüğünüzde onu inceleyerek kendi uygulamanızda kullanmaya başlayabileceğiniz bir çalışma yöntemi geliştireceksiniz.

Three.js öğrenme yolculuğunun ilk adımı

Bu kursu tamamladığınızda Three.js öğrenme yolculuğunun ilk ve en önemli aşamalarından birini tamamlamış olacaksınız.

Önünüzde artık yalnızca tek bir örnek uygulama değil, farklı 3B uygulamalar oluştururken tekrar kullanabileceğiniz bir temel bilgi sistemi bulunacaktır.

Bir sahnenin nasıl oluşturulduğunu, nesnelerin nasıl yönetildiğini, kameranın nasıl çalıştığını, geometrilerin nasıl meydana getirildiğini, materyallerin nasıl kullanıldığını ve animasyonların nasıl yönetildiğini anlayarak kendi çalışmalarınızı geliştirmeye başlayabilirsiniz.

Daha ileri seviyelerde fizik motorları, gelişmiş kütüphaneler ve farklı teknikler Three.js temelinin üzerine kurulabilir. Bu nedenle burada öğrendiğiniz her kavram sonraki çalışmalar için bir yapı taşı olacaktır.

Amaç yalnızca çalışan bir örnek üretmek değildir.

Amaç, Three.js ile 3B web uygulamalarını anlayarak geliştirebilecek bir temel oluşturmaktır.

Bu kurs boyunca her konuyu ayrıntılı konu anlatımıyla ele alacak, gerçek kod örnekleri üzerinden inceleyecek ve çalışan uygulamalarla gözlemleyeceğiz. Kodun ne yaptığını, neden kullanıldığını ve farklı değerlerle nasıl değiştirilebileceğini göreceğiz.

Böylece Three.js'i yalnızca hazır kodları kullanarak değil, kendi kodunuzu oluşturabilecek bir anlayışla öğrenmeye başlayacaksınız.

Three.js Uygulamalı 3D Web Geliştirme: İlk Adım, üç boyutlu web dünyasına giriş için oluşturulmuş sistemli bir başlangıç kursudur.

Şimdi sahneyi oluşturmaya, kamerayı yerleştirmeye, ilk 3B nesnemizi eklemeye ve Three.js'in çalışma mantığını adım adım keşfetmeye başlayalım.

Who this course is for:

  • JavaScript bilgilerini kullanarak 3B web geliştirmeye geçmek isteyen web geliştiricileri
  • Three.js'i sıfırdan öğrenmek isteyen başlangıç ve temel seviyedeki geliştiriciler
  • Tarayıcı üzerinde 3B sahneler, nesneler ve animasyonlar oluşturmak isteyen öğrenciler
  • Scene, Camera, Geometry, Material, Mesh, Object3D ve Renderer gibi Three.js temel yapılarını sistemli biçimde öğrenmek isteyenler
  • Three.js'in kamera, geometri ve animasyon sistemlerini gerçek kod örnekleri üzerinden öğrenmek isteyen geliştiriciler
  • Three.js dokümantasyonundaki sınıfları, özellikleri ve metotları anlayarak kendi uygulamalarında kullanmak isteyen öğrenciler
  • Daha ileri Three.js çalışmalarına geçmeden önce sağlam bir temel oluşturmak isteyenler