30 Saniyede Tek Prompt ile 3D Website (6 Test)

3D website prompt kütüphanelerinin çoğu ya prompt metnini ücretli tutuyor ya da yalnızca demo videosunu gösterip asıl komutları paylaşmıyor. Burada altı promptun tamamı var: Claude'a doğrudan yapıştırabilir, tek satırı değiştirerek Lovable, Bolt veya Cursor için uyarlayabilirsiniz. Altısının da canlı modelde çalıştırıldı; beşi çalışan Three.js sayfaları üretti. Aşağıdaki ekran görüntülerinin tamamı da maket değil, bu üretimlerden alınmış gerçek render'lar.

Hemen kopyalayabileceğiniz 6 adet 3D website promptu

Her prompt, Three.js'in CDN üzerinden yüklendiği tek dosyalı bir HTML sayfası istiyor. Bu önemli bir kısıt: Tek dosya herhangi bir tarayıcıda yerelde açılır, geliştiriciye iletmesi veya özel kod bloğuna eklemesi kolaydır. Ayrıca modeli import'ları proje geneline dağıtmak yerine sahneyi kendi içinde çalışır halde tutmaya zorlar.

1. Parçacık galaksili hero alanı

Create a single-file HTML page with an interactive 3D particle galaxy hero
section using Three.js (load it from a CDN). Requirements: about 50,000
particles forming a spiral galaxy that slowly rotates; particle colors shift
from warm amber at the core to violet at the outer rim; add OrbitControls so
visitors can drag to rotate and zoom; overlay a centered hero headline that
says "Build Beyond Flat" with a short subline and a CTA button; set
pointer-events: none on the overlay container and pointer-events: auto on
the CTA button so the galaxy stays draggable behind the text; dark
background #0a0616; handle window resize. Output ONLY the complete HTML
file in a single code block.

27 saniyede, 3.692 çıktı token'ıyla üretildi. Galaksi dönüyor, sürükleyerek yörüngede gezinme çalışıyor ve metin katmanının üzerinden CTA butonuna tıklanabiliyor. Ancak gerçek bir kusuru var: Alt başlık, galaksinin parlak çekirdeğinin üzerine denk geliyor ve okunması zorlaşıyor. Çözümü aşağıdaki test notlarında.

2. Kaydırmayla ilerleyen ürün vitrini

Create a single-file HTML page: a scroll-driven 3D product showcase using
Three.js loaded from a CDN. Requirements: a floating chrome torus-knot
centered in a fixed full-screen canvas; the page has 4 full-screen scroll
sections, and as the user scrolls the camera orbits the object a full 360
degrees while the object material color smoothly transitions per section
(silver, deep blue, emerald, copper); each section shows a headline and
one-line copy pinned to the left over the canvas; smooth interpolation (lerp)
on scroll so motion feels damped; dark studio look with two colored
spotlights and a soft ground shadow; handle resize. Output ONLY the complete
HTML file in a single code block.

Çalışan beş üretim arasındaki en ağır prompt buydu: 63 saniye ve 7.023 çıktı token'ı. Buna karşılık sonuç en etkileyici olandı. Sayfayı kaydırdıkça kamera objenin çevresinde dolaşıyor; malzeme rengi de istenen şekilde bölüm bazında değişiyor:

Sönümlü lerp interpolasyonu da beklendiği gibi uygulanmış. Hareket, kaydırmayı zorla yöneten bir slayt gösterisinden çok ajans sitelerindeki ağır ve pahalı hissi veriyor.

3. GLSL akışkan gradyan arka planı

Create a single-file HTML page with a full-screen animated WebGL fluid
gradient background using a custom GLSL fragment shader with Three.js loaded
from a CDN. Requirements: slow-moving organic blobs blending deep blue,
purple and coral, driven by a time uniform and simplex-style noise in the
fragment shader; add subtle film grain in the shader; overlay a centered
glass card (backdrop blur) with a white headline "Ship Immersive Sites", one
subline, and two buttons; the animation must stay smooth on a laptop (single
quad, no postprocessing passes); handle resize. Output ONLY the complete
HTML file in a single code block.

31 saniye, 3.830 token ve ilk denemede başarılı sonuç. single quad, no postprocessing passes satırı burada performans için emniyet supabı görevi görüyor. Bu kısıt olmadığında modeller, entegre GPU'larda kare hızını ciddi biçimde düşüren EffectComposer ve bloom geçişlerine yönelme eğiliminde oluyor.

4. 3D portföy uçuşu: en çok uğraştıran örnek

