Uygulamaya erişim kilitli
Bu 3D eğitimine erişim elde etmek için önce YouTube kanalımıza abone olmanız gerekiyor.
Gerçek zamanlı Plan: Gemini ile 3D web siteleri
Prompt üreticilerini unutun. İşte size boş bir sohbetten etkileşimli bir 3D deneyime kadar – tamamen gerçek zamanlı yapay zeka sohbetiyle – adım adım eksiksiz, interaktif bir plan.
Adım 1: Ortamın hazırlanması
Bilgisayarınıza hiçbir şey kurmanız gerekmiyor. Tüm süreç tamamen tarayıcıda çalışacak. En hızlı yineleme için yan yana iki sekme açın:
- Ücretsiz Google Gemini’yi açın (gemini.google.com).
- Çevrimiçi kod editörü olarak CodePen.io veya PlayCode.io’yu açın. Burada HTML dosyaları oluşturup kaydetmek zorunda kalmadan, üretilen kodu 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, her şey tek dosyada). Bu metni kopyalayıp Gemini’ye yapıştırın:
Sen WebGL ve Three.js kütüphanesi konusunda uzmansın. Görevin, çalışır bir 3D sahne için tam bir HTML kodu yazmak (içinde CSS ve JS dahil). Gereksinimler: 1. Ortaya dönen bir 3D nesne (TorusKnot veya Icosahedron) oluştur. 2. Three.js ve OrbitControls’u script etiketinde CDN bağlantısı (unpkg veya cdnjs) üzerinden içe aktar. 3. Bu bir “Single file” olmalı – her şey tek bir kod parçasında, import maps yok. 4. Harici modeller (GLTF) veya dokular (JPG/PNG) kullanma. Her şeyi kod içinde prosedürel olarak oluştur (MeshStandardMaterial, ışıklar, renkler). 5. Noktasal ışıklar (PointLight) ve hafif gölgeler ekle. 6. Arka planı çok koyu bir renge ayarla.
Adım 3: Çalıştırma ve kontrol
Gemini kodu oluşturduğunda, üst sağdaki kod kutusundan kopyalayın. İkinci sekmeye (örn. 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 onunla döndürerek etkileşime girebilirsiniz!
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 yazmasına veya eski kodu ona tekrar göndermenize gerek yok (onu hatırlıyor). Sadece onunla sohbet etmeye devam edin ve talepleri adım adım ekleyin. Sırayla şu mesajları deneyin:
Bu harika. Şimdi nesnenin malzemesini düz renkten, neon mavi ve pembe renkte parlayan bir “Wireframe” (tel kafes model) malzemeye dönüştür.
Mükemmel. Şimdi sahnenin arka planına, uzaydaki yıldızları taklit edecek, yavaşça dönen bir parçacık sistemi (Points ve PointsMaterial) ekle.
Harika. Ve şimdi de şunu yap: Fareyi oynattığımda, ekran üzerindeki imleç konumuna göre ışıkların renkleri yumuşak bir şekilde değişmeye başlasın.
Adım 5: Sorun çözme (Debugging)
Kodu gerçek zamanlı düzenlerken, yapay zeka bazen hata yapar ve CodePen’de sadece siyah veya beyaz bir ekran görürsünüz. Programlama bilmenize gerek yok, sorunu sohbette açıklamanız 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 tamamen düzeltilmiş hâlini gönder.
Bitti! Projeyi kaydetme
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. İşlem tamam! Artık kendi 3D uygulamanıza sahipsiniz.