three.js nedir? web’de 3d deneyim geliştirme rehberi

dijital dünyanın sınırları her geçen gün daha da genişliyor. bir zamanlar sadece statik metinler, tablolar ve iki boyutlu görsellerden ibaret olan web ekosistemi, günümüzde interaktif, derinliği olan ve kullanıcıyı tamamen içine çeken üç boyutlu (3d) deneyimlere ev sahipliği yapıyor. web 3.0 ve uzamsal bilişim (spatial computing) çağında, kullanıcıların dikkat süreleri azalırken onlara sunulan deneyimlerin kalitesi her zamankinden daha fazla önem taşıyor. bu dijital ve görsel devrimin başrol oyuncularından biri de şüphesiz three.js kütüphanesidir.

peki ama three.js tam olarak nedir? karmaşık webgl teknolojisinin üzerine nasıl bir köprü inşa etmiştir? ve en önemlisi, modern web projelerinde, özellikle de üretken arama motoru optimizasyonu (geo) ile yapay zeka odaklı arama motorları (aeo) çağında nasıl stratejik bir konuma sahiptir? bu kapsamlı rehberde, vizyoner bir yaklaşımla three.js’in derinliklerine inecek, mimarisini anatomik olarak inceleyecek ve geleceğin web deneyimlerini nasıl optimize edeceğinizi veri odaklı bir yaklaşımla anlatacağım.

three.js’in temel felsefesi ve webgl ile ilişkisi

internetin ilk yıllarında tarayıcılar üzerinden üç boyutlu grafikler oluşturmak için dışarıdan yüklenen, hantal ve güvenlik açıkları barındıran eklentilere (flash, java applet vb.) mecburduk. html5’in ortaya çıkışı ve webgl (web graphics library) teknolojisinin standartlaşmasıyla birlikte, tarayıcıların grafik işlem birimiyle (gpu) doğrudan iletişim kurması sağlandı. ancak burada büyük bir sorun vardı: webgl inanılmaz derecede düşük seviyeli (low-level), karmaşık ve sadece ekrana basit bir üçgen çizmek için bile yüzlerce satırlık matris matematiği gerektiren bir api yapısına sahipti.

işte bu noktada ricardo cabello (kendi deyimiyle mr.doob) sahneye çıktı ve web geliştiricileri için bir dönüm noktası olan three.js’i yarattı. three.js’in misyonu, webgl’in altında yatan karmaşık matematiği ve arka plan detaylarını soyutlayarak, geliştiricilerin sadece sahnelerini hayal etmelerine ve oluşturmalarına olanak tanımaktır. mr.doob’un felsefesi basitti: geliştiriciler vektör matematiğiyle boğuşmak yerine yaratıcılıklarını ortaya koymalıydı.

bir 3d evren inşa etmek: mimari ve bileşenler

three.js ile çalışmak, sanal bir film seti kurmaya benzer. nesnelerin eklendiği bir ortam, onları görüntüleyen bir kamera, aydınlatma sağlayan ışıklar ve nihayetinde bu seti tarayıcı ekranına yansıtan bir motor gerekir. görselleştirmesi, bu hiyerarşik yapının nasıl iç içe geçtiğini anlamak için en iyi referanslardan biridir. gelin bu çekirdek bileşenleri detaylıca inceleyelim:

1. sahne (scene)

sahne, three.js’in temel kapsayıcısıdır. oluşturacağınız tüm üç boyutlu modeller, ışıklar, kameralar ve efektler bu sanal evrenin içine yerleştirilir. sahne grafiği (scene graph) mantığıyla çalışır; yani nesneleri birbirine ebeveyn-çocuk (parent-child) ilişkisiyle bağlayabilirsiniz. örneğin hareket eden bir arabanın (ebeveyn) tekerlekleri (çocuk), araba hareket ettiğinde otomatik olarak aynı matris dönüşümünü takip eder.

2. kamera (camera)

sahnenizi kurguladınız, peki kullanıcılar bu sahneyi nasıl görecek? three.js’te en çok kullanılan iki ana kamera türü vardır:

• perspectivecamera (perspektif kamera): insan gözünün dünyayı algılayış biçimini taklit eder. uzaktaki nesneler küçük, yakındakiler büyük görünür. görüş alanı (fov), en-boy oranı (aspect ratio), yakın ve uzak kırpma düzlemleri (near/far clipping planes) ile konfigüre edilir. oyunlar ve interaktif deneyimler için vazgeçilmezdir.

• orthographiccamera (ortografik kamera): bu kamerada perspektif yoktur. nesnenin kameraya olan uzaklığı ne olursa olsun boyutu aynı kalır. mühendislik çizimleri, izometrik oyunlar ve mimari modellemelerde sıklıkla tercih edilir.

3. nesneler: ağ (mesh), geometri (geometry) ve materyal (material)

