30 Saniyede 3D Bir Web Sitesine Tek Bir Prompt (6 Test Edildi)

Çoğu 3D web sitesi prompt kütüphanesi ya prompt metninin kendisi için ücret alır ya da size bir demo videosu gösterip kelimeleri kendine saklar. İşte altı eksiksiz prompt: bunları olduğu gibi Claude’a yapıştırın ya da bir satırını Lovable, Bolt ve Cursor için uyarlayın. Altısının da canlı bir modelden geçmesi sağlandı; beşi çalışan Three.js sayfaları olarak geri döndü ve aşağıdaki her ekran görüntüsü bu render’lardan biridir, bir mockup değildir.

Hemen kopyalayabileceğiniz altı 3D web sitesi istemi

Her prompt, CDN üzerinden yüklenen Three.js ile tek dosyalık bir HTML sayfası ister. Bu kısıt önemlidir: tek bir dosya yerel olarak herhangi bir tarayıcıda açılır ve bir geliştiriciye vermek ya da özel kod bloğuna yapıştırmak kolaydır; ayrıca modeli, içe aktarmaları bir projeye yaymak yerine sahneyi kendi içinde tutmaya zorlar.

1. Parçacık galaksi kahramanı

Three.js kullanarak etkileşimli 3D parçacık galaksisi hero
bölümü içeren tek dosyalık bir HTML sayfası oluşturun (bir CDN’den yükleyin). Gereksinimler: yavaşça dönen bir sarmal galaksi oluşturan yaklaşık 50.000
parçacık; parçacık renkleri çekirdekte sıcak amberden dış kenarda viyoleye doğru kaymalıdır; ziyaretçilerin sürükleyerek döndürüp yakınlaştırabilmesi için OrbitControls ekleyin; "Build Beyond Flat" yazan merkezlenmiş bir hero başlığı, kısa bir alt satır ve bir CTA düğmesi yerleştirin; galaksi metnin arkasında sürüklenebilir kalsın diye overlay container üzerinde pointer-events: none ve CTA düğmesi üzerinde pointer-events: auto ayarlayın; koyu
arka plan #0a0616; pencere yeniden boyutlandırmayı ele alın. YALNIZCA tek bir kod bloğu içinde eksiksiz HTML
dosyasını çıktıyı verin.

27 saniyede ve 3.692 çıktı tokeniyle oluşturuldu. Galaksi dönüyor, sürükleyerek yörüngeye alma çalışıyor ve buton, örtünün üzerinden tıklanabilir kalıyor. Gerçek bir kusur: alt satır parlak galaktik çekirdeğin üzerine geliyor ve okunması zor oluyor. Düzeltme aşağıdaki test notlarında.

2. Kaydırma odaklı ürün vitrini

Three.js CDN'den yüklenmiş, kaydırma odaklı 3D bir ürün vitrini kullanan tek dosyalı bir HTML sayfası oluşturun: sabit tam ekran bir canvas içinde ortalanmış, havada süzülen krom bir torus-knot; sayfada 4 tam ekran kaydırma bölümü olsun ve kullanıcı kaydırdıkça kamera nesnenin etrafında tam 360 derece dolansın; nesnenin malzeme rengi bölüm başına yumuşak biçimde değişsin (gümüş, koyu mavi, zümrüt, bakır); her bölüm, canvas'ın üzerinde sola sabitlenmiş bir başlık ve tek satırlık metin gösterir; hareketin sönümlü hissedilmesi için kaydırmada yumuşak interpolasyon (lerp); iki renkli spot ışığı ve yumuşak bir zemin gölgesiyle koyu stüdyo görünümü; yeniden boyutlandırmayı işle. YALNIZCA tek bir kod bloğu içinde eksiksiz HTML dosyasını çıktılayın.

Bu, beş çalışan nesil arasında en ağır olanıydı (63 saniye, 7.023 çıktı tokeni) ve en etkileyici sonuçtu. Kaydırma, kamerayı nesnenin etrafında hareket ettiriyor ve malzeme, istendiği gibi bölüm başına tam olarak yeniden renklendiriliyor:

Sönümlü lerp enterpolasyonu da korundu; hareket, scroll-jacked bir slayt gösterisinden ziyade bir ajans sitesinin ağır, pahalı hissini veriyor.

3. GLSL sıvı gradyan arka planı

