Japon Tarzı Kiraz Çiçekli Vadi için Etkileşimli 3B Peyzaj Web Sayfası

Tarayıcıda gerçek zamanlı olarak etkileşim kurulabilen, tamamlanmış ve yüksek kaliteli bir 3B peyzaj web sayfası oluştur. Tema: Japon tarzı kiraz çiçekli vadi. HTML, CSS ve JavaScript kullan. Görsel oluşturma; yalnızca tasarım önerisi sunma, tek bir arka plan görselini paralaks efektiyle 3B gibi gösterme. İstediğim şey gerçekten çalıştırılabilen ve içinde gezilebilen tamamlanmış bir ürün. 【1. Çalışmanın konumlandırması】 Bu; yakın ve uzak katmanları belirgin, bütünlüklü ve kesintisiz bir vadi peyzajı olmalı, izole edilmiş küçük bir dekor, yüzen ada, tabanlı maket ya da yalnızca teknik bir demo olmamalı. Stil, modern ve ayrıntılı voxel art: Küp geometrisinin biçim dilini koru; ancak görüntü yüksek çözünürlüklü, kenar yumuşatmalı, ışık ve gölgeler de incelikli olmalı. Retro düşük çözünürlüklü pikselli görünüm kullanma; kaba blok yığınları oluşturma ve sahneye piksel filtresi uygulama. Öncelik görsel kalite. Kompozisyon, malzemeler ve aydınlatmadan ödün vermek yerine birkaç işlev daha az olsun. 【2. Referans görsellerin kullanım biçimi】 Referans görseller eklenmişse önce kompozisyon katmanlarını, ölçeği, ışığı ve renk ilişkilerini analiz et. Yalnızca atmosferi ve görsel dili ilham olarak alıp sahneyi yeniden tasarla; yapıların, ağaçların, dağların ve yolların konumlarını kopyalama, 1:1 yeniden oluşturma. Referans görsel web sayfasında kullanılacak bir arka plan varlığı değildir. Sahnenin kendisi gerçek 3B geometriden oluşmalı. 【3. Sahne kompozisyonu】 Sayfa ilk açıldığında eksiksiz ve ilgi çekici bir görüntü sunmalı, kullanıcının güzel bir açı bulmak için önce kamerayı döndürmesi gerekmemeli. Maket tarzı izometrik üstten bakış kamerası yerine perspektif kamera kullan. Görüntüde belirgin bir ön plan, orta plan ve arka plan bulunmalı: Ön plan: Belirgin bir varlığı olan yaşlı bir kiraz ağacı; kayalar, çalılar, bitkiler, taş fener ve az miktarda dökülmüş çiçekle birlikte görüntünün kenarlarında doğal bir çerçeve oluşturmalı, ancak nehri, köprüyü ve ana yapıları kapatmamalı. Orta plan: Kıvrılarak ilerleyen bir nehir bakışı sahnenin içine yönlendirmeli; kırmızı ahşap bir köprü nehrin üzerinden geçmeli; köy, çay evi, tapınak ve patikalar arazinin eğimine uyacak şekilde yerleşmeli, yapılar arasında gerçekçi bir ulaşım ilişkisi bulunmalı. Zemin engebeli olmalı; kıyı çizgileri ve doğal geçişler bulunmalı, modeller düz bir yüzeye eşit aralıklarla dizilmemeli. Arka plan: Yamaçta çok katlı bir pagoda, farklı uzaklıklarda ormanlar ve dağ sırtları ile uzakta karlı dağlar. Mesafeyi yalnızca uzaktaki nesneleri küçülterek değil; ölçek değişimi, örtüşme, sıcak-soğuk renk farklılıkları ve atmosferik perspektifle göster. Tüm öğeleri her yeri eşit biçimde dolduracak şekilde yerleştirme. Öncelik sırası, yoğunluk dengesi, negatif alan ve net bir görsel odak gerekli. 【4. Biçim ve görüntü kalitesi】 Kiraz ağacı: Gövdesinde kıvrımlar, dallanma ve kök bölgesi bulunmalı; taç kısmı düzensiz çiçek kümelerinden oluşmalı, aralarında boşluklar ve farklı yoğunluklar olmalı, dallar görünür kalmalı. Birkaç düzgün küre ya da küp yığını oluşturma. Yapılar: Çatılarda üst üste dizilmiş kiremitler, saçaklar, kiriş ve sütunlar ile pencere kafesleri bulunmalı; farklı yapıların kullanım amacı, hacmi ve yüksekliği birbirinden ayrışmalı; aynı evi kopyalayıp vadiyi onunla doldurma. Arazi: Kıyılarda ıslak kayalar, çimen kümeleri ve bitki örtüsüne doğal geçişler bulunmalı. Aşırı düzenli basamaklardan, tekrarlanan şeritlerden, dama tahtası desenlerinden ve belirgin prosedürel üretim ızgaralarından kaçın. Su yüzeyi: Çevredeki manzarayı yansıtabilmeli; ölçülü dalgalanmalara, derinlik ve renk değişimlerine, kıyıya doğal geçişlere sahip olmalı. Mümkün olduğunca gerçek sahne yansımalarını kullan; performans için kalite düşürmek gerektiğinde bile görsel inandırıcılığı koru. Suyun yerine titreşen gürültü, aşırı bozulma veya tek parça mavi bir düzlem kullanma. Ayrıntılar: Az sayıda koi balığı, dökülmüş çiçek, ateş böceği, şelale ve uzakta uçan kuş bulunabilir, ancak bunların tümü atmosfere hizmet etmeli ve görüntüyü karmaşıklaştırmamalı. Model sayısını yüksek göstermek uğruna ayrıntıları yığma. 【5. Renk ve atmosfer】 Varsayılan atmosfer mavi saat olmalı: Soğuk tonlu vadi ve uzak dağlar, yumuşak pembe kiraz çiçekleri, sıcak ancak patlamayan fener ve pencere ışıkları. Sıcak ışığı insanların bulunduğu alanlarda yoğunlaştır; tüm çevreyi turuncuya boyama. Yumuşak gölgeler, nesnelerin temas noktalarında doğal koyuluklar, dengeli pozlama, ölçülü bloom, kenar yumuşatma ve mesafe katmanlarını hissettiren hafif sis kullan. Beyazlamış, gri ve puslu görünümden, aşırı doygunluktan, tüm ekranı kaplayan yoğun sisten, patlayan ışıklardan ve belirgin tırtıklı kenarlardan kaçın. Küp geometrisi net olabilir, ancak render işlemi kaba görünmemeli. Ayrıca “sabah erken saatler” ve “yağmur” olmak üzere iki atmosfer seçeneği sun; geçiş sırasında gökyüzünü, ortam ışığını, sisi ve yerel efektleri eş zamanlı olarak değiştir, sadece arka plan rengini değiştirmekle yetinme. 【6. Etkileşim ve arayüz】 Tasarlanmış dört kamera açısı sun: vadi panoraması, nehir kenarında alçak kamera açısı, tapınak patikası ve yamaçtan kuşbakışı görünüm. Geçişler akıcı olmalı ve her kamera açısının bağımsız bir kompozisyon değeri bulunmalı. Temel etkileşimler: Fareyle sürükleyerek görüntüyü inceleme, tekerlekle yakınlaştırma veya ilerleme; dokunmatik ekranlarda sürükleme ve iki parmakla yakınlaştırma desteği. Kamera açısını sıfırlama, arayüzü gizleme ve mevcut görüntüyü kaydetme işlevleri sun. İsteğe bağlı geliştirmeler: serbest keşif, yavaş kamera gezintisi ve ortam sesi. Ortam sesi varsayılan olarak kapalı olmalı ve yalnızca kullanıcı tıkladıktan sonra çalmalı. Ek işlevler varsayılan görüntünün tamamlanmışlık düzeyini etkilememeli. Arayüz ölçülü ve tasarım sahibi olmalı; odağı manzara oluşturmalı. Başlık ve kontrol çubukları kenarlarda yer almalı, görsel odağı kapatmamalı. Masaüstü ve mobil cihazlarda düğmelerin ekran dışına taşması, metinlerin üst üste binmesi veya kontrollerin kullanılamaması gibi sorunlar görülmemeli. 【7. Mühendislik ve performans】 Three.js / WebGL ile sürümü sabitlenmiş ve birbiriyle uyumlu CDN bağımlılıklarının kullanımına izin verilir. Olgun render özelliklerini önceliklendir; “sıfır bağımlılık” uğruna tüm motoru baştan yazma. Yazdığın HTML, CSS ve JavaScript kodunu mümkün olduğunca tek bir HTML dosyasında düzenli tut. Sahne öğeleri dış görsellere veya 3B model kaynaklarına bağlı olmadan prosedürel geometri ve malzemelerle oluşturulmalı. Tekrarlanan nesneleri uygun toplu çizim veya instancing yöntemleriyle oluştur; alt bölümlendirme, gölgeler, yansımalar ve render çözünürlüğünü makul ölçüde kontrol et. Yüksek kalite ve hafif olmak üzere iki mod sun; mobil cihazlarda varsayılan olarak daha hafif ayarları kullan. Ayrıntı elde etmek için voxel sayısını sınırsız biçimde artırma. Yükleme göstergesi, WebGL desteklenmediğinde gösterilecek bir uyarı ve gerekli hata işleme mekanizmalarını ekle. Ses etkinleştirilmemişse otomatik oynatma yapma; sistemin hareketleri azaltma tercihine saygı göster. 【8. Teslimat öncesi kabul kontrolü】 Kodu yazmayı bitirir bitirmez teslim etme. Mevcut ortam tarayıcıda çalıştırmayı ve ekran görüntüsü almayı destekliyorsa sayfayı önce gerçekten aç, varsayılan kamera açısını, dört görünümü, atmosfer geçişlerini ve masaüstü ile mobil yerleşimleri kontrol et, ardından ekran görüntülerine göre belirgin kompozisyon, pozlama, örtüşme ve render sorunlarını düzelt. Özellikle şunları kontrol et: boş ekran, yükleme hatası veya konsol hatası var mı; geometri çakışmaları, titreşim, gölge bantları, patlayan ışıklar veya anormal su yüzeyi görülüyor mu; varsayılan görüntü gerçekten eksiksiz bir peyzaj gibi mi görünüyor, yoksa küçük bir maket izlenimi mi veriyor; işlev düğmeleri gerçekten çalışıyor mu ve mobil cihazlarda ekran dışına taşıyor mu. Kabul kontrolü için tarayıcı ekran görüntülerini kullanabilirsin, ancak görsel oluşturma araçlarını çağırma. Tamamlanmamış testleri dürüstçe belirt; doğrulanmış olduklarını iddia etme. Nihai teslimat: 1. Gerçekte mevcut olan ve açılabilen bir HTML dosyası veya mevcut ortamın desteklediği etkileşimli önizleme. 2. Ekran görüntüsü alınabiliyorsa gerçek tarayıcı render’ından bir ekran görüntüsü ekle. 3. Kullanım şeklini ve gerekli çalıştırma koşullarını kısaca açıkla. Lütfen üretimi doğrudan tamamla; kritik olmayan ayrıntılarda tutarlı tasarım kararlarını kendin ver, kendi başına çözebileceğin uygulama sorunlarını tekrar tekrar bana bırakma.