Three.js’e Başlangıç Rehberi: Web’de 3D Dünyasına Adım Atın

Three.js’e Başlangıç Rehberi: Web’de 3D Dünyasına Adım Atın

Günümüz web teknolojileri, statik sayfaların ötesine geçerek kullanıcılara zengin ve etkileşimli deneyimler sunma potansiyeli taşıyor. Bu potansiyelin en heyecan verici alanlarından biri de hiç şüphesiz 3D grafikler. Web tarayıcıları üzerinde üç boyutlu sahneler oluşturmak, animasyonlar yapmak ve interaktif deneyimler sunmak için geliştirilen kütüphaneler arasında Three.js, popülerliği ve kullanım kolaylığı ile öne çıkıyor. Bu rehber, Three.js dünyasına adım atmak isteyen herkes için kapsamlı bir başlangıç noktası sunmayı hedefliyor.

Three.js Nedir ve Neden Kullanmalıyız?

Three.js, tarayıcı tabanlı 3D grafikler oluşturmak ve görüntülemek için kullanılan, açık kaynaklı, hafif ve güçlü bir JavaScript kütüphanesidir. WebGL API’sini daha erişilebilir ve kullanımı kolay bir arayüzle sararak, geliştiricilerin karmaşık 3D kavramlarıyla uğraşmak yerine yaratıcılıklarına odaklanmalarını sağlar. Mimari görselleştirmelerden ürün tanıtımlarına, interaktif oyunlardan veri görselleştirmelerine kadar geniş bir yelpazede kullanılabilir.

WebGL ve Three.js İlişkisi

WebGL (Web Graphics Library), herhangi bir eklentiye ihtiyaç duymadan web tarayıcılarında 3D grafikler oluşturmak için kullanılan bir JavaScript API’sidir. Ancak WebGL ile doğrudan çalışmak, düşük seviyeli programlama bilgisi ve karmaşık matematiksel hesaplamalar gerektirir. İşte burada Three.js devreye girer. Three.js, WebGL’in karmaşıklığını soyutlayarak, geliştiricilerin sahne, kamera, ışıklandırma, geometri ve malzeme gibi yüksek seviyeli kavramlarla çalışmasına olanak tanır. Kısacası, Three.js, WebGL’i kullanmayı çok daha kolay ve hızlı hale getiren bir soyutlama katmanıdır.

Temel Avantajları

• Kolay Öğrenilebilirlik: JavaScript bilen herkesin rahatlıkla adapte olabileceği bir yapıya sahiptir.
• Geniş Topluluk ve Dokümantasyon: Aktif bir topluluğa ve kapsamlı bir dokümantasyona sahiptir, bu da sorun çözmeyi ve öğrenmeyi kolaylaştırır.
• Performans: WebGL’in gücünü kullanarak modern tarayıcılarda yüksek performanslı 3D deneyimleri sunar.
• Esneklik: Çok çeşitli 3D nesneleri, malzemeleri, ışıklandırmaları ve animasyonları destekler.
• Eklenti Gerektirmez: Tarayıcıda yerel olarak çalıştığı için herhangi bir ek yazılım veya eklenti yüklemeye gerek yoktur.

Kullanım Alanları

Three.js’in kullanım alanları hayal gücünüzle sınırlıdır. En yaygın kullanım senaryolarından bazıları şunlardır:

• Etkileşimli ürün görüntüleyicileri ve konfigüratörleri
• Mimari ve iç mekan görselleştirmeleri
• Web tabanlı oyunlar ve simülasyonlar
• Veri görselleştirmeleri (grafikler, haritalar)
• Sanal ve artırılmış gerçeklik (VR/AR) deneyimleri
• Sanatsal enstalasyonlar ve portföy siteleri

Temel Three.js Bileşenleri

Bir Three.js sahnesi oluşturmak için birkaç temel bileşene ihtiyacımız vardır. Bu bileşenler, bir 3D dünyasını tanımlayan yapı taşlarıdır.

Sahne (Scene)

Sahne, 3D dünyamızın kapsayıcısıdır. İçine tüm nesnelerimizi (modeller, ışıklar, kameralar vb.) yerleştirdiğimiz yerdir. Bir sahne olmadan hiçbir şey görüntüleyemeyiz.

const scene = new THREE.Scene();

Kamera (Camera)

