Web tabanl\u0131 3D uygulamalar ve oyunlar geli\u015ftirmek i\u00e7in en pop\u00fcler k\u00fct\u00fcphanelerden biri olan Three.js, geli\u015ftiricilere g\u00fc\u00e7l\u00fc ve esnek bir ortam sunar. Ancak, b\u00fcy\u00fck ve karma\u015f\u0131k projelerde, geleneksel nesne tabanl\u0131 programlama (OOP) yakla\u015f\u0131mlar\u0131 baz\u0131 mimari zorluklara yol a\u00e7abilir. Bu noktada, Entity-Component-System (ECS) mimarisi, Three.js projelerinizi daha mod\u00fcler, \u00f6l\u00e7eklenebilir ve y\u00f6netilebilir hale getirmek i\u00e7in g\u00fc\u00e7l\u00fc bir alternatif sunar. Bu makalede, ECS’nin temel prensiplerini, Three.js ile nas\u0131l entegre edilebilece\u011fini ve bu yakla\u015f\u0131m\u0131n sa\u011flad\u0131\u011f\u0131 avantajlar\u0131 detayl\u0131 bir \u015fekilde inceleyece\u011fiz.<\/p>\n
ECS (Entity-Component-System), \u00f6zellikle oyun motorlar\u0131nda ve y\u00fcksek performansl\u0131 sim\u00fclasyonlarda yayg\u0131n olarak kullan\u0131lan bir mimari desendir. Geleneksel nesne tabanl\u0131 yakla\u015f\u0131mlar\u0131n aksine, ECS, veri ve davran\u0131\u015f\u0131 birbirinden ay\u0131rarak daha esnek ve \u00f6l\u00e7eklenebilir bir yap\u0131 sunar. Bu ayr\u0131m, karma\u015f\u0131k sistemlerin y\u00f6netimini kolayla\u015ft\u0131r\u0131r ve performans optimizasyonlar\u0131na olanak tan\u0131r.<\/p>\n
Geleneksel OOP’de, bir nesne hem veri (\u00f6zellikler) hem de davran\u0131\u015f (metotlar) i\u00e7erir. Bu durum, \u00f6zellikle miras hiyerar\u015fileri derinle\u015fti\u011finde veya nesnelerin birden fazla, birbiriyle alakas\u0131z yetene\u011fe sahip olmas\u0131 gerekti\u011finde “god object” veya “\u00e7oklu miras” sorunlar\u0131na yol a\u00e7abilir. \u00d6rne\u011fin, bir “Oyuncu” nesnesi hem hareket etme, hem sald\u0131r\u0131 yapma, hem de envanter y\u00f6netme gibi bir\u00e7ok farkl\u0131 sorumlulu\u011fu \u00fcstlenebilir. Bu durum, kodun yeniden kullan\u0131labilirli\u011fini azalt\u0131r ve bak\u0131m\u0131n\u0131 zorla\u015ft\u0131r\u0131r.<\/p>\n
ECS, bu sorunlar\u0131 \u00fc\u00e7 temel kavramla \u00e7\u00f6zer:<\/p>\n
Bu ayr\u0131m sayesinde, bir varl\u0131\u011fa yeni bir \u00f6zellik eklemek sadece ilgili bile\u015feni ona atamakla m\u00fcmk\u00fcnd\u00fcr. Davran\u0131\u015flar ise merkezi sistemler taraf\u0131ndan y\u00f6netilir, bu da kodun daha d\u00fczenli ve mod\u00fcler olmas\u0131n\u0131 sa\u011flar.<\/p>\n
ECS, ba\u015flang\u0131\u00e7ta oyun motorlar\u0131nda (Unity DOTS, Unreal Engine, Bevy) performans ve esneklik sa\u011flamak amac\u0131yla geli\u015ftirilmi\u015ftir. Ancak, modern web uygulamalar\u0131 ve \u00f6zellikle Three.js gibi k\u00fct\u00fcphanelerle geli\u015ftirilen karma\u015f\u0131k 3D deneyimleri, benzer mimari zorluklarla kar\u015f\u0131la\u015fmaktad\u0131r. WebGL\/WebGPU’nun sundu\u011fu d\u00fc\u015f\u00fck seviyeli kontrol ve y\u00fcksek performans potansiyeli, ECS’nin web ortam\u0131nda da giderek daha fazla benimsenmesine yol a\u00e7maktad\u0131r.<\/p>\n
ECS mimarisinin kalbinde yer alan \u00fc\u00e7 temel yap\u0131 ta\u015f\u0131, Three.js uygulamalar\u0131n\u0131z\u0131n organizasyonunu k\u00f6kten de\u011fi\u015ftirebilir. Bu bile\u015fenlerin her birini ve nas\u0131l etkile\u015fimde bulunduklar\u0131n\u0131 anlamak, ECS’nin g\u00fcc\u00fcn\u00fc kavramak i\u00e7in kritik \u00f6neme sahiptir.<\/p>\n
Bir Entity, ad\u0131ndan da anla\u015f\u0131laca\u011f\u0131 gibi, sahnenizdeki soyut bir “varl\u0131\u011f\u0131” temsil eder. Ancak bu varl\u0131k, geleneksel OOP’deki gibi bir nesne de\u011fildir; sadece benzersiz bir kimli\u011fe (genellikle bir ID) sahip bir etikettir. Bir Entity’nin kendisi hi\u00e7bir veri veya davran\u0131\u015f bar\u0131nd\u0131rmaz. Onun \u00f6zellikleri ve yetenekleri, ona eklenen Component’lar arac\u0131l\u0131\u011f\u0131yla tan\u0131mlan\u0131r. \u00d6rne\u011fin, Three.js sahnenizdeki bir k\u00fcp, bir \u0131\u015f\u0131k kayna\u011f\u0131 veya bir kamera birer Entity olabilir.<\/p>\n
Component’lar, bir Entity’nin belirli bir y\u00f6n\u00fcn\u00fc veya \u00f6zelli\u011fini tan\u0131mlayan saf veri yap\u0131lar\u0131d\u0131r. Davran\u0131\u015f veya mant\u0131k i\u00e7ermezler. Her Component, tek bir sorumlulu\u011fa odaklan\u0131r. \u00d6rne\u011fin:<\/p>\n
PositionComponent<\/code>: x, y, z<\/code> koordinatlar\u0131.<\/li>\nVelocityComponent<\/code>: vx, vy, vz<\/code> h\u0131z vekt\u00f6rleri.<\/li>\nMeshComponent<\/code>: Bir Three.js Mesh<\/code> nesnesi ve materyal referans\u0131.<\/li>\nCameraComponent<\/code>: Bir Three.js Camera<\/code> nesnesi.<\/li>\n<\/ul>\nBir Entity, istedi\u011fi kadar Component’a sahip olabilir. Bu sayede, farkl\u0131 \u00f6zelliklere sahip varl\u0131klar, ayn\u0131 temel Component’lar\u0131 payla\u015farak kolayca olu\u015fturulabilir ve de\u011fi\u015ftirilebilir.<\/p>\n
System: Davran\u0131\u015f ve Mant\u0131k \u0130\u015fleyicileri<\/h4>\n
System’ler, belirli bir t\u00fcrdeki Component’lar\u0131 i\u00e7eren Entity’ler \u00fczerinde i\u015flem yapan mant\u0131k birimleridir. Bir System, genellikle bir dizi Entity’yi sorgular, bu Entity’lerin sahip oldu\u011fu Component’lardaki verileri okur ve g\u00fcnceller. System’ler, uygulaman\u0131z\u0131n ana d\u00f6ng\u00fcs\u00fcnde (\u00f6rne\u011fin, her frame’de) \u00e7al\u0131\u015ft\u0131r\u0131l\u0131r. \u00d6rnek System’ler:<\/p>\n
\nMovementSystem<\/code>: PositionComponent<\/code> ve VelocityComponent<\/code>‘a sahip t\u00fcm Entity’lerin konumunu h\u0131zlar\u0131na g\u00f6re g\u00fcnceller.<\/li>\nRenderSystem<\/code>: PositionComponent<\/code> ve MeshComponent<\/code>‘a sahip t\u00fcm Entity’leri Three.js sahnesine ekler ve render eder.<\/li>\nAnimationSystem<\/code>: AnimationComponent<\/code>‘a sahip Entity’lerin animasyonlar\u0131n\u0131 y\u00f6netir.<\/li>\n<\/ul>\nSystem’ler, veri ve mant\u0131\u011f\u0131 birbirinden ay\u0131rarak, kodun daha mod\u00fcler olmas\u0131n\u0131, yeniden kullan\u0131labilirli\u011fini art\u0131rmas\u0131n\u0131 ve test edilmesini kolayla\u015ft\u0131rmas\u0131n\u0131 sa\u011flar.<\/p>\n
ECS D\u00f6ng\u00fcs\u00fc ve \u0130\u015fleyi\u015fi<\/h4>\n
Bir ECS uygulamas\u0131n\u0131n tipik \u00e7al\u0131\u015fma d\u00f6ng\u00fcs\u00fc \u015fu \u015fekildedir:<\/p>\n
\n- T\u00fcm System’ler belirli bir s\u0131rayla \u00e7al\u0131\u015ft\u0131r\u0131l\u0131r.<\/li>\n
- Her System, i\u015fleyece\u011fi Component kombinasyonuna sahip Entity’leri sorgular.<\/li>\n
- System, bu Entity’lerin Component verilerini okur ve gerekti\u011finde g\u00fcnceller.<\/li>\n
- Bu d\u00f6ng\u00fc, uygulaman\u0131n ya\u015fam d\u00f6ng\u00fcs\u00fc boyunca s\u00fcrekli tekrarlan\u0131r.<\/li>\n<\/ol>\n
Bu d\u00f6ng\u00fc, Three.js’in render d\u00f6ng\u00fcs\u00fc ile entegre edilerek her karede sahnenin g\u00fcncellenmesini ve \u00e7izilmesini sa\u011flar.<\/p>\n
Three.js ve Geleneksel Yakla\u015f\u0131m\u0131n S\u0131n\u0131rl\u0131l\u0131klar\u0131<\/h3>\n
Three.js, nesne tabanl\u0131 bir k\u00fct\u00fcphane olup, sahneleri, nesneleri, kameralar\u0131 ve \u0131\u015f\u0131klar\u0131 JavaScript s\u0131n\u0131flar\u0131 olarak temsil eder. Bu yakla\u015f\u0131m k\u00fc\u00e7\u00fck ve orta \u00f6l\u00e7ekli projeler i\u00e7in yeterli olsa da, karma\u015f\u0131k 3D uygulamalar geli\u015ftirirken baz\u0131 mimari s\u0131n\u0131rlamalara yol a\u00e7abilir.<\/p>\n
Tekil Sorumluluk \u0130lkesinin \u0130hlali<\/h4>\n
Geleneksel Three.js uygulamalar\u0131nda, bir Mesh<\/code> nesnesi hem g\u00f6rsel temsili (geometri, materyal) hem de sahnedeki konumu, d\u00f6n\u00fc\u015f\u00fc ve \u00f6l\u00e7e\u011fi gibi transformasyon verilerini i\u00e7erir. Dahas\u0131, bu Mesh<\/code>‘e \u00f6zel davran\u0131\u015flar (\u00f6rne\u011fin, bir topun z\u0131plamas\u0131, bir karakterin y\u00fcr\u00fcmesi) eklemek istedi\u011finizde, genellikle Mesh<\/code> s\u0131n\u0131f\u0131n\u0131 geni\u015fletmek veya ona do\u011frudan metotlar eklemek zorunda kal\u0131rs\u0131n\u0131z. Bu durum, “tekil sorumluluk ilkesini” ihlal eder; bir nesne birden fazla, birbiriyle alakas\u0131z sorumlulu\u011fa sahip olur.<\/p>\nMiras Hiyerar\u015fisi Karma\u015fas\u0131<\/h4>\n
OOP’nin miras mekanizmas\u0131, karma\u015f\u0131k 3D d\u00fcnyalar\u0131nda esnekli\u011fi k\u0131s\u0131tlayabilir. \u00d6rne\u011fin, hem “u\u00e7abilen” hem de “sald\u0131rabilen” bir varl\u0131k yaratmak istedi\u011finizde, \u00e7oklu miras sorunlar\u0131 veya derin ve k\u0131r\u0131lgan miras hiyerar\u015fileriyle kar\u015f\u0131la\u015fabilirsiniz. Bir varl\u0131\u011f\u0131n yeteneklerini de\u011fi\u015ftirmek veya yeni bir yetenek eklemek, t\u00fcm miras zincirini etkileyebilir ve beklenmedik yan etkilere yol a\u00e7abilir. Bu durum, kodun esnekli\u011fini azalt\u0131r ve yeni \u00f6zelliklerin eklenmesini zorla\u015ft\u0131r\u0131r.<\/p>\n
Performans ve Optimizasyon Zorluklar\u0131<\/h4>\n
Geleneksel OOP yakla\u015f\u0131mlar\u0131nda, veriler genellikle haf\u0131zan\u0131n farkl\u0131 b\u00f6lgelerine da\u011f\u0131lm\u0131\u015f nesneler i\u00e7inde saklan\u0131r. Bu durum, CPU’nun \u00f6nbellek verimlili\u011fini d\u00fc\u015f\u00fcrebilir ve b\u00fcy\u00fck veri k\u00fcmeleri \u00fczerinde i\u015flem yaparken performans darbo\u011fazlar\u0131na yol a\u00e7abilir. \u00d6zellikle oyunlar ve sim\u00fclasyonlar gibi performans kritik uygulamalarda, binlerce nesnenin ayn\u0131 anda g\u00fcncellenmesi gerekti\u011finde bu durum ciddi bir sorun haline gelebilir. ECS’nin veri odakl\u0131 yap\u0131s\u0131, benzer verilerin haf\u0131zada biti\u015fik tutulmas\u0131n\u0131 te\u015fvik ederek bu t\u00fcr performans sorunlar\u0131n\u0131 hafifletir.<\/p>\n
Three.js Uygulamalar\u0131nda ECS Entegrasyonu<\/h3>\n
Three.js projelerinize ECS mimarisini entegre etmek, ba\u015flang\u0131\u00e7ta biraz farkl\u0131 bir d\u00fc\u015f\u00fcnce yap\u0131s\u0131 gerektirse de, uzun vadede projenizin s\u00fcrd\u00fcr\u00fclebilirli\u011fini ve performans\u0131n\u0131 art\u0131racakt\u0131r. \u0130\u015fte bu entegrasyonun temel ad\u0131mlar\u0131 ve yakla\u015f\u0131mlar\u0131.<\/p>\n
Three.js Nesnelerini Component’lara D\u00f6n\u00fc\u015ft\u00fcrmek<\/h4>\n
ECS’nin temel prensibi, Three.js’in g\u00f6rsel nesnelerini (Mesh, Camera, Light) do\u011frudan Entity’ler olarak kullanmak yerine, bu nesneleri Component’lar i\u00e7inde sarmalamakt\u0131r.<\/p>\n
\n\/\/ \u00d6rnek Bir Three.js Mesh Component'\u0131\nclass MeshComponent {\n constructor(geometry, material) {\n this.mesh = new THREE.Mesh(geometry, material);\n }\n}\n\n\/\/ \u00d6rnek Bir Konum Component'\u0131\nclass PositionComponent {\n constructor(x = 0, y = 0, z = 0) {\n this.x = x;\n this.y = y;\n this.z = z;\n }\n}\n\n\/\/ \u00d6rnek Bir H\u0131z Component'\u0131\nclass VelocityComponent {\n constructor(vx = 0, vy = 0, vz = 0) {\n this.vx = vx;\n this.vy = vy;\n this.vz = vz;\n }\n}\n<\/pre>\n<\/code>
\nBu \u015fekilde, bir Entity'ye bir MeshComponent<\/code> ve bir PositionComponent<\/code> ekleyerek g\u00f6rsel bir nesne olu\u015fturabiliriz.<\/p>\nBir ECS K\u00fct\u00fcphanesi Se\u00e7imi veya \u00d6zel Implementasyon<\/h4>\n
Piyasada bir\u00e7ok JavaScript ECS k\u00fct\u00fcphanesi bulunmaktad\u0131r (\u00f6rne\u011fin, ecsy<\/code>, geotic<\/code>, tiny-ecs<\/code>). Bu k\u00fct\u00fcphaneler, Entity, Component ve System y\u00f6netimini kolayla\u015ft\u0131ran API'ler sunar. Projenizin b\u00fcy\u00fckl\u00fc\u011f\u00fcne ve ihtiya\u00e7lar\u0131na g\u00f6re haz\u0131r bir k\u00fct\u00fcphane kullanabilir veya daha fazla kontrol i\u00e7in kendi basit ECS yap\u0131n\u0131z\u0131 olu\u015fturabilirsiniz.<\/p>\n\n\/\/ ECS K\u00fct\u00fcphanesi (\u00f6rne\u011fin, ecsy ile basit bir kurulum)\nimport { World, Component, System } from 'ecsy';\n\n\/\/ ... Component tan\u0131mlamalar\u0131 ...\n\nclass MovementSystem extends System {\n execute(delta, time) {\n this.queries.movingObjects.results.forEach(entity => {\n const position = entity.getMutableComponent(PositionComponent);\n const velocity = entity.getComponent(VelocityComponent);\n\n position.x += velocity.vx * delta;\n position.y += velocity.vy * delta;\n position.z += velocity.vz * delta;\n });\n }\n}\n\nMovementSystem.queries = {\n movingObjects: {\n components: [PositionComponent, VelocityComponent]\n }\n};\n\nconst world = new World();\nworld\n .registerComponent(PositionComponent)\n .registerComponent(VelocityComponent)\n .registerComponent(MeshComponent)\n .registerSystem(MovementSystem);\n\n\/\/ Bir Entity olu\u015fturma\nconst entity = world.createEntity();\nentity.addComponent(PositionComponent, { x: 0, y: 0, z: 0 });\nentity.addComponent(VelocityComponent, { vx: 0.1, vy: 0, vz: 0 });\nentity.addComponent(MeshComponent, {\n geometry: new THREE.BoxGeometry(),\n material: new THREE.MeshBasicMaterial({ color: 0x00ff00 })\n});\n<\/pre>\n<\/code><\/p>\n
Render Sistemi Olu\u015fturma<\/h4>\n
Three.js ile entegrasyonun en kritik k\u0131sm\u0131, sahneyi y\u00f6neten bir RenderSystem<\/code> olu\u015fturmakt\u0131r. Bu sistem, MeshComponent<\/code> ve PositionComponent<\/code> gibi g\u00f6rsel \u00f6zelliklere sahip t\u00fcm Entity'leri sorgular ve bunlar\u0131n Three.js sahnesine eklenmesini, konumlar\u0131n\u0131n g\u00fcncellenmesini ve render edilmesini sa\u011flar.<\/p>\n\nclass RenderSystem extends System {\n init() {\n this.scene = new THREE.Scene();\n this.camera = new THREE.PerspectiveCamera(75, window.innerWidth \/ window.innerHeight, 0.1, 1000);\n this.renderer = new THREE.WebGLRenderer();\n this.renderer.setSize(window.innerWidth, window.innerHeight);\n document.body.appendChild(this.renderer.domElement);\n\n this.camera.position.z = 5;\n }\n\n execute(delta, time) {\n this.queries.renderableObjects.added.forEach(entity => {\n const meshComponent = entity.getComponent(MeshComponent);\n this.scene.add(meshComponent.mesh);\n });\n\n this.queries.renderableObjects.results.forEach(entity => {\n const position = entity.getComponent(PositionComponent);\n const meshComponent = entity.getComponent(MeshComponent);\n\n if (meshComponent.mesh) {\n meshComponent.mesh.position.set(position.x, position.y, position.z);\n }\n });\n\n this.renderer.render(this.scene, this.camera);\n }\n}\n\nRenderSystem.queries = {\n renderableObjects: {\n components: [MeshComponent, PositionComponent],\n listen: {\n added: true \/\/ Yeni eklenen mesh'leri sahneye eklemek i\u00e7in\n }\n }\n};\n\nworld.registerSystem(RenderSystem);\n<\/pre>\n<\/code>
\nBu yap\u0131da, RenderSystem<\/code>, Three.js sahnesini ve render d\u00f6ng\u00fcs\u00fcn\u00fc y\u00f6netirken, di\u011fer sistemler sadece veri (Component'lar) \u00fczerinde i\u015flem yapar.<\/p>\nECS ile Three.js Uygulama Geli\u015ftirmenin Avantajlar\u0131<\/h3>\n
ECS mimarisini Three.js projelerinize dahil etmek, \u00f6zellikle karma\u015f\u0131k ve b\u00fcy\u00fck \u00f6l\u00e7ekli uygulamalarda bir dizi \u00f6nemli avantaj sunar.<\/p>\n
Y\u00fcksek Mod\u00fclerlik ve Yeniden Kullan\u0131labilirlik<\/h4>\n
ECS, her bir Component'\u0131n tek bir sorumlulu\u011fa sahip olmas\u0131n\u0131 ve System'lerin sadece belirli Component kombinasyonlar\u0131 \u00fczerinde \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flar. Bu durum, kodun daha mod\u00fcler olmas\u0131n\u0131 ve farkl\u0131 Entity'ler aras\u0131nda Component'lar\u0131n kolayca yeniden kullan\u0131labilmesini sa\u011flar. \u00d6rne\u011fin, bir PositionComponent<\/code> hem bir k\u00fcp, hem bir kamera, hem de bir \u0131\u015f\u0131k taraf\u0131ndan kullan\u0131labilir. Yeni bir \u00f6zellik eklemek i\u00e7in mevcut kodu de\u011fi\u015ftirmek yerine, sadece yeni bir Component veya System eklemek yeterlidir.<\/p>\nKolay Test Edilebilirlik ve Bak\u0131m<\/h4>\n
Component'lar saf veri yap\u0131lar\u0131 oldu\u011fu i\u00e7in, test edilmeleri son derece kolayd\u0131r. System'ler de sadece belirli Component'lar \u00fczerinde i\u015flem yapt\u0131\u011f\u0131 i\u00e7in, her bir System'in i\u015flevselli\u011fi izole bir \u015fekilde test edilebilir. Bu mod\u00fcler yap\u0131, hata ay\u0131klamay\u0131 kolayla\u015ft\u0131r\u0131r ve uygulaman\u0131n genel bak\u0131m maliyetini d\u00fc\u015f\u00fcr\u00fcr. Bir hata olu\u015ftu\u011funda, sorunun hangi System veya Component'tan kaynakland\u0131\u011f\u0131n\u0131 tespit etmek daha kolayd\u0131r.<\/p>\n
Paralel \u0130\u015flem Potansiyeli<\/h4>\n
ECS'nin veri ve davran\u0131\u015f\u0131 ay\u0131rmas\u0131, gelecekteki performans optimizasyonlar\u0131 i\u00e7in \u00f6nemli bir potansiyel sunar. System'ler genellikle birbirinden ba\u011f\u0131ms\u0131z olarak \u00e7al\u0131\u015fabilir. Bu, modern \u00e7ok \u00e7ekirdekli i\u015flemcilerde veya Web Workers arac\u0131l\u0131\u011f\u0131yla paralel olarak \u00e7al\u0131\u015ft\u0131r\u0131labilme potansiyeli anlam\u0131na gelir. \u00d6rne\u011fin, MovementSystem<\/code> ve AnimationSystem<\/code> ayn\u0131 anda farkl\u0131 CPU \u00e7ekirdeklerinde \u00e7al\u0131\u015fabilir, bu da genel performans\u0131 art\u0131r\u0131r.<\/p>\nEsnek Veri Y\u00f6netimi<\/h4>\n
Component'lar, bir Entity'ye dinamik olarak eklenebilir veya \u00e7\u0131kar\u0131labilir. Bu, bir Entity'nin \u00f6zelliklerinin ve yeteneklerinin \u00e7al\u0131\u015fma zaman\u0131nda kolayca de\u011fi\u015ftirilebilece\u011fi anlam\u0131na gelir. \u00d6rne\u011fin, bir karakterin \"u\u00e7ma\" yetene\u011fini ge\u00e7ici olarak kazand\u0131rmak i\u00e7in sadece bir FlyingComponent<\/code> eklemek yeterlidir. Bu esneklik, oyun mekanikleri veya interaktif uygulamalar i\u00e7in dinamik ve zengin deneyimler olu\u015fturmay\u0131 sa\u011flar.<\/p>\nPratik Bir ECS Uygulama \u00d6rne\u011fi (Three.js ile)<\/h3>\n
\u015eimdiye kadar teorik olarak ele ald\u0131\u011f\u0131m\u0131z ECS ve Three.js entegrasyonunu, basit bir senaryo \u00fczerinden daha somut hale getirelim: Sahnedeki k\u00fcpleri d\u00f6nd\u00fcrme ve hareket ettirme.<\/p>\n
Basit Bir Sahne Olu\u015fturma Senaryosu<\/h4>\n
Amac\u0131m\u0131z, Three.js sahnesinde birden fazla k\u00fcp olu\u015fturmak ve bu k\u00fcplerin hem kendi eksenleri etraf\u0131nda d\u00f6nmesini hem de belirli bir y\u00f6nde hareket etmesini sa\u011flamak. Geleneksel yakla\u015f\u0131mla her k\u00fcp i\u00e7in ayr\u0131 ayr\u0131 d\u00f6n\u00fc\u015f ve hareket mant\u0131\u011f\u0131 yazmak yerine, ECS ile bu i\u015fi nas\u0131l daha d\u00fczenli yapaca\u011f\u0131m\u0131z\u0131 g\u00f6relim.<\/p>\n
\u00d6rnek Component ve System Yap\u0131lar\u0131<\/h4>\n
\u00d6nceki \u00f6rneklerde tan\u0131mlad\u0131\u011f\u0131m\u0131z PositionComponent<\/code>, VelocityComponent<\/code> ve MeshComponent<\/code>'a ek olarak, k\u00fcplerin d\u00f6nmesini sa\u011flayacak bir RotationComponent<\/code> ve bu d\u00f6n\u00fc\u015f\u00fc y\u00f6netecek bir RotationSystem<\/code>'a ihtiyac\u0131m\u0131z var.<\/p>\n\n\/\/ RotationComponent: D\u00f6n\u00fc\u015f h\u0131z\u0131n\u0131 ve eksenini tutar\nclass RotationComponent {\n constructor(speed = 0.01, axis = new THREE.Vector3(0, 1, 0)) {\n this.speed = speed;\n this.axis = axis; \/\/ Three.js Vector3 nesnesi\n }\n}\n\n\/\/ RotationSystem: RotationComponent'a sahip t\u00fcm mesh'leri d\u00f6nd\u00fcr\u00fcr\nclass RotationSystem extends System {\n execute(delta, time) {\n this.queries.rotatableObjects.results.forEach(entity => {\n const meshComponent = entity.getComponent(MeshComponent);\n const rotationComponent = entity.getComponent(RotationComponent);\n\n if (meshComponent.mesh) {\n meshComponent.mesh.rotateOnAxis(rotationComponent.axis, rotationComponent.speed * delta * 60);\n \/\/ delta * 60 ile kare h\u0131z\u0131ndan ba\u011f\u0131ms\u0131z d\u00f6n\u00fc\u015f\n }\n });\n }\n}\n\nRotationSystem.queries = {\n rotatableObjects: {\n components: [MeshComponent, RotationComponent]\n }\n};\n\n\/\/ World'e yeni Component ve System'i kaydet\nworld\n .registerComponent(RotationComponent)\n .registerSystem(RotationSystem);\n\n\/\/ Yeni bir Entity olu\u015fturma\nconst rotatingCube = world.createEntity();\nrotatingCube.addComponent(PositionComponent, { x: 2, y: 0, z: 0 });\nrotatingCube.addComponent(VelocityComponent, { vx: 0.05, vy: 0, vz: 0 });\nrotatingCube.addComponent(MeshComponent, {\n geometry: new THREE.BoxGeometry(1, 1, 1),\n material: new THREE.MeshBasicMaterial({ color: 0xff0000 })\n});\nrotatingCube.addComponent(RotationComponent, { speed: 0.02, axis: new THREE.Vector3(0, 1, 0) });\n\n\/\/ Ba\u015fka bir Entity, farkl\u0131 \u00f6zelliklerle\nconst anotherCube = world.createEntity();\nanotherCube.addComponent(PositionComponent, { x: -2, y: 0, z: 0 });\nanotherCube.addComponent(MeshComponent, {\n geometry: new THREE.SphereGeometry(0.5, 32, 32),\n material: new THREE.MeshBasicMaterial({ color: 0x0000ff })\n});\nanotherCube.addComponent(RotationComponent, { speed: 0.01, axis: new THREE.Vector3(1, 0, 0) });\n\/\/ Bu k\u00fcp\u00fcn VelocityComponent'\u0131 olmad\u0131\u011f\u0131 i\u00e7in hareket etmeyecek, sadece d\u00f6necek.\n<\/pre>\n<\/code><\/p>\n
Three.js Render D\u00f6ng\u00fcs\u00fc ile Entegrasyon<\/h4>\n
Uygulaman\u0131z\u0131n ana d\u00f6ng\u00fcs\u00fcnde, Three.js'in render i\u015flemiyle birlikte ECS d\u00fcnyas\u0131n\u0131 da g\u00fcncellemeniz gerekir.<\/p>\n
\nlet lastTime = performance.now();\n\nfunction animate() {\n requestAnimationFrame(animate);\n\n const currentTime = performance.now();\n const delta = (currentTime - lastTime) \/ 1000; \/\/ Saniye cinsinden delta zaman\u0131\n lastTime = currentTime;\n\n \/\/ ECS d\u00fcnyas\u0131n\u0131 g\u00fcncelle\n world.execute(delta, currentTime);\n\n \/\/ RenderSystem zaten render i\u015flemini yapacak\n}\n\nanimate();\n<\/pre>\n<\/code>
\nBu \u00f6rnekte, MovementSystem<\/code>, RotationSystem<\/code> ve RenderSystem<\/code>, world.execute(delta, currentTime)<\/code> \u00e7a\u011fr\u0131s\u0131 ile s\u0131ras\u0131yla \u00e7al\u0131\u015ft\u0131r\u0131l\u0131r. Her sistem, kendi ilgi alan\u0131na giren Component'lara sahip Entity'ler \u00fczerinde i\u015flem yapar. Bu sayede, farkl\u0131 davran\u0131\u015flar\u0131 (hareket, d\u00f6n\u00fc\u015f, render) birbirinden tamamen ba\u011f\u0131ms\u0131z ve mod\u00fcler bir \u015fekilde y\u00f6netmi\u015f oluruz.<\/p>\nECS Mimarisiyle Kar\u015f\u0131la\u015f\u0131labilecek Zorluklar ve \u00c7\u00f6z\u00fcmler<\/h3>\n
ECS, bir\u00e7ok avantaj sunsa da, her mimari desen gibi kendine \u00f6zg\u00fc zorluklar\u0131 da beraberinde getirir. Bu zorluklar\u0131 anlamak ve bunlara y\u00f6nelik \u00e7\u00f6z\u00fcmler geli\u015ftirmek, projenizin ba\u015far\u0131s\u0131 i\u00e7in kritik \u00f6neme sahiptir.<\/p>\n
\u00d6\u011frenme E\u011frisi ve \u0130lk Kurulum Maliyeti<\/h4>\n
Geleneksel OOP yakla\u015f\u0131mlar\u0131na al\u0131\u015fk\u0131n geli\u015ftiriciler i\u00e7in ECS, farkl\u0131 bir d\u00fc\u015f\u00fcnce yap\u0131s\u0131 gerektirdi\u011finden belirli bir \u00f6\u011frenme e\u011frisine sahiptir. Entity'lerin sadece ID olmas\u0131, Component'lar\u0131n sadece veri tutmas\u0131 ve System'lerin mant\u0131\u011f\u0131 i\u015flemesi gibi kavramlar ba\u015flang\u0131\u00e7ta kafa kar\u0131\u015ft\u0131r\u0131c\u0131 olabilir. Ayr\u0131ca, projenin ba\u015f\u0131nda bir ECS k\u00fct\u00fcphanesi se\u00e7mek ve temel yap\u0131land\u0131rmay\u0131 yapmak ek bir kurulum maliyeti getirebilir.<\/p>\n
\u00c7\u00f6z\u00fcm:<\/b> K\u00fc\u00e7\u00fck, basit projelerle ba\u015flayarak ECS prensiplerini uygulamal\u0131 olarak \u00f6\u011frenmek en iyi yoldur. \u0130yi belgelenmi\u015f bir ECS k\u00fct\u00fcphanesi (\u00f6rne\u011fin ecsy<\/code>) se\u00e7mek ve topluluk kaynaklar\u0131ndan faydalanmak \u00f6\u011frenme s\u00fcrecini h\u0131zland\u0131rabilir. Ba\u015flang\u0131\u00e7ta basit bir \"hareket eden k\u00fcp\" veya \"d\u00f6nen nesne\" gibi senaryolarla pratik yapmak faydal\u0131 olacakt\u0131r.<\/p>\nComponent \u00c7e\u015fitlili\u011fini Y\u00f6netmek<\/h4>\n
Karma\u015f\u0131k Three.js uygulamalar\u0131nda y\u00fczlerce farkl\u0131 Component t\u00fcr\u00fc ortaya \u00e7\u0131kabilir. Bu Component'lar\u0131 d\u00fczenli bir \u015fekilde y\u00f6netmek, isimlendirme standartlar\u0131 belirlemek ve hangi Entity'nin hangi Component'a sahip olmas\u0131 gerekti\u011fini takip etmek zorla\u015fabilir.<\/p>\n
\u00c7\u00f6z\u00fcm:<\/b> Component'lar\u0131 mant\u0131ksal gruplara ay\u0131rarak (\u00f6rne\u011fin, RenderComponents<\/code>, PhysicsComponents<\/code>, GameLogicComponents<\/code>) klas\u00f6r yap\u0131s\u0131 olu\u015fturmak. \u0130simlendirme kurallar\u0131 belirlemek (\u00f6rne\u011fin, t\u00fcm Component'lar\u0131n Component<\/code> ile bitmesi). Ayr\u0131ca, Entity'lerin sahip oldu\u011fu Component'lar\u0131 g\u00f6rselle\u015ftiren veya listeleyen geli\u015ftirici ara\u00e7lar\u0131 kullanmak (baz\u0131 ECS k\u00fct\u00fcphaneleri bu t\u00fcr ara\u00e7lar sunar) y\u00f6netimi kolayla\u015ft\u0131rabilir.<\/p>\nDebugging ve Hata Ay\u0131klama<\/h4>\n
ECS'de veri ve davran\u0131\u015f\u0131n ayr\u0131lmas\u0131, hata ay\u0131klama s\u00fcrecini bazen daha karma\u015f\u0131k hale getirebilir. Bir Entity'nin durumu, bir\u00e7ok farkl\u0131 Component'a da\u011f\u0131lm\u0131\u015f olabilir ve bir System'deki hata, farkl\u0131 bir System'deki Component verilerini yanl\u0131\u015f etkileyebilir.<\/p>\n
\u00c7\u00f6z\u00fcm:<\/b> Her System'in tek bir sorumlulu\u011fu oldu\u011fundan emin olmak. Loglama ve hata ay\u0131klama ara\u00e7lar\u0131n\u0131 etkin bir \u015fekilde kullanmak. \u00d6zellikle System'lerin giri\u015f ve \u00e7\u0131k\u0131\u015f verilerini incelemek, hatalar\u0131n kayna\u011f\u0131n\u0131 tespit etmede yard\u0131mc\u0131 olabilir. Baz\u0131 ECS k\u00fct\u00fcphaneleri, Entity ve Component'lar\u0131n durumunu izlemeye yarayan devtool eklentileri sunar, bunlar hata ay\u0131klamay\u0131 b\u00fcy\u00fck \u00f6l\u00e7\u00fcde kolayla\u015ft\u0131r\u0131r.<\/p>\nGelecek ve ECS: WebGL\/WebGPU Ekosistemindeki Yeri<\/h3>\n
Web teknolojileri ve 3D grafikler aras\u0131ndaki entegrasyon derinle\u015ftik\u00e7e, ECS mimarisinin Three.js ve genel WebGL\/WebGPU ekosistemindeki rol\u00fc de giderek artmaktad\u0131r. Bu mimari, modern web 3D uygulamalar\u0131n\u0131n gelece\u011fini \u015fekillendirecek \u00f6nemli bir bile\u015fen olarak \u00f6ne \u00e7\u0131kmaktad\u0131r.<\/p>\n
Performans Odakl\u0131 Geli\u015fmeler<\/h4>\n
WebGL'in halefi olan WebGPU, GPU'ya daha d\u00fc\u015f\u00fck seviyeli eri\u015fim ve daha iyi performans kontrol\u00fc sunar. ECS'nin veri odakl\u0131 yap\u0131s\u0131, WebGPU'nun sundu\u011fu bu performans avantajlar\u0131ndan tam olarak faydalanmak i\u00e7in idealdir. Verilerin bellekte biti\u015fik d\u00fczenlenmesi, GPU'ya daha verimli veri transferi ve daha az CPU\/GPU overhead'i anlam\u0131na gelir. Bu, \u00f6zellikle b\u00fcy\u00fck \u00f6l\u00e7ekli sim\u00fclasyonlar, oyunlar ve veri g\u00f6rselle\u015ftirmeleri i\u00e7in kritik \u00f6neme sahiptir.<\/p>\n
Yeni Nesil Web 3D Uygulamalar\u0131<\/h4>\n
Metaverse, sanal ger\u00e7eklik (VR) ve art\u0131r\u0131lm\u0131\u015f ger\u00e7eklik (AR) gibi yeni nesil web 3D uygulamalar\u0131, daha \u00f6nce hi\u00e7 olmad\u0131\u011f\u0131 kadar karma\u015f\u0131k ve dinamik d\u00fcnyalar gerektiriyor. Bu t\u00fcr uygulamalarda binlerce hatta milyonlarca etkile\u015fimli nesnenin y\u00f6netilmesi gerekmektedir. ECS, bu karma\u015f\u0131kl\u0131\u011f\u0131 y\u00f6netmek i\u00e7in gerekli olan mod\u00fclerli\u011fi, esnekli\u011fi ve performans\u0131 sa\u011flayarak bu yeni nesil deneyimlerin geli\u015ftirilmesine olanak tan\u0131r. Three.js'in g\u00f6rsel g\u00fcc\u00fcn\u00fc ECS'nin mimari g\u00fcc\u00fcyle birle\u015ftirmek, bu alanda \u00e7\u0131\u011f\u0131r a\u00e7\u0131c\u0131 uygulamalar yaratman\u0131n anahtar\u0131 olacakt\u0131r.<\/p>\n
Topluluk ve K\u00fct\u00fcphane Deste\u011fi<\/h4>\n
ECS'nin pop\u00fclaritesi artt\u0131k\u00e7a, JavaScript ekosisteminde ECS k\u00fct\u00fcphanelerinin ve ara\u00e7lar\u0131n\u0131n say\u0131s\u0131 da artmaktad\u0131r. ecsy<\/code>, geotic<\/code> gibi k\u00fct\u00fcphaneler, geli\u015ftiricilerin ECS'yi Three.js projelerine kolayca entegre etmelerini sa\u011flar. Ayr\u0131ca, ECS prensiplerini benimseyen A-Frame gibi \u00e7er\u00e7eveler, web VR\/AR deneyimleri olu\u015fturmay\u0131 basitle\u015ftirir. Bu b\u00fcy\u00fcyen topluluk ve k\u00fct\u00fcphane deste\u011fi, ECS'nin web 3D geli\u015ftirme alan\u0131nda daha da yayg\u0131nla\u015faca\u011f\u0131n\u0131n bir i\u015faretidir. Geli\u015ftiriciler, bu kaynaklardan faydalanarak daha h\u0131zl\u0131 ve daha sa\u011flam uygulamalar in\u015fa edebilirler.<\/p>\nSonu\u00e7<\/h3>\n
Three.js, web tabanl\u0131 3D grafiklerin kap\u0131lar\u0131n\u0131 aralayan g\u00fc\u00e7l\u00fc bir k\u00fct\u00fcphanedir. Ancak, projelerin karma\u015f\u0131kl\u0131\u011f\u0131 artt\u0131k<\/p>\n","protected":false},"excerpt":{"rendered":"\u00c7\u00f6z\u00fcm: K\u00fc\u00e7\u00fck, basit projelerle ba\u015flayarak ECS prensiplerini uygulamal\u0131 olarak \u00f6\u011frenmek en iyi yoldur. \u0130yi belgelenmi\u015f bir ECS k\u00fct\u00fcphanesi (\u00f6rn…","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[1],"tags":[],"class_list":{"0":"post-39336","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-genel","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\n
Three.js Mimarisi: ECS Yakla\u015f\u0131m\u0131 ile Daha Esnek ve \u00d6l\u00e7eklenebilir 3D Uygulamalar - Kodlar\u0131n Gizemli D\u00fcnyas\u0131<\/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:\/\/fatihsoysal.com\/blog\/three-js-mimarisi-ecs-yaklasimi-ile-daha-esnek-ve-olceklenebilir-3d-uygulamalar\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Three.js Mimarisi: ECS Yakla\u015f\u0131m\u0131 ile Daha Esnek ve \u00d6l\u00e7eklenebilir 3D Uygulamalar\" \/>\n<meta property=\"og:description\" content=\"\u00c7\u00f6z\u00fcm: K\u00fc\u00e7\u00fck, basit projelerle ba\u015flayarak ECS prensiplerini uygulamal\u0131 olarak \u00f6\u011frenmek en iyi yoldur. \u0130yi belgelenmi\u015f bir ECS k\u00fct\u00fcphanesi (\u00f6rn...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/three-js-mimarisi-ecs-yaklasimi-ile-daha-esnek-ve-olceklenebilir-3d-uygulamalar\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2026-02-19T04:00:44+00:00\" \/>\n<meta name=\"author\" content=\"Fatih Soysal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fatih Soysal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"17 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/three-js-mimarisi-ecs-yaklasimi-ile-daha-esnek-ve-olceklenebilir-3d-uygulamalar\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/three-js-mimarisi-ecs-yaklasimi-ile-daha-esnek-ve-olceklenebilir-3d-uygulamalar\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"Three.js Mimarisi: ECS Yakla\u015f\u0131m\u0131 ile Daha Esnek ve \u00d6l\u00e7eklenebilir 3D Uygulamalar\",\"datePublished\":\"2026-02-19T04:00:44+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/three-js-mimarisi-ecs-yaklasimi-ile-daha-esnek-ve-olceklenebilir-3d-uygulamalar\/\"},\"wordCount\":2932,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/three-js-mimarisi-ecs-yaklasimi-ile-daha-esnek-ve-olceklenebilir-3d-uygulamalar\/#respond\"]}],\"copyrightYear\":\"2026\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/three-js-mimarisi-ecs-yaklasimi-ile-daha-esnek-ve-olceklenebilir-3d-uygulamalar\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/three-js-mimarisi-ecs-yaklasimi-ile-daha-esnek-ve-olceklenebilir-3d-uygulamalar\/\",\"name\":\"Three.js Mimarisi: ECS Yakla\u015f\u0131m\u0131 ile Daha Esnek ve \u00d6l\u00e7eklenebilir 3D Uygulamalar - Kodlar\u0131n Gizemli D\u00fcnyas\u0131\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2026-02-19T04:00:44+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/three-js-mimarisi-ecs-yaklasimi-ile-daha-esnek-ve-olceklenebilir-3d-uygulamalar\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/three-js-mimarisi-ecs-yaklasimi-ile-daha-esnek-ve-olceklenebilir-3d-uygulamalar\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/three-js-mimarisi-ecs-yaklasimi-ile-daha-esnek-ve-olceklenebilir-3d-uygulamalar\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Three.js Mimarisi: ECS Yakla\u015f\u0131m\u0131 ile Daha Esnek ve \u00d6l\u00e7eklenebilir 3D Uygulamalar\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/\",\"name\":\"Fatihsoysal.com\",\"description\":\"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim\",\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\",\"name\":\"Fatih Soysal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"contentUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"width\":512,\"height\":512,\"caption\":\"Fatih Soysal\"},\"logo\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Three.js Mimarisi: ECS Yakla\u015f\u0131m\u0131 ile Daha Esnek ve \u00d6l\u00e7eklenebilir 3D Uygulamalar - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","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:\/\/fatihsoysal.com\/blog\/three-js-mimarisi-ecs-yaklasimi-ile-daha-esnek-ve-olceklenebilir-3d-uygulamalar\/","og_locale":"tr_TR","og_type":"article","og_title":"Three.js Mimarisi: ECS Yakla\u015f\u0131m\u0131 ile Daha Esnek ve \u00d6l\u00e7eklenebilir 3D Uygulamalar","og_description":"\u00c7\u00f6z\u00fcm: K\u00fc\u00e7\u00fck, basit projelerle ba\u015flayarak ECS prensiplerini uygulamal\u0131 olarak \u00f6\u011frenmek en iyi yoldur. \u0130yi belgelenmi\u015f bir ECS k\u00fct\u00fcphanesi (\u00f6rn...","og_url":"https:\/\/fatihsoysal.com\/blog\/three-js-mimarisi-ecs-yaklasimi-ile-daha-esnek-ve-olceklenebilir-3d-uygulamalar\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2026-02-19T04:00:44+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"17 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/three-js-mimarisi-ecs-yaklasimi-ile-daha-esnek-ve-olceklenebilir-3d-uygulamalar\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/three-js-mimarisi-ecs-yaklasimi-ile-daha-esnek-ve-olceklenebilir-3d-uygulamalar\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"Three.js Mimarisi: ECS Yakla\u015f\u0131m\u0131 ile Daha Esnek ve \u00d6l\u00e7eklenebilir 3D Uygulamalar","datePublished":"2026-02-19T04:00:44+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/three-js-mimarisi-ecs-yaklasimi-ile-daha-esnek-ve-olceklenebilir-3d-uygulamalar\/"},"wordCount":2932,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/three-js-mimarisi-ecs-yaklasimi-ile-daha-esnek-ve-olceklenebilir-3d-uygulamalar\/#respond"]}],"copyrightYear":"2026","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/three-js-mimarisi-ecs-yaklasimi-ile-daha-esnek-ve-olceklenebilir-3d-uygulamalar\/","url":"https:\/\/fatihsoysal.com\/blog\/three-js-mimarisi-ecs-yaklasimi-ile-daha-esnek-ve-olceklenebilir-3d-uygulamalar\/","name":"Three.js Mimarisi: ECS Yakla\u015f\u0131m\u0131 ile Daha Esnek ve \u00d6l\u00e7eklenebilir 3D Uygulamalar - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2026-02-19T04:00:44+00:00","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/three-js-mimarisi-ecs-yaklasimi-ile-daha-esnek-ve-olceklenebilir-3d-uygulamalar\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/three-js-mimarisi-ecs-yaklasimi-ile-daha-esnek-ve-olceklenebilir-3d-uygulamalar\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/three-js-mimarisi-ecs-yaklasimi-ile-daha-esnek-ve-olceklenebilir-3d-uygulamalar\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Three.js Mimarisi: ECS Yakla\u015f\u0131m\u0131 ile Daha Esnek ve \u00d6l\u00e7eklenebilir 3D Uygulamalar"}]},{"@type":"WebSite","@id":"https:\/\/fatihsoysal.com\/blog\/#website","url":"https:\/\/fatihsoysal.com\/blog\/","name":"Fatihsoysal.com","description":"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim","publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":["Person","Organization"],"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1","name":"Fatih Soysal","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","contentUrl":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","width":512,"height":512,"caption":"Fatih Soysal"},"logo":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/"},"description":"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.","url":"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/"}]}},"yoast_meta":{"yoast_wpseo_title":"","yoast_wpseo_metadesc":"","yoast_wpseo_canonical":""},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/39336","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/comments?post=39336"}],"version-history":[{"count":0,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/39336\/revisions"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=39336"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=39336"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=39336"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}