G\u00fcn\u00fcm\u00fcz web teknolojileri, statik sayfalar\u0131n \u00f6tesine ge\u00e7erek kullan\u0131c\u0131lara zengin ve etkile\u015fimli deneyimler sunma potansiyeli ta\u015f\u0131yor. Bu potansiyelin en heyecan verici alanlar\u0131ndan biri de hi\u00e7 \u015f\u00fcphesiz 3D grafikler. Web taray\u0131c\u0131lar\u0131 \u00fczerinde \u00fc\u00e7 boyutlu sahneler olu\u015fturmak, animasyonlar yapmak ve interaktif deneyimler sunmak i\u00e7in geli\u015ftirilen k\u00fct\u00fcphaneler aras\u0131nda Three.js, pop\u00fclerli\u011fi ve kullan\u0131m kolayl\u0131\u011f\u0131 ile \u00f6ne \u00e7\u0131k\u0131yor. Bu rehber, Three.js d\u00fcnyas\u0131na ad\u0131m atmak isteyen herkes i\u00e7in kapsaml\u0131 bir ba\u015flang\u0131\u00e7 noktas\u0131 sunmay\u0131 hedefliyor.<\/p>\n
Three.js, taray\u0131c\u0131 tabanl\u0131 3D grafikler olu\u015fturmak ve g\u00f6r\u00fcnt\u00fclemek i\u00e7in kullan\u0131lan, a\u00e7\u0131k kaynakl\u0131, hafif ve g\u00fc\u00e7l\u00fc bir JavaScript k\u00fct\u00fcphanesidir. WebGL API’sini daha eri\u015filebilir ve kullan\u0131m\u0131 kolay bir aray\u00fczle sararak, geli\u015ftiricilerin karma\u015f\u0131k 3D kavramlar\u0131yla u\u011fra\u015fmak yerine yarat\u0131c\u0131l\u0131klar\u0131na odaklanmalar\u0131n\u0131 sa\u011flar. Mimari g\u00f6rselle\u015ftirmelerden \u00fcr\u00fcn tan\u0131t\u0131mlar\u0131na, interaktif oyunlardan veri g\u00f6rselle\u015ftirmelerine kadar geni\u015f bir yelpazede kullan\u0131labilir.<\/p>\n
WebGL (Web Graphics Library), herhangi bir eklentiye ihtiya\u00e7 duymadan web taray\u0131c\u0131lar\u0131nda 3D grafikler olu\u015fturmak i\u00e7in kullan\u0131lan bir JavaScript API’sidir. Ancak WebGL ile do\u011frudan \u00e7al\u0131\u015fmak, d\u00fc\u015f\u00fck seviyeli programlama bilgisi ve karma\u015f\u0131k matematiksel hesaplamalar gerektirir. \u0130\u015fte burada Three.js devreye girer. Three.js, WebGL’in karma\u015f\u0131kl\u0131\u011f\u0131n\u0131 soyutlayarak, geli\u015ftiricilerin sahne, kamera, \u0131\u015f\u0131kland\u0131rma, geometri ve malzeme gibi y\u00fcksek seviyeli kavramlarla \u00e7al\u0131\u015fmas\u0131na olanak tan\u0131r. K\u0131sacas\u0131, Three.js, WebGL’i kullanmay\u0131 \u00e7ok daha kolay ve h\u0131zl\u0131 hale getiren bir soyutlama katman\u0131d\u0131r.<\/p>\n
Three.js’in kullan\u0131m alanlar\u0131 hayal g\u00fcc\u00fcn\u00fczle s\u0131n\u0131rl\u0131d\u0131r. En yayg\u0131n kullan\u0131m senaryolar\u0131ndan baz\u0131lar\u0131 \u015funlard\u0131r:<\/p>\n
Bir Three.js sahnesi olu\u015fturmak i\u00e7in birka\u00e7 temel bile\u015fene ihtiyac\u0131m\u0131z vard\u0131r. Bu bile\u015fenler, bir 3D d\u00fcnyas\u0131n\u0131 tan\u0131mlayan yap\u0131 ta\u015flar\u0131d\u0131r.<\/p>\n
Sahne, 3D d\u00fcnyam\u0131z\u0131n kapsay\u0131c\u0131s\u0131d\u0131r. \u0130\u00e7ine t\u00fcm nesnelerimizi (modeller, \u0131\u015f\u0131klar, kameralar vb.) yerle\u015ftirdi\u011fimiz yerdir. Bir sahne olmadan hi\u00e7bir \u015fey g\u00f6r\u00fcnt\u00fcleyemeyiz.<\/p>\n
const scene = new THREE.Scene();<\/pre>\n<\/code><\/p>\n
Kamera (Camera)<\/h4>\n
Kamera, sahneyi hangi a\u00e7\u0131dan ve nas\u0131l g\u00f6rece\u011fimizi belirler. Three.js'te farkl\u0131 kamera t\u00fcrleri bulunur, ancak en yayg\u0131n kullan\u0131lan\u0131 PerspectiveCamera<\/code>'d\u0131r. Bu kamera, insan g\u00f6z\u00fcn\u00fcn d\u00fcnyay\u0131 alg\u0131lad\u0131\u011f\u0131 gibi perspektif bir g\u00f6r\u00fcn\u00fcm sunar.<\/p>\nconst camera = new THREE.PerspectiveCamera(75, window.innerWidth \/ window.innerHeight, 0.1, 1000);\n\/\/ \u0130lk parametre: G\u00f6r\u00fc\u015f alan\u0131 (FOV)\n\/\/ \u0130kinci parametre: En boy oran\u0131\n\/\/ \u00dc\u00e7\u00fcnc\u00fc parametre: Yak\u0131n k\u0131rpma d\u00fczlemi (near clipping plane)\n\/\/ D\u00f6rd\u00fcnc\u00fc parametre: Uzak k\u0131rpma d\u00fczlemi (far clipping plane)\ncamera.position.z = 5; \/\/ Kameray\u0131 geriye do\u011fru 5 birim ta\u015f\u0131\n<\/pre>\n<\/code><\/p>\n
Renderer (Olu\u015fturucu)<\/h4>\n
Renderer, sahne ve kamera taraf\u0131ndan tan\u0131mlanan 3D d\u00fcnyas\u0131n\u0131 al\u0131p, bunu 2D piksel verilerine d\u00f6n\u00fc\u015ft\u00fcrerek taray\u0131c\u0131da g\u00f6r\u00fcnt\u00fclenmesini sa\u011flayan bile\u015fendir. Genellikle WebGLRenderer<\/code> kullan\u0131l\u0131r.<\/p>\nconst renderer = new THREE.WebGLRenderer();\nrenderer.setSize(window.innerWidth, window.innerHeight); \/\/ Renderer boyutunu ayarla\ndocument.body.appendChild(renderer.domElement); \/\/ Olu\u015fturulan canvas'\u0131 HTML'e ekle\n<\/pre>\n<\/code><\/p>\n
Geometri ve Malzeme (Geometry & Material)<\/h4>\n
3D nesneler, bir geometri ve bir malzemeden olu\u015fur. Geometri, nesnenin \u015feklini (noktalar, kenarlar, y\u00fczeyler) tan\u0131mlar. Malzeme ise nesnenin y\u00fczey \u00f6zelliklerini (renk, doku, parlakl\u0131k, saydaml\u0131k) belirler.<\/p>\n
const geometry = new THREE.BoxGeometry(1, 1, 1); \/\/ 1x1x1 boyutunda bir k\u00fcp geometrisi\nconst material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); \/\/ Ye\u015fil renkli temel malzeme\nconst cube = new THREE.Mesh(geometry, material); \/\/ Geometri ve malzemeyi birle\u015ftirerek bir k\u00fcp nesnesi olu\u015ftur\nscene.add(cube); \/\/ K\u00fcp\u00fc sahneye ekle\n<\/pre>\n<\/code><\/p>\n
\u0130lk Three.js Uygulaman\u0131z\u0131 Olu\u015fturma<\/h3>\n
\u015eimdi \u00f6\u011frendi\u011fimiz temel bile\u015fenleri bir araya getirerek basit bir Three.js uygulamas\u0131 olu\u015ftural\u0131m. Bu uygulama, ekranda d\u00f6nen ye\u015fil bir k\u00fcp g\u00f6sterecek.<\/p>\n
Gerekli Kurulumlar<\/h4>\n
Three.js'i kullanmak i\u00e7in bir HTML dosyas\u0131 ve bir JavaScript dosyas\u0131na ihtiyac\u0131m\u0131z var. Three.js k\u00fct\u00fcphanesini projemize dahil etmenin en kolay yolu CDN (Content Delivery Network) kullanmakt\u0131r. HTML dosyan\u0131z\u0131n <\/code> etiketinin kapan\u0131\u015f\u0131ndan hemen \u00f6nce a\u015fa\u011f\u0131daki script etiketini ekleyin:<\/p>\n