Kamera, sahneyi hangi açıdan ve nasıl göreceğimizi belirler. Three.js'te farklı kamera türleri bulunur, ancak en yaygın kullanılanı PerspectiveCamera'dır. Bu kamera, insan gözünün dünyayı algıladığı gibi perspektif bir görünüm sunar.

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
// İlk parametre: Görüş alanı (FOV)
// İkinci parametre: En boy oranı
// Üçüncü parametre: Yakın kırpma düzlemi (near clipping plane)
// Dördüncü parametre: Uzak kırpma düzlemi (far clipping plane)
camera.position.z = 5; // Kamerayı geriye doğru 5 birim taşı

Renderer (Oluşturucu)

Renderer, sahne ve kamera tarafından tanımlanan 3D dünyasını alıp, bunu 2D piksel verilerine dönüştürerek tarayıcıda görüntülenmesini sağlayan bileşendir. Genellikle WebGLRenderer kullanılır.

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight); // Renderer boyutunu ayarla
document.body.appendChild(renderer.domElement); // Oluşturulan canvas'ı HTML'e ekle

Geometri ve Malzeme (Geometry & Material)

3D nesneler, bir geometri ve bir malzemeden oluşur. Geometri, nesnenin şeklini (noktalar, kenarlar, yüzeyler) tanımlar. Malzeme ise nesnenin yüzey özelliklerini (renk, doku, parlaklık, saydamlık) belirler.

const geometry = new THREE.BoxGeometry(1, 1, 1); // 1x1x1 boyutunda bir küp geometrisi
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); // Yeşil renkli temel malzeme
const cube = new THREE.Mesh(geometry, material); // Geometri ve malzemeyi birleştirerek bir küp nesnesi oluştur
scene.add(cube); // Küpü sahneye ekle

İlk Three.js Uygulamanızı Oluşturma

Şimdi öğrendiğimiz temel bileşenleri bir araya getirerek basit bir Three.js uygulaması oluşturalım. Bu uygulama, ekranda dönen yeşil bir küp gösterecek.

Gerekli Kurulumlar

Three.js'i kullanmak için bir HTML dosyası ve bir JavaScript dosyasına ihtiyacımız var. Three.js kütüphanesini projemize dahil etmenin en kolay yolu CDN (Content Delivery Network) kullanmaktır. HTML dosyanızın etiketinin kapanışından hemen önce aşağıdaki script etiketini ekleyin:

Temel Sahne Kurulumu ve Küp Ekleme

HTML dosyanızda yukarıdaki script bloğunun içine aşağıdaki JavaScript kodunu ekleyerek ilk sahnenizi oluşturabilirsiniz:

import * as THREE from 'https://unpkg.com/three/build/three.module.js';

// 1. Sahneyi Oluştur
const scene = new THREE.Scene();

// 2. Kamerayı Oluştur
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

// 3. Renderer'ı Oluştur
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 4. Geometri ve Malzeme Oluştur (Küp için)
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); // Yeşil küp
const cube = new THREE.Mesh(geometry, material);
scene.add(cube); // Küpü sahneye ekle

// 5. Animasyon Döngüsü
function animate() {
    requestAnimationFrame(animate); // Tarayıcıya bir sonraki kareyi çizmesini söyle

    cube.rotation.x += 0.01; // Küpü x ekseninde döndür
    cube.rotation.y += 0.01; // Küpü y ekseninde döndür

    renderer.render(scene, camera); // Sahneyi kameradan render et
}

animate(); // Animasyon döngüsünü başlat

// Pencere boyutlandığında rendereri ve kamerayı güncelle
window.addEventListener('resize', () => {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
});

Bu kod bloğu, tarayıcınızda dönen yeşil bir küp görüntüleyecektir. animate fonksiyonu, tarayıcının her yenileme döngüsünde çağrılan bir döngüdür ve burada nesnelerin pozisyonlarını, rotasyonlarını veya diğer özelliklerini güncelleyerek animasyonlar oluştururuz.

Etkileşim ve Animasyon Ekleme

Statik bir 3D sahne oluşturmak güzeldir, ancak Three.js'in gerçek gücü, etkileşim ve animasyon yeteneklerinde yatar. Kullanıcıların sahneyle etkileşime girmesini ve nesnelerin hareket etmesini sağlayabiliriz.

Kamera Kontrolleri (OrbitControls)

Kullanıcıların sahneyi fare veya dokunmatik ekranla döndürmesini, yakınlaştırmasını ve kaydırmasını sağlamak için Three.js'in OrbitControls modülünü kullanabiliriz. Bu, kullanıcı deneyimini önemli ölçüde artırır.

