Kod Yazmadan 3D Web Sitesi Kurma Kiti

01 · Repo

Önce çalışan bir 3D iskelet — indirin ve kurun

Promptlar tek başına yetmez. Claude Code boşluğa kod yazmaz, üstüne inşa eder; önce çalışan bir 3D iskelet lazım. Kullandığım repo: pmndrs/react-three-next — Next.js + React Three Fiber resmî starter'ı. MIT lisanslı, ücretsiz, ~2.800 yıldız.

kurulum · tek komut

$ npx create-r3f-app my-app

Tek komut, çalışan bir 3D Next.js iskeleti. Sonrası basit:

Repoyu kurun (üstteki komut) ve Claude Code'da projeyi açın.
Aşağıdaki (02) hazır promptlardan birini yapıştırın.
3D siteniz çıksın — repo iskeleti + prompt birleşince iş tamamlanır.

Reponun altında çalışan motor: React Three Fiber (Three.js'i React'e taşıyan renderer) ve @react-three/drei (hazır R3F bileşenleri: kamera, ışık, model yükleme). Hafif alternatif: sadece Three.js + Vite isteyene doinel1a/vite-three-js boilerplate (MIT, kurulu ESLint/Tailwind).

02 · Promptlar

Claude Code'a yapıştırın — iskeleti o kursun

Repoyu kurup projeyi açtıktan sonra aşağıdaki promptu yapıştırın. İskeleti, kütüphaneleri ve sahneyi Claude kurar; siz sadece içeriği değiştirirsiniz. Stack: React Three Fiber + Drei + GSAP. İlk iki prompt hemen aşağıda; kalan ikisi (ışık, referans klonlama) + araçlar, modeller ve başlangıç paketi de devamında.

Prompt 1 · Scroll ile canlanan 3D hero

Kaydırdıkça dönen ve yaklaşan bir hero; kamera ve obje GSAP ScrollTrigger ile animasyonlanır. Mobil uyumlu, FPS düşmez, tek Hero bileşeninde toplanır.

Prompt 2 · Döndürülebilir 3D ürün turu

useGLTF ile .glb model; kullanıcı fareyle döndürür (OrbitControls), tıklayınca kameranın açılara yumuşak geçtiği 3 tur noktası + bilgi kartı.

prompt-1 · scroll hero

> React Three Fiber, Drei ve GSAP ScrollTrigger kullanarak scroll
  ettikçe dönen ve yaklaşan bir 3D hero bölümü kur. Drei'den
  OrbitControls'u kapat, kullanıcı kaydırınca kamera ve obje GSAP ile
  animasyonlansın. Mobil uyumlu olsun, FPS düşmesin, kod tek bir Hero
  bileşeninde toplansın.

prompt-2 · ürün turu

> Drei'nin useGLTF'i ile yükleyeceğim bir .glb modelini sahnede göster.
  Kullanıcı fareyle döndürebilsin (OrbitControls), tıklayınca kameranın
  belirli açılara yumuşak geçiş yaptığı 3 "tur noktası" ekle. Her noktada
  modelin yanında küçük bir bilgi kartı belirsin.

Prompt 3 · Işık · HDRI'lı gerçekçi sahne ışığı

Drei'nin Environment bileşeniyle HDRI ortam ışığı ekletir; modele yumuşak gölge ve yansıma, ContactShadows ile zemine gölge. Renk tonu sıcak, sahne premium ve sinematik.

Prompt 4 · Klonlama · Referans siteyi tarif ettirin

Beğendiğiniz bir 3D siteyi 2-3 cümleyle anlatın (hareket, renk, sahne); Claude aynı kodu kopyalamadan o "his"i taşıyan özgün bir R3F sahnesi kurar.

Prompt 3 ve 4'ün Claude Code'a yapıştırdığınız tam metinleri:

prompt-3 · HDRI ışık

> Drei'nin Environment bileşeniyle bir HDRI ortam ışığı ekle, modele
  yumuşak gölge ve yansıma versin. ContactShadows ile zemine gölge düşür.
  Renk tonu sıcak olsun, sahne premium ve sinematik görünsün.

prompt-4 · referans klonlama

> Beğendiğim bir 3D siteyi tarif edeceğim: [siteyi 2-3 cümleyle anlat:
  hareket, renk, sahne]. Bunun fikrini taklit eden ama tamamen özgün bir
  R3F sahnesi kur; aynı kodu kopyalama, benzer "his"i yarat.

İki yol: kodsuz ve kodlu araçlar

Tek doğru yol yok. İkisi de çalışır, hangisi size uyuyorsa onu seçin.

Kodsuz (sürükle-bırak). Spline (spline.design) — tarayıcıda kod yazmadan 3D tasarım; AI ile metinden 3D ve doku üretimi. Sahneyi gömülü koda ya da .glb model olarak dışa aktarırsınız (ücretsiz planda 3 dosya + watermark sınırı). Dora (dora.run) — AI ile kodsuz, animasyonlu ve etkileşimli 3D site. Spline'da yaptığınız sahneyi .glb olarak Dora'ya import edip yayına alırsınız. "Tasarımı yapayım ama kod yazmayayım" yolu: Spline → Dora.

Kodlu (tam kontrol). React Three Fiber + Drei + GSAP — R3F Three.js'i React'e taşır, Drei hazır yardımcılar verir, GSAP scroll ve geçiş animasyonlarını sürer. En esnek yol; yukarıdaki promptlar bu stack'e göre yazıldı.

kurulum · r3f + next

$ npx create-r3f-app next my-app

Ücretsiz 3D modeller

Sahneyi boş bırakmayın. Bu üç kaynaktan ücretsiz, ticari kullanılabilir model ve doku indirin. Lisansı her dosyada tek tek kontrol edin.

Sketchfab — aramada "Downloadable" + "Free" filtresini açın; binlerce indirilebilir model. (sketchfab.com)
PolyHaven — tamamı CC0 (kayıtsız, atıfsız): model, HDRI ışık ve texture. R3F'te Environment için ideal. (polyhaven.com)
Kenney (kenney.nl) — CC0 oyun ve 3D asset paketleri; düşük poligonlu, hızlı yüklenen sahneler için birebir.

Dürüst not — abartmıyorum

Statik bir 3D site kurmak gerçekten kolay. Ama dinamik içerik, backend, form/üyelik/ödeme ve çok sahneli işlere geçince emek artar — orada planlı ilerlemeniz, yer yer elle kod yazmanız gerekir. "Tek tuşla her şey" değil; ama başlangıç ücretsiz ve hızlı.

Ne alıyorsunuz

Repo + kurulum komutu — tek satırla çalışan 3D iskelet (pmndrs/react-three-next).
4 hazır prompt — Claude Code'a yapıştırın, sahnenizi o kursun (hero, ürün turu, ışık, referans klonlama).
Araç haritası — kodsuz (Spline, Dora) ve kodlu (R3F + Drei + GSAP) iki yol.
3 ücretsiz model kaynağı — Sketchfab, PolyHaven, Kenney; ticari kullanılabilir asset'ler.

Başlangıç kiti: çalışan R3F iskelet komutu + 4 promptun tam metni + model kaynak listesi. Aşağıdaki tek komutla klonlayın: