{"id":38201,"date":"2026-01-25T16:00:35","date_gmt":"2026-01-25T13:00:35","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/uc-boyutlu-oyun-tarzi-interaktif-gelistirici-portfoyu-olusturmak-three-js-gemini-ve-antigravity-ile-yenilikci-bir-yaklasim\/"},"modified":"2026-01-25T16:00:35","modified_gmt":"2026-01-25T13:00:35","slug":"uc-boyutlu-oyun-tarzi-interaktif-gelistirici-portfoyu-olusturmak-three-js-gemini-ve-antigravity-ile-yenilikci-bir-yaklasim","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/uc-boyutlu-oyun-tarzi-interaktif-gelistirici-portfoyu-olusturmak-three-js-gemini-ve-antigravity-ile-yenilikci-bir-yaklasim\/","title":{"rendered":"\u00dc\u00e7 Boyutlu Oyun Tarz\u0131 \u0130nteraktif Geli\u015ftirici Portf\u00f6y\u00fc Olu\u015fturmak: Three.js, Gemini ve AntiGravity ile Yenilik\u00e7i Bir Yakla\u015f\u0131m"},"content":{"rendered":"

\u00dc\u00e7 Boyutlu Oyun Tarz\u0131 \u0130nteraktif Geli\u015ftirici Portf\u00f6y\u00fc Olu\u015fturmak: Three.js, Gemini ve AntiGravity ile Yenilik\u00e7i Bir Yakla\u015f\u0131m<\/h2>\n

Geli\u015ftirici portf\u00f6yleri, yetenekleri sergilemek ve potansiyel i\u015fverenlerin dikkatini \u00e7ekmek i\u00e7in hayati \u00f6neme sahiptir. Ancak statik web sayfalar\u0131n\u0131n monotonlu\u011fundan s\u0131yr\u0131larak, ziyaret\u00e7ilere unutulmaz ve etkile\u015fimli bir deneyim sunmak art\u0131k m\u00fcmk\u00fcn. Bu makalede, Three.js ile olu\u015fturulmu\u015f 3D bir ortamda, Gemini’nin yapay zeka g\u00fcc\u00fc ve “AntiGravity” konseptinin dinamik etkile\u015fimleriyle zenginle\u015ftirilmi\u015f, oyun tarz\u0131 bir geli\u015ftirici portf\u00f6y\u00fc in\u015fa etmenin inceliklerini ke\u015ffedece\u011fiz.<\/p>\n

Geleneksel Portf\u00f6ylerden Oyun Tarz\u0131 Deneyime Ge\u00e7i\u015f<\/h3>\n

Geli\u015ftirici portf\u00f6yleri genellikle proje listeleri, \u00f6zge\u00e7mi\u015f bilgileri ve ileti\u015fim formlar\u0131ndan ibarettir. Ancak bu yakla\u015f\u0131m, ziyaret\u00e7ilerin ilgisini \u00e7ekmekte ve ak\u0131lda kal\u0131c\u0131 bir izlenim b\u0131rakmakta yetersiz kalabilir. Dijital d\u00fcnyada \u00f6ne \u00e7\u0131kmak i\u00e7in yenilik\u00e7i bir yakla\u015f\u0131ma ihtiya\u00e7 var.<\/p>\n

Neden \u0130nteraktif ve 3D?<\/h4>\n

\u0130nteraktif ve 3D bir portf\u00f6y, ziyaret\u00e7ilere sadece bilgi sunmakla kalmaz, ayn\u0131 zamanda bir deneyim ya\u015fat\u0131r. Kullan\u0131c\u0131lar, projelerinizi sanal bir d\u00fcnyada ke\u015ffedebilir, etkile\u015fimde bulunabilir ve hatta k\u00fc\u00e7\u00fck oyunlar oynayarak yeteneklerinizi daha derinden anlayabilirler. Bu, \u00f6zellikle oyun geli\u015ftirme, VR\/AR veya grafik tasar\u0131m gibi alanlarda \u00e7al\u0131\u015fanlar i\u00e7in b\u00fcy\u00fck bir avantaj sa\u011flar. 3D ortam, yarat\u0131c\u0131l\u0131\u011f\u0131n\u0131z\u0131 ve teknik becerilerinizi somut bir \u015fekilde sergilemenize olanak tan\u0131r.<\/p>\n

Beklentileri Y\u00fckseltmek<\/h4>\n

G\u00fcn\u00fcm\u00fcz\u00fcn dijital \u00e7a\u011f\u0131nda, kullan\u0131c\u0131lar zengin ve s\u00fcr\u00fckleyici deneyimler bekliyor. Bir geli\u015ftiricinin portf\u00f6y\u00fc de bu beklentileri kar\u015f\u0131lamal\u0131, hatta a\u015fmal\u0131d\u0131r. Oyun tarz\u0131 bir portf\u00f6y, standartlar\u0131n d\u0131\u015f\u0131na \u00e7\u0131karak sizi rakiplerinizden ay\u0131r\u0131r ve teknolojiye olan tutkunuzu ve yenilik\u00e7i d\u00fc\u015f\u00fcnce yap\u0131n\u0131z\u0131 kan\u0131tlar. Bu, potansiyel i\u015fverenler veya i\u015fbirlik\u00e7iler \u00fczerinde g\u00fc\u00e7l\u00fc bir ilk izlenim b\u0131rakman\u0131n anahtar\u0131d\u0131r.<\/p>\n

Hedef Kitle ve Etkile\u015fim<\/h4>\n

Bu t\u00fcr bir portf\u00f6y\u00fcn hedef kitlesi, sadece teknik becerilere de\u011fil, ayn\u0131 zamanda yarat\u0131c\u0131l\u0131\u011fa ve problem \u00e7\u00f6zme yetene\u011fine de\u011fer verenlerdir. Etkile\u015fim, portf\u00f6y\u00fcn temel ta\u015f\u0131d\u0131r. Kullan\u0131c\u0131lar\u0131n fare veya klavye ile 3D ortamda gezinmesi, objelerle etkile\u015fime girmesi, kap\u0131lar\u0131 a\u00e7mas\u0131 veya bilgi panellerini tetiklemesi gibi eylemler, pasif bir g\u00f6zlemci olmaktan \u00e7\u0131k\u0131p aktif bir kat\u0131l\u0131mc\u0131 olmalar\u0131n\u0131 sa\u011flar.<\/p>\n

Three.js ile 3D D\u00fcnyay\u0131 \u0130n\u015fa Etmek<\/h3>\n

Three.js, taray\u0131c\u0131da 3D grafikler olu\u015fturmak i\u00e7in kullan\u0131lan g\u00fc\u00e7l\u00fc ve esnek bir JavaScript k\u00fct\u00fcphanesidir. WebGL’in karma\u015f\u0131kl\u0131\u011f\u0131n\u0131 soyutlayarak, geli\u015ftiricilerin kolayca 3D sahneler, animasyonlar ve etkile\u015fimler olu\u015fturmas\u0131na olanak tan\u0131r.<\/p>\n

Temel Three.js Yap\u0131s\u0131: Sahne, Kamera, Renderer<\/h4>\n

Her Three.js uygulamas\u0131 bu \u00fc\u00e7 temel bile\u015fen etraf\u0131nda d\u00f6ner:
\n* Sahne (Scene):<\/strong> 3D objelerinizi, \u0131\u015f\u0131klar\u0131n\u0131z\u0131 ve kameralar\u0131n\u0131z\u0131 bar\u0131nd\u0131ran bir kapsay\u0131c\u0131d\u0131r.
\n* Kamera (Camera):<\/strong> Sahneyi hangi a\u00e7\u0131dan ve perspektiften g\u00f6rece\u011fimizi belirler. Genellikle PerspectiveCamera<\/code> (insan g\u00f6z\u00fcne benzer) veya OrthographicCamera<\/code> (2D oyunlar i\u00e7in uygun) kullan\u0131l\u0131r.
\n* Renderer (WebGLRenderer):<\/strong> Sahnedeki objeleri al\u0131p bunlar\u0131 taray\u0131c\u0131da g\u00f6rselle\u015ftiren bile\u015fendir.<\/p>\n

import * as THREE from 'three';\n\nconst scene = new THREE.Scene();\nconst camera = new THREE.PerspectiveCamera(75, window.innerWidth \/ window.innerHeight, 0.1, 1000);\nconst renderer = new THREE.WebGLRenderer();\nrenderer.setSize(window.innerWidth, window.innerHeight);\ndocument.body.appendChild(renderer.domElement);\n\ncamera.position.z = 5;\n\nfunction animate() {\n    requestAnimationFrame(animate);\n    \/\/ Objeleri burada hareket ettirin veya g\u00fcncelleyin\n    renderer.render(scene, camera);\n}\nanimate();<\/pre>\n
<\/code><\/p>\n
Modeller, Materyaller ve I\u015f\u0131kland\u0131rma<\/h4>\n
3D d\u00fcnyan\u0131z\u0131 olu\u015fturmak i\u00e7in modellere (geometriler), materyallere (objelerin nas\u0131l g\u00f6r\u00fcnd\u00fc\u011f\u00fcn\u00fc belirleyen \u00f6zellikler) ve \u0131\u015f\u0131kland\u0131rmaya ihtiyac\u0131n\u0131z vard\u0131r.
\n*   Modeller (Geometriler):<\/strong> K\u00fcp, k\u00fcre gibi temel \u015fekillerden ba\u015flayabilir veya Blender, Maya gibi 3D modelleme yaz\u0131l\u0131mlar\u0131ndan GLTF, OBJ format\u0131nda modeller import edebilirsiniz.
\n*   Materyaller (Materials):<\/strong> Objelerin rengini, parlakl\u0131\u011f\u0131n\u0131, yans\u0131t\u0131c\u0131l\u0131\u011f\u0131n\u0131 ve dokusunu (texture) belirler. MeshStandardMaterial<\/code> veya MeshPhongMaterial<\/code> gibi \u00e7e\u015fitli materyal t\u00fcrleri bulunur.
\n*   I\u015f\u0131kland\u0131rma (Lights):<\/strong> Ortama ger\u00e7ek\u00e7ilik katar. AmbientLight<\/code> (genel \u0131\u015f\u0131k), DirectionalLight<\/code> (g\u00fcne\u015f \u0131\u015f\u0131\u011f\u0131 gibi), PointLight<\/code> (ampul gibi) ve SpotLight<\/code> (fener gibi) en yayg\u0131n \u0131\u015f\u0131k t\u00fcrleridir.<\/p>\n
Etkile\u015fim ve Animasyon Y\u00f6netimi<\/h4>\n
Kullan\u0131c\u0131 etkile\u015fimini sa\u011flamak i\u00e7in fare hareketlerini, t\u0131klamalar\u0131 ve klavye giri\u015flerini dinlemeniz gerekir. Raycaster<\/code> objesi, fare koordinatlar\u0131ndan sahnedeki objeleri se\u00e7mek i\u00e7in kullan\u0131l\u0131r. Animasyonlar ise genellikle requestAnimationFrame<\/code> d\u00f6ng\u00fcs\u00fc i\u00e7inde objelerin \u00f6zelliklerini (konum, rotasyon, \u00f6l\u00e7ek) zamanla de\u011fi\u015ftirerek ger\u00e7ekle\u015ftirilir. GSAP<\/code> gibi k\u00fct\u00fcphaneler, karma\u015f\u0131k animasyonlar\u0131 daha kolay y\u00f6netmenize yard\u0131mc\u0131 olabilir.<\/p>\n
Performans Optimizasyonu<\/h4>\n
3D uygulamalar, \u00f6zellikle d\u00fc\u015f\u00fck g\u00fc\u00e7l\u00fc cihazlarda performans sorunlar\u0131na yol a\u00e7abilir. Optimizasyon i\u00e7in \u015fu stratejiler izlenebilir:
\n*   Geometri Optimizasyonu:<\/strong> Gereksiz poligonlar\u0131 azalt\u0131n.
\n*   Materyal ve Doku Optimizasyonu:<\/strong> Doku boyutlar\u0131n\u0131 k\u00fc\u00e7\u00fclt\u00fcn, InstancedMesh<\/code> kullanarak ayn\u0131 objeleri verimli bir \u015fekilde \u00e7izin.
\n*   I\u015f\u0131kland\u0131rma Optimizasyonu:<\/strong> Ger\u00e7ek zamanl\u0131 \u0131\u015f\u0131k say\u0131s\u0131n\u0131 s\u0131n\u0131rlay\u0131n, lightmaps<\/code> kullan\u0131n.
\n*   Frustum Culling:<\/strong> Sadece kameran\u0131n g\u00f6r\u00fc\u015f alan\u0131ndaki objeleri render edin.<\/p>\n
Gemini ile Yapay Zeka Destekli Ak\u0131ll\u0131 Etkile\u015fimler<\/h3>\n
Gemini, Google'\u0131n g\u00fc\u00e7l\u00fc yapay zeka modelidir ve portf\u00f6y\u00fcn\u00fcze dinamik, ak\u0131ll\u0131 ve ki\u015fiselle\u015ftirilmi\u015f etkile\u015fimler eklemek i\u00e7in kullan\u0131labilir.<\/p>\n
Gemini Entegrasyonunun Potansiyeli<\/h4>\n
Gemini'yi portf\u00f6y\u00fcn\u00fcze entegre ederek, ziyaret\u00e7ilerinize sadece statik bilgi sunmak yerine, onlarla \"konu\u015fan\" veya ihtiya\u00e7lar\u0131na g\u00f6re adapte olan bir deneyim sa\u011flayabilirsiniz. Bu, bir sohbet botundan, dinamik i\u00e7erik olu\u015fturmaya kadar geni\u015f bir yelpazeyi kapsar.<\/p>\n
Dinamik \u0130\u00e7erik \u00dcretimi ve Ki\u015fiselle\u015ftirme<\/h4>\n
Gemini, ziyaret\u00e7inin ilgi alanlar\u0131na veya etkile\u015fim ge\u00e7mi\u015fine g\u00f6re dinamik olarak i\u00e7erik \u00fcretebilir. \u00d6rne\u011fin:
\n*   \u00d6zelle\u015ftirilmi\u015f Proje Tan\u0131t\u0131mlar\u0131:<\/strong> Ziyaret\u00e7i belirli bir teknolojiye ilgi duydu\u011funu belirtti\u011finde, Gemini o teknolojiyle ilgili projelerin \u00f6zetini daha detayl\u0131 veya farkl\u0131 bir bak\u0131\u015f a\u00e7\u0131s\u0131yla sunabilir.
\n*   Ki\u015fiselle\u015ftirilmi\u015f Yolculuklar:<\/strong> Portf\u00f6y i\u00e7inde ziyaret\u00e7inin kariyer hedeflerine uygun bir \"yolculuk\" \u00f6nerebilir, ilgili projeleri \u00f6ne \u00e7\u0131karabilir.<\/p>\n
Kullan\u0131c\u0131 Sorgular\u0131na Ak\u0131ll\u0131 Yan\u0131tlar<\/h4>\n
Portf\u00f6y\u00fcn\u00fcze entegre edece\u011finiz bir AI sohbet botu, Gemini'nin do\u011fal dil i\u015fleme yeteneklerini kullanarak ziyaret\u00e7ilerin sorular\u0131n\u0131 ak\u0131ll\u0131ca yan\u0131tlayabilir.
\n*   \"\u015eu projenizde hangi teknolojileri kulland\u0131n\u0131z?\"
\n*   \"React konusunda deneyiminiz nedir?\"
\n*   \"Sizinle nas\u0131l ileti\u015fime ge\u00e7ebilirim?\"<\/p>\n
Gemini, bu t\u00fcr sorular\u0131 anlay\u0131p, portf\u00f6y\u00fcn\u00fczdeki bilgilerden veya \u00f6nceden tan\u0131mlanm\u0131\u015f yan\u0131t setlerinden yararlanarak ilgili ve do\u011fru cevaplar verebilir.<\/p>\n
\u00d6rnek Kullan\u0131m Senaryolar\u0131<\/h4>\n
*   AI NPC (Non-Player Character):<\/strong> 3D ortamda dola\u015fan bir NPC, ziyaret\u00e7ilerle etkile\u015fime ge\u00e7erek onlara rehberlik edebilir, projeler hakk\u0131nda bilgi verebilir veya k\u00fc\u00e7\u00fck bulmacalar sunabilir.
\n*   Ak\u0131ll\u0131 Arama\/Filtreleme:<\/strong> Ziyaret\u00e7i \"Vue.js ile yapt\u0131\u011f\u0131n\u0131z projeleri g\u00f6ster\" dedi\u011finde, Gemini bu iste\u011fi anlay\u0131p ilgili projeleri 3D ortamda vurgulayabilir veya bir listesini sunabilir.
\n*   Geri Bildirim Toplama:<\/strong> Ziyaret\u00e7ilerin portf\u00f6y hakk\u0131ndaki d\u00fc\u015f\u00fcncelerini do\u011fal dilde al\u0131p \u00f6zetleyebilir.<\/p>\n
AntiGravity: Fizik, Hareket ve Ak\u0131\u015fkanl\u0131k<\/h3>\n
\"AntiGravity\" burada, geleneksel web sitelerinin statik do\u011fas\u0131na meydan okuyan, fizik tabanl\u0131, dinamik ve ak\u0131\u015fkan bir etkile\u015fim deneyimi yaratma konseptini temsil etmektedir. Bu, sadece g\u00f6rsel bir estetik de\u011fil, ayn\u0131 zamanda kullan\u0131c\u0131lar\u0131n 3D ortamla nas\u0131l etkile\u015fime girdi\u011fini de \u015fekillendirir.<\/p>\n
Ger\u00e7ek\u00e7i Hareket ve \u00c7arp\u0131\u015fma Tespiti<\/h4>\n
Oyun tarz\u0131 bir portf\u00f6yde, objelerin ger\u00e7ek\u00e7i fizik kurallar\u0131na g\u00f6re hareket etmesi, deneyimi daha s\u00fcr\u00fckleyici hale getirir. Bu, Cannon.js veya Rapier.js gibi hafif fizik motorlar\u0131 entegre edilerek sa\u011flanabilir.
\n*   Objelerin S\u00fcz\u00fclmesi\/Y\u00fczmesi:<\/strong> Belirli projelerin veya bilgi panellerinin \"AntiGravity\" etkisiyle havada s\u00fcz\u00fclmesini sa\u011flayabiliriz.
\n*   \u00c7arp\u0131\u015fma Tespiti:<\/strong> Kullan\u0131c\u0131n\u0131n avatarlar\u0131 veya kamera, 3D ortamdaki objelerle \u00e7arp\u0131\u015ft\u0131\u011f\u0131nda tepki verebilir. Bu, bir objeye yakla\u015f\u0131ld\u0131\u011f\u0131nda bilgi penceresi a\u00e7\u0131lmas\u0131 gibi etkile\u015fimleri tetikleyebilir.<\/p>\n
Kamera Kontrolleri ve Kullan\u0131c\u0131 Navigasyonu<\/h4>\n
Geleneksel web sitelerindeki basit kayd\u0131rma yerine, 3D ortamda kullan\u0131c\u0131ya tam hareket \u00f6zg\u00fcrl\u00fc\u011f\u00fc tan\u0131mak \"AntiGravity\" konseptinin bir par\u00e7as\u0131d\u0131r.
\n*   FPS Tarz\u0131 Kontroller:<\/strong> Klavyedeki W, A, S, D tu\u015flar\u0131 ile ileri\/geri\/sa\u011fa\/sola hareket, fare ile kamera a\u00e7\u0131s\u0131n\u0131 kontrol etme.
\n*   Teleport Sistemi:<\/strong> Belirli noktalara \u0131\u015f\u0131nlanma veya h\u0131zl\u0131 ge\u00e7i\u015f noktalar\u0131.
\n*   U\u00e7u\u015f Modu:<\/strong> Kullan\u0131c\u0131n\u0131n 3D ortamda serbest\u00e7e u\u00e7mas\u0131na olanak tan\u0131yan bir mod.<\/p>\n
Oyun Mekanikleri ve Bulmaca \u00d6\u011feleri<\/h4>\n
Portf\u00f6y\u00fcn\u00fcz\u00fc daha da e\u011flenceli hale getirmek i\u00e7in basit oyun mekanikleri veya bulmacalar ekleyebilirsiniz.
\n*   Anahtar Toplama:<\/strong> Bir projeye eri\u015fmek i\u00e7in sanal anahtarlar\u0131 toplama.
\n*   Mini Oyunlar:<\/strong> Yeteneklerinizi sergileyen k\u0131sa, etkile\u015fimli mini oyunlar (\u00f6rne\u011fin, bir kodlama bulmacas\u0131 veya bir fizik tabanl\u0131 deneme).
\n*   Gizli \u0130\u00e7erikler:<\/strong> Belirli objelerle etkile\u015fime girerek veya gizli yollar\u0131 ke\u015ffederek eri\u015filebilen ekstra bilgiler veya Easter Egg'ler.<\/p>\n
S\u00fcr\u00fckleyici Bir Deneyim \u0130\u00e7in Ak\u0131\u015fkanl\u0131k<\/h4>\n
\"AntiGravity\" ayn\u0131 zamanda kullan\u0131c\u0131 aray\u00fcz\u00fcn\u00fcn (UI) ve kullan\u0131c\u0131 deneyiminin (UX) ak\u0131\u015fkanl\u0131\u011f\u0131n\u0131 da ifade eder. Men\u00fclerin ve bilgi panellerinin 3D ortamla sorunsuz bir \u015fekilde entegre olmas\u0131, anl\u0131k tepki vermesi ve ge\u00e7i\u015flerin yumu\u015fak olmas\u0131, genel deneyimin kalitesini art\u0131r\u0131r.<\/p>\n
Proje Yap\u0131s\u0131 ve Geli\u015ftirme S\u00fcreci<\/h3>\n
B\u00f6ylesine karma\u015f\u0131k bir projeyi y\u00f6netmek i\u00e7in iyi bir yap\u0131 ve planl\u0131 bir geli\u015ftirme s\u00fcreci \u015fartt\u0131r.<\/p>\n
Teknoloji Y\u0131\u011f\u0131n\u0131 Se\u00e7imi<\/h4>\n
*   3D K\u00fct\u00fcphane:<\/strong> Three.js (vazge\u00e7ilmez)
\n*   Fizik Motoru:<\/strong> Cannon.js, Rapier.js (iste\u011fe ba\u011fl\u0131 ama \u00f6nerilir)
\n*   UI \u00c7er\u00e7evesi:<\/strong> React, Vue.js veya Svelte (bile\u015fen tabanl\u0131 geli\u015ftirme i\u00e7in) ya da Vanilla JS (daha hafif projeler i\u00e7in). React Three Fiber, Three.js'i React bile\u015fenleri olarak kullanmay\u0131 kolayla\u015ft\u0131r\u0131r.
\n*   Yapay Zeka:<\/strong> Google Gemini API
\n*   Animasyon K\u00fct\u00fcphanesi:<\/strong> GSAP (iste\u011fe ba\u011fl\u0131)<\/p>\n
Mod\u00fcler Mimari ve Bile\u015fen Yakla\u015f\u0131m\u0131<\/h4>\n
Projenizi k\u00fc\u00e7\u00fck, y\u00f6netilebilir mod\u00fcllere ve bile\u015fenlere ay\u0131rmak, kodun okunabilirli\u011fini, bak\u0131m\u0131n\u0131 ve \u00f6l\u00e7eklenebilirli\u011fini art\u0131r\u0131r.
\n*   SceneManager.js<\/code>: Sahne, kamera, renderer kurulumu.
\n*   ObjectLoader.js<\/code>: 3D modelleri y\u00fckleme.
\n*   PlayerController.js<\/code>: Kullan\u0131c\u0131 hareketlerini y\u00f6netme.
\n*   GeminiIntegration.js<\/code>: Gemini API ile ileti\u015fim.
\n*   PhysicsEngine.js<\/code>: Fizik motoru entegrasyonu.
\n*   Her bir proje veya etkile\u015fimli \u00f6\u011fe i\u00e7in ayr\u0131 bir bile\u015fen.<\/p>\n
Geli\u015ftirme Ortam\u0131 ve Ara\u00e7lar<\/h4>\n
*   Paket Y\u00f6neticisi:<\/strong> npm veya yarn.
\n*   Build Arac\u0131:<\/strong> Vite, Webpack veya Parcel.
\n*   Kod D\u00fczenleyici:<\/strong> VS Code (Three.js ve JavaScript eklentileriyle).
\n*   Versiyon Kontrol\u00fc:<\/strong> Git ve GitHub\/GitLab.<\/p>\n
Da\u011f\u0131t\u0131m ve Bar\u0131nd\u0131rma<\/h4>\n
Projenizi Vercel, Netlify, GitHub Pages veya kendi sunucunuzda bar\u0131nd\u0131rabilirsiniz. Build s\u00fcrecinden sonra ortaya \u00e7\u0131kan statik dosyalar\u0131 (HTML, CSS, JS, 3D modeller, dokular) y\u00fcklemeniz yeterlidir.<\/p>\n
Kar\u015f\u0131la\u015f\u0131lan Zorluklar ve \u00c7\u00f6z\u00fcmler<\/h3>\n
Bu t\u00fcr yenilik\u00e7i bir portf\u00f6y geli\u015ftirirken baz\u0131 zorluklarla kar\u015f\u0131la\u015fmak ka\u00e7\u0131n\u0131lmazd\u0131r.<\/p>\n
Performans Engelleri ve Optimizasyon Stratejileri<\/h4>\n
*   Sorun:<\/strong> Y\u00fcksek poligonlu modeller, b\u00fcy\u00fck dokular ve fazla \u0131\u015f\u0131kland\u0131rma performans\u0131 d\u00fc\u015f\u00fcrebilir.
\n*   \u00c7\u00f6z\u00fcm:<\/strong> Model optimizasyonu (Blender'da decimate modifier), doku s\u0131k\u0131\u015ft\u0131rma (WebP), InstancedMesh<\/code> kullan\u0131m\u0131, LOD (Level of Detail)<\/code> teknikleri, Post-processing<\/code> efektlerini s\u0131n\u0131rlama.<\/p>\n
Taray\u0131c\u0131 Uyumlulu\u011fu ve Cihaz Farkl\u0131l\u0131klar\u0131<\/h4>\n
*   Sorun:<\/strong> WebGL performans\u0131 taray\u0131c\u0131dan taray\u0131c\u0131ya ve cihazdan cihaza de\u011fi\u015fir. Mobil cihazlarda performans daha kritik olabilir.
\n*   \u00c7\u00f6z\u00fcm:<\/strong> Duyarl\u0131 tasar\u0131m, mobil cihazlar i\u00e7in optimize edilmi\u015f d\u00fc\u015f\u00fck detayl\u0131 modeller veya farkl\u0131 bir kullan\u0131c\u0131 deneyimi sunma, devicePixelRatio<\/code> y\u00f6netimi, WebGL'in desteklenip desteklenmedi\u011fini kontrol etme.<\/p>\n
Kullan\u0131c\u0131 Deneyimi (UX) Tasar\u0131m\u0131<\/h4>\n
*   Sorun:<\/strong> 3D ortamda navigasyon ve etkile\u015fim, geleneksel web sitelerinden farkl\u0131d\u0131r ve kullan\u0131c\u0131lar i\u00e7in kafa kar\u0131\u015ft\u0131r\u0131c\u0131 olabilir.
\n*   \u00c7\u00f6z\u00fcm:<\/strong> A\u00e7\u0131k talimatlar, sezgisel kontroller, g\u00f6rsel ipu\u00e7lar\u0131, kolay eri\u015filebilir men\u00fcler, geri bildirim mekanizmalar\u0131 (\u00f6rne\u011fin, bir objeye yakla\u015f\u0131ld\u0131\u011f\u0131nda vurgulama).<\/p>\n
G\u00fcvenlik ve Veri Gizlili\u011fi<\/h4>\n
*   Sorun:<\/strong> Gemini API kullan\u0131m\u0131, API anahtarlar\u0131n\u0131n g\u00fcvenli\u011fini ve kullan\u0131c\u0131 verilerinin gizlili\u011fini gerektirir.
\n*   \u00c7\u00f6z\u00fcm:<\/strong> API anahtarlar\u0131n\u0131 do\u011frudan istemci taraf\u0131nda kullanmaktan ka\u00e7\u0131n\u0131n, bir proxy sunucusu \u00fczerinden istekleri y\u00f6nlendirin. Kullan\u0131c\u0131 verilerini toplarken GDPR ve KVKK gibi d\u00fczenlemelere uyun.<\/p>\n
Sonu\u00e7<\/h3>\n
Three.js, Gemini ve \"AntiGravity\" konseptini bir araya getirerek olu\u015fturulan oyun tarz\u0131 interaktif geli\u015ftirici portf\u00f6y\u00fc, sadece bir web sitesi olman\u0131n \u00f6tesine ge\u00e7erek, ziyaret\u00e7ilere unutulmaz bir deneyim sunar. Bu yakla\u015f\u0131m, teknik yeteneklerinizi sergilemenin yan\u0131 s\u0131ra, yarat\u0131c\u0131l\u0131\u011f\u0131n\u0131z\u0131 ve yenilik\u00e7i d\u00fc\u015f\u00fcnce yap\u0131n\u0131z\u0131 da vurgular. Ba\u015flang\u0131\u00e7ta zorlay\u0131c\u0131 gibi g\u00f6r\u00fcnse de, do\u011fru ara\u00e7lar ve planlama ile bu t\u00fcr bir portf\u00f6y, kariyerinizde sizi bir ad\u0131m \u00f6ne ta\u015f\u0131yacak g\u00fc\u00e7l\u00fc bir ara\u00e7 haline gelebilir. Dijital d\u00fcnyada fark yaratmak isteyen her geli\u015ftiricinin ke\u015ffetmesi gereken heyecan verici bir yoldur.<\/p>\n
SSS (S\u0131k Sorulan Sorular)<\/h3>\n
Bu t\u00fcr bir portf\u00f6y ne kadar zaman al\u0131r?<\/h4>\n
Bu, projenin kapsam\u0131na, detay seviyesine ve geli\u015ftiricinin deneyimine ba\u011fl\u0131d\u0131r. Basit bir 3D ortam ve temel etkile\u015fimler birka\u00e7 hafta s\u00fcrebilirken, Gemini entegrasyonu, geli\u015fmi\u015f fizik ve karma\u015f\u0131k oyun mekanikleri i\u00e7eren tam te\u015fekk\u00fcll\u00fc bir proje birka\u00e7 ay s\u00fcrebilir.<\/p>\n
Hangi beceriler gereklidir?<\/h4>\n
JavaScript (ileri seviye), Three.js, HTML\/CSS, 3D modelleme (temel d\u00fczeyde Blender bilgisi faydal\u0131), yapay zeka API'leri (Gemini), UX\/UI tasar\u0131m\u0131 ve performans optimizasyonu konular\u0131nda bilgi sahibi olmak gereklidir.<\/p>\n
Maliyetli midir?<\/h4>\n
Temel bir Three.js portf\u00f6y\u00fc i\u00e7in sadece bar\u0131nd\u0131rma maliyetleri (genellikle \u00e7ok d\u00fc\u015f\u00fck veya \u00fccretsiz) s\u00f6z konusudur. Ancak, profesyonel 3D modeller, \u00f6zel animasyonlar veya Gemini gibi \u00fccretli API kullan\u0131mlar\u0131 ek maliyetler getirebilir. Gemini'nin \u00fccretsiz katmanlar\u0131 genellikle ba\u015flang\u0131\u00e7 i\u00e7in yeterlidir.<\/p>\n
SEO a\u00e7\u0131s\u0131ndan dezavantajlar\u0131 var m\u0131?<\/h4>\n
Evet, 3D i\u00e7eri\u011fin arama motorlar\u0131 taraf\u0131ndan do\u011frudan indekslenmesi zordur. Bu nedenle, portf\u00f6y\u00fcn\u00fcz\u00fcn HTML yap\u0131s\u0131nda metin tabanl\u0131 a\u00e7\u0131klamalar, meta etiketler ve eri\u015filebilir bir site haritas\u0131 bulundurmak \u00f6nemlidir. Ayr\u0131ca, performans\u0131 y\u00fcksek tutmak ve h\u0131zl\u0131 y\u00fckleme s\u00fcreleri sa\u011flamak da SEO i\u00e7in kritik \u00f6neme sahiptir.<\/p>\n
Mobil uyumluluk nas\u0131l sa\u011flan\u0131r?<\/h4>\n
Duyarl\u0131 tasar\u0131m prensipleri uygulay\u0131n. Mobil cihazlar i\u00e7in daha basit 3D modeller, optimize edilmi\u015f dokular ve dokunmatik ekranlara uygun kontroller kullan\u0131n. Performans\u0131 art\u0131rmak i\u00e7in mobil cihazlarda baz\u0131 g\u00f6rsel efektleri devre d\u0131\u015f\u0131 b\u0131rakmay\u0131 d\u00fc\u015f\u00fcnebilirsiniz. devicePixelRatio<\/code>'yu do\u011fru y\u00f6netmek de \u00f6nemlidir.<\/p>\n","protected":false},"excerpt":{"rendered":"\u00dc\u00e7 Boyutlu Oyun Tarz\u0131 \u0130nteraktif Geli\u015ftirici Portf\u00f6y\u00fc Olu\u015fturmak: Three.","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-38201","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-genel","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\n\u00dc\u00e7 Boyutlu Oyun Tarz\u0131 \u0130nteraktif Geli\u015ftirici Portf\u00f6y\u00fc Olu\u015fturmak: Three.js, Gemini ve AntiGravity ile Yenilik\u00e7i Bir Yakla\u015f\u0131m - 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\/uc-boyutlu-oyun-tarzi-interaktif-gelistirici-portfoyu-olusturmak-three-js-gemini-ve-antigravity-ile-yenilikci-bir-yaklasim\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u00dc\u00e7 Boyutlu Oyun Tarz\u0131 \u0130nteraktif Geli\u015ftirici Portf\u00f6y\u00fc Olu\u015fturmak: Three.js, Gemini ve AntiGravity ile Yenilik\u00e7i Bir Yakla\u015f\u0131m\" \/>\n<meta property=\"og:description\" content=\"\u00dc\u00e7 Boyutlu Oyun Tarz\u0131 \u0130nteraktif Geli\u015ftirici Portf\u00f6y\u00fc Olu\u015fturmak: Three.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/uc-boyutlu-oyun-tarzi-interaktif-gelistirici-portfoyu-olusturmak-three-js-gemini-ve-antigravity-ile-yenilikci-bir-yaklasim\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2026-01-25T13:00:35+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=\"12 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/uc-boyutlu-oyun-tarzi-interaktif-gelistirici-portfoyu-olusturmak-three-js-gemini-ve-antigravity-ile-yenilikci-bir-yaklasim\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/uc-boyutlu-oyun-tarzi-interaktif-gelistirici-portfoyu-olusturmak-three-js-gemini-ve-antigravity-ile-yenilikci-bir-yaklasim\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"\u00dc\u00e7 Boyutlu Oyun Tarz\u0131 \u0130nteraktif Geli\u015ftirici Portf\u00f6y\u00fc Olu\u015fturmak: Three.js, Gemini ve AntiGravity ile Yenilik\u00e7i Bir Yakla\u015f\u0131m\",\"datePublished\":\"2026-01-25T13:00:35+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/uc-boyutlu-oyun-tarzi-interaktif-gelistirici-portfoyu-olusturmak-three-js-gemini-ve-antigravity-ile-yenilikci-bir-yaklasim\/\"},\"wordCount\":2391,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/uc-boyutlu-oyun-tarzi-interaktif-gelistirici-portfoyu-olusturmak-three-js-gemini-ve-antigravity-ile-yenilikci-bir-yaklasim\/#respond\"]}],\"copyrightYear\":\"2026\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/uc-boyutlu-oyun-tarzi-interaktif-gelistirici-portfoyu-olusturmak-three-js-gemini-ve-antigravity-ile-yenilikci-bir-yaklasim\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/uc-boyutlu-oyun-tarzi-interaktif-gelistirici-portfoyu-olusturmak-three-js-gemini-ve-antigravity-ile-yenilikci-bir-yaklasim\/\",\"name\":\"\u00dc\u00e7 Boyutlu Oyun Tarz\u0131 \u0130nteraktif Geli\u015ftirici Portf\u00f6y\u00fc Olu\u015fturmak: Three.js, Gemini ve AntiGravity ile Yenilik\u00e7i Bir Yakla\u015f\u0131m - Kodlar\u0131n Gizemli D\u00fcnyas\u0131\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2026-01-25T13:00:35+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/uc-boyutlu-oyun-tarzi-interaktif-gelistirici-portfoyu-olusturmak-three-js-gemini-ve-antigravity-ile-yenilikci-bir-yaklasim\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/uc-boyutlu-oyun-tarzi-interaktif-gelistirici-portfoyu-olusturmak-three-js-gemini-ve-antigravity-ile-yenilikci-bir-yaklasim\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/uc-boyutlu-oyun-tarzi-interaktif-gelistirici-portfoyu-olusturmak-three-js-gemini-ve-antigravity-ile-yenilikci-bir-yaklasim\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"\u00dc\u00e7 Boyutlu Oyun Tarz\u0131 \u0130nteraktif Geli\u015ftirici Portf\u00f6y\u00fc Olu\u015fturmak: Three.js, Gemini ve AntiGravity ile Yenilik\u00e7i Bir Yakla\u015f\u0131m\"}]},{\"@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":"\u00dc\u00e7 Boyutlu Oyun Tarz\u0131 \u0130nteraktif Geli\u015ftirici Portf\u00f6y\u00fc Olu\u015fturmak: Three.js, Gemini ve AntiGravity ile Yenilik\u00e7i Bir Yakla\u015f\u0131m - 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\/uc-boyutlu-oyun-tarzi-interaktif-gelistirici-portfoyu-olusturmak-three-js-gemini-ve-antigravity-ile-yenilikci-bir-yaklasim\/","og_locale":"tr_TR","og_type":"article","og_title":"\u00dc\u00e7 Boyutlu Oyun Tarz\u0131 \u0130nteraktif Geli\u015ftirici Portf\u00f6y\u00fc Olu\u015fturmak: Three.js, Gemini ve AntiGravity ile Yenilik\u00e7i Bir Yakla\u015f\u0131m","og_description":"\u00dc\u00e7 Boyutlu Oyun Tarz\u0131 \u0130nteraktif Geli\u015ftirici Portf\u00f6y\u00fc Olu\u015fturmak: Three.","og_url":"https:\/\/fatihsoysal.com\/blog\/uc-boyutlu-oyun-tarzi-interaktif-gelistirici-portfoyu-olusturmak-three-js-gemini-ve-antigravity-ile-yenilikci-bir-yaklasim\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2026-01-25T13:00:35+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"12 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/uc-boyutlu-oyun-tarzi-interaktif-gelistirici-portfoyu-olusturmak-three-js-gemini-ve-antigravity-ile-yenilikci-bir-yaklasim\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/uc-boyutlu-oyun-tarzi-interaktif-gelistirici-portfoyu-olusturmak-three-js-gemini-ve-antigravity-ile-yenilikci-bir-yaklasim\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"\u00dc\u00e7 Boyutlu Oyun Tarz\u0131 \u0130nteraktif Geli\u015ftirici Portf\u00f6y\u00fc Olu\u015fturmak: Three.js, Gemini ve AntiGravity ile Yenilik\u00e7i Bir Yakla\u015f\u0131m","datePublished":"2026-01-25T13:00:35+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/uc-boyutlu-oyun-tarzi-interaktif-gelistirici-portfoyu-olusturmak-three-js-gemini-ve-antigravity-ile-yenilikci-bir-yaklasim\/"},"wordCount":2391,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/uc-boyutlu-oyun-tarzi-interaktif-gelistirici-portfoyu-olusturmak-three-js-gemini-ve-antigravity-ile-yenilikci-bir-yaklasim\/#respond"]}],"copyrightYear":"2026","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/uc-boyutlu-oyun-tarzi-interaktif-gelistirici-portfoyu-olusturmak-three-js-gemini-ve-antigravity-ile-yenilikci-bir-yaklasim\/","url":"https:\/\/fatihsoysal.com\/blog\/uc-boyutlu-oyun-tarzi-interaktif-gelistirici-portfoyu-olusturmak-three-js-gemini-ve-antigravity-ile-yenilikci-bir-yaklasim\/","name":"\u00dc\u00e7 Boyutlu Oyun Tarz\u0131 \u0130nteraktif Geli\u015ftirici Portf\u00f6y\u00fc Olu\u015fturmak: Three.js, Gemini ve AntiGravity ile Yenilik\u00e7i Bir Yakla\u015f\u0131m - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2026-01-25T13:00:35+00:00","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/uc-boyutlu-oyun-tarzi-interaktif-gelistirici-portfoyu-olusturmak-three-js-gemini-ve-antigravity-ile-yenilikci-bir-yaklasim\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/uc-boyutlu-oyun-tarzi-interaktif-gelistirici-portfoyu-olusturmak-three-js-gemini-ve-antigravity-ile-yenilikci-bir-yaklasim\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/uc-boyutlu-oyun-tarzi-interaktif-gelistirici-portfoyu-olusturmak-three-js-gemini-ve-antigravity-ile-yenilikci-bir-yaklasim\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"\u00dc\u00e7 Boyutlu Oyun Tarz\u0131 \u0130nteraktif Geli\u015ftirici Portf\u00f6y\u00fc Olu\u015fturmak: Three.js, Gemini ve AntiGravity ile Yenilik\u00e7i Bir Yakla\u015f\u0131m"}]},{"@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\/38201","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=38201"}],"version-history":[{"count":0,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/38201\/revisions"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=38201"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=38201"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=38201"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}