Create a single-file HTML page: a 3D portfolio using Three.js from a CDN.
Six floating project cards (rounded planes with placeholder gradient
textures and project titles rendered onto the card texture) arranged along
a gentle curve in 3D space. As the user scrolls, the camera flies forward
along the curve, bringing each card into focus one at a time; the camera
must keep the focused card fully in frame with comfortable margin and never
pass through a card; the focused card scales up slightly. Neighboring cards
stay partially visible for depth. Add subtle fog, a dark background, damped
scroll interpolation. Clicking a focused card opens a link. Handle resize.
Keep the code compact: reuse one card-building function, no comments.
Output ONLY the complete HTML file in a single code block.

Bu prompt üç deneme aldı ve hâlâ yayına hazır değil. Yine de yayınlamamızın nedeni yukarıdaki görüntüde açıkça görülüyor: Kart render ediliyor, ancak kamera kartın arkasında kaldığından başlık ters okunuyor. İlk deneme, dosyanın ortasında 16.000 token'lık çıktı sınırımıza takıldı. İkinci deneme — promptta keep the code compact satırının bulunma sebebi de bu — kartları render etti ama kamerayı doğrudan kartların içinden geçirdi. Üçüncü deneme kırpılma sorununu çözdü, bu kez kameranın kaydırmayla bağlantısını kaybetti. Kamera yolu koreografisi ve kart başına doku üretmek, modeller için yukarıdaki sahnelerden gerçekten daha zor. Bir hata ayıklama oturumu planlayın veya tasarımı hover durumlarına sahip statik, kavisli bir ızgaraya sadeleştirin.

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

Create a single-file HTML page: an interactive 3D product viewer using
Three.js from a CDN. Center a stylized wireframe-free geometric product
stand-in (a beveled cube or capsule) on a pedestal. Right-side panel with
three color swatches and a metal/matte toggle that update the material live;
OrbitControls limited to horizontal rotation; soft three-point studio
lighting and a contact shadow. Keep the panel plain HTML/CSS overlaying the
canvas. Handle resize. Output ONLY the complete HTML file in a single code
block.

İlk denemede başarılı: 66 saniye ve 7.719 token. Renk örnekleri ile metal/mat anahtarı malzemeyi anlık güncelliyor. Model ayrıca istenmeden hoş bir ayrıntı ekledi: Ürünün kadrajda kalması için dönüşün yatay eksenle sınırlandırıldığını anlatan bir dipnot.

6. Tek sayfalık 3D kurumsal site

Create a single-file HTML page: a one-page site for a design studio with
Three.js from a CDN. Sections: hero, services, work, contact. A single
low-poly abstract shape floats top-right of the hero and slowly rotates;
as the user scrolls into each section the shape morphs its scale and color
to match that section accent. Sections otherwise use clean HTML/CSS
(no heavy 3D per section) so the page stays fast. Smooth scroll, mobile
friendly, handle resize. Output ONLY the complete HTML file in a single
code block.

62 saniye, 7.419 token. Model bir stüdyo adı uydurdu, dört bölümü oluşturdu ve düşük poligonlu ikosahedronu tam istenen noktaya yerleştirdi. Bu prompttaki ilk denememiz 8.000 token'lık çıktı sınırına çarptı ve eksik geldi. Bir modele API üzerinden erişiyorsanız, tam sayfa promptlarında çıktı limitini 16.000 token veya üzerine ayarlayın.

Promptları çalıştırdığımızda ortaya çıkan tablo

Her prompt için tek bir modelde yapılan üç deneme, benchmark değil; bunu prompttan 3D üretiminin 2026 ortasındaki durumuna dair bir kontrol testi olarak değerlendirin. Yöntem notları: 17 Temmuz 2026'da API üzerinden claude-sonnet-5, varsayılan ayarlar, system prompt kullanılmadan çalıştırıldı. 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, kamuya açık bir CDN'den Three.js r128 UMD yapısını kendisi seçti.

Çalışan beş sayfadaki tek görsel kusur, 1 numaralı promptun alt başlığının galaksinin en parlak kısmına denk gelerek neredeyse okunamaz hale gelmesiydi. Tek bir takip satırı sorunu çözdü: Give the subline a subtle dark text-shadow and raise its font weight so it stays readable over the bright galaxy core. Bu denemelerin ortak deseni şu: 3D sahnenin kendisi çoğunlukla doğru çıkıyor; iterasyon bütçesi tipografi, katman kontrastı ve portföy örneğindeki gibi kamera koreografisine gidiyor.

