
`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.
`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.
`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.
`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.
`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.
`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.
`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.
`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.
`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.
`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.
`ArrayCamera`, birden fazla alt kamerayı (genellikle `PerspectiveCamera`) tek bir çatı altında toplayan ve her birine bir `viewport` (ekran alanı) atayarak aynı sahneyi farklı açılardan veya farklı görünümlerle render etmenizi sağlayan özel bir kamera türüdür. Özellikle VR, split-screen oyunlar veya çoklu perspektif gerektiren uygulamalar için idealdir. Bu ders, resmi Three.js dokümantasyonunu temel alarak `ArrayCamera`'nin tüm özelliklerini ve kullanımını detaylıca açıklar.
`Camera`, Three.js'deki tüm kamera türlerinin (`PerspectiveCamera`, `OrthographicCamera`, `ArrayCamera`, `StereoCamera` vb.) türetildiği **soyut temel sınıftır**. Bu sınıf, projeksiyon matrisi, dünya matrisinin tersi ve görüş yönü gibi tüm kameralar için ortak olan temel özellikleri ve metotları tanımlar. Doğrudan `new Camera()` ile örnek oluşturulmaz; bunun yerine alt sınıfları kullanılır. Bu ders, resmi Three.js dokümantasyonunu temel alarak `Camera` sınıfının tüm özelliklerini ve metotlarını detaylıca açıklar ve sonunda çalışan bir örnek sunar.
`CubeCamera`, 3D uzayda konumlandırılan ve etrafındaki sahneyi 6 farklı yöne (pozitif/negatif X, Y, Z) render ederek bir `WebGLCubeRenderTarget`'e kaydeden özel bir kameradır. Bu render target, bir `CubeTexture` olarak kullanılabilir ve özellikle **gerçek zamanlı yansımalar** (real-time reflections) için idealdir. Bu ders, resmi Three.js dokümantasyonunu temel alarak `CubeCamera`'nin tüm özelliklerini ve kullanımını detaylıca açıklar.
`OrthographicCamera`, ortografik projeksiyon kullanan bir kamera türüdür. Bu projeksiyon modunda, bir nesnenin render edilen görüntüdeki boyutu, kameraya olan uzaklığından bağımsız olarak sabit kalır. Bu özellik, 2D oyunlar, UI öğeleri, mimari çizimler, izometrik görünümler ve teknik diyagramlar gibi perspektif bozulmasının istenmediği durumlar için idealdir. Bu ders, resmi Three.js dokümantasyonunu temel alarak `OrthographicCamera`'nın tüm özelliklerini ve kullanımını detaylıca açıklar.
`PerspectiveCamera`, 3D sahneleri render etmek için en yaygın kullanılan kamera türüdür. Perspektif projeksiyon kullanır, yani nesneler uzaklaştıkça küçülür, yakınlaştıkça büyür — tıpkı insan gözü veya gerçek bir fotoğraf makinesi gibi. Bu ders, resmi Three.js dokümantasyonunu temel alarak `PerspectiveCamera`'nın tüm özelliklerini, metotlarını ve kullanımını detaylıca açıklar ve sonunda çalışan bir örnek sunar.
`StereoCamera`, iki adet `PerspectiveCamera` (sol ve sağ göz) kullanarak stereoskopik projeksiyon sağlayan özel bir kamera türüdür. Bu iki kamera arasındaki mesafe (`eyeSep`) ile 3D derinlik efekti oluşturulur. Anaglif (kırmızı-mavi gözlük), VR gözlükleri veya paralaks bariyer ekranlar için idealdir. Bu ders, resmi Three.js dokümantasyonunu temel alarak `StereoCamera`'nın tüm özelliklerini ve kullanımını detaylıca açıklar.
Three.js BoxGeometry — Dikdörtgen Prizma, Geometri ve Segmentasyon
Description
Three.js ile BoxGeometry kullanarak dikdörtgen prizma oluşturmayı, genişlik yükseklik ve derinlik değerlerini değiştirmeyi, yüzey bölümlendirmesini kontrol etmeyi, nokta ve üçgen yapısını incelemeyi, yüzey deformasyonlarını gözlemlemeyi, çalışan kodu tarayıcıda render ederek sonuçları deneme yanılma yöntemiyle öğrenmeyi ve resmi dokümantasyon üzerinden geometri mantığını uygulamalı olarak kavramayı amaçlayan ders.
Keywords
Three.js, BoxGeometry, Three.js BoxGeometry, 3D geometri, üç boyutlu geometri, dikdörtgen prizma, küp, geometri oluşturma, geometri boyutları, genişlik, yükseklik, derinlik, segmentasyon, geometri segmentasyonu, widthSegments, heightSegments, depthSegments, vertex, üçgen, yüzey, BufferGeometry, Mesh, geometri deformasyonu, vertex shader, yüzey dalgalandırma, wireframe, EdgesGeometry, animasyon, Three.js animasyon, WebGL, 3D modelleme, prosedürel geometri, geometri optimizasyonu, performans, Three.js dersleri, Three.js eğitim, Three.js dokümantasyonu, uygulamalı Three.js, interaktif 3D, render, kod ile öğrenme, deneme yanılma, 3D web geliştirme
Three.js CapsuleGeometry — Kapsül Geometrisi, Boyutlandırma, Bölümlendirme ve Etkileşimli Üç Boyutlu Uygulama
DESCRIPTION
Three.js ile CapsuleGeometry kullanarak kapsül geometrisi oluşturmayı, yarıçap ve uzunluk değerlerini kontrol etmeyi, kapak, çevre ve yükseklik bölümlendirmelerinin geometri üzerindeki etkilerini anlamayı, resmi dokümantasyon bilgilerini çalışan kod ve üç boyutlu görüntü ile birlikte incelemeyi, geometrinin otomatik olarak güncellenmesini, malzeme ve tel kafes görünümünü, yüzey hareketlerini, animasyonu, vertex ve üçgen sayılarını gözlemlemeyi, farklı değerleri deneyerek geometri ile performans arasındaki ilişkiyi değerlendirmeyi öğreniyoruz.
KEYWORDS
Three.js, CapsuleGeometry, Three.js CapsuleGeometry, kapsül geometrisi, üç boyutlu geometri, 3D geometri, yarıçap, uzunluk, kapak bölümlendirmesi, çevresel bölümlendirme, yükseklik bölümlendirmesi, geometri bölümlendirmesi, geometri oluşturma, geometri parametreleri, parameters, vertex, üçgen, yüzey, Mesh, ShaderMaterial, vertex shader, animasyon, tel kafes, wireframe, EdgesGeometry, OrbitControls, lil-gui, etkileşimli 3D, gerçek zamanlı güncelleme, Three.js dokümantasyonu, üç boyutlu modelleme, web tabanlı 3D, JavaScript, WebGL, performans optimizasyonu, geometri denemeleri, kod ile öğrenme, deneme yanılma ile öğrenme
Three.js CircleGeometry ile Daire, Çokgen ve Daire Dilimleri Oluşturma
Description: Three.js CircleGeometry yapısını resmi dokümantasyon temelinde öğrenme, daire ve düzenli çokgen oluşturma, yarıçap ve segment sayısını kontrol etme, başlangıç açısı ve merkezi açı ile daire dilimleri oluşturma, düşük ve yüksek segment değerlerinin geometrik görünüm üzerindeki etkisini gözlemleme, çalışan kodu render ekranında inceleme, parametreleri değiştirerek sonuçları anında görme, geometri ve malzeme ilişkisini kavrama, renk ve tel kafes görünümünü değiştirme, yüzey dalgalanması oluşturma, animasyon uygulama, geometri bilgilerini inceleme, vertex ve üçgen sayılarını gözlemleme, dokümantasyon ile kod arasında bağlantı kurma, kodu çalıştırarak deneme yanılma yöntemiyle öğrenme, örnekleri tekrar ederek teknik bilgiyi pekiştirme, Three.js geometrilerinin genel çalışma mantığını uygulamalı olarak kavrama
Keywords: Three.js, CircleGeometry, Three.js CircleGeometry, daire geometrisi, çokgen oluşturma, düzenli çokgen, daire dilimi, yarıçap, segment, segment sayısı, başlangıç açısı, merkezi açı, thetaStart, thetaLength, geometri, üç boyutlu grafik, üç boyutlu web, Three.js geometri, JavaScript, WebGL, render, gerçek zamanlı render, interaktif geometri, dokümantasyon, kod uygulaması, deneme yanılma, uygulamalı öğrenme, shader, vertex shader, dalga efekti, wireframe, animasyon, OrbitControls, lil-gui, geometri parametreleri, vertex sayısı, üçgen sayısı, performans, procedural tasarım, 2D oyun, pasta grafik, teknik eğitim, Three.js kursu
Three.js ConeGeometry — Koni Geometrisi, Parametreler ve Etkileşimli 3D Uygulama
Description
Three.js ile ConeGeometry kullanarak üç boyutlu koni geometrileri oluşturmayı, yarıçap, yükseklik, çevresel bölümlendirme, yükseklik bölümlendirme, açık veya kapalı taban, başlangıç açısı ve merkezi açı gibi temel parametrelerin geometri üzerindeki etkilerini öğrenin. Resmi dokümantasyondaki bilgileri doğru sırayla inceleyerek çalışan HTML örneği üzerinden uygulayın, tarayıcıdaki üç boyutlu görüntüyü eş zamanlı olarak gözlemleyin ve parametreleri değiştirerek sonuçları deneme yanılma yöntemiyle keşfedin. Ders kapsamında koninin çokgen ve düzgün görünümleri, dilimli koniler, tel kafes görünümü, malzeme özellikleri, yüzey dalgalanması, animasyon ve otomatik geometri güncelleme sistemi ele alınır. Amaç, kodu ezberlemek yerine dokümantasyon, kod, render sonucu ve parametre değişikliği arasındaki ilişkiyi kurarak Three.js geometrilerini uygulamalı biçimde öğrenmektir.
Keywords
Three.js, ConeGeometry, Three.js ConeGeometry, Three.js koni, koni geometrisi, 3D koni, üç boyutlu geometri, Three.js geometri, radius, height, radialSegments, heightSegments, openEnded, thetaStart, thetaLength, koni dilimi, 3D modelleme, WebGL, JavaScript 3D, Three.js eğitim, Three.js ders, Three.js uygulama, etkileşimli 3D, parametrik geometri, geometrik modelleme, segmentasyon, tel kafes, shader, vertex shader, animasyon, OrbitControls, lil-gui, otomatik güncelleme, HTML 3D, tarayıcıda 3D, üç boyutlu web, dokümantasyon ile öğrenme, deneme yanılma ile öğrenme, uygulamalı Three.js, Three.js başlangıç, Three.js ileri seviye
Title: Three.js CylinderGeometry ile Silindir, Koni ve Kesik Koni Oluşturma
Description: Three.js CylinderGeometry kullanarak silindir, koni, kesik koni ve dilimli geometriler oluşturmayı, üst ve alt yarıçapları kontrol etmeyi, yükseklik ve segmentasyon değerlerinin geometri üzerindeki etkisini anlamayı, açık uç ve açı parametreleriyle farklı geometriler üretmeyi, otomatik güncellenen kod örneğini çalıştırarak parametreleri deneme yanılma yöntemiyle keşfetmeyi, geometri verilerini incelemeyi ve oluşturulan üç boyutlu modeli gerçek zamanlı olarak gözlemlemeyi öğrenin.
Keywords: Three.js, CylinderGeometry, Three.js CylinderGeometry, silindir geometrisi, koni geometrisi, kesik koni, frustum, 3D geometri, üç boyutlu geometri, radiusTop, radiusBottom, height, radialSegments, heightSegments, openEnded, thetaStart, thetaLength, geometri segmentasyonu, silindir oluşturma, koni oluşturma, dilimli silindir, Three.js geometri, Three.js dersleri, Three.js eğitim, WebGL, JavaScript 3D, üç boyutlu modelleme, parametrik geometri, interaktif 3D, otomatik güncelleme, geometri parametreleri, vertex, üçgen, wireframe, shader, vertex shader, Three.js animasyon, OrbitControls, lil-gui, deneme yanılma ile öğrenme, kod ile öğrenme, render ile öğrenme, Three.js uygulamalı eğitim
Three.js DodecahedronGeometry — 12 Yüzlü Geometriyi Dokümantasyon ve Uygulama ile Öğrenme
DESCRIPTION
Three.js DodecahedronGeometry sınıfını resmi dokümantasyon temelinde inceleyerek dodecahedron geometrisinin yapısını, yarıçap ve detay parametrelerini, yüzey, köşe ve kenar ilişkilerini, geometri özelliklerini, malzeme ve ışıklandırmayı, kenar çizgilerini ve vertex noktalarını, animasyonu ve çalışan render örneğini adım adım öğrenin. Kodun tarayıcıda oluşturduğu üç boyutlu sonucu izlerken parametreleri değiştirin, geometriyi yeniden oluşturun, farklı sonuçları karşılaştırın ve deneme yanılma yöntemiyle konuyu uygulamalı olarak pekiştirin. Dersin amacı, hazır kodu ezberlemek yerine dokümantasyon → konu → kod → render → parametre değişikliği → gözlem → tekrar → uygulama sırasıyla Three.js geometrilerinin çalışma mantığını anlamaktır.
KEYWORDS
Three.js, DodecahedronGeometry, Three.js geometrileri, 12 yüzlü geometri, dodecahedron, çokyüzlü geometri, Plato katıları, Three.js dokümantasyon, Three.js dersleri, Three.js eğitim, JavaScript 3D, WebGL, üç boyutlu web, 3D modelleme, geometrik modelleme, radius, detail, parameters, vertex, edge, face, MeshStandardMaterial, OrbitControls, lil-gui, geometri oluşturma, geometri parametreleri, interaktif 3D, Three.js render, 3D render, shader, animasyon, ışıklandırma, malzeme, wireframe, deneme yanılma ile öğrenme, uygulamalı öğrenme, dokümantasyon okuma, kod inceleme, 3D programlama, web tabanlı 3D, JavaScript ile 3D, Three.js başlangıç, Three.js ileri seviye
Three.js ExtrudeGeometry — 2D Şekilleri 3D Geometriye Dönüştürme
Description
Three.js ExtrudeGeometry sınıfını resmi dokümantasyon temelinde öğrenin; Shape nesnelerini üç boyutlu katı geometrilere dönüştürün, derinlik, eğim, kenar yumuşatma, segment sayısı ve eğri yol boyunca ekstrüzyon gibi temel özellikleri çalışan kod ve canlı render üzerinde deneyin. Dokümandan koda, koddan render sonucuna ilerleyen yöntemle parametreleri değiştirin, sonuçları gözlemleyin, karşılaştırın ve deneme yanılma yoluyla kendi Three.js çalışma yönteminizi geliştirin.
Keywords
Three.js, ExtrudeGeometry, Shape, 3D geometri, 2D şekil, ekstrüzyon, depth, bevel, bevelEnabled, bevelThickness, bevelSize, bevelOffset, bevelSegments, steps, curveSegments, extrudePath, CatmullRomCurve3, 3D modelleme, geometrik şekiller, logo tasarımı, mimari modelleme, 3D baskı, boru modelleme, eğri boyunca ekstrüzyon, Three.js dokümantasyon, Three.js dersleri, JavaScript 3D, WebGL, interaktif 3D, canlı render, kod ile 3D modelleme, deneme yanılma ile öğrenme, dokümantasyon tabanlı öğrenme, teknik uygulama, geometri oluşturma
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.