import { OrbitControls } from 'https://unpkg.com/three/examples/jsm/controls/OrbitControls.js';

// ... (Sahne, kamera, renderer kurulumu) ...

const controls = new OrbitControls(camera, renderer.domElement);
// controls.enableDamping = true; // Daha pürüzsüz hareket için
// controls.dampingFactor = 0.25;

function animate() {
    requestAnimationFrame(animate);

    // controls.update(); // enableDamping kullanıyorsanız bunu çağırmanız gerekir

    renderer.render(scene, camera);
}
animate();

Nesneleri Canlandırma (Animation Loop)

Yukarıdaki küp örneğinde gördüğümüz gibi, requestAnimationFrame kullanarak bir animasyon döngüsü oluştururuz. Bu döngü içinde nesnelerin özelliklerini (pozisyon, rotasyon, ölçek) zamanla değiştirerek animasyonlar yaratırız. Örneğin, bir nesneyi bir yörünge etrafında döndürmek veya belirli bir yöne hareket ettirmek için her karede bu özellikleri güncelleyebiliriz.

Kullanıcı Etkileşimleri (Mouse Olayları)

Three.js, fare tıklamaları veya fare hareketleri gibi kullanıcı etkileşimlerini algılamak için Raycaster nesnesini kullanır. Bu sayede, sahnedeki belirli bir nesneye tıklanıp tıklanmadığını kontrol edebilir ve buna göre tepkiler verebiliriz. Örneğin, bir küpe tıklandığında rengini değiştirebiliriz.

const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2();

function onMouseMove(event) {
    // Fare koordinatlarını normalleştir (-1 ile +1 arası)
    mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
    mouse.y = - (event.clientY / window.innerHeight) * 2 + 1;
}

window.addEventListener('mousemove', onMouseMove, false);

function animate() {
    requestAnimationFrame(animate);

    // Raycaster'ı güncelle ve kesişen nesneleri bul
    raycaster.setFromCamera(mouse, camera);
    const intersects = raycaster.intersectObjects(scene.children);

    // Kesişen nesneler varsa, örneğin rengini değiştir
    if (intersects.length > 0) {
        if (intersects[0].object.material.color.getHex() !== 0xff0000) {
            intersects[0].object.material.color.set(0xff0000); // Kırmızı yap
        }
    } else {
        // Kesişme yoksa orijinal rengine döndür
        // Bu kısım, tüm nesnelerin orijinal rengini tutmayı gerektirir
        // Basitlik adına burada atlanmıştır, ancak gerçek uygulamalarda yönetilmelidir.
    }

    renderer.render(scene, camera);
}

Işıklandırma ve Gölgeler

Gerçekçi bir 3D sahne oluşturmanın olmazsa olmazı ışıklandırmadır. Işıklar, nesnelerin nasıl göründüğünü, gölgelerin nasıl düştüğünü ve sahnenin genel atmosferini belirler. Three.js çeşitli ışık türleri sunar.

Işık Türleri

Three.js'te yaygın olarak kullanılan ışık türleri şunlardır:

• AmbientLight (Ortam Işığı): Sahnedeki tüm nesneleri eşit şekilde aydınlatır, gölge oluşturmaz. Genel bir aydınlatma sağlar.
• DirectionalLight (Yönlü Işık): Güneş ışığı gibi, belirli bir yönden gelen paralel ışık demetlerini simüle eder. Gölgeler oluşturabilir.
• PointLight (Nokta Işığı): Bir ampul gibi, tek bir noktadan her yöne yayılan ışığı simüle eder. Gölgeler oluşturabilir.
• SpotLight (Spot Işığı): Bir el feneri gibi, konik bir ışık demeti yayar. Gölgeler oluşturabilir ve hedeflenebilir.
• HemisphereLight (Yarım Küre Işığı): Gökyüzü ve yer gibi iki farklı renkte ışık kaynağı sağlar, dış mekan sahneleri için idealdir.

const ambientLight = new THREE.AmbientLight(0x404040); // Yumuşak beyaz ortam ışığı
scene.add(ambientLight);

const directionalLight = new THREE.DirectionalLight(0xffffff, 1); // Beyaz yönlü ışık
directionalLight.position.set(5, 10, 7);
scene.add(directionalLight);

Gölgeleri Etkinleştirme

