Gerçek zamanlı Plan: Gemini ile 3D web siteleri
Prompt oluşturucuları unutun. İşte size sıfırdan, adım adım tam etkileşimli bir plan. Boş bir sohbetten etkileşimli 3D deneyime kadar – sadece gerçek zamanlı yapay zeka sohbeti kullanarak.
Adım 1: Ortamın hazırlanması
Bilgisayarınıza hiçbir şey kurmanız gerekmiyor. Tüm süreç yalnızca tarayıcıda çalışacak. En hızlı yineleme için iki sekmeyi yan yana açın:
- Ücretsiz Google Gemini’yi açın (gemini.google.com).
- CodePen.io veya PlayCode.io çevrimiçi kod düzenleyicisini açın. Burada oluşturulan kodu dosya olarak HTML kaydetmeden, anında test edeceğiz.
Adım 2: Başlangıç Master-Prompt
İlk prompt en önemlisidir. Gemini için sınırları tanımlar ve teknolojik temeli kurar (CDN’den Three.js, tek dosyalı yapı). Bu metni kopyalayın ve Gemini’ye yapıştırın:
Sen WebGL ve Three.js kütüphanesinde uzmansın. Görevin, çalışır bir 3D sahne için tam bir HTML kodu yazmak (içinde CSS ve JS de dahil). Gereksinimler: 1. Ortada dönen bir 3D nesne oluştur (TorusKnot veya Icosahedron). 2. Three.js ve OrbitControls’u script etiketiyle CDN bağlantısı (unpkg veya cdnjs) üzerinden içe aktar. 3. ‘Tek dosya’ olmalı – her şey tek bir kod parçasında olsun, import map kullanma. 4. Harici modeller (GLTF) veya dokular (JPG/PNG) kullanma. Her şeyi kod içinde yordamlı olarak oluştur (MeshStandardMaterial, ışıklar, renkler). 5. Noktasal ışıklar (PointLight) ve yumuşak gölgeler ekle. 6. Arka planı çok koyu bir renge ayarla.
Adım 3: Çalıştırma ve kontrol
Gemini kodu oluşturduğunda, kod kutusunun sağ üst kısmından kopyalayın. İkinci sekmeye (örneğin CodePen) geçin ve tüm kodu SADECE HTML alanına yapıştırın (CSS ve JS alanlarını boş bırakın, kodumuz her şeyi içinde barındırıyor).
İpucu: Hemen dönen bir 3D nesne göreceksiniz. Fareyle üzerine tıklayıp sürüklemeyi deneyin – OrbitControls sayesinde sahneyi döndürebilirsiniz!
Adım 4: Gerçek zamanlı yineleme
Şimdi gerçek zamanlı asıl çalışma başlıyor. Gemini’ye geri dönün. Yeni bir kod yazdırmanıza veya ona eski kodu göndermenize gerek yok (hala hatırlıyor). Sadece onunla sohbet edin ve taleplerinizi adım adım ekleyin. Sırasıyla şu mesajları deneyin:
Bu harika. Şimdi nesnenin malzemesini düz renkten, neon mavi ve pembe renklerde parlayan bir “Wireframe”e (çerçeve/iskelet model) dönüştür.
Mükemmel. Şimdi sahnenin arka planına uzaydaki yıldızları simüle edecek, yavaşça dönen bir parçacık sistemi (Points ve PointsMaterial) ekle.
Harika. Ve şimdi de, fareyi oynattığımda ışıkların renkleri ekran üzerindeki imleç konumuna göre yumuşak bir şekilde değişsin.
Adım 5: Sorun çözme (Debugging)
Kodu gerçek zamanlı düzenlerken, yapay zeka bazen hata yapar ve CodePen’de yalnızca siyah veya beyaz bir ekran görürsünüz. Programlama bilmenize gerek yok, sorunu sohbette tarif etmeniz yeterli:
Gönderdiğin son kod çalışmıyor. Ekran tamamen siyah ve hiçbir şey dönmüyor. OrbitControls’u doğru şekilde yükleyip yüklemediğini ve kameranın nesnenin içinde olup olmadığını kontrol et. Bunu düzeltmeyi dene ve bana tamamıyla düzeltilmiş hâlini gönder.
Bitti! Projenin kaydedilmesi
Sonuçtan %100 emin olduğunuzda, CodePen’den son çalışan kodu kopyalayın. Windows’ta Not Defteri’ni (Notepad) veya Mac’te TextEdit’i açın, kodu yapıştırın ve dosyayı ‘muj_3D_web.html’ olarak kaydedin. İşte bu kadar! Artık size ait bir 3D uygulamanız var.