Three.js’in bir CDN’den yüklendiği, özel bir GLSL fragment shader kullanan, tam ekran animasyonlu bir WebGL akışkan
gradyan arka planına sahip tek dosyalık bir HTML sayfası oluşturun. Gereksinimler: derin mavi,
mor ve mercanı harmanlayan, zaman uniformu ve fragment shader içinde simplex tarzı gürültü ile yönlendirilen yavaş hareket eden organik lekeler; shader’da hafif film gren ekleyin; ortalanmış bir cam kartı (backdrop blur) üzerinde beyaz "Ship Immersive Sites" başlığı, bir
alt satır ve iki düğme yer alsın; animasyon bir dizüstü bilgisayarda akıcı kalmalı (tek
quad, postprocessing geçişleri yok); yeniden boyutlandırmayı ele alın. YALNIZCA tamamlanmış
HTML dosyasını tek bir kod bloğu içinde çıktı olarak verin.

31 saniye, 3.830 token, ilk denemede geçti. “single quad, no postprocessing passes” ifadesi performans koruma sınırıdır: bu olmadan modeller, entegre GPU’larda kare hızlarını düşüren EffectComposer ve bloom pass’lerine yönelme eğilimindedir.

4. 3D portföy fly-through (geri savaşan)

Tek bir HTML dosyası oluşturun: CDN’den Three.js kullanan 3D bir portföy.
Üç boyutlu uzayda nazik bir eğri boyunca düzenlenmiş altı yüzen proje kartı (yuvarlatılmış düzlemler; yer tutucu gradyan
dokular ve kart dokusu üzerine işlenmiş proje başlıkları). Kullanıcı kaydırdıkça kamera eğri boyunca ileri doğru uçar,
her seferinde bir kartı odakta olacak şekilde sırayla yakınlaştırır; kamera odaktaki kartı rahat bir boşluk payıyla tamamen kadrajda tutmalı
ve hiçbir zaman bir kartın içinden geçmemelidir; odaktaki kart hafifçe ölçek olarak büyür. Komşu kartlar
derinlik için kısmen görünür kalır. Hafif sis, koyu bir arka plan, sönümlü
kaydırma enterpolasyonu ekleyin. Odaktaki bir karta tıklamak bir bağlantı açar. Yeniden boyutlandırmayı ele alın.
Kodu kompakt tutun: tek bir kart oluşturma işlevini yeniden kullanın, yorum yok.
YALNIZCA tek bir kod bloğu içinde eksiksiz HTML dosyasını çıktılayın.

Bu, üç deneme aldı ve hâlâ yayınlanabilir değil; yukarıdaki ekran görüntüsü de neden yine de yayınladığımızı gösteriyor: kart render ediliyor, ama kamera onun arkasında duruyor, bu yüzden başlık aynalanmış görünüyor. İlk deneme, dosyanın ortasında 16.000 tokenlık çıktı sınırımızı aştı. İkinci deneme ("kodu kompakt tut" satırıyla; bu yüzden o satır istemde yer alıyor) kartları render etti ama kamerayı doğrudan onların içinden geçirdi. Üçüncü deneme kesmeyi düzeltti ve kameranın kaydırma bağlantısını kaybetti. Kamera yolu koreografisi ve kart başına dokular, modeller için yukarıdaki sahnelerden gerçekten daha zor; bir hata ayıklama oturumu için bütçe ayırın ya da bunu hover durumları olan statik, kavisli bir ızgaraya basitleştirin.

5. Etkileşimli ürün görüntüleyici

Tek dosyalı bir HTML sayfası oluşturun: CDN'den Three.js kullanarak etkileşimli bir 3B ürün görüntüleyici. Ortada, bir kaide üzerinde, stilize edilmiş, tel kafes olmayan geometrik bir ürün yerine geçecek öğe (pahlanmış bir küp veya kapsül) konumlandırın. Sağ tarafta, materyali canlı olarak güncelleyen üç renk örneği ve metalik/mat/metal olmayan bir geçiş düğmesi içeren bir panel; OrbitControls yalnızca yatay dönüşle sınırlı; yumuşak üç noktalı stüdyo aydınlatması ve temas gölgesi. Paneli, kanvasın üzerine bindirilmiş düz HTML/CSS olarak tutun. Boyut değişimini ele alın. YALNIZCA tam HTML dosyasını tek bir kod bloğu içinde çıktı olarak verin.