Bu ölçekte maliyet önemsiz. Portföy tekrarları dahil dokuz üretim ve yaklaşık 46.000 çıktı token'ından oluşan tüm test bir doların çok altında tuttu. Testi, Claude API erişimini resmi token başı fiyatın beşte biriyle yeniden satan AIReiter üzerinden gerçekleştirdik; dolayısıyla inatçı bir iterasyon oturumu bile bozuk para seviyesinde kalıyor.

Kendi 3D website promptunuzu nasıl yazarsınız?

Başarılı olan promptların ortak beş bileşeni var. Beşini de korursanız ilk denemede sonuç alma olasılığınız belirgin biçimde artar.

1. Tek bir sahne öğesi. Galaksi, torus-knot veya gradyan alanı gibi. Denemelerimizde ve toplulukta paylaşılan örneklerin çoğunda, tek sayfada birbiriyle ilgisiz birkaç 3D özellik isteyen promptlar modellerin gereksinimleri atlamaya başladığı nokta oluyor.
2. Hareketin sürücüsü. Ya zaman kullanın (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ıradan bir çözüm seçmesine alan açar. Portföy hatasından çıkan not: Bir objeyi kaydırmayla hareket ettirmek güvenilir; kamerayı objeler arasındaki bir yol boyunca kaydırmayla hareket ettirmek ise işlerin bozulduğu yer.
3. Etkileşim biçimi. Testimizin başarılı tüm üretimlerinde sürükleyerek döndürme için OrbitControls sorunsuz çalıştı. Canvas üzerine metin bindiriyorsanız, katman kapsayıcısında pointer-events: none, butonlarda ise pointer-events: auto isteyin. Aksi halde metin katmanı, sahne için tasarlanan sürükleme ve tıklama olaylarını yakalar.
4. Katman içeriği. Başlık metnini tırnak içinde net olarak verin. Belirtilmeyen metinleri model, zaten sonradan değiştirmek zorunda kalacağınız genel sloganlarla doldurur.
5. Performans ve boyut sınırları. Parçacık sayısı, single quad, no postprocessing veya low-poly gibi ifadeler sayfayı hızlı tutar. keep the code compact ise çıktının API token limitine sığmasına yardımcı olur. Dokuz denememizin ikisi, kod kalitesiyle ilgili bir sorun yaşanmadan önce çıktı sınırına takıldı.

Modeli düz bir CSS taklidi yerine gerçek 3D üretmeye yönlendiren sözlük şöyle: Three.js, particle system, GLSL fragment shader, OrbitControls, scroll-driven camera, torus-knot, lerp, fog, point lights. Bu kelimeler önem taşıyor çünkü gerçek API adlarıyla eşleşiyorlar. Böylece model, eğitiminde gördüğü kütüphanelere göre kod yazıyor; sıfırdan doğaçlama yapmıyor.

Kodu yapıştırarak ilerlemek

Tarif etmekte zorlanacağınız efektler için ikinci bir yöntem var. CodePen'de tamamlanmış 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. promptunu verin. Model kod parçacığını kullandığınız teknoloji yığınına — React bileşenlerinize, build yapınıza ve bölüm düzeninize — uyarlar. Genellikle yorucu olan kısım da budur. Builder.io, aynı pointer-events: none katmanlama çözümünü de içeren 50.000 parçacıklı gezegen animasyonu örneğiyle bu yöntemi rehberinde anlattı.

Ödüllü site estetiğine yaklaşmak istediğinizde en yüksek kaldıraçlı yöntem bu: Shader matematiği, onu incelikle ayarlamış bir insandan gelir; AI ise yalnızca entegrasyonu yapar.

Bu promptlar hangi araçlarda çalışır?

Yukarıdaki altı prompt araçtan bağımsızdır; HTML/JS yazıp önizleyebilen her araç bunları çalıştırabilir. Araçlar arasındaki fark, çıktı biçimi ve kod sahipliğinde ortaya çıkıyor. Bilgiler 17 Temmuz 2026 itibarıyla kontrol edildi:

Bu araçlardan ikisi için ek not düşmek gerekir. VULK, döngüye giren video header yerine etkileşimli WebGL sahneleri olan gerçek React Three Fiber kodu ürettiğini söylüyor; sergilediği siteler de bunu destekliyor. Herhangi bir "AI 3D website builder" için ödeme yapmadan önce bakılması gereken ayrım tam olarak bu: Video header mı, gerçek kod çıktısı mı? Prompt yazmak yerine kütüphane taramayı tercih ediyorsanız, MotionSites, Lovable, Bolt, Cursor ve Claude'a yönelik kategorize edilmiş bir koleksiyon sunuyor. Bir kısmı ücretsiz kopyalanabiliyor, geri kalanı abonelik gerektiriyor:

Promptların yetersiz kaldığı nokta

r/lovable ve r/web_design başlıklarında sıkça şu soru soruluyor: Doğru prompt, mont-fort.com veya Noomo Agency labs sayfalarındaki gibi siteler üretebilir mi? Dürüst yanıt, yalnızca promptla hayır. Bu siteler özel GLTF modelleri, sanat yönetimiyle kurgulanmış ışıklar ve özgün shader çalışmalarıyla yapılıyor; bir metin promptu bu varlıkları yoktan var edemez. Promptun size kazandırdığı şey, bu sitelerin mekanikleri: kaydırmaya bağlı kameralar, shader arka planları ve sönümlü hareketler; geometri ise yer tutucu olarak kalır. Gerçek bir model dosyası eklemek farkın bir bölümünü kapatır, ancak ışıklandırma, malzemeler ve mobil yedek çözümler hâlâ gerçek tasarım işidir. Yukarıdaki portföy uçuşu hatası da bunun küçük ölçekli bir örneği: Prompt, koreografisi yapılmış çok objeli sahnelere yaklaştıkça daha fazla insan iterasyonu gerektiriyor.

Bozuk üretimlerin çoğu üç hata türüne giriyor ve her birinin tek satırlık bir çözümü var:

• Siyah ekran, görünür hata yok. Genellikle ES module/CDN import uyumsuzluğudur. Çözüm promptu: Use a single non-module script tag with the Three.js r128 UMD build from a CDN, no import maps. (r128, testlerimizde modelin istenmeden seçtiği sürümdü ve hâlâ çalışıyor. Daha yeni Three.js sürümleri UMD yolunu kaldırdı; sürümü sabitlemek uyumsuzluğu önler.)
• Masaüstünde akıcı, telefonda takılıyor. Dizüstü bilgisayarda sorun yaratmayan parçacık sayıları bunun tipik nedenidir. Çözüm promptu: Halve the particle count on screens narrower than 768px and cap devicePixelRatio at 2.
• 3D sahne çalışıyor ama sayfadaki hiçbir şeye tıklanamıyor. Canvas veya bir katman olayları yakalıyordur. Çözüm promptu: Set pointer-events: none on the full-screen overlay and re-enable pointer-events: auto on buttons and links.

Bir de kendi denemelerimizden: 3D kart üzerindeki metin aynalanmış render ediliyor. Kamera düzlemin arka yüzüne bakıyordur. Çözüm promptu: Make card materials double-sided with the texture mirrored correctly, or rotate cards to always face the camera.

SSS

Ücretsiz 3D website promptları var mı?

Evet. Bu yazıdaki altı prompt eksiksiz ve ücretsiz olarak kopyalanabilir. DocsBot ile MotionSites'ın ücretsiz katmanı da ek seçenekler sunuyor. Ücretli kütüphaneler farklı türde promptlar değil, esas olarak daha fazla sayıda ve önceden test edilmiş çeşitlilik sağlıyor.

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

Evet, tek bir düzenlemeyle: Bu platformlar React projeleri oluşturduğundan single-file HTML gereksinimini kaldırın. Sahne öğesi, hareket sürücüsü, etkileşim ve performans sınırı dahil diğer her şeyi aynı bırakabilirsiniz.

3D website promptu kullanmak için Three.js bilmek gerekir mi?

Üretim için gerekmez; iterasyon için biraz bilmek faydalıdır. Yukarıdaki promptlar gerekli Three.js sözlüğünü zaten içeriyor. OrbitControls veya fragment shader'ın ne olduğunu bilmek, körlemesine yeniden üretmek yerine net değişiklikler istemenizi sağlar.

3D website için en iyi AI aracı hangisi?

Tek dosyalı bir efekt veya hero bölümü için doğrudan Claude: Kaynak kod sizde kalır ve token başına ödeme yaparsınız. Backend'e sahip barındırılan bir site için ücretsiz katmanlarındaki Lovable veya Bolt'u; özellikle dışa aktarılabilir React Three Fiber kodu istiyorsanız VULK'ü değerlendirin.

3D hero alanı performansa veya SEO'ya zarar verir mi?

Yalnızca kontrolü elden bırakırsanız. 3D'yi tek sahneyle sınırlayın, yukarıdaki mobil korumaları ekleyin ve altı promptun tamamında olduğu gibi başlık ile gövde metnini canvas üzerinde gerçek HTML olarak tutun. Tarayıcı botları metin katmanını okur; Core Web Vitals ise büyük ölçüde sayfanın yüklediği diğer kaynaklara bağlıdır.