{"id":35938,"date":"2025-12-05T21:31:11","date_gmt":"2025-12-05T18:31:11","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/neden-alpine-js-ve-three-js-react-olmadan-da-olur-mu\/"},"modified":"2025-12-05T21:31:11","modified_gmt":"2025-12-05T18:31:11","slug":"neden-alpine-js-ve-three-js-react-olmadan-da-olur-mu","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/neden-alpine-js-ve-three-js-react-olmadan-da-olur-mu\/","title":{"rendered":"Neden Alpine.js ve Three.js? React Olmadan da Olur mu?"},"content":{"rendered":"

Alpine.js ve Three.js ile 3D \u00fcr\u00fcn konfig\u00fcrat\u00f6r\u00fc olu\u015fturma rehberiniz. React kullanmadan modern ve etkile\u015fimli bir deneyim tasarlay\u0131n. Performans ipu\u00e7lar\u0131 ve ad\u0131m ad\u0131m kurulum.<\/p>\n

E-ticaretin ve \u00e7evrimi\u00e7i sat\u0131\u015flar\u0131n dinamik d\u00fcnyas\u0131nda, \u00fcr\u00fcnleri statik g\u00f6rsellerle sunmak art\u0131k yeterli de\u011fil. T\u00fcketiciler, bir \u00fcr\u00fcn\u00fc sat\u0131n almadan \u00f6nce onu her a\u00e7\u0131dan incelemek, ki\u015fiselle\u015ftirmek ve adeta dokunmak istiyorlar. \u0130\u015fte tam da bu noktada, 3D \u00fcr\u00fcn konfig\u00fcrat\u00f6rleri devreye giriyor ve s\u0131radan bir al\u0131\u015fveri\u015f deneyimini etkile\u015fimli, unutulmaz bir yolculu\u011fa d\u00f6n\u00fc\u015ft\u00fcr\u00fcyor. Peki, genellikle karma\u015f\u0131k ve a\u011f\u0131r framework’lerle ili\u015fkilendirilen bu teknolojiyi, lightweight ve performans odakl\u0131 ara\u00e7larla nas\u0131l hayata ge\u00e7irebiliriz? \u00d6zellikle React gibi pop\u00fcler ancak \u00f6\u011frenmesi ve y\u00f6netmesi zaman al\u0131c\u0131 olabilen k\u00fct\u00fcphanelere ba\u011f\u0131ml\u0131 kalmadan modern bir 3D konfig\u00fcrat\u00f6r in\u015fa etmek m\u00fcmk\u00fcn m\u00fc? Bu makalede, Alpine.js’in reaktif g\u00fcc\u00fcn\u00fc ve Three.js’in 3D g\u00f6rselle\u015ftirme yeteneklerini bir araya getirerek, s\u0131f\u0131rdan, y\u00fcksek performansl\u0131 ve tam \u00f6zelle\u015ftirilebilir bir 3D \u00fcr\u00fcn konfig\u00fcrat\u00f6r\u00fc nas\u0131l olu\u015fturulaca\u011f\u0131n\u0131 ad\u0131m ad\u0131m inceleyece\u011fiz. Haydi, kodlama ser\u00fcvenimize ba\u015flayal\u0131m!<\/p>\n

Geli\u015ftirme d\u00fcnyas\u0131nda bir\u00e7ok problem i\u00e7in “React \u00e7\u00f6z\u00fcm\u00fc” dayatmas\u0131yla s\u0131k\u00e7a kar\u015f\u0131la\u015f\u0131r\u0131z. Ancak her zaman en b\u00fcy\u00fck, en kapsaml\u0131 \u00e7\u00f6z\u00fcm en iyisi olmak zorunda de\u011fildir. \u00d6zellikle h\u0131zl\u0131 prototipleme, d\u00fc\u015f\u00fck boyutlu uygulamalar veya belirli bir etkile\u015fim katman\u0131 eklemek istedi\u011finizde, daha hafif alternatifler \u00e7ok daha verimli olabilir. \u0130\u015fte Alpine.js ve Three.js ikilisinin parlad\u0131\u011f\u0131 nokta tam olarak buras\u0131d\u0131r.<\/p>\n

Alpine.js’in Hafifli\u011fi ve Reaktivitesi<\/strong><\/p>\n

Alpine.js, “jQuery’ye Vue.js” mant\u0131\u011f\u0131nda bir JavaScript framework’\u00fc olarak tan\u0131mlanabilir. Yani, mevcut HTML yap\u0131n\u0131za do\u011frudan reaktif \u00f6zellikler eklemenizi sa\u011flayan, inan\u0131lmaz derecede hafif ve kullan\u0131m\u0131 kolay bir k\u00fct\u00fcphanedir. Kurulum gerektirmemesi, CDN \u00fczerinden kolayca eklenebilmesi ve sadece birka\u00e7 direktif ile karma\u015f\u0131k etkile\u015fimler yaratabilmesi, onu \u00f6zellikle k\u00fc\u00e7\u00fck projeler veya b\u00fcy\u00fck framework’lerin getirdi\u011fi y\u00fck\u00fc istemeyen geli\u015ftiriciler i\u00e7in ideal k\u0131lar. x-data<\/code>, x-bind<\/code>, x-on<\/code> gibi direktifleri sayesinde, HTML elementleriniz do\u011frudan veri ba\u011flamaya ve olay dinlemeye ba\u015flar. Bu sayede, Three.js sahnenizdeki bir objenin rengini veya materyalini de\u011fi\u015ftirmek i\u00e7in karma\u015f\u0131k bir state y\u00f6netimi kurman\u0131za gerek kalmaz; sadece HTML elementlerinizdeki veriyi g\u00fcncellersiniz ve Alpine.js aray\u00fcz\u00fc otomatik olarak reaktif bir \u015fekilde yeniler. \u00d6rne\u011fin, bir renk se\u00e7icinin de\u011feri de\u011fi\u015fti\u011finde, Alpine.js bu de\u011fi\u015fikli\u011fi yakalar ve Three.js’e g\u00f6ndererek modelin rengini an\u0131nda g\u00fcncelleyebilir. Bu, geli\u015ftirme h\u0131z\u0131n\u0131 inan\u0131lmaz art\u0131r\u0131r ve kodun okunabilirli\u011fini basitle\u015ftirir. Alpine.js’in sundu\u011fu minimal yap\u0131, projenizin ba\u015flang\u0131\u00e7ta daha k\u00fc\u00e7\u00fck bir ayak izine sahip olmas\u0131n\u0131 sa\u011flar ve bu da \u00f6zellikle mobil cihazlarda veya yava\u015f internet ba\u011flant\u0131lar\u0131nda daha iyi bir y\u00fckleme performans\u0131 anlam\u0131na gelir. Ayr\u0131ca, DOM manip\u00fclasyonu yerine direktif tabanl\u0131 yakla\u015f\u0131m\u0131, geli\u015ftiricilerin sadece HTML bilgisiyle bile dinamik aray\u00fczler olu\u015fturmas\u0131na olanak tan\u0131r. Genellikle, b\u00fcy\u00fck bir React projesindeki component hiyerar\u015fisi ve state y\u00f6netimi mimarisi, ba\u015flang\u0131\u00e7 seviyesindeki geli\u015ftiriciler i\u00e7in g\u00f6z korkutucu olabilirken, Alpine.js’in yal\u0131nl\u0131\u011f\u0131 bu bariyeri ortadan kald\u0131r\u0131r. Bu da projenin h\u0131zl\u0131 bir \u015fekilde hayata ge\u00e7irilmesi ve iterasyonlar yap\u0131lmas\u0131 i\u00e7in b\u00fcy\u00fck bir avantajd\u0131r. Alpine.js, adeta JavaScript’i HTML’in i\u00e7ine yerle\u015ftirerek, hem backend hem de frontend geli\u015ftiricileri i\u00e7in \u00f6\u011frenme e\u011frisini d\u00fc\u015f\u00fcr\u00fcrken g\u00fc\u00e7l\u00fc bir ara\u00e7 sunar.<\/p>\n

Three.js ile 3D G\u00f6rselle\u015ftirmenin G\u00fcc\u00fc<\/strong><\/p>\n

Three.js, taray\u0131c\u0131da 3D grafikleri g\u00f6r\u00fcnt\u00fclemek i\u00e7in kullan\u0131lan en pop\u00fcler JavaScript k\u00fct\u00fcphanelerinden biridir. WebGL’in karma\u015f\u0131k API’sini soyutlayarak, developer’lar\u0131n kolayca 3D sahneler olu\u015fturmas\u0131na, modeller y\u00fcklemesine, materyaller uygulamas\u0131na, \u0131\u015f\u0131kland\u0131rma eklemesine ve animasyonlar yapmas\u0131na olanak tan\u0131r. Performans ve g\u00f6rsel kaliteden \u00f6d\u00fcn vermeden, web tabanl\u0131 3D deneyimleri sunar. Bir \u00fcr\u00fcn konfig\u00fcrat\u00f6r\u00fcnde, Three.js, se\u00e7ilen renkleri, dokular\u0131, par\u00e7alar\u0131 an\u0131nda 3D model \u00fczerinde g\u00f6rselle\u015ftirmek i\u00e7in vazge\u00e7ilmez bir ara\u00e7t\u0131r. Kamera kontrol\u00fcnden (d\u00f6nd\u00fcrme, yak\u0131nla\u015ft\u0131rma), model manip\u00fclasyonuna kadar her t\u00fcrl\u00fc etkile\u015fimi Three.js ile sa\u011flayabiliriz. Bu sayede kullan\u0131c\u0131lar, \u00fcr\u00fcnlerini sanki fiziksel olarak yanlar\u0131ndaym\u0131\u015f gibi hissedebilirler. Three.js’in geni\u015f ekosistemi ve aktif toplulu\u011fu, kar\u015f\u0131la\u015fabilece\u011finiz herhangi bir sorun i\u00e7in kapsaml\u0131 d\u00f6k\u00fcmantasyon ve destek bulabilece\u011finiz anlam\u0131na gelir. GLTF, OBJ, FBX gibi end\u00fcstri standard\u0131 3D model formatlar\u0131n\u0131 desteklemesi, tasar\u0131mc\u0131larla i\u015fbirli\u011fini kolayla\u015ft\u0131r\u0131r ve farkl\u0131 3D modelleme yaz\u0131l\u0131mlar\u0131ndan gelen varl\u0131klar\u0131 sorunsuzca entegre etmenize imkan tan\u0131r. Ayr\u0131ca, fizik tabanl\u0131 render (PBR) materyalleri sayesinde, ger\u00e7ek\u00e7i \u0131\u015f\u0131k ve g\u00f6lge efektleri ile \u00fcr\u00fcnlerinizi en do\u011fal haliyle sunabilirsiniz. Three.js’in sundu\u011fu bu detay seviyesi, bir e-ticaret sitesi i\u00e7in \u00fcr\u00fcn\u00fcn alg\u0131lanan de\u011ferini \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131rabilir. K\u0131sacas\u0131, Alpine.js reaktif aray\u00fcz katman\u0131n\u0131 olu\u015ftururken, Three.js ise bu aray\u00fczden gelen verileri al\u0131p 3D g\u00f6rselle\u015ftirmeyi ger\u00e7ekle\u015ftiren g\u00fc\u00e7l\u00fc motor g\u00f6revi g\u00f6r\u00fcr. Bu iki k\u00fct\u00fcphanenin sinerjisi, React gibi b\u00fcy\u00fck framework’lerin getirdi\u011fi karma\u015f\u0131kl\u0131k olmadan, hem h\u0131zl\u0131 hem de g\u00f6rsel olarak etkileyici bir 3D \u00fcr\u00fcn konfig\u00fcrat\u00f6r\u00fc olu\u015fturman\u0131n anahtar\u0131d\u0131r.<\/p>\n

Temelleri Atmak: Proje Yap\u0131land\u0131rmas\u0131 ve \u0130lk Ad\u0131mlar<\/h2>\n

Ba\u015far\u0131l\u0131 bir 3D konfig\u00fcrat\u00f6r\u00fc projesi, sa\u011flam bir temel \u00fczerine in\u015fa edilir. Bu b\u00f6l\u00fcmde, projemizin temel yap\u0131s\u0131n\u0131 kuracak ve Three.js ile ilk basit 3D sahnemizi olu\u015fturaca\u011f\u0131z. Ama\u00e7, Three.js’in nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 anlamak ve bir 3D ortam\u0131n\u0131n temel bile\u015fenlerini tan\u0131makt\u0131r.<\/p>\n

Gerekli Dosyalar ve Klas\u00f6r Yap\u0131s\u0131<\/strong><\/p>\n

Minimal bir kurulum i\u00e7in a\u015fa\u011f\u0131daki dosya ve klas\u00f6r yap\u0131s\u0131n\u0131 \u00f6neriyoruz. Bu yap\u0131, projeniz b\u00fcy\u00fcd\u00fck\u00e7e d\u00fczeni koruman\u0131za yard\u0131mc\u0131 olacakt\u0131r.<\/p>\n

\nmy-3d-configurator\/\n\u251c\u2500\u2500 index.html\n\u251c\u2500\u2500 style.css\n\u2514\u2500\u2500 src\/\n    \u251c\u2500\u2500 main.js\n    \u2514\u2500\u2500 models\/\n        \u2514\u2500\u2500 product.glb\n<\/pre>\n
<\/code><\/p>\n
index.html<\/code> ana sayfam\u0131z olacak, style.css<\/code> g\u00f6rsellik i\u00e7in, src\/main.js<\/code> t\u00fcm Three.js ve Alpine.js kodumuzu i\u00e7erecek, src\/models\/<\/code> ise 3D modellerimizi saklayacak. Projenizin k\u00f6k dizininde index.html<\/code> dosyam\u0131z\u0131 olu\u015ftural\u0131m ve temel HTML iskeletini kural\u0131m:<\/p>\n
<\/p>\n
\n\n\n\n    \n    \n    3D \u00dcr\u00fcn Konfig\u00fcrat\u00f6r\u00fc (Alpine.js & Three.js)<\/title>\n    <link rel=\"stylesheet\" href=\"style.css\">\n    <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/three@0.160.0\/build\/three.min.js\"><\/script>\n    <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/alpinejs@3.x.x\/dist\/cdn.min.js\" defer><\/script>\n<\/head>\n<body>\n    <canvas id=\"three-canvas\"><\/canvas>\n    <div id=\"configurator-ui\" x-data=\"{ selectedColor: '#ff0000' }\">\n        <h3>\u00dcr\u00fcn\u00fc \u00d6zelle\u015ftir<\/h3>\n        <label for=\"color-picker\">Renk Se\u00e7in:<\/label>\n        <input type=\"color\" id=\"color-picker\" x-model=\"selectedColor\">\n    <\/div>\n    <script type=\"module\" src=\"src\/main.js\"><\/script>\n<\/body>\n<\/html>\n<\/pre>\n<p><\/code><\/p>\n<p>Bu temel HTML, Three.js i\u00e7in bir canvas elementi, Alpine.js i\u00e7in bir UI alan\u0131 ve gerekli k\u00fct\u00fcphane ba\u011flant\u0131lar\u0131n\u0131 i\u00e7eriyor. <code>defer<\/code> ve <code>type=\"module\"<\/code> niteliklerine dikkat edin, bunlar scriptlerin y\u00fcklenme s\u0131ras\u0131 ve mod\u00fcl kullan\u0131m\u0131 i\u00e7in \u00f6nemlidir.<\/p>\n<div class=\"expert-tip\">\n  Uzman \u0130pucu: CDN ba\u011flant\u0131lar\u0131 yerine Three.js ve Alpine.js'i <code>npm<\/code> veya <code>yarn<\/code> ile projenize dahil edip bir bundler (\u00f6rne\u011fin Vite, Webpack) kullanarak daha optimize ve \u00fcretim ortam\u0131na haz\u0131r bir kurulum sa\u011flayabilirsiniz.\n<\/div>\n<p><strong>Taray\u0131c\u0131da \u0130lk 3D Sahne: Bir K\u00fcp Nas\u0131l Olu\u015fturulur?<\/strong><\/p>\n<p>\u015eimdi <code>src\/main.js<\/code> dosyam\u0131z\u0131 olu\u015ftural\u0131m ve temel bir Three.js sahnesi kurarak ilk k\u00fcp\u00fcm\u00fcz\u00fc ekleyelim. Bir 3D sahnesi genellikle \u00fc\u00e7 ana bile\u015fenden olu\u015fur: <code>Scene<\/code> (sahne), <code>Camera<\/code> (kamera) ve <code>Renderer<\/code> (render edici). Ayr\u0131ca, sahnemizin g\u00f6r\u00fclebilmesi i\u00e7in \u0131\u015f\u0131kland\u0131rma da ekleyece\u011fiz.<\/p>\n<p><code><\/p>\n<pre>\n\/\/ src\/main.js\nimport * as THREE from 'three';\n\n\/\/ 1. Sahne Olu\u015fturma\nconst scene = new THREE.Scene();\nscene.background = new THREE.Color(0xf0f0f0); \/\/ A\u00e7\u0131k gri arka plan\n\n\/\/ 2. Kamera Olu\u015fturma\n\/\/ PerspectiveCamera(fov, aspect, near, far)\n\/\/ fov: G\u00f6r\u00fc\u015f alan\u0131 (dikey)\n\/\/ aspect: Geni\u015flik\/Y\u00fckseklik oran\u0131 (canvas boyutuna g\u00f6re)\n\/\/ near: Kameraya en yak\u0131n g\u00f6r\u00fcn\u00fcr nokta\n\/\/ far: Kameradan en uzak g\u00f6r\u00fcn\u00fcr nokta\nconst camera = new THREE.PerspectiveCamera(75, window.innerWidth \/ window.innerHeight, 0.1, 1000);\ncamera.position.z = 5; \/\/ Kameray\u0131 sahneden biraz geriye \u00e7ek\n\n\/\/ 3. Render Edici Olu\u015fturma\nconst renderer = new THREE.WebGLRenderer({\n    canvas: document.getElementById('three-canvas'),\n    antialias: true \/\/ Kenar yumu\u015fatma\n});\nrenderer.setSize(window.innerWidth, window.innerHeight);\nrenderer.setPixelRatio(window.devicePixelRatio); \/\/ Y\u00fcksek DPI ekranlar i\u00e7in piksel oran\u0131\n\n\/\/ 4. I\u015f\u0131kland\u0131rma Ekleme\nconst ambientLight = new THREE.AmbientLight(0xffffff, 0.5); \/\/ Her y\u00f6nden gelen hafif \u0131\u015f\u0131k\nscene.add(ambientLight);\n\nconst directionalLight = new THREE.DirectionalLight(0xffffff, 0.8); \/\/ Belirli bir y\u00f6nden gelen \u0131\u015f\u0131k\ndirectionalLight.position.set(1, 1, 1).normalize();\nscene.add(directionalLight);\n\n\/\/ 5. \u0130lk Objemizi (K\u00fcp) Ekleme\nconst geometry = new THREE.BoxGeometry(1, 1, 1); \/\/ K\u00fcp geometrisi (geni\u015flik, y\u00fckseklik, derinlik)\nconst material = new THREE.MeshPhongMaterial({ color: 0x00ff00 }); \/\/ Ye\u015fil renkli malzeme (\u0131\u015f\u0131\u011fa tepki veren)\nconst cube = new THREE.Mesh(geometry, material);\nscene.add(cube);\n\n\/\/ 6. Animasyon D\u00f6ng\u00fcs\u00fc\nfunction animate() {\n    requestAnimationFrame(animate);\n\n    \/\/ K\u00fcp\u00fc d\u00f6nd\u00fcr\n    cube.rotation.x += 0.005;\n    cube.rotation.y += 0.005;\n\n    renderer.render(scene, camera);\n}\nanimate();\n\n\/\/ 7. Pencere Boyutland\u0131rma Olay\u0131\nwindow.addEventListener('resize', () => {\n    camera.aspect = window.innerWidth \/ window.innerHeight;\n    camera.updateProjectionMatrix();\n    renderer.setSize(window.innerWidth, window.innerHeight);\n    renderer.setPixelRatio(window.devicePixelRatio);\n});\n<\/pre>\n<p><\/code><\/p>\n<p>Bu kod blo\u011fu, Three.js ile bir 3D sahnesinin temel kurulumunu g\u00f6stermektedir. Bir sahneye kamera ve render edici ekledikten sonra, \u0131\u015f\u0131kland\u0131rma yaparak objelerimizin g\u00f6r\u00fcn\u00fcr olmas\u0131n\u0131 sa\u011fl\u0131yoruz. Daha sonra, basit bir k\u00fcp geometrisi olu\u015fturup ona ye\u015fil bir materyal atayarak sahnemize ekliyoruz. <code>animate<\/code> fonksiyonu ise s\u00fcrekli olarak \u00e7a\u011fr\u0131larak k\u00fcp\u00fcm\u00fcz\u00fc d\u00f6nd\u00fcr\u00fcyor ve sahneyi yeniden render ediyor, bu da animasyonlu bir g\u00f6r\u00fcn\u00fcm sa\u011fl\u0131yor. Son olarak, pencere boyutu de\u011fi\u015fti\u011finde sahnenin ve kameran\u0131n do\u011fru orant\u0131da kalmas\u0131 i\u00e7in <code>resize<\/code> olay\u0131n\u0131 dinliyoruz. Bu temel kurulum, ileride y\u00fckleyece\u011fimiz kompleks 3D modeller i\u00e7in de ge\u00e7erli olacak ve projenizin iskeletini olu\u015fturacakt\u0131r. Her ad\u0131mda Three.js'in temel bile\u015fenlerini anlayarak, daha karma\u015f\u0131k yap\u0131lar\u0131 in\u015fa etme konusunda sa\u011flam bir temel olu\u015fturmu\u015f olaca\u011f\u0131z. \u00d6zellikle <code>requestAnimationFrame<\/code> kullan\u0131m\u0131, taray\u0131c\u0131n\u0131n ekran yenileme h\u0131z\u0131na uygun animasyonlar sa\u011flamas\u0131 ve enerji verimlili\u011fi a\u00e7\u0131s\u0131ndan kritik \u00f6neme sahiptir. Bu sayede, taray\u0131c\u0131 arka planda iken veya sekme de\u011fi\u015ftirildi\u011finde animasyon duraklat\u0131l\u0131r ve CPU\/GPU kaynaklar\u0131 israf edilmez. Bu minimal yap\u0131 bile, bir 3D konfig\u00fcrat\u00f6r\u00fcn nas\u0131l bir temel \u00fczerinde y\u00fckselece\u011fine dair net bir fikir vermektedir.<\/p>\n<h2>Ger\u00e7ek\u00e7i Modellerle Tan\u0131\u015fma: GLTF\/GLB Y\u00fckleme ve Materyal Uygulama<\/h2>\n<p>Konfig\u00fcrat\u00f6r\u00fcm\u00fcz\u00fc ger\u00e7ekten i\u015flevsel k\u0131lmak i\u00e7in, kendi \u00fcr\u00fcn modellerimizi sahneye getirmemiz gerekiyor. Three.js, bir\u00e7ok 3D model format\u0131n\u0131 desteklese de, GLTF (GL Transmission Format) veya GLB (GLTF'in ikili versiyonu) modern web uygulamalar\u0131 i\u00e7in en uygun ve tercih edilen formatlard\u0131r. Bu formatlar, modelin geometrisi, materyalleri, dokular\u0131 ve animasyonlar\u0131 gibi t\u00fcm verileri tek bir pakette saklayarak y\u00fckleme performans\u0131n\u0131 ve kullan\u0131m kolayl\u0131\u011f\u0131n\u0131 art\u0131r\u0131r.<\/p>\n<p><strong>3D Modelleri Sahneye Entegre Etme<\/strong><\/p>\n<p>GLTF\/GLB modellerini y\u00fcklemek i\u00e7in Three.js'in <code>GLTFLoader<\/code>'\u0131na ihtiyac\u0131m\u0131z var. Bu loader, Three.js ana k\u00fct\u00fcphanesinden ayr\u0131 olarak gelir ve projenize dahil edilmesi gerekir. Genellikle CDN \u00fczerinden veya npm paketi olarak eklenebilir. Projemizin <code>index.html<\/code> dosyas\u0131ndaki Three.js scriptinin alt\u0131na a\u015fa\u011f\u0131daki sat\u0131r\u0131 ekleyerek <code>GLTFLoader<\/code>'\u0131 dahil edelim:<\/p>\n<p><code><\/p>\n<pre>\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/three@0.160.0\/examples\/js\/loaders\/GLTFLoader.js\"><\/script>\n<\/pre>\n<p><\/code><\/p>\n<p>\u015eimdi <code>src\/main.js<\/code> dosyam\u0131z\u0131 g\u00fcncelleyerek k\u00fcp yerine bir GLB modeli y\u00fckleyelim:<\/p>\n<p><code><\/p>\n<pre>\n\/\/ src\/main.js\nimport * as THREE from 'three';\n\/\/ GLTFLoader global olarak eklenmediyse, module olarak import etmeliyiz\n\/\/ import { GLTFLoader } from 'three\/addons\/loaders\/GLTFLoader.js'; \/\/ npm kurulumunda bu \u015fekilde\n\n\/\/ ... (Sahne, Kamera, Renderer, I\u015f\u0131kland\u0131rma kodlar\u0131 yukar\u0131daki gibi kalacak) ...\n\n\/\/ K\u00fcp yerine model y\u00fckleyece\u011fiz\n\/\/ const cube = new THREE.Mesh(geometry, material); \/\/ Bu sat\u0131r\u0131 kald\u0131r\u0131n\n\nlet productModel; \/\/ Y\u00fcklenen modeli saklamak i\u00e7in global bir de\u011fi\u015fken\n\nconst loader = new THREE.GLTFLoader();\n\nloader.load(\n    'src\/models\/product.glb', \/\/ Modelinizin yolu\n    function (gltf) {\n        productModel = gltf.scene;\n        productModel.scale.set(0.1, 0.1, 0.1); \/\/ Model boyutunu ayarlay\u0131n\n        productModel.position.set(0, -1, 0); \/\/ Modelin konumunu ayarlay\u0131n\n        scene.add(productModel);\n\n        \/\/ Modeli sahneye ekledikten sonra animasyon d\u00f6ng\u00fcs\u00fcn\u00fc ba\u015flat\n        animate();\n    },\n    function (xhr) {\n        console.log((xhr.loaded \/ xhr.total * 100) + '% y\u00fcklendi');\n    },\n    function (error) {\n        console.error('Model y\u00fcklenirken bir hata olu\u015ftu:', error);\n    }\n);\n\n\/\/ Animasyon d\u00f6ng\u00fcs\u00fc (model y\u00fcklendikten sonra \u00e7a\u011fr\u0131lacak)\nfunction animate() {\n    requestAnimationFrame(animate);\n\n    if (productModel) {\n        productModel.rotation.y += 0.005; \/\/ Modelin d\u00f6nmesini sa\u011flay\u0131n\n    }\n\n    renderer.render(scene, camera);\n}\n\n\/\/ ... (Pencere Boyutland\u0131rma Olay\u0131 yukar\u0131daki gibi kalacak) ...\n<\/pre>\n<p><\/code><\/p>\n<p>Bu kodda, <code>GLTFLoader<\/code> s\u0131n\u0131f\u0131n\u0131 kullanarak <code>product.glb<\/code> dosyas\u0131n\u0131 y\u00fckl\u00fcyoruz. Ba\u015far\u0131l\u0131 bir \u015fekilde y\u00fcklendikten sonra, <code>gltf.scene<\/code> objesine eri\u015fiyor, boyutunu ve konumunu ayarl\u0131yor ve sahnemize ekliyoruz. Y\u00fckleme s\u00fcreci biraz zaman alabilece\u011fi i\u00e7in <code>animate<\/code> fonksiyonunu model y\u00fcklendikten sonra \u00e7a\u011f\u0131rmay\u0131 tercih ettik. B\u00f6ylece bo\u015f bir sahne render etmekten ka\u00e7\u0131n\u0131r\u0131z. <code>gltf.scene<\/code> genellikle t\u00fcm modelin bir grubunu temsil eder ve bu grup i\u00e7inde bir\u00e7ok alt mesh (geometri ve materyal kombinasyonlar\u0131) bulunabilir. Bu alt mesh'lere eri\u015ferek materyallerini veya renklerini de\u011fi\u015ftirebiliriz. \u00d6rne\u011fin, <code>productModel.traverse((o) => { if (o.isMesh) { o.material.color.set(0xff0000); } });<\/code> gibi bir kodla modeldeki t\u00fcm mesh'lerin rengini k\u0131rm\u0131z\u0131ya \u00e7evirebilirsiniz. <code>GLTFLoader<\/code>'\u0131n <code>load<\/code> metodu, \u00fc\u00e7 adet callback fonksiyonu al\u0131r: ilki ba\u015far\u0131l\u0131 y\u00fckleme i\u00e7in, ikincisi ilerleme raporu i\u00e7in ve \u00fc\u00e7\u00fcnc\u00fcs\u00fc hata durumlar\u0131 i\u00e7indir. Bu, \u00f6zellikle b\u00fcy\u00fck modeller y\u00fcklerken kullan\u0131c\u0131ya geri bildirim sa\u011flamak i\u00e7in \u00f6nemlidir. Bir y\u00fckleme animasyonu veya ilerleme \u00e7ubu\u011fu bu a\u015famada entegre edilebilir. Model y\u00fckleme, 3D konfig\u00fcrat\u00f6r\u00fcn en kritik ad\u0131mlar\u0131ndan biridir, \u00e7\u00fcnk\u00fc t\u00fcm \u00f6zelle\u015ftirme i\u015flemleri bu model \u00fczerinde ger\u00e7ekle\u015fecektir. Bu nedenle, modelin do\u011fru bir \u015fekilde haz\u0131rlanmas\u0131 (optimize edilmi\u015f poligon say\u0131s\u0131, do\u011fru materyal atamalar\u0131) ve y\u00fckleme s\u00fcrecinin hatas\u0131z oldu\u011fundan emin olunmas\u0131 b\u00fcy\u00fck \u00f6nem ta\u015f\u0131r.<\/p>\n<p><strong>Malzeme ve I\u015f\u0131kland\u0131rma Optimizasyonu<\/strong><\/p>\n<p>Ger\u00e7ek\u00e7i bir g\u00f6r\u00fcn\u00fcm i\u00e7in, sadece modeli y\u00fcklemek yeterli de\u011fildir; do\u011fru materyalleri ve \u0131\u015f\u0131kland\u0131rmay\u0131 uygulamak da gerekir. GLTF format\u0131 genellikle kendi materyal bilgilerini (PBR materyaller dahil) i\u00e7erir, ancak bazen bu materyalleri \u00e7al\u0131\u015fma zaman\u0131nda de\u011fi\u015ftirmek veya optimize etmek isteyebiliriz. \u00d6rne\u011fin, kullan\u0131c\u0131n\u0131n se\u00e7ti\u011fi renge g\u00f6re modelin materyal rengini de\u011fi\u015ftirmek gibi.<\/p>\n<p><code><\/p>\n<pre>\n\/\/ Model y\u00fcklendikten sonra renk de\u011fi\u015ftirme \u00f6rne\u011fi\nfunction applyColorToModel(model, hexColor) {\n    model.traverse((o) => {\n        if (o.isMesh && o.material) {\n            \/\/ Materyalin bir kopyas\u0131n\u0131 olu\u015fturmak, birden fazla model varsa \u00f6nemlidir\n            \/\/ Aksi takdirde, t\u00fcm modeller ayn\u0131 materyali payla\u015f\u0131r.\n            if (!o.material.isPBRMaterial) { \/\/ E\u011fer zaten PBR materyali de\u011filse kopyala\n              o.material = o.material.clone();\n            }\n            o.material.color.set(hexColor);\n            o.material.needsUpdate = true; \/\/ Materyalin g\u00fcncellendi\u011fini bildir\n        }\n    });\n}\n\n\/\/ \u00d6rne\u011fin, model y\u00fcklendikten sonra ba\u015flang\u0131\u00e7 rengini ayarlayabiliriz\n\/\/ applyColorToModel(productModel, 0x0000ff); \/\/ Mavi renk\n<\/pre>\n<p><\/code><\/p>\n<p>I\u015f\u0131kland\u0131rma ise modelin derinli\u011fini ve detaylar\u0131n\u0131 ortaya \u00e7\u0131karmak i\u00e7in hayati \u00f6neme sahiptir. <code>AmbientLight<\/code> (ortam \u0131\u015f\u0131\u011f\u0131) sahneyi genel olarak ayd\u0131nlat\u0131rken, <code>DirectionalLight<\/code> (y\u00f6nl\u00fc \u0131\u015f\u0131k) veya <code>PointLight<\/code> (nokta \u0131\u015f\u0131\u011f\u0131) gibi \u0131\u015f\u0131k kaynaklar\u0131 belirli b\u00f6lgeleri vurgulayarak g\u00f6lgeler olu\u015fturur ve modele hacim kazand\u0131r\u0131r. Yeterli ve do\u011fru yerle\u015ftirilmi\u015f \u0131\u015f\u0131klar, \u00fcr\u00fcn\u00fcn\u00fcz\u00fcn dokusunu ve materyal \u00f6zelliklerini en iyi \u015fekilde g\u00f6stermenizi sa\u011flar. \u00d6zellikle PBR materyallerle \u00e7al\u0131\u015f\u0131rken, \u0131\u015f\u0131klar\u0131n g\u00fcc\u00fc ve rengi, modelin nas\u0131l g\u00f6r\u00fcnece\u011fi \u00fczerinde b\u00fcy\u00fck etkiye sahiptir. <code>renderer.physicallyCorrectLights = true;<\/code> ayar\u0131, \u0131\u015f\u0131klar\u0131n fiziksel olarak do\u011fru davranmas\u0131n\u0131 sa\u011flayarak daha ger\u00e7ek\u00e7i bir g\u00f6r\u00fcn\u00fcm elde etmenize yard\u0131mc\u0131 olabilir. Ayr\u0131ca, g\u00f6lge haritalar\u0131 (shadow maps) kullanarak daha ger\u00e7ek\u00e7i g\u00f6lgeler olu\u015fturabiliriz, ancak bu performansa etki edebilir ve dikkatli optimizasyon gerektirebilir. G\u00f6lge olu\u015fturmak i\u00e7in, \u0131\u015f\u0131k kaynaklar\u0131n\u0131zda <code>castShadow = true<\/code> ve modelinizde <code>receiveShadow = true<\/code> ayar\u0131n\u0131 yapman\u0131z, ayr\u0131ca render edicinizde <code>renderer.shadowMap.enabled = true;<\/code> ayar\u0131n\u0131 etkinle\u015ftirmeniz gerekir. Bu ayarlar, \u00fc\u00e7 boyutlu ortam\u0131n\u0131z\u0131n g\u00f6rsel kalitesini \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131r\u0131rken, \u00fcr\u00fcn\u00fcn\u00fcz\u00fc en \u00e7ekici \u015fekilde sunman\u0131za olanak tan\u0131r. Optimize edilmi\u015f materyaller ve ak\u0131ll\u0131 \u0131\u015f\u0131kland\u0131rma stratejileri, hem g\u00f6rsel \u00e7ekicili\u011fi hem de uygulaman\u0131n genel performans\u0131n\u0131 dengelemek i\u00e7in kritik \u00f6neme sahiptir.<\/p>\n<h2>Etkile\u015fimli Kontroller: Alpine.js ile Aray\u00fcz Olu\u015fturma Sanat\u0131<\/h2>\n<p>3D \u00fcr\u00fcn konfig\u00fcrat\u00f6r\u00fcm\u00fcz\u00fc ger\u00e7ekten dinamik ve kullan\u0131c\u0131 dostu hale getiren k\u0131s\u0131m, Alpine.js ile olu\u015fturaca\u011f\u0131m\u0131z etkile\u015fimli aray\u00fcz kontrolleridir. Bu b\u00f6l\u00fcmde, basit renk se\u00e7iciler ve di\u011fer \u00f6zelle\u015ftirme alanlar\u0131 olu\u015fturarak, Alpine.js'in reaktif g\u00fcc\u00fcn\u00fc Three.js modelimizle nas\u0131l birle\u015ftirece\u011fimizi g\u00f6rece\u011fiz.<\/p>\n<p><strong>Basit Renk Se\u00e7iciler ve \u00d6zelle\u015ftirme Alanlar\u0131<\/strong><\/p>\n<p>Alpine.js'in en b\u00fcy\u00fck avantaj\u0131, HTML i\u00e7inde do\u011frudan veri ve olay ba\u011flama yetene\u011fidir. Daha \u00f6nce <code>index.html<\/code> dosyam\u0131zda basit bir renk se\u00e7ici \u00f6rne\u011fi olu\u015fturmu\u015ftuk. \u015eimdi bu yap\u0131y\u0131 geni\u015fleterek, birden fazla \u00f6zelle\u015ftirme se\u00e7ene\u011fi sunan bir aray\u00fcz olu\u015ftural\u0131m. <code>configurator-ui<\/code> div'imizi g\u00fcncelleyelim:<\/p>\n<p><code><\/p>\n<pre>\n<div id=\"configurator-ui\" x-data=\"{\n    selectedColor: '#ff0000',\n    currentTexture: 'src\/textures\/default.jpg',\n    showDetails: false,\n    availableColors: [\n        { name: 'K\u0131rm\u0131z\u0131', hex: '#ff0000' },\n        { name: 'Mavi', hex: '#0000ff' },\n        { name: 'Ye\u015fil', hex: '#00ff00' },\n        { name: 'Siyah', hex: '#000000' }\n    ],\n    availableTextures: [\n        { name: 'Varsay\u0131lan', path: 'src\/textures\/default.jpg' },\n        { name: 'Ah\u015fap', path: 'src\/textures\/wood.jpg' },\n        { name: 'Deri', path: 'src\/textures\/leather.jpg' }\n    ],\n    \/\/ Three.js taraf\u0131nda kullan\u0131lacak fonksiyonlar buraya atanacak\n    onColorChange: (color) => console.log('Renk de\u011fi\u015fti: ', color),\n    onTextureChange: (texturePath) => console.log('Doku de\u011fi\u015fti: ', texturePath),\n    toggleDetails: () => { this.showDetails = !this.showDetails; }\n}\">\n    <h3>\u00dcr\u00fcn\u00fc \u00d6zelle\u015ftir<\/h3\u00a0>\n\n    <div class=\"control-group\">\n        <label>Renk Se\u00e7in:<\/label>\n        <div class=\"color-options\">\n            <template x-for=\"color in availableColors\" :key=\"color.hex\">\n                <button class=\"color-swatch\"\n                        :style=\"<code>background-color: ${color.hex}<\/code>\"\n                        :class=\"{ 'active': selectedColor === color.hex }\"\n                        x-on:click=\"selectedColor = color.hex; onColorChange(color.hex)\">\n                <\/button>\n            <\/template>\n        <\/div>\n    <\/div>\n\n    <div class=\"control-group\">\n        <label>Doku Se\u00e7in:<\/label>\n        <select x-model=\"currentTexture\" x-on:change=\"onTextureChange(currentTexture)\">\n            <template x-for=\"texture in availableTextures\" :key=\"texture.path\">\n                <option :value=\"texture.path\" x-text=\"texture.name\"><\/option>\n            <\/template>\n        <\/select>\n    <\/div>\n\n    <button x-on:click=\"toggleDetails\">\n        <span x-text=\"showDetails ? 'Detaylar\u0131 Gizle' : 'Detaylar\u0131 G\u00f6ster'\"><\/span>\n    <\/button>\n\n    <div x-show=\"showDetails\" x-transition>\n        <p>Model Ad\u0131: X-123 <br> Materyal Tipi: PBR <br> Stok Durumu: Var<\/p>\n    <\/div>\n<\/div>\n<\/pre>\n<p><\/code><\/p>\n<p>Bu kod blo\u011funda, <code>x-data<\/code> objesine birden fazla durum (state) ekledik: <code>selectedColor<\/code>, <code>currentTexture<\/code>, <code>showDetails<\/code> ve bunlar\u0131n listeleri (<code>availableColors<\/code>, <code>availableTextures<\/code>). <code>x-for<\/code> direktifi ile renk se\u00e7eneklerini ve doku se\u00e7eneklerini dinamik olarak olu\u015fturuyoruz. <code>x-on:click<\/code> ve <code>x-on:change<\/code> ile olay dinleyicileri ekleyerek <code>selectedColor<\/code> ve <code>currentTexture<\/code> de\u011ferlerini g\u00fcncelliyoruz. Ayr\u0131ca, bir butona t\u0131klayarak <code>showDetails<\/code> durumunu de\u011fi\u015ftirerek ek bilgileri g\u00f6sterme\/gizleme i\u015flevselli\u011fi de ekledik. <code>x-transition<\/code> ise bu ge\u00e7i\u015flere yumu\u015fak bir animasyon ekler. Bu aray\u00fcz, kullan\u0131c\u0131n\u0131n farkl\u0131 \u00f6zelle\u015ftirme se\u00e7enekleri aras\u0131nda kolayca ge\u00e7i\u015f yapmas\u0131na olanak tan\u0131r ve Alpine.js'in ne kadar az kodla ne kadar \u00e7ok i\u015f yapabilece\u011fini g\u00f6sterir. CSS taraf\u0131nda, <code>.color-swatch<\/code> ve <code>.active<\/code> s\u0131n\u0131flar\u0131 i\u00e7in basit stil tan\u0131mlamalar\u0131 ekleyerek g\u00f6rselli\u011fi iyile\u015ftirebiliriz. Bu \u015fekilde, aray\u00fcz\u00fcn sadece i\u015flevsel de\u011fil, ayn\u0131 zamanda estetik olarak da \u00e7ekici olmas\u0131n\u0131 sa\u011flayabiliriz. Her bir \u00f6zelle\u015ftirme se\u00e7ene\u011fi, kullan\u0131c\u0131n\u0131n \u00fcr\u00fcn \u00fczerindeki kontrol\u00fcn\u00fc art\u0131r\u0131r ve sat\u0131n alma karar\u0131n\u0131 olumlu y\u00f6nde etkileyebilir. Alpine.js'in esnekli\u011fi sayesinde, bu t\u00fcr aray\u00fcz elementlerini HTML i\u00e7inde \u00e7ok az JavaScript kodu yazarak y\u00f6netebiliriz, bu da \u00f6zellikle h\u0131zl\u0131 geli\u015ftirme s\u00fcre\u00e7leri i\u00e7in b\u00fcy\u00fck bir avantajd\u0131r.<\/p>\n<div class=\"expert-tip\">\n  Uzman \u0130pucu: Karma\u015f\u0131k form elemanlar\u0131 veya \u00e7ok say\u0131da \u00f6zelle\u015ftirme se\u00e7ene\u011fi oldu\u011funda, Alpine.js'in <code>x-model<\/code> ve <code>x-on<\/code> direktiflerini kullanarak veri ba\u011flama ve olay y\u00f6netimini \u00e7ok daha d\u00fczenli hale getirebilirsiniz. <code>x-effect<\/code> ile belirli bir veri de\u011fi\u015fti\u011finde \u00e7al\u0131\u015fan yan etkiler tan\u0131mlamak da m\u00fcmk\u00fcnd\u00fcr.\n<\/div>\n<p><strong>Model De\u011fi\u015fikliklerini An\u0131nda Yans\u0131tma (Reaktivite)<\/strong><\/p>\n<p>\u015eimdi en \u00f6nemli k\u0131sma geldik: Alpine.js'deki durum de\u011fi\u015fikliklerini Three.js sahnemize nas\u0131l yans\u0131taca\u011f\u0131z? <code>x-data<\/code> blo\u011fumuzda tan\u0131mlad\u0131\u011f\u0131m\u0131z <code>onColorChange<\/code> ve <code>onTextureChange<\/code> fonksiyonlar\u0131n\u0131 ger\u00e7ek Three.js kodumuzla birle\u015ftirece\u011fiz. <code>src\/main.js<\/code> dosyam\u0131zda, model y\u00fcklendikten sonra bu fonksiyonlar\u0131 Alpine.js'e atamam\u0131z gerekiyor.<\/p>\n<p><code><\/p>\n<pre>\n\/\/ src\/main.js\n\/\/ ... (Di\u011fer importlar, sahne kurulumu, kamera vb.) ...\n\n\/\/ GLTFLoader global olarak eklenmediyse, module olarak import etmeliyiz\n\/\/ import { GLTFLoader } from 'three\/addons\/loaders\/GLTFLoader.js';\n\nlet productModel;\nconst loader = new THREE.GLTFLoader();\nconst textureLoader = new THREE.TextureLoader(); \/\/ Dokular\u0131 y\u00fcklemek i\u00e7in\n\n\/\/ Y\u00fcklenen dokular\u0131 saklamak i\u00e7in bir obje\nconst loadedTextures = {};\n\nloader.load(\n    'src\/models\/product.glb',\n    function (gltf) {\n        productModel = gltf.scene;\n        productModel.scale.set(0.1, 0.1, 0.1);\n        productModel.position.set(0, -1, 0);\n        scene.add(productModel);\n\n        \/\/ Model y\u00fcklendikten sonra Alpine.js fonksiyonlar\u0131n\u0131 ata\n        \/\/ Alpine.js'in x-data objesine eri\u015fmek i\u00e7in \u00f6zel bir y\u00f6ntem kullanabiliriz.\n        \/\/ Veya daha iyisi, bir event dispatcher kullan\u0131r\u0131z.\n        \/\/ Basitlik i\u00e7in, window objesine atayal\u0131m:\n        window.applyColorToProduct = (hexColor) => {\n            productModel.traverse((o) => {\n                if (o.isMesh && o.material) {\n                    \/\/ Materyal bir array ise (multi-material), her birine uygulay\u0131n\n                    if (Array.isArray(o.material)) {\n                        o.material.forEach(mat => {\n                            const newMat = mat.clone();\n                            newMat.color.set(hexColor);\n                            mat.dispose(); \/\/ Eski materyali bellekten temizle\n                            mat = newMat; \/\/ Referans\u0131 g\u00fcncelle\n                        });\n                    } else {\n                        const newMat = o.material.clone();\n                        newMat.color.set(hexColor);\n                        o.material.dispose();\n                        o.material = newMat;\n                    }\n                    o.material.needsUpdate = true;\n                }\n            });\n            renderer.render(scene, camera); \/\/ De\u011fi\u015fikli\u011fi hemen g\u00f6ster\n        };\n\n        window.applyTextureToProduct = (texturePath) => {\n            if (loadedTextures[texturePath]) {\n                \/\/ Doku zaten y\u00fckl\u00fcyse do\u011frudan kullan\n                updateModelTexture(productModel, loadedTextures[texturePath]);\n            } else {\n                \/\/ Doku y\u00fckl\u00fc de\u011filse, y\u00fckle ve sonra kullan\n                textureLoader.load(\n                    texturePath,\n                    (texture) => {\n                        texture.wrapS = THREE.RepeatWrapping;\n                        texture.wrapT = THREE.RepeatWrapping;\n                        texture.repeat.set(2, 2); \/\/ Dokuyu tekrarlama oran\u0131\n                        loadedTextures[texturePath] = texture;\n                        updateModelTexture(productModel, texture);\n                    },\n                    undefined,\n                    (error) => console.error('Doku y\u00fcklenirken hata olu\u015ftu:', error)\n                );\n            }\n            renderer.render(scene, camera);\n        };\n\n        \/\/ Model y\u00fcklendikten sonra Alpine.js'deki ba\u015flang\u0131\u00e7 rengini uygula\n        const initialColor = document.getElementById('configurator-ui')._x_dataStack[0].selectedColor;\n        window.applyColorToProduct(initialColor);\n\n        \/\/ Animasyonu ba\u015flat\n        animate();\n    },\n    \/\/ ... (ilerleme ve hata callback'leri) ...\n);\n\nfunction updateModelTexture(model, texture) {\n    model.traverse((o) => {\n        if (o.isMesh && o.material) {\n            if (Array.isArray(o.material)) {\n                o.material.forEach(mat => {\n                    const newMat = mat.clone();\n                    newMat.map = texture;\n                    mat.dispose();\n                    mat = newMat;\n                });\n            } else {\n                const newMat = o.material.clone();\n                newMat.map = texture;\n                o.material.dispose();\n                o.material = newMat;\n            }\n            o.material.needsUpdate = true;\n        }\n    });\n}\n\n\/\/ ... (Animate fonksiyonu ve resize eventi) ...\n<\/pre>\n<p><\/code><\/p>\n<p>HTML taraf\u0131nda Alpine.js, <code>x-on:click=\"selectedColor = color.hex; window.applyColorToProduct(color.hex)\"<\/code> \u015feklinde \u00e7a\u011fr\u0131 yaparak Three.js'deki fonksiyonlar\u0131m\u0131z\u0131 tetikleyebilir. Bu sayede, Alpine.js'teki durum de\u011fi\u015fiklikleri an\u0131nda Three.js sahnemize yans\u0131r. <code>window.applyColorToProduct<\/code> ve <code>window.applyTextureToProduct<\/code> fonksiyonlar\u0131, \u00fcr\u00fcn modelinin t\u00fcm mesh'leri \u00fczerinde gezinerek materyallerini g\u00fcnceller. Her renk veya doku de\u011fi\u015fikli\u011finde, mevcut materyali klonlay\u0131p yeni \u00f6zelli\u011fi atamak ve eski materyali <code>dispose()<\/code> ile bellekten temizlemek \u00f6nemlidir. Bu, Three.js'in bellek y\u00f6netimini optimize eder ve performans sorunlar\u0131n\u0131n \u00f6n\u00fcne ge\u00e7er. <code>renderer.render(scene, camera);<\/code> \u00e7a\u011fr\u0131s\u0131n\u0131 ekleyerek, animasyon d\u00f6ng\u00fcs\u00fcn\u00fc beklemeden de\u011fi\u015fikli\u011fin an\u0131nda yans\u0131mas\u0131n\u0131 sa\u011fl\u0131yoruz. Doku y\u00fckleme i\u015fleminde, <code>TextureLoader<\/code> kullan\u0131yoruz ve dokular\u0131 bir <code>loadedTextures<\/code> objesinde \u00f6nbelle\u011fe al\u0131yoruz. B\u00f6ylece ayn\u0131 doku tekrar istendi\u011finde tekrar y\u00fcklemek yerine \u00f6nbellekten \u00e7ekiyoruz, bu da performans\u0131 art\u0131r\u0131r. Alpine.js ve Three.js aras\u0131ndaki bu do\u011frudan etkile\u015fim, b\u00fcy\u00fck framework'lerin getirdi\u011fi karma\u015f\u0131kl\u0131k olmadan g\u00fc\u00e7l\u00fc ve reaktif bir konfig\u00fcrat\u00f6r olu\u015fturman\u0131n anahtar\u0131n\u0131 sunar. Bu entegrasyon modeli, \u00f6zellikle web bile\u015fenleri veya mikro frontend mimarileriyle de uyumlu \u00e7al\u0131\u015fabilir. Her iki k\u00fct\u00fcphanenin de \"kendi i\u015fini en iyi \u015fekilde yapma\" felsefesi, mod\u00fcler ve y\u00f6netilebilir bir kod taban\u0131 olu\u015fturmaya yard\u0131mc\u0131 olur. Ayr\u0131ca, bu yakla\u015f\u0131m, uygulaman\u0131n genel boyutunu ve y\u00fckleme s\u00fcresini minimumda tutarak daha h\u0131zl\u0131 bir kullan\u0131c\u0131 deneyimi sa\u011flar. \u00d6zellikle bir e-ticaret uygulamas\u0131nda, her saniyenin bile \u00f6nemi oldu\u011fu d\u00fc\u015f\u00fcn\u00fcld\u00fc\u011f\u00fcnde, bu performans avantaj\u0131 kritik bir rol oynar.<\/p>\n<h2>Kullan\u0131c\u0131 Deneyimi ve Performans Optimizasyonu Nas\u0131l Sa\u011flan\u0131r?<\/h2>\n<p>Harika bir 3D konfig\u00fcrat\u00f6r sadece i\u015flevsel olmakla kalmamal\u0131, ayn\u0131 zamanda kullan\u0131c\u0131 dostu ve h\u0131zl\u0131 tepki veren bir deneyim sunmal\u0131d\u0131r. Performans optimizasyonu ve mobil uyumluluk, bu t\u00fcr uygulamalar i\u00e7in kritik \u00f6neme sahiptir.<\/p>\n<p><strong>Mobil Uyumluluk ve Duyarl\u0131 Tasar\u0131m<\/strong><\/p>\n<p>G\u00fcn\u00fcm\u00fczde kullan\u0131c\u0131lar\u0131n b\u00fcy\u00fck bir \u00e7o\u011funlu\u011fu internete mobil cihazlar \u00fczerinden eri\u015fiyor. Bu nedenle, 3D konfig\u00fcrat\u00f6r\u00fcn\u00fcz\u00fcn mobil cihazlarda da sorunsuz \u00e7al\u0131\u015fmas\u0131 \u015fartt\u0131r. <code>viewport<\/code> meta etiketi, mobil uyumluluk i\u00e7in ilk ad\u0131md\u0131r:<\/p>\n<p><code><\/p>\n<pre>\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<\/pre>\n<p><\/code><\/p>\n<p>Three.js sahnesinin ve Alpine.js aray\u00fcz\u00fcn\u00fcn duyarl\u0131 olmas\u0131 i\u00e7in, CSS media query'lerini kullanabiliriz. Canvas boyutunu dinamik olarak ayarlamak ve UI elementlerinin d\u00fczenini mobil ekranlara g\u00f6re optimize etmek \u00f6nemlidir. \u00d6rne\u011fin:<\/p>\n<p><code><\/p>\n<pre>\n\/* style.css *\/\nbody {\n    margin: 0;\n    overflow: hidden; \/* Kayd\u0131rma \u00e7ubuklar\u0131n\u0131 kald\u0131r *\/\n    font-family: Arial, sans-serif;\n}\n\n#three-canvas {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100vw;\n    height: 100vh;\n    display: block;\n    z-index: 1;\n}\n\n#configurator-ui {\n    position: absolute;\n    top: 20px;\n    right: 20px;\n    background: rgba(255, 255, 255, 0.8);\n    padding: 20px;\n    border-radius: 8px;\n    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);\n    z-index: 10;\n    max-width: 300px;\n}\n\n\/* Mobil cihazlar i\u00e7in responsive tasar\u0131m *\/\n@media (max-width: 768px) {\n    #configurator-ui {\n        top: auto;\n        bottom: 0;\n        left: 0;\n        right: 0;\n        width: 100%;\n        max-width: none;\n        border-radius: 8px 8px 0 0;\n        padding: 15px;\n        box-sizing: border-box; \/* \u0130\u00e7erik ta\u015fmas\u0131n\u0131 engelle *\/\n    }\n\n    #configurator-ui h3 {\n        font-size: 1.2em;\n        margin-bottom: 10px;\n    }\n\n    .color-options {\n        display: flex;\n        flex-wrap: wrap;\n        gap: 8px;\n    }\n\n    .color-swatch {\n        width: 30px;\n        height: 30px;\n        border-radius: 50%;\n        border: 2px solid transparent;\n        cursor: pointer;\n        transition: border-color 0.2s;\n    }\n\n    .color-swatch.active {\n        border-color: #007bff;\n    }\n}\n<\/pre>\n<p><\/code><\/p>\n<p>JavaScript taraf\u0131nda ise <code>window.addEventListener('resize', ...)<\/code> fonksiyonunu kullanarak Three.js kameras\u0131n\u0131 ve render edicisini ekran boyut de\u011fi\u015fikliklerine g\u00f6re g\u00fcncellemeyi unutmamak \u00f6nemlidir. Mobil cihazlarda, dokunmatik kontrollerin (kayd\u0131rma, yak\u0131nla\u015ft\u0131rma) Three.js sahnesiyle uyumlu \u00e7al\u0131\u015fmas\u0131 i\u00e7in <code>OrbitControls<\/code> gibi k\u00fct\u00fcphaneleri kullanabiliriz. Bu kontroller, kullan\u0131c\u0131lar\u0131n modeli parmak hareketleriyle kolayca d\u00f6nd\u00fcrmesine ve yak\u0131nla\u015ft\u0131rmas\u0131na olanak tan\u0131r. Ayr\u0131ca, mobil performans i\u00e7in model karma\u015f\u0131kl\u0131\u011f\u0131n\u0131 ve doku boyutlar\u0131n\u0131 optimize etmek kritik \u00f6neme sahiptir. B\u00fcy\u00fck poligon say\u0131s\u0131na sahip modeller veya y\u00fcksek \u00e7\u00f6z\u00fcn\u00fcrl\u00fckl\u00fc dokular, mobil cihazlar\u0131n GPU'lar\u0131n\u0131 zorlayarak performans\u0131 d\u00fc\u015f\u00fcrebilir.<\/p>\n<p><strong>Bellek Y\u00f6netimi ve \u00c7\u00f6p Toplama (Garbage Collection)<\/strong><\/p>\n<p>3D uygulamalar\u0131, \u00f6zellikle dinamik olarak i\u00e7erik y\u00fcklendi\u011finde veya materyaller de\u011fi\u015ftirildi\u011finde bellek s\u0131z\u0131nt\u0131lar\u0131na yatk\u0131n olabilir. Three.js'te, bir objeyi sahneden kald\u0131rmak, onun bellekteki yerini otomatik olarak bo\u015faltmaz. <code>dispose()<\/code> metodunu kullanarak geometrileri, materyalleri ve dokular\u0131 manuel olarak serbest b\u0131rakmak \u00f6nemlidir. Daha \u00f6nce materyalleri kopyalay\u0131p eski materyali <code>dispose()<\/code> etti\u011fimiz \u00f6rnekte oldu\u011fu gibi:<\/p>\n<p><code><\/p>\n<pre>\no.material.dispose(); \/\/ Eski materyali bellekten temizle\n<\/pre>\n<p><\/code><\/p>\n<p>Bu, \u00f6zellikle kullan\u0131c\u0131 s\u00fcrekli olarak renk veya doku de\u011fi\u015ftiriyorsa, bellek kullan\u0131m\u0131n\u0131n kontrol alt\u0131nda tutulmas\u0131n\u0131 sa\u011flar. Aksi takdirde, her yeni materyal bellek \u00fczerinde yer kaplamaya devam eder ve uygulaman\u0131z zamanla yava\u015flar hatta \u00e7\u00f6kebilir. Ayr\u0131ca, b\u00fcy\u00fck modellerin veya dokular\u0131n ilk y\u00fcklenmesinde bir \u00f6nbellekleme stratejisi uygulamak, tekrar tekrar ayn\u0131 varl\u0131klar\u0131n y\u00fcklenmesini \u00f6nleyerek performans\u0131 art\u0131r\u0131r. Model y\u00fcklemesi s\u0131ras\u0131nda kullan\u0131c\u0131ya bir y\u00fckleme \u00e7ubu\u011fu veya animasyon g\u00f6stermek, alg\u0131lanan performans\u0131 iyile\u015ftirir ve kullan\u0131c\u0131n\u0131n bekleme s\u00fcresini daha y\u00f6netilebilir hale getirir. <code>requestAnimationFrame<\/code> kullan\u0131m\u0131, taray\u0131c\u0131 arka planda iken animasyonlar\u0131 duraklatarak CPU ve GPU kaynaklar\u0131n\u0131 korur. Three.js'in <code>Stats.js<\/code> gibi performans izleme ara\u00e7lar\u0131n\u0131 kullanarak FPS (saniye ba\u015f\u0131na kare) ve bellek kullan\u0131m\u0131n\u0131 takip etmek, optimizasyon darbo\u011fazlar\u0131n\u0131 belirlemede \u00e7ok yard\u0131mc\u0131 olacakt\u0131r. Bu ara\u00e7lar, geli\u015ftirme a\u015famas\u0131nda performans sorunlar\u0131n\u0131 erkenden tespit etmenizi ve gerekli \u00f6nlemleri alman\u0131z\u0131 sa\u011flar.<\/p>\n<p><strong>Vaka Analizi: Sanal Mobilya Ma\u011fazas\u0131<\/strong><\/p>\n<p>Bir e-ticaret platformu, kullan\u0131c\u0131lar\u0131n koltuk tak\u0131mlar\u0131n\u0131, masalar\u0131 veya yatak odas\u0131 tak\u0131mlar\u0131n\u0131 kendi zevklerine g\u00f6re \u00f6zelle\u015ftirmelerine olanak tan\u0131yan bir 3D konfig\u00fcrat\u00f6r geli\u015ftirmek istiyor. Bu senaryoda Alpine.js ve Three.js ikilisi, tam da arad\u0131klar\u0131 \u00e7\u00f6z\u00fcm olabilir:<\/p>\n<ul>\n<li><strong>Kolay Entegrasyon:<\/strong> Mevcut bir HTML tabanl\u0131 web sitesine ek bir framework y\u00fck\u00fc getirmeden h\u0131zl\u0131ca entegre edilebilir. Sayfan\u0131n di\u011fer k\u0131s\u0131mlar\u0131 farkl\u0131 teknolojilerle geli\u015ftirilmi\u015f olsa bile, konfig\u00fcrat\u00f6r ba\u011f\u0131ms\u0131z bir widget gibi \u00e7al\u0131\u015fabilir.<\/li>\n<li><strong>An\u0131nda G\u00f6rsel Geri Bildirim:<\/strong> Kullan\u0131c\u0131 kuma\u015f rengini, ah\u015fap t\u00fcr\u00fcn\u00fc veya ayak modelini de\u011fi\u015ftirdi\u011finde, saniyeler i\u00e7inde 3D model \u00fczerinde g\u00fcncellemeyi g\u00f6r\u00fcr. Bu, kullan\u0131c\u0131 g\u00fcvenini art\u0131r\u0131r ve sat\u0131n alma motivasyonunu y\u00fckseltir.<\/li>\n<li><strong>Hafif ve H\u0131zl\u0131:<\/strong> \u00d6zellikle mobilya gibi detayl\u0131 modellerde bile, optimize edilmi\u015f GLTF\/GLB modelleri ve verimli Three.js render d\u00f6ng\u00fcs\u00fc sayesinde mobil cihazlarda bile ak\u0131c\u0131 bir deneyim sunulabilir. Alpine.js'in minimal DOM manip\u00fclasyonu da bu h\u0131za katk\u0131da bulunur.<\/li>\n<li><strong>Ki\u015fiselle\u015ftirme Se\u00e7enekleri:<\/strong> Alpine.js ile \"L-\u015fekilli mi, d\u00fcz m\u00fc?\", \"3'l\u00fc m\u00fc, 2'li mi?\" gibi karma\u015f\u0131k yap\u0131land\u0131rma se\u00e7enekleri kolayca y\u00f6netilebilir. Her se\u00e7imin 3D model \u00fczerindeki etkisi an\u0131nda g\u00f6rselle\u015ftirilir. \u00d6rne\u011fin, bir koltu\u011fun kuma\u015f\u0131n\u0131 se\u00e7erken, <code>productModel.traverse<\/code> ile koltuk minderi mesh'i bulunur ve <code>material.map<\/code> \u00f6zelli\u011fine yeni doku atan\u0131r.<\/li>\n<\/ul>\n<p>Bu yakla\u015f\u0131m, k\u00fc\u00e7\u00fck ve orta \u00f6l\u00e7ekli i\u015fletmeler i\u00e7in b\u00fcy\u00fck \u00e7apl\u0131 bir e-ticaret \u00e7\u00f6z\u00fcm\u00fc sat\u0131n almadan veya karma\u015f\u0131k bir geli\u015ftirme ekibi kurmadan da modern ve etkileyici bir \u00e7evrimi\u00e7i ma\u011faza deneyimi sunman\u0131n kap\u0131lar\u0131n\u0131 aralar. Konfig\u00fcrat\u00f6r, kullan\u0131c\u0131n\u0131n evindeki alan\u0131 g\u00f6z\u00fcnde canland\u0131rmas\u0131na yard\u0131mc\u0131 olarak iade oranlar\u0131n\u0131 d\u00fc\u015f\u00fcrebilir ve m\u00fc\u015fteri memnuniyetini art\u0131rabilir. Bir di\u011fer \u00f6rnek ise m\u00fccevher sekt\u00f6r\u00fc olabilir. Kullan\u0131c\u0131lar bir y\u00fcz\u00fc\u011f\u00fcn ta\u015f\u0131n\u0131, metalini veya oyma desenini de\u011fi\u015ftirdiklerinde, her bir se\u00e7imin 3D olarak g\u00f6rselle\u015ftirilmesi, nihai \u00fcr\u00fcn\u00fcn nas\u0131l g\u00f6r\u00fcnece\u011fi konusunda net bir fikir verir. Bu, ki\u015fiselle\u015ftirilmi\u015f \u00fcr\u00fcnlerin sat\u0131\u015f\u0131n\u0131 \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131rabilir ve markan\u0131n dijital etkile\u015fimini g\u00fc\u00e7lendirebilir. Optimize edilmi\u015f materyaller ve dokularla, her bir detay en iyi \u015fekilde sunulur ve kullan\u0131c\u0131ya adeta fiziksel bir \u00fcr\u00fcnle etkile\u015fim kuruyormu\u015f hissi verilir.<\/p>\n<h2>Sonu\u00e7: Gelece\u011fin E-ticaret Deneyimi Art\u0131k Ellerinizde<\/h2>\n<p>Bu makalede, Alpine.js ve Three.js k\u00fct\u00fcphanelerini bir araya getirerek React gibi a\u011f\u0131r framework'lere ihtiya\u00e7 duymadan nas\u0131l g\u00fc\u00e7l\u00fc ve etkile\u015fimli bir 3D \u00fcr\u00fcn konfig\u00fcrat\u00f6r\u00fc olu\u015fturulabilece\u011fini ad\u0131m ad\u0131m inceledik. Temel proje kurulumundan, GLTF\/GLB model y\u00fcklemeye, Alpine.js ile reaktif aray\u00fczler olu\u015fturmaya ve son olarak performans optimizasyonlar\u0131na kadar bir\u00e7ok konuya de\u011findik. G\u00f6rd\u00fck ki, minimal ve odaklanm\u0131\u015f k\u00fct\u00fcphanelerin birle\u015fimi, hem geli\u015ftirme h\u0131z\u0131n\u0131 art\u0131r\u0131yor hem de kullan\u0131c\u0131lara benzersiz, s\u00fcr\u00fckleyici ve ak\u0131c\u0131 bir deneyim sunuyor.<\/p>\n<p>3D \u00fcr\u00fcn konfig\u00fcrat\u00f6rleri, e-ticaretteki rekabet avantaj\u0131n\u0131 korumak ve m\u00fc\u015fteri memnuniyetini art\u0131rmak i\u00e7in vazge\u00e7ilmez ara\u00e7lar haline gelmi\u015ftir. Art\u0131k sadece \u00fcr\u00fcn\u00fcn nas\u0131l g\u00f6r\u00fcnd\u00fc\u011f\u00fcn\u00fc de\u011fil, nas\u0131l <em>hissedildi\u011fini<\/em> ve <em>ki\u015fiselle\u015ftirilebildi\u011fini<\/em> g\u00f6stermek, online al\u0131\u015fveri\u015fin gelece\u011fidir. Alpine.js ve Three.js bu gelece\u011fe ula\u015fmak i\u00e7in g\u00fc\u00e7l\u00fc, esnek ve eri\u015filebilir bir yol sunar. Bu ara\u00e7lar\u0131 kullanarak, hayalinizdeki interaktif \u00fcr\u00fcn deneyimlerini ger\u00e7e\u011fe d\u00f6n\u00fc\u015ft\u00fcrmek art\u0131k \u00e7ok daha kolay.<\/p>\n<h3>S\u0131k\u00e7a Sorulan Sorular (SSS)<\/h3>\n<p><strong>1. Alpine.js ve Three.js kullanmak, performans\u0131 React'e g\u00f6re ger\u00e7ekten art\u0131r\u0131r m\u0131?<\/strong><\/p>\n<p>Evet, genellikle art\u0131r\u0131r. Alpine.js, React veya Vue gibi sanal DOM kullanan framework'lere k\u0131yasla \u00e7ok daha hafif bir k\u00fct\u00fcphanedir. Bu, daha az JavaScript kodu, daha k\u00fc\u00e7\u00fck dosya boyutlar\u0131 ve daha h\u0131zl\u0131 ba\u015flang\u0131\u00e7 y\u00fckleme s\u00fcreleri anlam\u0131na gelir. Three.js ise WebGL'i do\u011frudan kulland\u0131\u011f\u0131 i\u00e7in performans, b\u00fcy\u00fck \u00f6l\u00e7\u00fcde model optimizasyonuna ve geli\u015ftiricinin Three.js'i ne kadar verimli kulland\u0131\u011f\u0131na ba\u011fl\u0131d\u0131r. Daha az framework overhead'i, uygulaman\u0131z\u0131n genel kaynak t\u00fcketimini d\u00fc\u015f\u00fcrebilir.<\/p>\n<p><strong>2. Bu yakla\u015f\u0131m\u0131 kullanarak \u00e7ok karma\u015f\u0131k 3D modelleri y\u00f6netebilir miyim?<\/strong><\/p>\n<p>Evet, y\u00f6netebilirsiniz. Three.js, b\u00fcy\u00fck ve karma\u015f\u0131k modelleri i\u015fleyebilme kapasitesine sahiptir. As\u0131l k\u0131s\u0131tlama, son kullan\u0131c\u0131n\u0131n cihaz\u0131n\u0131n donan\u0131m g\u00fcc\u00fc ve modelin kendisinin optimizasyonudur. \u00c7ok y\u00fcksek poligonlu modeller veya \u00e7ok say\u0131da doku, \u00f6zellikle mobil cihazlarda performans sorunlar\u0131na yol a\u00e7abilir. Modellerinizi (GLTF\/GLB) do\u011fru ara\u00e7larla optimize etmek (poligon azaltma, doku s\u0131k\u0131\u015ft\u0131rma) her zaman en iyi performans\u0131 sa\u011flar.<\/p>\n<p><strong>3. Bu konfig\u00fcrat\u00f6re farkl\u0131 kamera kontrol modlar\u0131 (\u00f6rne\u011fin, s\u00fcr\u00fckle-b\u0131rak, zoom) ekleyebilir miyim?<\/strong><\/p>\n<p>Kesinlikle! Three.js, <code>OrbitControls<\/code>, <code>TrackballControls<\/code> gibi bir\u00e7ok haz\u0131r kamera kontrol mod\u00fcl\u00fc sunar. Bu mod\u00fcller, kullan\u0131c\u0131lar\u0131n fare veya dokunmatik ekran hareketleriyle 3D sahneyi kolayca manip\u00fcle etmesini sa\u011flar. <code>OrbitControls<\/code> en yayg\u0131n kullan\u0131lan\u0131d\u0131r ve kullan\u0131c\u0131ya modeli d\u00f6nd\u00fcrme, yak\u0131nla\u015ft\u0131rma\/uzakla\u015ft\u0131rma ve kayd\u0131rma yetene\u011fi verir.<\/p>\n<p><strong>4. \u00dcr\u00fcn konfig\u00fcrat\u00f6r\u00fcme dinamik olarak yeni 3D par\u00e7alar eklemek m\u00fcmk\u00fcn m\u00fcd\u00fcr?<\/strong><\/p>\n<p>Evet, Three.js ile dinamik par\u00e7a eklemek m\u00fcmk\u00fcnd\u00fcr. <code>GLTFLoader<\/code>'\u0131 tekrar kullanarak yeni bir 3D par\u00e7ay\u0131 y\u00fckleyebilir ve <code>scene.add()<\/code> metoduyla mevcut \u00fcr\u00fcn modelinizin alt\u0131na veya belirli bir noktas\u0131na ekleyebilirsiniz. Alpine.js aray\u00fcz\u00fcn\u00fczde bir se\u00e7enek belirleyici olu\u015fturarak, kullan\u0131c\u0131n\u0131n hangi par\u00e7alar\u0131n eklenece\u011fini veya de\u011fi\u015ftirilece\u011fini se\u00e7mesine izin verebilirsiniz. Bu, mod\u00fcler \u00fcr\u00fcn tasar\u0131mlar\u0131 i\u00e7in idealdir.<\/p>\n<p><strong>5. Bu teknoloji y\u0131\u011f\u0131n\u0131 ile \u00f6zel efektler veya animasyonlar ekleyebilir miyim?<\/strong><\/p>\n<p>Evet, Three.js, Shader Material'lar arac\u0131l\u0131\u011f\u0131yla \u00f6zel g\u00f6rsel efektler olu\u015fturmak i\u00e7in geni\u015f olanaklar sunar. Ayr\u0131ca, model i\u00e7indeki animasyonlar\u0131 (GLTF\/GLB modelleriyle birlikte gelen) <code>AnimationMixer<\/code> kullanarak oynatabilir, duraklatabilir veya h\u0131z\u0131n\u0131 de\u011fi\u015ftirebilirsiniz. Alpine.js, bu animasyonlar\u0131 tetiklemek veya kontrol etmek i\u00e7in aray\u00fcz kontrolleri sa\u011flayabilir. \u00d6rne\u011fin, bir buton t\u0131klamas\u0131yla \u00fcr\u00fcn\u00fcn montaj animasyonunu ba\u015flatabilirsiniz.<\/p>\n","protected":false},"excerpt":{"rendered":"Alpine.js ve Three.js ile 3D \u00fcr\u00fcn konfig\u00fcrat\u00f6r\u00fc olu\u015fturma rehberiniz. React kullanmadan modern ve etkile\u015fimli bir deneyim tasarlay\u0131n. Performans…","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":[128],"tags":[],"class_list":{"0":"post-35938","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-react","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v20.5 (Yoast SEO v25.3.1) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Neden Alpine.js ve Three.js? React Olmadan da Olur mu?<\/title>\n<meta name=\"description\" content=\"Alpine.js ve Three.js ile 3D \u00fcr\u00fcn konfig\u00fcrat\u00f6r\u00fc olu\u015fturma rehberiniz. React kullanmadan modern ve etkile\u015fimli bir deneyim tasarlay\u0131n. Performans ipu\u00e7lar\u0131 ve ad\u0131m ad\u0131m kurulum.\" \/>\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\/neden-alpine-js-ve-three-js-react-olmadan-da-olur-mu\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Neden Alpine.js ve Three.js? React Olmadan da Olur mu?\" \/>\n<meta property=\"og:description\" content=\"Alpine.js ve Three.js ile 3D \u00fcr\u00fcn konfig\u00fcrat\u00f6r\u00fc olu\u015fturma rehberiniz. React kullanmadan modern ve etkile\u015fimli bir deneyim tasarlay\u0131n. Performans ipu\u00e7lar\u0131 ve ad\u0131m ad\u0131m kurulum.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/neden-alpine-js-ve-three-js-react-olmadan-da-olur-mu\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2025-12-05T18:31:11+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=\"28 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/neden-alpine-js-ve-three-js-react-olmadan-da-olur-mu\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/neden-alpine-js-ve-three-js-react-olmadan-da-olur-mu\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"Neden Alpine.js ve Three.js? React Olmadan da Olur mu?\",\"datePublished\":\"2025-12-05T18:31:11+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/neden-alpine-js-ve-three-js-react-olmadan-da-olur-mu\/\"},\"wordCount\":4547,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"articleSection\":[\"React\"],\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/neden-alpine-js-ve-three-js-react-olmadan-da-olur-mu\/#respond\"]}],\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/neden-alpine-js-ve-three-js-react-olmadan-da-olur-mu\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/neden-alpine-js-ve-three-js-react-olmadan-da-olur-mu\/\",\"name\":\"Neden Alpine.js ve Three.js? React Olmadan da Olur mu?\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2025-12-05T18:31:11+00:00\",\"description\":\"Alpine.js ve Three.js ile 3D \u00fcr\u00fcn konfig\u00fcrat\u00f6r\u00fc olu\u015fturma rehberiniz. React kullanmadan modern ve etkile\u015fimli bir deneyim tasarlay\u0131n. Performans ipu\u00e7lar\u0131 ve ad\u0131m ad\u0131m kurulum.\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/neden-alpine-js-ve-three-js-react-olmadan-da-olur-mu\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/neden-alpine-js-ve-three-js-react-olmadan-da-olur-mu\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/neden-alpine-js-ve-three-js-react-olmadan-da-olur-mu\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Neden Alpine.js ve Three.js? React Olmadan da Olur mu?\"}]},{\"@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":"Neden Alpine.js ve Three.js? React Olmadan da Olur mu?","description":"Alpine.js ve Three.js ile 3D \u00fcr\u00fcn konfig\u00fcrat\u00f6r\u00fc olu\u015fturma rehberiniz. React kullanmadan modern ve etkile\u015fimli bir deneyim tasarlay\u0131n. Performans ipu\u00e7lar\u0131 ve ad\u0131m ad\u0131m kurulum.","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\/neden-alpine-js-ve-three-js-react-olmadan-da-olur-mu\/","og_locale":"tr_TR","og_type":"article","og_title":"Neden Alpine.js ve Three.js? React Olmadan da Olur mu?","og_description":"Alpine.js ve Three.js ile 3D \u00fcr\u00fcn konfig\u00fcrat\u00f6r\u00fc olu\u015fturma rehberiniz. React kullanmadan modern ve etkile\u015fimli bir deneyim tasarlay\u0131n. Performans ipu\u00e7lar\u0131 ve ad\u0131m ad\u0131m kurulum.","og_url":"https:\/\/fatihsoysal.com\/blog\/neden-alpine-js-ve-three-js-react-olmadan-da-olur-mu\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2025-12-05T18:31:11+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"28 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/neden-alpine-js-ve-three-js-react-olmadan-da-olur-mu\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/neden-alpine-js-ve-three-js-react-olmadan-da-olur-mu\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"Neden Alpine.js ve Three.js? React Olmadan da Olur mu?","datePublished":"2025-12-05T18:31:11+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/neden-alpine-js-ve-three-js-react-olmadan-da-olur-mu\/"},"wordCount":4547,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"articleSection":["React"],"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/neden-alpine-js-ve-three-js-react-olmadan-da-olur-mu\/#respond"]}],"copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/neden-alpine-js-ve-three-js-react-olmadan-da-olur-mu\/","url":"https:\/\/fatihsoysal.com\/blog\/neden-alpine-js-ve-three-js-react-olmadan-da-olur-mu\/","name":"Neden Alpine.js ve Three.js? React Olmadan da Olur mu?","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2025-12-05T18:31:11+00:00","description":"Alpine.js ve Three.js ile 3D \u00fcr\u00fcn konfig\u00fcrat\u00f6r\u00fc olu\u015fturma rehberiniz. React kullanmadan modern ve etkile\u015fimli bir deneyim tasarlay\u0131n. Performans ipu\u00e7lar\u0131 ve ad\u0131m ad\u0131m kurulum.","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/neden-alpine-js-ve-three-js-react-olmadan-da-olur-mu\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/neden-alpine-js-ve-three-js-react-olmadan-da-olur-mu\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/neden-alpine-js-ve-three-js-react-olmadan-da-olur-mu\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Neden Alpine.js ve Three.js? React Olmadan da Olur mu?"}]},{"@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\/35938","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=35938"}],"version-history":[{"count":0,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/35938\/revisions"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=35938"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=35938"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=35938"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}