Gölgeler, 3D sahnelerin derinliğini ve gerçekçiliğini artıran kritik bir unsurdur. Three.js'te gölgeleri etkinleştirmek için renderer, ışık ve gölge oluşturan nesnelerde bazı ayarlamalar yapmamız gerekir.

1. Renderer'da Gölgeleri Etkinleştir:

   renderer.shadowMap.enabled = true;

2. Işık Kaynağında Gölgeleri Etkinleştir: (DirectionalLight, PointLight, SpotLight için)

   directionalLight.castShadow = true;

3. Gölge Yapan Nesnelerde Gölgeleri Etkinleştir:

   cube.castShadow = true; // Bu nesne gölge yapsın

4. Gölge Alan Nesnelerde Gölgeleri Etkinleştir: (Genellikle zemin)

   plane.receiveShadow = true; // Bu nesne gölge alsın

Gerçekçi Görünümler İçin İpuçları

• Birden fazla ışık kaynağı kullanarak sahnenizi daha dinamik hale getirin.
• Farklı ışık renkleri ve yoğunlukları ile atmosfer yaratın.
• Gölgeleri doğru bir şekilde ayarlamak, sahnenin derinliğini ve nesnelerin konumunu daha iyi anlamanızı sağlar.
• Fiziksel Tabanlı İşleme (PBR) malzemeleri (MeshStandardMaterial veya MeshPhysicalMaterial) kullanarak ışığın nesnelerle daha gerçekçi etkileşimini sağlayın.

Doku ve Malzemelerle Çalışma

Nesnelerin sadece tek bir renkte olması genellikle yeterli değildir. Dokular ve gelişmiş malzemeler kullanarak nesnelerimize detay, gerçekçilik ve karakter katabiliriz.

Temel Malzeme Türleri

Three.js, farklı görsel özelliklere sahip çeşitli malzeme türleri sunar:

• MeshBasicMaterial: En basit malzemedir. Işıktan etkilenmez, düz bir renkte veya dokuyla görünür.
• MeshLambertMaterial: Işıktan etkilenir, ancak parlaklık (specular) özelliği yoktur. Düşük performanslı cihazlar için iyi bir seçenektir.
• MeshPhongMaterial: Işıktan etkilenir ve parlaklık özelliği vardır. Metalik veya parlak yüzeyler için uygundur.
• MeshStandardMaterial / MeshPhysicalMaterial: Fiziksel Tabanlı İşleme (PBR) prensiplerine dayanır. Gerçekçi ışık etkileşimleri ve detaylı yüzey özellikleri (metaliklik, pürüzlülük, şeffaflık) sunar. Modern ve gerçekçi sahneler için tercih edilir.

Doku (Texture) Uygulama

Dokular, bir resmin 3D nesnenin yüzeyine kaplanmasıdır. Bu, nesnelere detay, renk ve desen eklemenin en yaygın yoludur.

const textureLoader = new THREE.TextureLoader();
const texture = textureLoader.load('path/to/your/image.jpg');

const materialWithTexture = new THREE.MeshBasicMaterial({ map: texture });
const cubeWithTexture = new THREE.Mesh(geometry, materialWithTexture);
scene.add(cubeWithTexture);

Bir nesneye birden fazla doku uygulayarak (örneğin, renk dokusu, normal harita, pürüzlülük haritası) çok daha gerçekçi görünümler elde edebiliriz.

PBR (Fiziksel Tabanlı İşleme) Kavramı

PBR, ışığın fiziksel dünyada malzemelerle nasıl etkileşime girdiğini simüle eden bir render metodolojisidir. MeshStandardMaterial ve MeshPhysicalMaterial, bu prensipleri uygulayarak metaliklik, pürüzlülük, yansıtıcılık gibi parametrelerle gerçekçi yüzeyler oluşturmanıza olanak tanır. Bu, özellikle oyunlar ve mimari görselleştirmeler gibi yüksek kaliteli grafiklerin istendiği uygulamalarda kritik öneme sahiptir.

Performans Optimizasyonu ve İpuçları

Karmaşık 3D sahneler oluştururken performansı göz önünde bulundurmak önemlidir. Akıcı bir kullanıcı deneyimi için optimizasyon teknikleri uygulamak gerekebilir.

Geometri ve Malzeme Yönetimi