İlk denemede geçti, 66 saniye, 7.719 token. Renk örnekleri ve metal/mat geçişi malzemeyi canlı olarak güncelliyor ve model istenmeden bir incelik ekledi: ürünü kadrajda tutmak için dönüşün yatay eksene kilitli olduğunu açıklayan bir dipnot.

6. Tek sayfalı 3D iş sitesi

Tek dosyalı bir HTML sayfası oluşturun: CDN'den Three.js kullanan bir tasarım stüdyosu için tek sayfalık bir site. Bölümler: hero, services, work, contact. Tek bir
low-poly soyut şekil hero bölümünün sağ üstünde süzülür ve yavaşça döner; kullanıcı her bölüme kaydırdıkça şekil, o bölümün vurgu rengine uyacak şekilde ölçeğini ve rengini değiştirir.
Bölümler bunun dışında temiz HTML/CSS kullanır
(her bölüm için ağır 3D yok) böylece sayfa hızlı kalır. Yumuşak kaydırma, mobil dostu, yeniden boyutlandırmayı ele alır. YALNIZCA tamamlanmış HTML dosyasını tek bir
kod bloğu içinde çıktıyı verin.

62 saniye, 7.419 token. Model bir stüdyo adı uydurdu, dört bölümü oluşturdu ve tam istendiği yerde alçak poligonlu bir ikosahedron yerleştirdi. Bu isteme yönelik ilk denememiz 8.000 tokenlik çıktı sınırına takıldı ve eksik geldi — bir modeli API üzerinden çağırıyorsanız, tam sayfa istemler için çıktı sınırını 16.000 token veya daha fazlasına ayarlayın.

Onları çalıştırdığımızda ne oldu

Bir prompt başına tek modelde üç çalıştırma bir anekdottur, kıyas ölçütü değildir; bunu, prompttan 3B üretimin 2026 ortasında hangi noktada olduğuna dair bir hızlı kontrol olarak okuyun. Yöntem notları: claude-sonnet-5, 17 Temmuz 2026'da API'si üzerinden, varsayılan ayarlarla, system prompt olmadan; sonuçlar Apple-silicon MacBook üzerinde masaüstü Chrome'da 1280×720 çözünürlükte render edildi; başarılı çalıştırmalarda model, Three.js r128 UMD build'ini kendi başına genel bir CDN'den seçti.

Çalışan beş sayfa arasındaki tek görsel kusur: prompt 1’in alt satırı galaksinin en parlak kısmının üzerine denk geliyor ve neredeyse okunamaz hale geliyor. Bir takip satırı bunu düzeltti — Give the subline a subtle dark text-shadow and raise its font weight so it stays readable over the bright galaxy core. Bu, bu çalışmalardaki genel örüntü: 3D sahnenin kendisi genellikle doğru çıkıyor ve yineleme bütçesi tipografi, örtü kontrastı ve (portföy durumunda) kamera koreografisine gidiyor.

Maliyet bu ölçekte bir sorun değil. Tam test çalıştırması — portföy yeniden denemeleri dahil dokuz nesil, yaklaşık 46.000 çıktı tokenı — bir doların oldukça altında tuttu; bunu, Claude API erişimini resmi token başı fiyatının beşte birine yeniden satan AIReiter üzerinden çalıştırdık, bu yüzden inatçı bir yineleme oturumu bile bozuk para seviyesinde kalıyor.

Kendi 3D web sitesi promptunuzu nasıl yazarsınız

Geçen promptlar beş bölüm paylaşır. Bu beşini de koruyun, ilk denemede geçme olasılığınız belirgin şekilde artar.