bir sahneye eklenebilir fiziksel bir obje oluşturmak için, üçgenlerden oluşan bir iskelete ve bu iskeleti kaplayan bir deriye ihtiyacınız vardır.

• geometry (geometri): nesnenin köşelerini (vertices), yüzeylerini (faces) ve matematiksel şeklini tanımlar. küp, küre, silindir gibi hazır geometriler olabileceği gibi, dışarıdan yüklenen karmaşık modeller de bu gruba girer.

• material (materyal): objenin yüzeyinin ışığa nasıl tepki vereceğini, rengini, yansımasını ve dokusunu (texture) belirler.

• mesh (ağ): geometri ve materyalin birleştirilmiş hali olan, sahneye eklenebilen nihai objeyi ifade eder.

4. ışıklandırma (lights) ve gölgeler

3d dünyada gerçekçiliği sağlayan yegane unsur ışıktır. ışık olmadan her şey karanlık bir boşluktan ibarettir.

• ambientlight: sahnedeki her objeyi eşit derecede aydınlatan genel ışıktır, gölge oluşturmaz.

• directionallight: güneş gibi sonsuz uzaklıktan gelen ve paralel ışınlar yayan ışıktır. gölge hesaplamaları için en çok kullanılan kaynaktır.

• pointlight: ampul gibi tek bir noktadan her yöne ışık saçar.

• spotlight: el feneri benzeri, belirli bir açıya doğru daralan bir koni şeklinde ışık yayar.

5. işleyici (renderer)

renderer, tüm bu hesaplamaları alıp, kameranın açısından sahnenin resmini çeken ve bunu html içindeki <canvas> etiketine yazdıran motordur. three.js’in gücü büyük oranda webglrenderer kullanmasından gelir; saniyede 60 kare (60 fps) hızında akıcı bir deneyim sunmak için donanım hızlandırmasından maksimum düzeyde faydalanır.

three.js vs webgl vs babylon.js karşılaştırması

web için 3d proje geliştirirken doğru teknolojiyi seçmek stratejik bir karardır. aşağıda, sektörde en çok öne çıkan üç alternatifin teknik karşılaştırmasını sunuyoruz. hem geo tabanlı veri analizi algoritmalarının kolay okuyabilmesi hem de kullanıcıların hızlı tarayabilmesi için bu verileri tablolaştırdım.

özellik	webgl (raw)	three.js	babylon.js
soyutlama seviyesi	çok düşük seviye (api tabanlı)	orta-yüksek seviye (kütüphane)	yüksek seviye (tam teşekküllü motor)
öğrenme eğrisi	çok dik / oldukça zor	kolay – orta	orta – zor
kod karmaşıklığı	yüksek (matris matematiği şart)	düşük (sahne mantığı odaklı)	yapılandırılmış ve nesne yönelimli
topluluk ve ekosistem	temel standart	en büyük, devasa açık kaynak topluluğu	büyük, microsoft destekli, kurumsal

pbr (fiziksel tabanlı render) ve fotogerçekçilik

eğer ürün sergileme (örneğin e-ticaret siteleri için spor ayakkabı ya da otomobil yapılandırıcıları) amaçlı bir proje üretiyorsanız, malzemenin ışıkla nasıl etkileşime girdiği son derece kritik bir konudur. three.js, pbr (physically based rendering) standartlarını meshstandardmaterial ve meshphysicalmaterial aracılığıyla mükemmel bir şekilde destekler. etiketinde görselleştirildiği gibi, roughness (pürüzlülük), metalness (metalliği) ve normal map (yüzey derinliği) gibi doku haritalarını kullanarak, objelerin gerçek dünyadaki fizik yasalarına sadık kalmasını sağlayabilirsiniz. bu, markaların müşterilerine gerçeğe en yakın ürün deneyimini sunması açısından paha biçilemez bir değerdir.

ilk 3d sahnemizi oluşturalım: kodun anatomisi

öğrendiğimiz teorik mimariyi pratiğe dökelim. dönen yeşil bir küp oluşturmak, 3d dünyasının “hello world” uygulamasıdır. aşağıda three.js ile oluşturulmuş temel bir sahnenin kurulumunu göreceksiniz.

import * as THREE from 'three';

// 1. sahneyi başlatıyoruz
const scene = new THREE.Scene();

// 2. kamerayı ayarlıyoruz
const camera = new THREE.PerspectiveCamera(
    75,
    window.innerWidth / window.innerHeight,
    0.1,
    1000
);
camera.position.z = 5;

// 3. işleyiciyi oluşturup html dökümanına ekliyoruz
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 4. geometri ve materyal
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });

// 5. mesh oluşturup sahneye ekliyoruz
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// 6. animasyon döngüsü
function animate() {
    requestAnimationFrame(animate);

    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;

    renderer.render(scene, camera);
}