• Geometrileri Birleştirme: Aynı malzemeye sahip birden fazla küçük nesneyi tek bir geometriye birleştirerek çizim çağrısı (draw call) sayısını azaltın.
• BufferGeometry Kullanımı: Three.js'in modern ve daha verimli BufferGeometry sınıflarını tercih edin.
• Malzeme Paylaşımı: Mümkün olduğunca aynı malzemeyi birden fazla nesne için kullanın. Her nesne için yeni bir malzeme oluşturmak yerine, aynı malzeme örneğini yeniden kullanın.
• Gereksiz Geometrilerden Kaçınma: Sahnenizde görünmeyen veya çok küçük olan nesnelerin geometrilerini basitleştirin veya kaldırın.

Bellek Kullanımını Azaltma

• Nesneleri Temizleme: Sahneden kaldırdığınız nesnelerin geometrilerini, malzemelerini ve dokularını dispose() metoduyla bellekten temizleyin. Bu, özellikle dinamik olarak nesne ekleyip çıkardığınız uygulamalarda önemlidir.
• Doku Boyutları: Dokuların boyutlarını optimize edin. Gereksiz yere yüksek çözünürlüklü dokular kullanmaktan kaçının.

LOD (Level of Detail)

LOD, kameradan uzaklaştıkça nesnelerin daha basit versiyonlarını görüntüleyerek performansı artıran bir tekniktir. Three.js'in LOD sınıfı ile bunu kolayca uygulayabilirsiniz. Yakındaki nesneler detaylı, uzaktaki nesneler ise daha az detaylı geometrilerle render edilir.

Sonuç

Three.js, web üzerinde 3D grafikler oluşturmak için inanılmaz derecede güçlü ve esnek bir araçtır. Bu rehber, Three.js'in temel kavramlarını, bileşenlerini ve ilk uygulamanızı nasıl oluşturacağınızı adım adım göstererek size bir başlangıç noktası sunmayı amaçladı. Sahne, kamera, renderer, geometri, malzeme, ışıklandırma ve animasyon gibi temel taşları anladığınızda, hayal gücünüzü kullanarak sınırsız 3D deneyimleri yaratmaya başlayabilirsiniz. Web'in geleceği 3D ve etkileşimli deneyimlerle şekilleniyor, Three.js bu geleceğin kapılarını aralayan anahtarlardan biri. Şimdi sıra sizde; kodlamaya başlayın ve kendi 3D dünyalarınızı inşa edin!

SSS (Sık Sorulan Sorular)

Three.js'e alternatif kütüphaneler var mı?

Evet, Three.js'e alternatif olarak Babylon.js, PlayCanvas gibi kütüphaneler ve Unity WebGL, Unreal Engine WebGL gibi oyun motorlarının web çıktıları bulunmaktadır. Her birinin kendine göre avantajları ve kullanım senaryoları vardır.

Three.js karmaşık oyunlar için uygun mu?

Three.js, tarayıcı tabanlı basit ve orta karmaşıklıktaki oyunlar için oldukça uygundur. Ancak çok yüksek grafik kalitesi ve fizik simülasyonu gerektiren AAA seviyesi oyunlar için genellikle Unity veya Unreal Engine gibi tam teşekküllü oyun motorları tercih edilir. Three.js ile de etkileyici oyunlar geliştirilebilir, ancak bu daha fazla manuel optimizasyon ve özel kodlama gerektirebilir.

Three.js öğrenirken sık karşılaşılan zorluklar nelerdir?

Başlangıçta koordinat sistemleri, matris dönüşümleri ve ışıklandırma prensipleri gibi 3D kavramlarını anlamak zorlayıcı olabilir. Ayrıca, performans optimizasyonu ve bellek yönetimi, karmaşık sahnelerde önemli hale gelen konulardır. Düzenli pratik ve topluluktan destek almak bu zorlukların üstesinden gelmenize yardımcı olacaktır.

Three.js ile VR/AR uygulamaları geliştirebilir miyim?

Evet, Three.js WebXR API'si ile entegrasyon sağlayarak sanal gerçeklik (VR) ve artırılmış gerçeklik (AR) uygulamaları geliştirmenize olanak tanır. Tarayıcı tabanlı VR/AR deneyimleri oluşturmak için ideal bir kütüphanedir.

Daha fazla kaynak ve öğrenme materyali nerede bulabilirim?

Three.js'in resmi dokümantasyonu (threejs.org), GitHub deposu, örnekler ve aktif topluluk forumları harika kaynaklardır. Ayrıca, Udemy, Coursera gibi platformlarda birçok kurs ve YouTube'da öğretici videolar bulunmaktadır. Codepen veya Glitch gibi platformlarda başkalarının projelerini incelemek de ilham verici olabilir.