Three.js \u00e7ok \u015fey yapar ve di\u011fer 3B alanlar\u0131yla nas\u0131l ili\u015fkilendirildi\u011fi biraz kafa kar\u0131\u015ft\u0131r\u0131c\u0131 olabilir. Kapsam\u0131 da s\u00fcrekli geli\u015fen bir \u015fey oldu\u011fundan, \u00f6zetlemesi pek kolay de\u011fildir ve bu g\u00f6zlemler \u00f6zneldir.<\/p>\n
Bu projenin amac\u0131, hafif ve kullan\u0131m\u0131 kolay bir 3B k\u00fct\u00fcphane olu\u015fturmakt\u0131r. Bu k\u00fct\u00fcphane, g\u00f6rselle\u015ftirmeler sa\u011flar. , , CSS3D ve WebGL.<\/p>\n
Bu, GitHub deposundaki resmi a\u00e7\u0131klama. Asl\u0131nda durumu olduk\u00e7a iyi \u00f6zetliyor, ancak bu c\u00fcmledeki her konu ba\u015fl\u0131 ba\u015f\u0131na geni\u015f bir konu ve three.js'nin tek yapt\u0131\u011f\u0131 bu de\u011fil.<\/p>\n
K\u00fct\u00fcphanenin kendisi JavaScript ile yaz\u0131lm\u0131\u015ft\u0131r ve JavaScript ortam\u0131nda kullan\u0131lmak \u00fczere tasarlanm\u0131\u015ft\u0131r. \u00c7o\u011fu durumda bu, istemci taraf\u0131nda, yani bir cihazdaki web taray\u0131c\u0131s\u0131nda \u00e7al\u0131\u015ft\u0131\u011f\u0131 anlam\u0131na gelir. Ancak node.js ve ba\u015fs\u0131z taray\u0131c\u0131larla sunucu taraf\u0131nda da kullan\u0131labilir. Akla gelen ilk d\u00fc\u015f\u00fcnce render i\u015flemidir; belki sunucuda baz\u0131 \u00f6nizleme g\u00f6r\u00fcnt\u00fcleri, ancak three.js zengin bir matematik k\u00fct\u00fcphanesine sahip oldu\u011fundan, bu yaln\u0131zca 3B hesaplamalar da olabilir. Bu inan\u0131lmaz derecede geni\u015f bir terim. 3B \u00e7ok \u015fey ifade edebilir. \u00c7o\u011fu durumda akl\u0131m\u0131za "grafikler" gelir.<\/p>\n
G\u00f6rd\u00fc\u011f\u00fcm\u00fcz \u00e7o\u011fu three.js projesi, kullan\u0131c\u0131 etkile\u015fiminin an\u0131nda g\u00f6rsel geri bildirim sa\u011flad\u0131\u011f\u0131 ger\u00e7ek zamanl\u0131 3B grafikler i\u00e7erir. Di\u011fer 3B grafik t\u00fcrleri aras\u0131nda filmlerdeki \u00e7e\u015fitli efektler veya yapay karakterler ya da bas\u0131l\u0131 materyallerde veya bir web katalo\u011funda g\u00f6rebilece\u011finiz \u00e7e\u015fitli "i\u015flemeler" bulunur (\u00f6rne\u011fin, IKEA'n\u0131n web sitesi, t\u00fcm \u00fcr\u00fcn foto\u011fraflar\u0131 bilgisayar ortam\u0131nda olu\u015fturuldu\u011fu i\u00e7in 3B grafiklerle doludur).<\/p>\n
T\u00fcm bunlar\u0131n bir alt k\u00fcmesi 3B matematiktir. 3B grafikler matematik olmadan yap\u0131lamaz ve bilgisayar dilleri varsay\u0131lan olarak 3B kavramlar\u0131n\u0131 anlamaz. \u0130\u015fte tam bu noktada bir k\u00fct\u00fcphane devreye girer; bu matematik i\u015flemlerini soyutlar, belki de optimize eder ve Matrix4 veya .dot() gibi \u00fcst d\u00fczey bir aray\u00fcz sunar.<\/p>\n
Three.js, 3D matemati\u011fe \u00f6zg\u00fc s\u0131n\u0131flar i\u00e7eren kendi matematik k\u00fct\u00fcphanesiyle birlikte gelir. Yaln\u0131zca bu matematikle ilgilenen ba\u011f\u0131ms\u0131z k\u00fct\u00fcphaneler mevcut olsa da, Three'de bu, \u00e7ok daha b\u00fcy\u00fck bir sistemin yaln\u0131zca bir alt k\u00fcmesidir.<\/p>\n
Rendering, k\u00fct\u00fcphanenin bir di\u011fer b\u00fcy\u00fck sorumlulu\u011fudur, ancak burada da i\u015fler biraz karma\u015f\u0131kla\u015f\u0131r. WebGL olduk\u00e7a spesifiktir ve di\u011ferlerinden s\u0131yr\u0131l\u0131r.<\/p>\n
Canvas, SVG ve CSS ile renderleme sorumlulu\u011fu tamamen 3B'ye aittir. Bu API'ler, 3B olmayan nesneler \u00e7izmek i\u00e7in bir\u00e7ok k\u00fct\u00fcphaneye sahiptir veya varsay\u0131lan olarak bunu yaparlar (CSS 2B dikd\u00f6rtgenler \u00e7izer, Canvas ise \u00e7e\u015fitli 2B \u015fekiller \u00e7izer), ancak 3B renderlemeyi ger\u00e7ekten yapmak i\u00e7in sihirli bir dokunu\u015f ve 3B matematik gerektirirler.<\/p>\n
Sihirli dokunu\u015f ço\u011funlukla arayüz soyutlamas\u0131yla gelir. Örne\u011fin, bir ö\u011fenin 3B durumunu yönetmek gibi. <div> CSS ile 3B'ye dönü\u015ftürmek çok zordur. Canvas API'sinin 3B gibi görünen bir \u015fey çizmesini sa\u011flamak için çok fazla mant\u0131k gerekir. WebGL ise çok daha karma\u015f\u0131kt\u0131r.<\/p>\n
Three, t\u00fcm bu API'leri render() gibi basit bir \u015feye soyutlar, ancak bunu yapmak i\u00e7in "3B d\u00fcnya"n\u0131n ne oldu\u011funa dair genel bir temsile ihtiya\u00e7 duyar.<\/p>\n
three.js'de "3B d\u00fcnya"n\u0131n genel soyutlamas\u0131 olarak i\u015flev g\u00f6ren bir alan tan\u0131mlanabilir. Sahne grafi\u011fi, bir 3B sahnedeki (d\u00fcnyadaki) nesnelerin birbirleriyle nas\u0131l ili\u015fkili oldu\u011funu tan\u0131mlamak i\u00e7in kullan\u0131lan bir veri yap\u0131s\u0131d\u0131r. Asl\u0131nda 3B olmas\u0131 gerekmez, \u00e7\u00fcnk\u00fc bu herhangi bir vekt\u00f6r grafik hiyerar\u015fisini tan\u0131mlaman\u0131n kullan\u0131\u015fl\u0131 bir yoludur. Daha spesifik olarak, "k\u00f6k d\u00fc\u011f\u00fcm\u00fc" olan "d\u00fc\u011f\u00fcmlerden" dallanan bir "a\u011fa\u00e7"t\u0131r. three.js'de bu veri yap\u0131s\u0131n\u0131n temel s\u0131n\u0131f\u0131 Object3D'dir.<\/p>\n
Bu, DOM a\u011fac\u0131yla neredeyse tamamen ayn\u0131d\u0131r. THREE.Scene benzerdir <body> olacak ve di\u011fer her \u015fey bir dald\u0131r. DOM'da nesneleri yerle\u015ftirebiliriz, ancak bunlar nispeten s\u0131n\u0131rl\u0131d\u0131r. Dönme genellikle bir eksen etraf\u0131nda gerçekle\u015fir ve nesneleri sola\/sa\u011fa veya yukar\u0131\/a\u015fa\u011f\u0131 hareket ettiririz. 3B bir sahne grafi\u011finde daha fazla serbestlik derecesine sahibiz.<\/p>\n
\u00dc\u00e7\u00fcnc\u00fc sahne daha \u00e7ok sanal bir DOM'a benziyor. \u0130\u015flemlerimizi ger\u00e7ekle\u015ftirip durumu o a\u011fa\u00e7ta ayarl\u0131yoruz ve bu durumun g\u00f6rsel bir anl\u0131k g\u00f6r\u00fcnt\u00fcs\u00fcn\u00fc almak istedi\u011fimizde (\u00f6rne\u011fin s\u00fcrekli bir d\u00f6ng\u00fcde veya bir kullan\u0131c\u0131 etkile\u015fimi\/durum de\u011fi\u015fikli\u011finde), render (sahne) diyoruz. Bir \u015fey de\u011fi\u015fti\u011finde, t\u00fcm DOM a\u011fac\u0131n\u0131 g\u00fcncellemek istemezsiniz; ancak \u00f6\u011feyle birlikte , t\u00fcm g\u00f6r\u00fcn\u00fcm\u00fc temizlememiz ve ard\u0131ndan sadece bir eleman\u0131n konumunu de\u011fi\u015ftirse bile her \u015feyi yeniden \u00e7izmemiz gerekiyor.<\/p>\n
Bir <div> Birinde <div> THREE.Mesh('sun')->THREE.Mesh('earth') ebeveyn-çocuk ili\u015fkisine benzer. Bir CSS kural\u0131, color:'red' gibi bir aç\u0131klaman\u0131n sihir yarat\u0131p bir \u015feyi k\u0131rm\u0131z\u0131ya çevirdi\u011fi bir THREE.Material kural\u0131na benzeyebilir. Son olarak, threeRenderer.render(scene) ça\u011fr\u0131s\u0131, taray\u0131c\u0131n\u0131n baz\u0131 CSS kurallar\u0131 içeren bir HTML sayfas\u0131n\u0131 yüklemesine benzeyebilir.<\/p>\n
Mesh, Scene, Camera ve Light, bu genel s\u0131n\u0131f\u0131n alt s\u0131n\u0131flar\u0131d\u0131r. Bu, "sahneye" bir "kutu" veya "kameraya" bir "\u0131\u015f\u0131k" eklemenize olanak tan\u0131r.<\/p>\n
Basit bir yap\u0131 olduk\u00e7a d\u00fcz olabilir. K\u00f6k d\u00fc\u011f\u00fcm "d\u00fcnya" olarak g\u00f6r\u00fclebilir ve alt d\u00fc\u011f\u00fcmleri olarak "zemin", "ev", "g\u00fcne\u015f" ve "kamera" olabilir.<\/p>\n
THREE.Scene('world')\r\n|-THREE.Mesh('ground')\r\n|-THREE.Mesh('house')\r\n|-THREE.Light('sun')\r\n|-THREE.Camera('main')<\/code><\/pre>\n<\/div>\nBu, g\u00f6rsel bir sonu\u00e7 elde etmek i\u00e7in bir g\u00f6r\u00fcnt\u00fc olu\u015fturucuya girilebilecek yeterli bilgidir. Baz\u0131 sahnelerde, farkl\u0131 \u015feyleri temsil eden iki \u0131zgara bulunur: zemin ve tepedeki ev. Nas\u0131l ayd\u0131nlat\u0131ld\u0131klar\u0131n\u0131 tan\u0131mlayan bir \u0131\u015f\u0131k (sabah, \u00f6\u011flen, fla\u015f \u0131\u015f\u0131\u011f\u0131) ve bak\u0131\u015f a\u00e7\u0131m\u0131z\u0131, d\u00fcnyaya bak\u0131\u015f a\u00e7\u0131m\u0131z\u0131 tan\u0131mlayan bir nesne (kamera).<\/p>\n
Sonu\u00e7lar de\u011fi\u015febilir, \u00f6rne\u011fin CSS \u00e7ok hafif bir render ile s\u0131n\u0131rl\u0131d\u0131r, WebGL ise g\u00f6lgeler ve genel olarak y\u00fcksek do\u011fruluk sa\u011flayabilir.<\/p>\n
Bu yap\u0131 sayesinde 3B d\u00fcnya y\u00f6netilir. G\u00fcn \u0131\u015f\u0131\u011f\u0131n\u0131n farkl\u0131 mevsimlerde bir evi nas\u0131l etkiledi\u011fini sim\u00fcle etmek istiyorsak, \u0131\u015f\u0131\u011f\u0131n d\u00fcnyadaki konumunu ve y\u00f6n\u00fcn\u00fc programatik olarak de\u011fi\u015ftiririz. Sahne grafi\u011finin g\u00f6revi bu "konum" kancas\u0131n\u0131 ortaya \u00e7\u0131karmakt\u0131r, ancak onu ger\u00e7ekten canland\u0131rmak i\u00e7in kendi mant\u0131\u011f\u0131n\u0131z\u0131 uygulaman\u0131z gerekir. Bir 3B sahneyi canland\u0131rman\u0131n basit bir yolu, "tweening" k\u00fct\u00fcphanesi olan three.js'dir.<\/p>\n
Tüm bunlar muhtemelen sadece teoride do\u011frudur ve sahne renderlar\u0131n\u0131 istedi\u011finiz gibi de\u011fi\u015ftiremeyebilirsiniz. Ancak bu ço\u011funlukla "malzemelerin" sahne grafi\u011fiyle örtü\u015fmesinden ve renderlarla olan ba\u011flant\u0131s\u0131ndan kaynaklan\u0131r. Örne\u011fin, bir sahneyi gölgelendirmenin bir yolu yoktur. <div> Ya da metal olarak görünmüyor, ki bu bir WebGL malzemesinin tan\u0131mlayabilece\u011fi bir \u015fey, ama k\u0131rm\u0131z\u0131 yap\u0131labilir, ki bu tüm malzemelerin yapabilece\u011fi bir \u015fey.<\/p>\n
T\u00fcm bunlar\u0131n temelinde Object3D hala geneldir ve d\u00fc\u011f\u00fcmlerin birbirlerine g\u00f6re mekansal ve hiyerar\u015fik ili\u015fkileri bir "sahne grafi\u011fi" arac\u0131l\u0131\u011f\u0131yla tan\u0131mlan\u0131r.<\/p>\n
Basit\u00e7e s\u00f6ylemek gerekirse, bu scene.add(my_foo) fonksiyonunu birden fazla kez \u00e7a\u011f\u0131rd\u0131ktan sonra elde etti\u011finiz sahne de\u011fi\u015fkenidir.<\/p>\n
WebGL<\/span><\/h2>\nWebgl son derece spesifiktir ve muhtemelen mevcut three.js uygulamalar\u0131n\u0131n 'unda kullan\u0131lmaktad\u0131r. Bu kapsaml\u0131 bir konu, bu y\u00fczden \u00f6nce alternatiflere h\u0131zl\u0131ca bir g\u00f6z atmakta fayda olabilir.<\/p>\n
tuval, css, svg<\/span><\/h2>\nBunlar\u0131n hepsi API'lerdir. Bu, bir programc\u0131 olarak taray\u0131c\u0131ya belirli \u015feyleri \u00e7izmesini s\u00f6ylemek i\u00e7in kullanabilece\u011finiz bir aray\u00fczd\u00fcr. CSS, web'deki en yayg\u0131n aray\u00fczd\u00fcr \u00e7\u00fcnk\u00fc onsuz her \u015fey d\u00fcz metin gibi g\u00f6r\u00fcn\u00fcr. Tarihsel olarak 3B ile hi\u00e7bir ilgisi yoktu.<\/p>\n
Canvas asl\u0131nda \u00e7izim i\u00e7in ayn\u0131 WebGL \u00f6\u011fesini kullan\u0131r, ancak farkl\u0131 bir ba\u011flam\u0131 vard\u0131r. Ba\u011flam asl\u0131nda "2 boyutlu" olarak adland\u0131r\u0131l\u0131r, ancak 3 boyutlu zaten sahte oldu\u011fundan ve ister ger\u00e7ek ister sanal olsun, her zaman bir t\u00fcr 2 boyutlu y\u00fczey \u00e7izdi\u011fimizden, bu ba\u011flam\u0131 3 boyutlu grafikler \u00e7izmek i\u00e7in de kullanabiliriz.<\/p>\n
SVG, genellikle logolar veya simgeler gibi \u00f6\u011feleri tan\u0131mlamak i\u00e7in kullan\u0131lan 3B olmayan bir API'dir. Ancak, \u00e7izgiler gibi temel \u00f6\u011feleri tan\u0131mlayabildi\u011fi i\u00e7in 3B bir ba\u011flamda da temsil edilebilir (\u00f6rne\u011fin bir haritadaki bir katman veya uzamsal olarak duyarl\u0131 kullan\u0131c\u0131 aray\u00fcz\u00fc veya HUD \u00f6\u011feleri).<\/p>\n
Buradaki ortak nokta, bunlar\u0131n hi\u00e7birinin 3B kullan\u0131m i\u00e7in tasarlanmam\u0131\u015f olmas\u0131d\u0131r. Bir di\u011fer \u00f6nemli \u00f6zellik ise hepsinin \u00fcst d\u00fczey olmas\u0131d\u0131r; daha \u00f6nce ba\u015fka bir ama\u00e7 i\u00e7in tasarlanm\u0131\u015flard\u0131. \u00d6rne\u011fin, \u00fc\u00e7\u00fc de "daire" \u00e7izmeyi biliyor. Canvas ile bu a\u00e7\u0131k bir \u015fekildir; CSS ile kenarl\u0131k yar\u0131\u00e7aplar\u0131 kullanman\u0131z gerekebilir, ancak sonu\u00e7 olarak daireye do\u011frudan eri\u015fim elde edersiniz.<\/p>\n
WebGL olduk\u00e7a d\u00fc\u015f\u00fck seviyelidir ve 3B grafik kavram\u0131 hakk\u0131nda pek bir \u015fey bilmez. 3B grafikler belirli matematiksel hesaplamalar gerektirir ve \u00e7ok say\u0131da hesaplama gerektirir. Y\u00fcksek \u00e7\u00f6z\u00fcn\u00fcrl\u00fckl\u00fc bir ekran\u0131 ve sahip oldu\u011fu piksel say\u0131s\u0131n\u0131 bir saniye d\u00fc\u015f\u00fcn\u00fcn. Belirli bir \u0131\u015f\u0131k miktar\u0131n\u0131n y\u00fczeyi nas\u0131l etkiledi\u011fini belirlemek i\u00e7in her piksel i\u00e7in hesaplamalar yapman\u0131z gerekiyorsa ve bunu saniyede 60 kez yapman\u0131z gerekiyorsa, bu say\u0131 toplan\u0131r.<\/p>\n
Grafik i\u015flemcisi<\/h2>\n
Diz\u00fcst\u00fc bilgisayarlar, masa\u00fcst\u00fc bilgisayarlar, cep telefonlar\u0131 ve hatta saatler gibi \u00e7o\u011fu bilgisayar, bu 3B i\u015flemleri verimli bir \u015fekilde hesaplayabilen ve etkile\u015fimli grafiklerin g\u00f6r\u00fcnt\u00fclenmesini sa\u011flayan bir t\u00fcr donan\u0131m ayg\u0131t\u0131na sahiptir. Buna grafik i\u015fleme birimi denir.<\/p>\n
Ana i\u015flemciden farkl\u0131d\u0131r \u00e7\u00fcnk\u00fc farkl\u0131 ama\u00e7lar i\u00e7in olu\u015fturulmu\u015ftur; paralel olarak y\u00fcr\u00fct\u00fclen belirli matematiksel i\u015flemler.<\/p>\n
Taray\u0131c\u0131 programlamada JavaScript kulland\u0131\u011f\u0131m\u0131z gibi, grafik kart\u0131 programlamada da WebGL kullan\u0131yoruz.<\/p>\n
Kavramsal olarak bu do\u011fru, ancak pratikte ikisi \u00e7ok farkl\u0131. WebGL, hem JavaScript kodundan (talimatlar) hem de hesaplamalar\u0131 yapan tamamen farkl\u0131 bir dilden (GLSL) olu\u015fur. HTML ve JavaScript aras\u0131nda ve bir sayfada nas\u0131l birlikte \u00e7al\u0131\u015ft\u0131klar\u0131 konusunda baz\u0131 benzerlikler kurabilirsiniz.<\/p>\n
\u0130ki boyutlu ve \u00fc\u00e7 boyutlu<\/h2>\n
Bu donan\u0131m h\u0131zland\u0131rmas\u0131ndan sadece 3D de\u011fil. Video i\u015fleme de iyi bir aday. Grafik kart\u0131n\u0131 renkleri de\u011fi\u015ftirecek veya canl\u0131 video ak\u0131\u015f\u0131ndaki g\u00f6r\u00fcnt\u00fcy\u00fc de\u011fi\u015ftirecek \u015fekilde programlayabilirsiniz.<\/p>\n
\u00c7ok d\u00fc\u015f\u00fck seviyeli olan WebGL geneldir. 2D veya 3D hakk\u0131nda bilgi sahibi de\u011fildir, ancak bellek, tamponlar, komut kuyruklar\u0131, g\u00f6lgelendiriciler vb. hakk\u0131nda bilgi sahibidir.<\/p>\n
Paralel programlama, JavaScript'te programlamaktan farkl\u0131d\u0131r. Yayg\u0131n bir sorun, farkl\u0131 i\u015f par\u00e7ac\u0131klar\u0131n\u0131n payla\u015f\u0131lan bir de\u011fi\u015fkene nas\u0131l eri\u015fti\u011fidir.<\/p>\n
Bu farkl\u0131 paradigma, GLSL ad\u0131nda bamba\u015fka bir dilin var oldu\u011fu anlam\u0131na geliyor. Bu, her d\u00fc\u015f\u00fck seviyeli grafik API'sinde bulunan bir g\u00f6lgelendirme dili. B\u00fcy\u00fck say\u0131lar i\u00e7in ger\u00e7ek mant\u0131\u011f\u0131 burada yaz\u0131yorsunuz ve tek avantaj\u0131, makine kodu yazmak zorunda olmaman\u0131z.<\/p>\n
WebGL API'sinin di\u011fer k\u0131sm\u0131, GPU'ya bir \u015feyler yapmas\u0131n\u0131 s\u00f6yledi\u011finiz JavaScript ba\u011flamalar\u0131d\u0131r. Bir g\u00f6lgelendirici "A hesaplamalar\u0131n\u0131 yapar" ve bir ba\u011flama "bir milyon kez \u00e7al\u0131\u015f\u0131r".<\/p>\n
A'n\u0131n ne oldu\u011funu hesaplamak programc\u0131ya kalm\u0131\u015f. 3D ile ilgili bir \u015fey olabilir veya videoyu bulan\u0131kla\u015ft\u0131ran bir \u00e7ekirdek olabilir.<\/p>\n
Bu hesaplamalar\u0131 ve komutlar\u0131 soyutlamaya ba\u015flad\u0131\u011f\u0131n\u0131zda elinizde three.js olur.<\/p>\n
Birlikte \u00e7al\u0131\u015fan render'lar<\/h2>\n
Mant\u0131kl\u0131 bir kullan\u0131m \u00f6rne\u011fi, "3B" olarak iyi g\u00f6r\u00fcnen \u015feyler \u00e7izmek i\u00e7in birden fazla g\u00f6r\u00fcnt\u00fc olu\u015fturucunun bir arada kullan\u0131lmas\u0131d\u0131r. WebGL bir\u00e7ok say\u0131y\u0131 i\u015fleyip ger\u00e7ekten ger\u00e7ek\u00e7i g\u00f6r\u00fcnt\u00fcler olu\u015fturabilir, ancak metin ve hatta baz\u0131 \u00e7izgileri i\u015flemede zay\u0131ft\u0131r. Ek bir g\u00f6r\u00fcnt\u00fc olu\u015fturulmu\u015f metin katman\u0131 CSS ve Canvas g\u00f6r\u00fcnt\u00fc olu\u015fturucular\u0131 ile i\u015flenebilirken, yollar ve \u00e7e\u015fitli \u00e7izgiler SVG ile i\u015flenebilir.<\/p>\n
\u00dc\u00c7.WebGLRenderer<\/h2>\n
T\u00fcm bu d\u00fc\u015f\u00fck seviyeli bilgiler, three.js WebGLRenderer s\u0131n\u0131f\u0131 arac\u0131l\u0131\u011f\u0131yla soyutlan\u0131r. Bu, k\u00fcp\u00fc GPU belle\u011finde bir dizi say\u0131ya d\u00f6n\u00fc\u015ft\u00fcr\u00fcr.<\/p>\n
\u0130ronik olarak, 3B grafikler olu\u015fturmas\u0131 gerekmeyen tek three.js g\u00f6r\u00fcnt\u00fcleyicisi olsa da, bu i\u015f i\u00e7in en iyi se\u00e7enektir. Geri kalan\u0131 2B API'leri kullanarak 3B'yi taklit ederken, WebGL kas\u0131tl\u0131 olarak genel bir paralel hesaplama API'si kullanarak 3B olu\u015fturur. Ancak bu, onu yaln\u0131zca canl\u0131 video ak\u0131\u015f\u0131n\u0131 i\u015flemek i\u00e7in kullanabilece\u011finiz bir senaryoyu ortadan kald\u0131rmaz. WebGL'den yeterince soyutlama yaparak bu i\u015f i\u00e7in kullan\u0131\u015fl\u0131 olabilir, ancak muhtemelen k\u00fct\u00fcphanenin \u00fc\u00e7te birini kullan\u0131yorsunuzdur. WebGL ile son derece duyarl\u0131 bir kullan\u0131c\u0131 aray\u00fcz\u00fc katman\u0131 veya three.js'nin hala harika bir ara\u00e7 olaca\u011f\u0131 bir Super Mario tarz\u0131 platform oyunu olu\u015fturabilirsiniz.<\/p>\n
K\u00fct\u00fcphanenin yaln\u0131zca \u00fc\u00e7te birini kullan\u0131yor olman\u0131z, bu kullan\u0131m i\u00e7in farkl\u0131 bir arac\u0131n daha uygun olabilece\u011fi veya three.js'nin bir alt k\u00fcmesini olu\u015fturabilece\u011finiz anlam\u0131na gelir. Hem Super Mario hem de video i\u015fleme \u00f6rnekleri yaln\u0131zca PlaneGeometry ve belki de bir malzeme t\u00fcr\u00fcne ihtiya\u00e7 duyabilir.<\/p>\n
\u00fc\u00e7 matematik<\/h2>\n
3B'de belirli matematiksel i\u015flemleri ger\u00e7ekle\u015ftiren JavaScript kodu. JS'de varsay\u0131lan olarak Math.pow() bulunur, ancak Quaternion.inverse() bulunmaz. Bu s\u0131n\u0131flarla, render gerektirmeyen algoritmalar yazabiliriz; \u00f6rne\u011fin, kimin ate\u015f etti\u011fini, kimin \u00e7ok say\u0131da \u0131\u015f\u0131n \u00e7ekti\u011fini ancak hi\u00e7bir \u015fey \u00e7izmedi\u011fini do\u011frulayan bir oyun sunucusu.<\/p>\n
\u00fc\u00e7 sahne grafi\u011fi<\/h2>\n
Bir "3B d\u00fcnya"y\u0131 ve i\u00e7indeki nesnelerin ili\u015fkilerini tan\u0131mlayan bir a\u011fa\u00e7 veri yap\u0131s\u0131 olu\u015fturan bir Object3D alt s\u0131n\u0131flar\u0131 ailesi. Kavramsal olarak soyuttur, ancak koda derinlemesine indi\u011finizde belirli bir i\u015flemeyle bir dereceye kadar i\u015flenebilir.<\/p>\n
\u00fc\u00e7 render<\/h2>\n
Bu genel grafi\u011fi ekranda veya bir tamponda g\u00f6rsel bir temsile d\u00f6n\u00fc\u015ft\u00fcren katmand\u0131r (\u00f6rne\u011fin, bunu sunucu taraf\u0131nda olu\u015fturursunuz). Bu amaca ula\u015fmak i\u00e7in \u00e7e\u015fitli teknolojiler kullan\u0131r.<\/p>\n
\u00dc\u00c7-WebGLRenderer<\/h2>\n
Donan\u0131m h\u0131zland\u0131rmaya olanak tan\u0131yan ve bir\u00e7ok 3B kavram\u0131n\u0131 bilen, ancak ayn\u0131 zamanda 2B (ve hatta genel bilgi i\u015flem) i\u00e7in de kullan\u0131labilen \u00f6zel bir g\u00f6r\u00fcnt\u00fcleyici. Bence bunlar three.js'nin temel yap\u0131 ta\u015flar\u0131. Ben genellikle "3B" yerine "Grafikler" kullanmay\u0131 tercih ediyorum, ancak bu yaln\u0131zca WebGLRenderer i\u00e7in ge\u00e7erli.<\/p>\n
Three.js bir oyun motoru de\u011fildir.<\/h2>\n
Web'de 3B (veya grafik) ihtiyac\u0131 olan herkes oyun yapm\u0131yor. Oyun motorlar\u0131 genellikle 3B d\u00fcnyalar\u0131 tan\u0131mlaman\u0131n ve g\u00f6r\u00fcnt\u00fclemenin \u00f6tesinde bir\u00e7ok optimizasyon yapar. Farkl\u0131 oyunlar\u0131n farkl\u0131 ihtiya\u00e7lar\u0131 vard\u0131r ve ger\u00e7ek zamanl\u0131 strateji ve birinci \u015fah\u0131s ni\u015fanc\u0131 oyunlar\u0131n\u0131n fizik ve render sistemlerinin de \u00e7ok farkl\u0131 ihtiya\u00e7lar\u0131 olmas\u0131 muhtemeldir. T\u00fcm bunlar daha fazla kod anlam\u0131na gelir ve bir \u00fcr\u00fcn katalo\u011funun par\u00e7as\u0131 olarak sadece bir 3B model olu\u015fturmak isteyen biri i\u00e7in bu sadece gereksiz de\u011fil, ayn\u0131 zamanda istenmeyen bir durumdur. Elbette, bir oyun motoru olu\u015fturabilir ve render ve motor bloklar\u0131 olu\u015fturmak i\u00e7in \u00fc\u00e7\u00fcn\u00fc kullanabilirsiniz.<\/p>\n
Three.js pek y\u00fcklenmiyor<\/h2>\n
Elbette, \u00e7ekirdekte baz\u0131 varl\u0131klar i\u00e7in birden fazla y\u00fckleyici bulunur, ancak gltf veya fbx gibi t\u00fcm yayg\u0131n formatlar birbirinden ba\u011f\u0131ms\u0131zd\u0131r. Threejs, varl\u0131klar\u0131n\u0131z\u0131 nas\u0131l edindi\u011finizle ilgilenmez; yeter ki onlar\u0131 do\u011fru \u015fekilde ayr\u0131\u015ft\u0131r\u0131p 3B bir nesne olu\u015fturun. Threejs a\u00e7\u0131s\u0131ndan, bir gltf dosyas\u0131ndan al\u0131nan bir a\u011f ile prosed\u00fcrel bir k\u00fcre aras\u0131nda hi\u00e7bir fark yoktur. Bir\u00e7ok yarat\u0131c\u0131 \u00f6rnek, k\u00fcpler ve k\u00fcreler kullan\u0131r ve Three.js'nin kendisi d\u0131\u015f\u0131nda hi\u00e7bir \u015fey y\u00fcklemez. \u00c7ekirdek y\u00fckleyiciler olduk\u00e7a geneldir; g\u00f6rselleri ve dosyalar\u0131 y\u00fckler ve Malzeme veya Doku gibi bir Threejs nesnesinin do\u011frudan bir temsilini sunar. Formata \u00f6zg\u00fc y\u00fckleyiciler bu yap\u0131 ta\u015flar\u0131yla olu\u015fturulur.<\/p>\n
<\/p>","protected":false},"excerpt":{"rendered":"Giri\u015f Three.js bir\u00e7ok \u015fey yapar ve onunla nas\u0131l \u00e7al\u0131\u015f\u0131laca\u011f\u0131 biraz kafa kar\u0131\u015ft\u0131r\u0131c\u0131 olabilir\u2026","protected":false},"author":1,"featured_media":14692,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_yoast_wpseo_focuskw":"ThreeJS","_yoast_wpseo_title":"","_yoast_wpseo_metadesc":"","_yoast_wpseo_canonical":"","_yoast_wpseo_opengraph-description":"","_yoast_wpseo_opengraph-image":"","_yoast_wpseo_twitter-description":"","_yoast_wpseo_twitter-image":"","_yoast_wpseo_focuskeywords":"","_yoast_wpseo_primary_category":"193","footnotes":""},"categories":[193,363],"tags":[395,396],"class_list":{"0":"post-14691","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-tutorials","8":"category-programming","9":"tag-threejs","10":"tag-396"},"yoast_head":"\n
Three.js \u0686\u06cc\u0633\u062a\u061f - \u0628\u0644\u0627\u06af ITPiran<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.itpiran.net\/blog\/tr\/tutorials\/threejs-\u0686\u06cc\u0633\u062a\u061f\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Three.js \u0686\u06cc\u0633\u062a\u061f - \u0628\u0644\u0627\u06af ITPiran\" \/>\n<meta property=\"og:description\" content=\"\u0645\u0642\u062f\u0645\u0647 Three.js \u06a9\u0627\u0631\u0647\u0627\u06cc \u0632\u06cc\u0627\u062f\u06cc \u0627\u0646\u062c\u0627\u0645 \u0645\u06cc \u062f\u0647\u062f \u0648 \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u062a\u0627 \u062d\u062f\u0648\u062f\u06cc \u06af\u06cc\u062c \u06a9\u0646\u0646\u062f\u0647 \u0628\u0627\u0634\u062f \u06a9\u0647 \u0686\u06af\u0648\u0646\u0647 \u0628\u0627…\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.itpiran.net\/blog\/tr\/tutorials\/threejs-\u0686\u06cc\u0633\u062a\u061f\/\" \/>\n<meta property=\"og:site_name\" content=\"\u0628\u0644\u0627\u06af ITPiran\" \/>\n<meta property=\"article:published_time\" content=\"2024-02-05T13:15:31+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-02-17T07:07:20+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdn.itpiran.net\/2024\/02\/05164430\/Threejs.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1793\" \/>\n\t<meta property=\"og:image:height\" content=\"1110\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/threejs-%da%86%db%8c%d8%b3%d8%aa%d8%9f\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/threejs-%da%86%db%8c%d8%b3%d8%aa%d8%9f\\\/\"},\"author\":{\"name\":\"admin\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#\\\/schema\\\/person\\\/04ed27b919baca468a2273f8e4318f81\"},\"headline\":\"Three.js \u0686\u06cc\u0633\u062a\u061f\",\"datePublished\":\"2024-02-05T13:15:31+00:00\",\"dateModified\":\"2024-02-17T07:07:20+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/threejs-%da%86%db%8c%d8%b3%d8%aa%d8%9f\\\/\"},\"wordCount\":201,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/threejs-%da%86%db%8c%d8%b3%d8%aa%d8%9f\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/cdn.itpiran.net\\\/2024\\\/02\\\/05164430\\\/Threejs.jpg\",\"keywords\":[\"ThreeJS\",\"\u062c\u0627\u0648\u0627\u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0633\u0647 \u0628\u0639\u062f\u06cc\"],\"articleSection\":[\"\u0622\u0645\u0648\u0632\u0634\u06cc\",\"\u0628\u0631\u0646\u0627\u0645\u0647 \u0646\u0648\u06cc\u0633\u06cc\"],\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/threejs-%da%86%db%8c%d8%b3%d8%aa%d8%9f\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/threejs-%da%86%db%8c%d8%b3%d8%aa%d8%9f\\\/\",\"url\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/threejs-%da%86%db%8c%d8%b3%d8%aa%d8%9f\\\/\",\"name\":\"Three.js \u0686\u06cc\u0633\u062a\u061f - \u0628\u0644\u0627\u06af ITPiran\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/threejs-%da%86%db%8c%d8%b3%d8%aa%d8%9f\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/threejs-%da%86%db%8c%d8%b3%d8%aa%d8%9f\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/cdn.itpiran.net\\\/2024\\\/02\\\/05164430\\\/Threejs.jpg\",\"datePublished\":\"2024-02-05T13:15:31+00:00\",\"dateModified\":\"2024-02-17T07:07:20+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/threejs-%da%86%db%8c%d8%b3%d8%aa%d8%9f\\\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/threejs-%da%86%db%8c%d8%b3%d8%aa%d8%9f\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/threejs-%da%86%db%8c%d8%b3%d8%aa%d8%9f\\\/#primaryimage\",\"url\":\"https:\\\/\\\/cdn.itpiran.net\\\/2024\\\/02\\\/05164430\\\/Threejs.jpg\",\"contentUrl\":\"https:\\\/\\\/cdn.itpiran.net\\\/2024\\\/02\\\/05164430\\\/Threejs.jpg\",\"width\":1793,\"height\":1110},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/threejs-%da%86%db%8c%d8%b3%d8%aa%d8%9f\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"\u0622\u0645\u0648\u0632\u0634\u06cc\",\"item\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/category\\\/tutorials\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Three.js \u0686\u06cc\u0633\u062a\u061f\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/\",\"name\":\"\u0628\u0644\u0627\u06af ITPiran\",\"description\":\"\u0627\u062e\u0628\u0627\u0631 \u0648 \u0645\u0642\u0627\u0644\u0627\u062a \u062a\u062c\u0627\u0631\u062a \u067e\u0627\u06cc\u062f\u0627\u0631 \u0627\u06cc\u0631\u0627\u0646\u06cc\u0627\u0646\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#organization\",\"name\":\"\u0628\u0644\u0627\u06af \u062a\u062c\u0627\u0631\u062a \u067e\u0627\u06cc\u062f\u0627\u0631 \u0627\u06cc\u0631\u0627\u0646\u06cc\u0627\u0646\",\"alternateName\":\"ITPIran Blog\",\"url\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/cdn.itpiran.net\\\/2023\\\/12\\\/27150508\\\/cropped-ITPIRAN-BLOG-LOGO-2.png\",\"contentUrl\":\"https:\\\/\\\/cdn.itpiran.net\\\/2023\\\/12\\\/27150508\\\/cropped-ITPIRAN-BLOG-LOGO-2.png\",\"width\":512,\"height\":512,\"caption\":\"\u0628\u0644\u0627\u06af \u062a\u062c\u0627\u0631\u062a \u067e\u0627\u06cc\u062f\u0627\u0631 \u0627\u06cc\u0631\u0627\u0646\u06cc\u0627\u0646\"},\"image\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#\\\/schema\\\/person\\\/04ed27b919baca468a2273f8e4318f81\",\"name\":\"admin\",\"url\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tr\\\/author\\\/admin\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Three.js Nedir? - ITPiran Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.itpiran.net\/blog\/tr\/tutorials\/threejs-\u0686\u06cc\u0633\u062a\u061f\/","og_locale":"tr_TR","og_type":"article","og_title":"Three.js \u0686\u06cc\u0633\u062a\u061f - \u0628\u0644\u0627\u06af ITPiran","og_description":"\u0645\u0642\u062f\u0645\u0647 Three.js \u06a9\u0627\u0631\u0647\u0627\u06cc \u0632\u06cc\u0627\u062f\u06cc \u0627\u0646\u062c\u0627\u0645 \u0645\u06cc \u062f\u0647\u062f \u0648 \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u062a\u0627 \u062d\u062f\u0648\u062f\u06cc \u06af\u06cc\u062c \u06a9\u0646\u0646\u062f\u0647 \u0628\u0627\u0634\u062f \u06a9\u0647 \u0686\u06af\u0648\u0646\u0647 \u0628\u0627…","og_url":"https:\/\/www.itpiran.net\/blog\/tr\/tutorials\/threejs-\u0686\u06cc\u0633\u062a\u061f\/","og_site_name":"\u0628\u0644\u0627\u06af ITPiran","article_published_time":"2024-02-05T13:15:31+00:00","article_modified_time":"2024-02-17T07:07:20+00:00","og_image":[{"width":1793,"height":1110,"url":"https:\/\/cdn.itpiran.net\/2024\/02\/05164430\/Threejs.jpg","type":"image\/jpeg"}],"author":"admin","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"admin","Tahmini okuma s\u00fcresi":"1 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/threejs-%da%86%db%8c%d8%b3%d8%aa%d8%9f\/#article","isPartOf":{"@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/threejs-%da%86%db%8c%d8%b3%d8%aa%d8%9f\/"},"author":{"name":"admin","@id":"https:\/\/www.itpiran.net\/blog\/#\/schema\/person\/04ed27b919baca468a2273f8e4318f81"},"headline":"Three.js \u0686\u06cc\u0633\u062a\u061f","datePublished":"2024-02-05T13:15:31+00:00","dateModified":"2024-02-17T07:07:20+00:00","mainEntityOfPage":{"@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/threejs-%da%86%db%8c%d8%b3%d8%aa%d8%9f\/"},"wordCount":201,"commentCount":0,"publisher":{"@id":"https:\/\/www.itpiran.net\/blog\/#organization"},"image":{"@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/threejs-%da%86%db%8c%d8%b3%d8%aa%d8%9f\/#primaryimage"},"thumbnailUrl":"https:\/\/cdn.itpiran.net\/2024\/02\/05164430\/Threejs.jpg","keywords":["ThreeJS","\u062c\u0627\u0648\u0627\u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0633\u0647 \u0628\u0639\u062f\u06cc"],"articleSection":["\u0622\u0645\u0648\u0632\u0634\u06cc","\u0628\u0631\u0646\u0627\u0645\u0647 \u0646\u0648\u06cc\u0633\u06cc"],"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.itpiran.net\/blog\/tutorials\/threejs-%da%86%db%8c%d8%b3%d8%aa%d8%9f\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/threejs-%da%86%db%8c%d8%b3%d8%aa%d8%9f\/","url":"https:\/\/www.itpiran.net\/blog\/tutorials\/threejs-%da%86%db%8c%d8%b3%d8%aa%d8%9f\/","name":"Three.js Nedir? - ITPiran Blog","isPartOf":{"@id":"https:\/\/www.itpiran.net\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/threejs-%da%86%db%8c%d8%b3%d8%aa%d8%9f\/#primaryimage"},"image":{"@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/threejs-%da%86%db%8c%d8%b3%d8%aa%d8%9f\/#primaryimage"},"thumbnailUrl":"https:\/\/cdn.itpiran.net\/2024\/02\/05164430\/Threejs.jpg","datePublished":"2024-02-05T13:15:31+00:00","dateModified":"2024-02-17T07:07:20+00:00","breadcrumb":{"@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/threejs-%da%86%db%8c%d8%b3%d8%aa%d8%9f\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.itpiran.net\/blog\/tutorials\/threejs-%da%86%db%8c%d8%b3%d8%aa%d8%9f\/"]}]},{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/threejs-%da%86%db%8c%d8%b3%d8%aa%d8%9f\/#primaryimage","url":"https:\/\/cdn.itpiran.net\/2024\/02\/05164430\/Threejs.jpg","contentUrl":"https:\/\/cdn.itpiran.net\/2024\/02\/05164430\/Threejs.jpg","width":1793,"height":1110},{"@type":"BreadcrumbList","@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/threejs-%da%86%db%8c%d8%b3%d8%aa%d8%9f\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.itpiran.net\/blog\/"},{"@type":"ListItem","position":2,"name":"\u0622\u0645\u0648\u0632\u0634\u06cc","item":"https:\/\/www.itpiran.net\/blog\/category\/tutorials\/"},{"@type":"ListItem","position":3,"name":"Three.js \u0686\u06cc\u0633\u062a\u061f"}]},{"@type":"WebSite","@id":"https:\/\/www.itpiran.net\/blog\/#website","url":"https:\/\/www.itpiran.net\/blog\/","name":"ITPiran Blog","description":"\u0130ran S\u00fcrd\u00fcr\u00fclebilir Ticaret Haberleri ve Makaleleri","publisher":{"@id":"https:\/\/www.itpiran.net\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.itpiran.net\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":"Organization","@id":"https:\/\/www.itpiran.net\/blog\/#organization","name":"S\u00fcrd\u00fcr\u00fclebilir \u0130ran \u0130\u015fletmeleri Blogu","alternateName":"ITPIran Blog","url":"https:\/\/www.itpiran.net\/blog\/","logo":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/www.itpiran.net\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/cdn.itpiran.net\/2023\/12\/27150508\/cropped-ITPIRAN-BLOG-LOGO-2.png","contentUrl":"https:\/\/cdn.itpiran.net\/2023\/12\/27150508\/cropped-ITPIRAN-BLOG-LOGO-2.png","width":512,"height":512,"caption":"\u0628\u0644\u0627\u06af \u062a\u062c\u0627\u0631\u062a \u067e\u0627\u06cc\u062f\u0627\u0631 \u0627\u06cc\u0631\u0627\u0646\u06cc\u0627\u0646"},"image":{"@id":"https:\/\/www.itpiran.net\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.itpiran.net\/blog\/#\/schema\/person\/04ed27b919baca468a2273f8e4318f81","name":"y\u00f6netici","url":"https:\/\/www.itpiran.net\/blog\/tr\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/www.itpiran.net\/blog\/tr\/wp-json\/wp\/v2\/posts\/14691","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.itpiran.net\/blog\/tr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.itpiran.net\/blog\/tr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.itpiran.net\/blog\/tr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.itpiran.net\/blog\/tr\/wp-json\/wp\/v2\/comments?post=14691"}],"version-history":[{"count":2,"href":"https:\/\/www.itpiran.net\/blog\/tr\/wp-json\/wp\/v2\/posts\/14691\/revisions"}],"predecessor-version":[{"id":14753,"href":"https:\/\/www.itpiran.net\/blog\/tr\/wp-json\/wp\/v2\/posts\/14691\/revisions\/14753"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.itpiran.net\/blog\/tr\/wp-json\/wp\/v2\/media\/14692"}],"wp:attachment":[{"href":"https:\/\/www.itpiran.net\/blog\/tr\/wp-json\/wp\/v2\/media?parent=14691"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.itpiran.net\/blog\/tr\/wp-json\/wp\/v2\/categories?post=14691"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.itpiran.net\/blog\/tr\/wp-json\/wp\/v2\/tags?post=14691"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}