Claude, Cursor ve daha fazlası için yüzlerce hazır yeteneği gözden geçirin.
Three.js Çoğu 3D Web Deneyimini Güçlendiriyor ve Artık Kodlamanız Gerekmiyor
Three.js, Apple ürün sayfalarından bağımsız tarayıcı oyunlarına kadar açık web üzerindeki tüm 3D içeriğin %70'inden fazlasını oluşturuyor. 2025 yılına kadar, bununla bir şeyler inşa etmek WebGL, shader'lar ve 200 sayfalık bir dokümantasyon sitesini öğrenmek anlamına geliyordu. Şimdi, Vibe Skills üzerindeki yapay zeka yetenekleri, geliştirici olmayanların bir hafta sonunda çalışan bir Three.js sahnesi sunmasını sağlıyor - matematik derecesine veya Stack Overflow'da kaybolmaya gerek yok.
Bu rehber, hangi yapay zeka yeteneklerinin gerçek Three.js çıktıları ürettiğini, gerçekten ne inşa edebileceğinizi (oyun ortamları, ürün görüntüleyicileri, ana sahneler) ve elle bir THREE.PerspectiveCamera oluşturucusuyla hiç uğraşmadan "bir fikrim var"dan "alan adımdaki canlı yayında" noktasına nasıl geleceğinizi gösteriyor.
Claude, Cursor ve daha fazlası için yüzlerce hazır yeteneği gözden geçirin.
Neden Three.js Eskiden Geliştirici Olmayanlar İçin Ulaşılamazdı
Three.js, tarayıcının düşük seviyeli 3D grafik API'si olan WebGL'in JavaScript sarmalayıcısıdır. Doğrudan kullanmak için şunları anlamanız gerekiyordu:
- Sahne grafikleri (kameralar, ışıklar, mesh'ler ve nasıl iç içe geçtikleri)
- Shader'lar (GLSL'de yazılmış köşe ve fragman programları)
- Geometri matematiği (matrisler, kuaterniyonlar, dünya uzayı ve yerel uzay)
- Performans bütçeleri (çizim çağrıları, poligon sayıları, doku belleği)
Tipik bir "Merhaba Küp" öğreticisi, dönen bir şekil görmeden önce 800 satır JavaScript çalıştırıyordu. Active Theory veya Resn gibi ajansların gerçek üretim sahneleri, özel shader işlem hatlarıyla 5.000 ila 15.000 satır çalıştırıyordu.
Bu engel, Three.js'i saatte 120 ila 250 dolar kazanan WebGL uzmanlarının elinde tuttu. Tasarımcılar, pazarlamacılar, kurucular ve öğrenciler çalışmaları hayranlıkla izleyebilirlerdi ama asla gönderemezlerdi.
2026'daki değişim: Cursor ve Claude gibi yapay zeka kodlama araçları artık düz İngilizce bir özet okuyup çalışan react-three-fiber sahneleri üretebiliyor. Yapay zeka yetenekleri bu iş akışını tek tıklamayla yüklenen paketlere dönüştürüyor - yapı, aydınlatma, kamera kontrolleri, performans optimizasyonu, hepsi önceden hazırlanmış.
Claude, Cursor ve daha fazlası için yüzlerce hazır yeteneği gözden geçirin.
Three.js + Yapay Zeka Yetenekleriyle Neler İnşa Edebilirsiniz
WebGİ'yi elle kodlamadan beş somut çıktı türü sunabilirsiniz. Her birinin iş akışını bir araya getiren bir Vibe Skills kategorisi var.
| Çıktı türü | Gerçek dünya örneği | Oluşturma süresi (yapay zeka yeteneğiyle) | Sıfırdan oluşturma süresi |
|---|---|---|---|
| Oyun ortamı | Tarayıcı yarış oyunu, mini platform oyunu, kaçış odası | 4-12 saat | 2-6 hafta |
| Ürün görüntüleyici | 360 derecelik spor ayakkabı, kulaklık yapılandırıcı, saat yüzü | 2-6 saat | 1-3 hafta |
| 3D ana sahne | Animasyonlu açılış sayfası arka planı, kaydırmayla yönlendirilen 3D | 3-8 saat | 1-2 hafta |
| Etkileşimli infografik | Dönen dünya, patlatılmış motor diyagramı, veri küresi | 4-10 saat | 2-4 hafta |
| AR / Deneme web görünümü | Gözlük önizlemesi, oda yerleşimi, ölçekli model | 6-15 saat | 3-6 hafta |
Sıkıştırma kabaca 10 ila 20 kat. Yetenekler, yaratıcı yönelime odaklanmanız için rutin işleri (sahne kurulumu, ışıklar, kontroller, duyarlı boyutlandırma) halleder.
Burada en ilgili iki Vibe Skills kategorisi:
- 3D Oyunlar - Three.js aracılığıyla tam oynanabilir 3D oyunlar (yarış, bulmaca, mini platform, tarayıcı FPS prototipleri)
- Etkileşimli 3D - ürün yapılandırıcıları, 3D kahramanlar, kaydırmayla yönlendirilen sahneler, veri görselleştirmeleri
Vibe Skills'te 5 Yapay Zeka Three.js Yeteneği (WebGL Gerekmez)
Vibe Skills'teki 3D Oyunlar kategorisi, Three.js çıktısı isteyen geliştirici olmayanlar için özel olarak oluşturulmuş yeteneklere sahiptir. Her biri react-three-fiber rutin işleri, varlık işlem hattı ve Cursor uyumlu bir iş akışı dosyası ile birlikte gelir.
| Yetenek türü | Ne üretir | En uygun olduğu kullanım |
|---|---|---|
| 3D Ana Sahne Oluşturucu | Next.js bileşeni olarak kaydırmayla yönlendirilen Three.js sahnesi | Açılış sayfaları, portföy siteleri, ajans ana sayfaları |
| Tarayıcı Yarış Oyunu Başlatıcı | Parkur, fizik, kontrollerle tam yarış oyunu | Oyun prototipleri, marka aktivasyonları, hackathonlar |
| Ürün Yapılandırıcı | Malzeme/renk değiştirmeli 360 derecelik görüntüleyici | E-ticaret mağazaları, ürün lansmanları, kickstarter sayfaları |
| 3D Oyun Ortamı Paketi | Önceden oluşturulmuş sahneler (orman, zindan, bilim kurgu, şehir) | Bağımsız oyunlar, okul projeleri, anlatısal deneyimler |
| Etkileşimli 3D Logo Tanıtımı | Kamera animasyonuyla 3D model olarak logo | Web girişleri, marka filmleri, konferans açılışları |
Vibe Skills'teki 3D Oyunlar yeteneklerine göz atın canlı önizlemeleri görmek için. Her yetenek, yüklemeden önce gerçek çıktıyı görmeniz için bir video demosuna sahiptir.
Çıktı, herhangi bir modern çerçevede çalışır: Next.js, Astro, Vite, düz HTML. Satıcı kilidi yok.
Bir Hafta Sonunda İlk Three.js Sahnenizi Oluşturun
Sıfırdan kendi alan adınızda canlı bir Three.js sahnesine ulaşmanın pratik yolu budur.
Adım 1: Vibe Skills'te Doğru Yeteneği Seçin
/category/3d-games adresinden başlayın ve çıktı türüne göre filtreleyin. Bir ana sahne istiyorsanız, 3D Ana Sahne Oluşturucuyu alın. Oynanabilir bir oyun istiyorsanız, Tarayıcı Yarış Oyunu Başlatıcı veya Oyun Ortamı Paketini alın.
Canlı önizlemeyi okuyun, demo videosunu izleyin, çerçeve uyumluluğunu kontrol edin (çoğu Next.js / Vite için react-three-fiber ile birlikte gelir). Yeteneği Cursor veya Claude Code'a yükleyin.
Adım 2: Cursor'ı (veya Claude Code'u) Yükleyin
Her iki araç da yapay zeka yeteneklerini çalıştırabilir. Cursor, kod önizleme paneliyle görsel düzenleme için daha iyidir. Claude Code, terminal tabanlı çalışma ve ajan iş akışları için daha iyidir. Birini seçin - 5 dakikada yükleyin.
Adım 3: Sahneyi Oluşturun
Projeyi düzenleyicinizde açın, yeteneği çağırın, istediğiniz şeyi düz İngilizce olarak tanımlayın: "Koyu lacivert arka plana sahip dönen kristal ana sahnesi, süzülme efekti, yavaş otomatik dönüş." Yapay zeka yeteneği, ışıklar, kamera, kontroller ve duyarlı boyutlandırma dahil olmak üzere tam Three.js kodunu üretir.
Adım 4: Varlıklarınızı Değiştirin
Kendi 3D modellerinizi (.glb veya Sketchfab, Polyhaven veya Blender dışa aktarımlarından .gltf), dokularınızı (Polyhaven ücretsiz CC0) ve marka renklerinizi ekleyin. Yetenek, sahneyi yeniden yapılandırmamanız için varlık yuvaları içerir.
Adım 5: Mobil İçin Optimize Edin
Yetenek mobil yedeklemelerle birlikte gelir: düşük poligon sayıları, daha basit ışıklar, zayıf GPU'larda sınırlı kare hızları. Gerçek bir telefonda test edin (Chrome DevTools mobil emülatörü GPU sorunlarını kaçırır). Temel olarak 2 yıllık bir iPhone'da 60 FPS hedefleyin.
Adım 6: Dağıtın
Vercel veya Netlify'a gönderin. Three.js sahneleri statik JavaScript'tir - sunucu yok, GPU örneği yok, özel barındırma yok. 60 saniyenin altında canlı URL.
Vibe Skills'te 3D'yi göz atın →
Sıkça Sorulan Sorular
Yapay Zeka Three.js yeteneklerini kullanmak için WebGL bilmem gerekiyor mu?
Hayır. Vibe Skills üzerindeki yapay zeka yetenekleri WebGL'i tamamen sarmalar. Sahneyi düz İngilizce olarak tarif edersiniz, yetenek çalışan react-three-fiber kodu üretir ve kendi varlıklarınızı eklersiniz. En derinlemesine gittiğiniz yer renk değerlerini ve model dosya yollarını düzenlemektir.
Sahne mobilde sorunsuz çalışacak mı?
Evet, yetenek mobil optimizasyonları içeriyorsa. Tüm Vibe Skills 3D sahne oluşturucuları cihaz katmanı yedeklemeleriyle birlikte gelir: zayıf telefonlarda düşük poligonlu mesh'ler, arka plan sekmelerinde sınırlı kare hızları ve yavaş yüklenen dokular. Hedef, 2 yıllık bir iPhone'da 60 FPS'dir. Göndermeden önce test edin.
Ham Three.js mi yoksa react-three-fiber mi kullanmalıyım?
react-three-fiber kullanın. Three.js için bir React sarmalayıcısıdır ve kodu bildirimsel ve %40-60 daha kısa hale getirir. Vibe Skills 3D yetenekleri, Next.js, Astro ve Vite ile temiz bir şekilde birleştiği için varsayılan olarak react-three-fiber kullanır. Ham Three.js yalnızca saf JS motorları veya aşırı optimizasyon için değerlidir.
Blender veya Sketchfab'dan kendi 3D modellerimi kullanabilir miyim?
Evet. Blender'dan .glb veya .gltf olarak dışa aktarın veya Sketchfab ve Polyhaven'dan .glb dosyalarını indirin. Varlık klasörüne bırakın, yeteneği dosyaya işaret edin, tamam. 3D sahne yeteneklerine göz atın varlık yuvası örneklerini görmek için.
Bir Three.js yeteneğinin maliyeti, bir geliştirici kiralamaya göre ne kadar?
Bir WebGL serbest çalışanı saatte 120 ila 250 dolar talep ediyor ve temel bir ana sahne 2.000 ila 8.000 dolar arasında çalışıyor. Bir Vibe Skills aboneliği ayda 39 dolardan başlıyor ve sınırsız 3D yeteneği içeriyor. Başabaş noktası bir sahnedir.
Kod yazmadan tam bir oyun inşa edebilir miyim?
Prototip için evet, gönderiye hazır oyunlar için çoğunlukla evet. Vibe Skills'teki Tarayıcı Yarış Oyunu Başlatıcı ve Oyun Ortamı Paketi çalışan fizik, kontroller ve puanlama ile birlikte gelir. Seviyeler, sanat ve ses eklersiniz. Üretim cilası (çok oyunculu, kaydetme durumu, analitik) hala bir geliştiriciden fayda sağlar.
Yapay zeka tarafından üretilen Three.js kodu performanslı olacak mı?
Yetenek performans ön ayarları içeriyorsa, evet. Çizim çağrısı bütçeleri, görüş alanı kesme, örneklenmiş mesh'ler ve doku sıkıştırma içeren yetenekleri arayın. Vibe Skills 3D yetenekleri varsayılan olarak dördünü de içerir. Yeni başlayanlardan elle kodlanmış sahneler genellikle daha yavaştır çünkü optimizasyonlar belgelerde gizlenmiştir.
3D Web Demo'larını İzlemeyi Bırakın. Kendi Kendi Gönderinizi Yapın.
Three.js, bir on yıl boyunca web'de 3D'ye geçiş kapısıydı. Yapay zeka yetenekleri kapıyı kırdı. Artık WebGL bilgisine, bir geliştirici işe alma veya 6 aylık bir öğrenme süresine ihtiyacınız yok. İhtiyacınız olan şey net bir sahne açıklaması, Vibe Skills'ten bir yetenek ve bir hafta sonu.
Tasarımcılar 3D ana sahneler sunar. Kurucular ürün görüntüleyicileri sunar. Öğrenciler tarayıcı oyunları sunar. Pazarlamacılar etkileşimli infografikler sunar. Çubuk şimdi GLSL sözdizimi değil, yaratıcı yönelmedir.
Vibe Skills'te Three.js ve 3D Oyunlar yeteneklerine göz atın →
Web 3D'ye gidiyor. Vibe Skills'te ilk Three.js yeteneğinizi yükleyin ve bu hafta sonu bir sahne gönderin.