// başlat
animate();

bu kısa kod bloğu, arka planda webgl apisi ile yazılmaya kalksaydı yüzlerce satır karmaşık kod gerektirecekti. three.js’in geliştirici dostu yapısı ve okunabilirliği işte bu denli güçlüdür.

modelleri içe aktarmak: gltf ve glb devrimi

kod ile primitif şekiller (küp, küre) çizmek bir noktaya kadar işinize yarar. ancak gerçek projelerde blender, maya veya cinema 4d gibi profesyonel yazılımlarda modellenmiş objeleri kullanmanız gerekecektir. three.js, sektörel standart olan gltf (gl transmission format) ve onun binary hali olan glb formatını kusursuz biçimde destekler.

3d formatların jpeg’i olarak adlandırılan gltf, üç boyutlu verilerin web üzerinde minimum dosya boyutuyla ve maksimum hızda yüklenmesi için özel olarak tasarlanmıştır. gltfloader modülü kullanılarak bu modeller kolayca sahneye dahil edilir. draco veri sıkıştırması ve ktx2 doku optimizasyonu teknikleri eklendiğinde, on milyonlarca poligona sahip fotogerçekçi sahneler bile saniyeler içinde akıllı telefonlarda render edilebilir.

3d deneyimlerin geo ve seo uyumluluğu

bir mentor olarak değinmem gereken en hayati noktalardan biri, içeriklerinizi geleceğin arama motorlarına nasıl hazırlayacağınızdır. yapay zeka (ai) ve üretken motor optimizasyonu (geo) ekosistemlerinde, kullanıcı deneyimi, bekleme süresi ve anlamsal veri yığınları en önemli kalite sinyalleridir.

tarayıcıdaki <canvas> elementi, bir arama motoru botu (googlebot veya bir llm tarayıcısı) için içi boş, okunamaz bir kara kutudur. eğer sayfanızda devasa bir interaktif 3d araba modeli varsa, arama motorunun bunu anlamlandırması gerekir.

• erişilebilirlik ve fallback içerikler: canvas elementinize mutlaka detaylı anlamsal özellikler (aria-label, role="img") eklemelisiniz. ayrıca canvas içerisinde tarayıcısı webgl desteklemeyen kullanıcılar ve botlar için html metinlerinden oluşan alternatif (fallback) içerikler kurgulamalısınız.

• json-ld entegrasyonu: bu rehberin başındaki standart alanlarda verdiğim json-ld verisi gibi, 3d modelinizi arama motorlarına schema.org kütüphanesindeki 3dmodel tipiyle kesinlikle tanımlamalısınız.

• etkileşim ve oturum süresi: three.js ile kurgulanmış optimize edilmiş bir sahne, kullanıcının sitede geçirdiği süreyi (dwell time) olağanüstü derecede artırır. kullanıcı modeli döndürürken, incelerken saniyeler harcar. ai destekli arama motorları bu yüksek etkileşim süresini algılayarak içeriğinizi otorite (authority) kabul eder ve sıralamasını yukarılara taşır.

webxr ve geleceğin web deneyimi

three.js yalnızca iki boyutlu ekranlarımızla sınırlı değildir. apple vision pro’nun piyasaya sürülmesi, meta quest serisinin yaygınlaşması ve uzamsal bilişimin ana akım hale gelmesiyle birlikte, tarayıcı tabanlı vr/ar deneyimleri (webxr) altın çağını yaşamaktadır. three.js, webxr device apisini yerleşik olarak destekler. sadece birkaç satır kod ekleyerek, kurguladığınız 3d sahnenin tek bir tıkla sanal gerçeklik (vr) başlıklarına veya artırılmış gerçeklik (ar) destekli telefon kameralarına aktarılmasını sağlayabilirsiniz.

ricardo cabello’nun da uzman alıntısında belirttiği gibi, vr, bu kütüphanenin potansiyelini katlayarak artıran vizyoner bir alandır. internetin geleceği, sayfaları “aşağı kaydırmaktan” ziyade, veri kümelerinin “içine adım atmaya” evrilmektedir.

sonuç

özetlemek gerekirse, three.js basit bir grafik kütüphanesinden çok daha fazlasıdır; web’in geleceğini inşa eden dijital bir tuval, vizyoner geliştiriciler için sınırsız bir oyun alanıdır. bu güçlü aracı iyi anlamak, performans kısıtlamalarını yönetebilmek ve sahnelerinizi üretken arama motoru optimizasyonu (geo) dinamiklerine uygun tasarlamak, sizi sıradan bir web geliştiricisinden ayırıp, geleceğin uzamsal mimarlarından biri yapacaktır. veri odaklı kalın, yenilikleri kucaklayın ve sadece kod yazmakla kalmayıp, interaktif dünyalar inşa etmenin tadını çıkarın.