1. Tek bir sahne konusu. Bir galaksi, bir torus-düğümü, bir gradyan alanı. Bizim çalıştırmalarımızda ve paylaşılan topluluk örneklerinin çoğunda, bir sayfada birden fazla alakasız 3D özellik isteyen istemler, modellerin gereksinimleri atlamaya başladığı noktadır. 2. Bir hareket sürücüsü. Ya zaman (slowly rotates, driven by a time uniform) ya da kaydırma (as the user scrolls, the camera orbits). Hangisi olduğunu açıkça söyleyin; yalnızca "animated" demek, modelin sıkıcı bir şey seçmesine izin verir. Portföy hatasından not: bir nesneyi kaydırmayla sürmek güvenilirdir, nesneler arasındaki bir yol boyunca kamerayı kaydırmayla sürmek ise işlerin bozulduğu yerdir. 3. Etkileşim. Sürükle-bırak ile döndürme için OrbitControls, testimizin her başarılı çalıştırmasında işe yaradı. Eğer tuvali üzerine metin bindiriyorsanız, kaplama kapsayıcısı için pointer-events: none ve düğmeler için pointer-events: auto isteyin — aksi takdirde metin katmanı, sahne için amaçlanan sürüklemeleri ve tıklamaları yutar. 4. Kaplama içeriği. Tam başlık metnini tırnak içinde verin. Modeller, belirtilmemiş metni, anyway değiştirmeniz gerekecek genel sloganlarla doldurur. 5. Performans ve boyut koruma sınırları. Parçacık sayısı, single quad, no postprocessing veya low-poly, sayfayı hızlı tutar; keep the code compact ise çıktıyı API token sınırları içinde tutar — dokuz çalıştırmamızın ikisi, herhangi bir kod kalitesi sorunu ortaya çıkmadan önce bir çıktı sınırında başarısız oldu.

Modeli düz bir CSS taklidinden ziyade gerçek 3D'ye yönlendiren kelime dağarcığı: Three.js, particle system, GLSL fragment shader, OrbitControls, scroll-driven camera, torus-knot, lerp, fog, point lights. Kelimeler önemlidir çünkü gerçek API adlarıyla eşleşirler; böylece model, doğaçlama yapmak yerine eğitimde gördüğü kütüphanelere karşı yazı yazar.

Yapıştırma kodu kısayolu

Tanımlayabildiğinizin ötesindeki efektler için ikinci bir teknik vardır. CodePen’de bitmiş bir Three.js efekti bulun, ham kodu AI aracınıza yapıştırın ve yalnızca Add this 3D animation to the hero. komutunu verin. Model, parçacığı sizin stack’inize — React bileşenlerine, build kurulumunuza, bölüm yapınıza — çevirir; genellikle zahmetli olan kısım budur. Builder.io, aynı pointer-events: none katmanlama düzeltmesini de içeren 50.000 parçacıklı bir gezegen animasyonuyla bu tekniği rehberinde belgeledi.

Ödül sitesi cilası istediğinizde bu, en yüksek kaldıraçlı yoldur: shader matematiği onu ayarlayan bir insandan gelir ve AI yalnızca entegrasyonu yapar.

Bu komutları hangi araçlar alır

Yukarıdaki altı istem, araç bağımsızdır; HTML/JS yazan ve önizleyen herhangi bir araç bunları çalıştırabilir. Araçların farklılaştığı nokta ise çıktı biçimi ve kod sahipliğidir (17 Temmuz 2026 itibarıyla kontrol edilmiştir):

Bunlardan ikisi özellikle not edilmeyi hak ediyor. VULK'nin iddiası, gerçek React Three Fiber kodu üretmesi — döngüsel bir video başlığı yerine etkileşimli WebGL sahneleri — ve tanıtım siteleri de bunu doğruluyor. Gerçek kod çıktısı ile video başlığı arasındaki fark, herhangi bir "AI 3D website builder" için ödeme yapmadan önce tam olarak kontrol edilmesi gereken ayrımdır. Ve eğer prompt yazmak yerine onlara göz atmayı tercih ediyorsanız, MotionSites Lovable, Bolt, Cursor ve Claude için hazırlanmış kategorize edilmiş bir kütüphane sunuyor. Bir kısmı ücretsiz kopyalanabilir, geri kalanı ise abonelik arkasındadır:

İstemlerin sınırına ulaştığı yer

