Serbestçe gezilebilen anime tarzı 3B kiraz çiçekleri kasabası
Paylaşılabilir, tek HTML dosyasından oluşan ve serbestçe gezilebilen anime tarzı 3B bir Japon bahar kasabası oluşturmak için hazırlanmış ayrıntılı bir Three.js istemi. Alışveriş caddesi, hemzemin geçit ve istasyon, sakura meydanı, Inari tapınağı, nehir kıyısındaki set, prosedürel kiraz ağaçları, animasyonlu insanlar ve araçlar, günün farklı saatleri, çarpışma sistemi, masaüstü ve mobil kontroller ile oluşturulan ortam seslerini tanımlar. Ana gönderide, çalışmanın yazar tarafından Claude Opus 5.5 ve Three.js kullanılarak oluşturulduğu açıkça belirtiliyor; eksiksiz talimat, yazarın doğrulanmış yorumunda yer alıyor.
Lütfen Three.js kullanarak "serbestçe gezilebilen anime tarzı 3B kiraz çiçekleri kasabası" oluşturun; bunu tek bir HTML dosyası olarak hazırlayın ve ardından paylaşılabilir bir web sayfası olarak yayımlayın.
[Teknik kısıtlamalar]
- cdnjs üzerinden yalnızca three.js r128 (UMD derlemesi) kullanın. Harici model veya görsel yüklemeyin — tüm modelleri, dokuları ve dükkân tabelalarını kod ve Canvas ile prosedürel olarak oluşturun.
- Tüm dükkân adları, tabelalar ve karakterler için özgün içerik kullanın. Gerçek bir markayı veya mevcut bir çalışmayı taklit etmeyin.
- MeshStandardMaterial veya MeshPhongMaterial kullanın. Yüksek metalness değerlerinden ve ortam yansıma haritalarından kaçının (bazı bilgisayarlarda nesnelerin renksiz görünmesine neden olabilirler).
- Sıradan bilgisayarlarda iyi çalışması için sabit nesneleri malzemelerine göre birleştirerek az sayıda mesh kullanın; High / Medium / Low kalite seçeneği sunun.
[Sahne: "桜ヶ丘 (Sakuragaoka)", bahar öğleden sonrasında küçük bir Japon kasabası]
1. Alışveriş caddesi: Her iki tarafında 20'den fazla dükkân bulunan, kuzey-güney yönünde uzanan bir ana cadde (ramen dükkânı, kafe, bisikletçi, kitapçı, çiçekçi, Japon tatlıları dükkânı, eczane, market vb.). Her dükkânda şunlar bulunmalı: birden çok satırlı tabela (dükkân adı + İngilizce adı + telefon numarası), saçaklı kenarı tarak biçimli çizgili tente, iç kısmı görünür derinliğe sahip geriye çekilmiş bir dükkân cephesi ve kaldırım sergisi (meyve kasaları, dergi rafı, yiyecek maketi vitrini, dönen berber direği). Üst katlarda pencereler, klima üniteleri, asılı çamaşırlı balkonlar ve çatıda TV antenleri bulunmalı.
2. Cadde ayrıntıları: Çok sayıda havai kabloya sahip elektrik direkleri, alışveriş caddesi afişleri asılı dekoratif sokak lambaları, festival feneri dizileri, sarı hissedilebilir yüzeyli kare kaldırım taşları, ızgara giderler, "止まれ" dur işaretleri ve bir otobüs durağı.
3. Hemzemin geçit ve trenler: Çift hatlı demiryolu. Bir tren yaklaştığında geçidin kırmızı ışıkları sırayla yanıp söner, zil çalar ve bariyerler iner. İki vagonlu banliyö treni istasyonda yaklaşık 14 saniye durur ve ardından hareket eder. Pencereler şeffaf olmalı; içerideki koltuklar ve tutamaklar görünür olmalı.
4. Ada peronlu istasyon: İstasyon adı panosu, peron kanopisi, banklar ve bir otomat.
5. Sakura meydanı: Çevresinde dairesel bir bank bulunan 100 yıllık kiraz ağacı.
6. Inari tapınağı: Büyük bir kırmızı-turuncu torii ve arka arkaya dizilmiş küçük torii'ler, taş fenerler, tilki heykelleri, ibadet salonu (bakır yeşili çatı, chigi, katsuogi, adak kutusu, asılı çan), arınma çeşmesi (temizuya), jizo heykelleri, ema levhaları, kutsal ağaç ve çakıl zemin.
7. Nehir kıyısındaki set: Bir çiçek tüneli oluşturan iki sıra kiraz ağacı, fenerler, bir nehir, karşı kıyıdaki evler ve uzaktaki dağlar.
[Kiraz ağaçlarını oluşturma (temel bölüm)]
- Ağaçları Somei-Yoshino çeşidinden esinlenerek modelleyin: gövde alçakta 3–4 ana dala ayrılmalı ve bu dallar üç seviye daha özyinelemeli olarak dallanmalı. Dallar dışa doğru yayılmalı ve uçlarda hafifçe aşağı sarkarak genel olarak şemsiye biçimi oluşturmalı.
- Taç kısmını on binlerce "çiçek kümesi kartı" ile oluşturun: Canvas üzerine beş taç yapraklı çiçekler çizin (çentikli taç yaprağı uçları, kırmızımsı merkezler ve erkek organlar) ve çiçeklerin arkasına yumuşak pembe bir taban katmanı ekleyin. Kartlar için alphaTest ve çift taraflı render kullanın.
- Hacim vermek için taç kısmının içine birkaç pembe dolgu kümesi ekleyin. Dış ve üst kısımlar daha parlak; iç ve alt kısımlar ise sıcak gül tonlu gölgelere sahip olmalı.
- Neon pembe yerine açık pembe kullanın. Ağaç taçları rüzgârda hafifçe sallanmalı, her ağacın altında yere düşmüş taç yapraklarından bir örtü bulunmalı ve taç yaprakları havada düşmeye devam etmeli (shader ile yapılmalı).
[Karakterler]
- 20'den fazla anime tarzı öğrenci ve kasaba sakini: diz ve dirsek eklemlerini kullanan yürüme animasyonu, Canvas üzerine çizilmiş ve göz kırpan anime yüzleri (büyük gözler, göz parıltıları, allık), ayrı tutamlardan oluşan kaküller ve çeşitli saç stilleri (uzun, küt, sallanan at kuyruğu, çift kuyruk) kullanın; denizci üniforması / blazer üniforması / günlük kıyafetler ekleyin. Karakterleri iki tonlu cel shading ve koyu bir dış çizgiyle render edin.
- İnsanlar caddede yürümeli, meydanda sohbet etmeli, peronda beklemeli, tapınakta dua etmeli ve set boyunca bisiklete binmeli.
[Araçlar]
- Arabaları, yan profil silüetini dışa doğru uzatarak oluşturun (tekerlek kemerleri, pencereler, farlar, Japon plakaları ve dönen tekerlekler ekleyin). Arabalar hemzemin geçitten önce durmalı ve zil çalarken bariyerler kalkana kadar beklemeli.
[Aydınlatma ve günün saati]
- Yumuşak anime arka planı görünümü kullanın: beyaz bulutlu mavi gökyüzü (shader), uzakta hafif pus ve mavi-mor tonlu gölgeler.
- Afternoon / Dusk / Night Sakura arasında geçiş yapılabilmeli. Gece olduğunda pencereler, fenerler ve sokak lambaları yanmalı.
[Kontroller]
- Birinci şahıs: Yürümek için WASD, koşmak için Shift, zıplamak için Space, uçmak için F, etrafa bakmak için fare (pointer lock), her konuma ışınlanmak için sayı tuşları, arayüzü gizlemek için H, sesi kapatmak için M.
- Mobil: Yürümek için sol yarıda sürükleyin, etrafa bakmak için sağ yarıda sürükleyin.
- Çarpışma etkin olmalı; oyuncu perona ve basamaklara yürüyerek çıkabilmeli.
- Ortam seslerini oluşturmak için Web Audio kullanın: rüzgâr, kuş sesleri, hemzemin geçit zili ve tren hareket sesleri.
Bu istem nasıl kullanılır?
01
Doğru araçla başla
Tercih ettiğin kodlama asistanını veya 3D aracını aç. Örnekte belirtilen modeli başlangıç noktası olarak kullan ve bağlantılı projelerin kurulum talimatlarına bak.
02
Değiştireceğin bir şey seç
Konuyu, görsel tarzı veya ortamı değiştir. Kamerayı ve etkileşimi net tanımla. Önce küçük bir sürüm oluştur, sonra ayrıntıları tek tek iyileştir.
03
Sahneye özgün öğeler ekle
Özel bir karakter veya nesne için kısa bir nesne açıklamasından ya da referans görselden 3D model oluştur ve projene aktar.
Önizlemeler ilgili üreticilere aittir. Kodu veya varlıkları yeniden kullanmadan önce özgün kaynağı ve proje lisansını kontrol et.