r/lovable ve r/web_design başlıklarında tekrar eden bir soru, doğru prompt’un mont-fort.com veya Noomo Agency labs sayfaları gibi siteleri yeniden üretip üretemeyeceğidir. Dürüst cevap: yalnızca bir prompt ile değil. Bu siteler, özel GLTF modelleri, sanat yönetmenliği yapılmış aydınlatma ve özel shader çalışmaları üzerine inşa edilmiştir — bir metin prompt’unun yoktan var edemeyeceği varlıklar. Bir prompt’un size sağladığı şey, bu sitelerin *mekanikleri*dir (kaydırma odaklı kameralar, shader arka planları, sönümlenmiş hareket) ve yer tutucu geometriyle birlikte gelir. Gerçek bir model dosyası eklemek bu farkın bir kısmını kapatır, ancak bunun aydınlatması, malzemeleri ve mobil yedekleri hâlâ gerçek tasarım işi olmaya devam eder. Yukarıdaki portföyümüzün uçuşlu gösterim başarısızlığı da aynı dersin küçük bir örneğidir: bir prompt ne kadar koreografili, çok nesneli sahnelere yaklaşırsa, o kadar fazla insan müdahalesi ve yineleme gerekir.

Üç hata modu, bozuk üretimlerin çoğunu kapsar; her biri için tek satırlık bir düzeltme vardır:

• Siyah ekran, görünen hata yok. Genellikle bir ES module/CDN import uyumsuzluğu. Düzeltme istemi: Use a single non-module script tag with the Three.js r128 UMD build from a CDN, no import maps. (r128, test çalıştırmalarımızın istem olmadan seçtiği sürümdür ve hâlâ çalışır; daha yeni Three.js sürümleri UMD yolunu kaldırdı, bu yüzden sabitleme uyumsuzluğu önler.)
• Masaüstünde akıcı, telefonlarda takılıyor. Dizüstü bilgisayarda iyi olan parçacık sayıları. Düzeltme istemi: Halve the particle count on screens narrower than 768px and cap devicePixelRatio at 2.
• 3D sahne çalışıyor ama sayfadaki hiçbir şey tıklanabilir değil. Canvas veya bir kaplama olayları yutuyor. Düzeltme istemi: Set pointer-events: none on the full-screen overlay and re-enable pointer-events: auto on buttons and links.

Ve kendi denemelerimizden bir örnek: 3D bir kart üzerindeki metin ters yansıtılmış şekilde görünüyor. Kamera, düzlemin arka yüzüne bakıyor. Düzeltme istemi: Kart malzemelerini dokunun doğru şekilde aynalanacağı biçimde çift taraflı yapın veya kartları her zaman kameraya bakacak şekilde döndürün.

SSS

Ücretsiz 3D web sitesi promptları var mı?

Evet. Bu gönderideki altı örnek eksiksizdir ve kopyalamak ücretsizdir; ayrıca DocsBot ve MotionSites'in ücretsiz katmanı daha fazlasını sunar. Ücretli kütüphaneler esasen size miktar ve önceden test edilmiş çeşitlilik satın alır, farklı bir prompt türü değil.

Bu promptlar Lovable veya Bolt’ta çalışır mı?

Evet, tek bir değişiklikle: "tek dosyalık HTML" gereksinimini kaldırın, çünkü bu platformlar React projeleri oluşturur. Geri kalan her şeyi — sahne konusu, hareket tetikleyicisi, etkileşim ve performans güvenlik sınırı — doğrudan aktarabilirsiniz.

3D bir web sitesi promptu kullanmak için Three.js bilmem gerekiyor mu?

Üretim için değil, yineleme için biraz. Yukarıdaki istemler gerekli Three.js sözlüğünü yerleştiriyor. OrbitControls ya da bir fragment shader’ın ne olduğunu bilmek, körlemesine yeniden üretmek yerine hassas değişiklikler istemenize yardımcı olur.

3D bir web sitesi için en iyi yapay zeka aracı nedir?

Tek dosyalık bir efekt veya hero section için doğrudan Claude kullanın: kaynak kodu sizde kalır ve token başına ödeme yaparsınız. Backend’e sahip barındırılan bir site için, ücretsiz katmanlarında Lovable veya Bolt; ya da özellikle dışa aktarılmış React Three Fiber kodu istiyorsanız VULK.

3D bir kahraman bölümü performansa veya SEO’ya zarar verir mi?

Yalnızca izin verirseniz. 3D’yi tek bir sahnede tutun, yukarıdaki mobil güvenlik önlemlerini ekleyin ve başlığınızı ile gövde metninizi, altı promptun da yaptığı gibi, tuvalin üzerinde gerçek HTML olarak tutun. Tarayıcılar metin katmanını okur ve Core Web Vitals büyük ölçüde sayfanın başka neleri yüklediğine bağlıdır.