NumexMarket
Market'e dön
Simülasyon

Uyuyan Şehir — Kendi kendine yaşayan minyatür şehir

Açık Kaynak · Ücretsiz · Numex AI üretimi

Canlı Dene Kaynak (ZIP) Kodu Gör

Kodla üretilmiş, kendi kendine yaşayan sinematik minyatür şehir: binalar, raylarda dolaşan tren, arabalar, yayalar, sokak lambaları ve saat kulesi. Gündüz, gün batımı ve gece; yağmur ve kar; binaya ya da tek pencereye tıklayıp ışığı yak-söndür; sinematik şehir turu ve ortam sesi. Tarayıcıda çalışır, kurulum gerektirmez.

Ekran Görüntüleri

Uyuyan Şehir — Kendi kendine yaşayan minyatür şehir ekran görüntüsü 1Uyuyan Şehir — Kendi kendine yaşayan minyatür şehir ekran görüntüsü 2

Doküman (README)

Numex Dream City — Uyuyan Şehir

Kodla üretilmiş, kendi kendine yaşayan sinematik bir minyatür şehir. Hazır görsel, video veya dış model dosyası kullanılmadı: her şey kodla çizildi.

Küçük bir şehir, kocaman bir hayal.

Çalıştırma

Klasörde bir yerel sunucu açıp index.html'i tarayıcıda açın:

npx http-server . -p 8199
# → http://127.0.0.1:8199

Not: file:// ile açmayın — ES modülleri (import) ve WebGL dokuları için HTTP gerekir.

Kontroller

| Eylem | Sonuç | |---|---| | Fare sürükle | Kamerayı döndür | | Tekerlek / iki parmak | Yakınlaş – uzaklaş | | Sağ tık sürükle | Kaydır | | Bir binaya tıkla | O binanın tüm pencere ışıkları yanar/söner + bilgi kartı | | Bir pencereye tıkla | Yalnız o odanın ışığı değişir (kartta "Oda 12 — ışık yanıyor") | | Gündüz / Gün Batımı / Gece | Zaman dilimi (ışık, gökyüzü, sis, yıldızlar) | | Açık / Yağmur / Kar | Hava durumu | | Şehir Turu | 5 duraklı sinematik kamera turu; zaman dilimi de kendiliğinden değişir | | Oto | 45 saniyede bir zaman dilimini otomatik döndürür | | Ses düğmesi | WebAudio ile üretilen rüzgâr + yağmur ortam sesi (tarayıcı kuralı gereği tıklama ister) |

Ne var?

  • 153 bina, 3.259 pencere, 100 sokak lambası, su kulesi + saat kulesi olan meydan, parklar
  • Gündüz / gün batımı / gece — yumuşak geçişli ışık, gökyüzü shader'ı, ay, yıldızlar, sis
  • Yağmur (ince çizgisel damlalar) ve kar (süzülen taneler)
  • 12 araba, raylarda dolaşan tren (lokomotif + 3 vagon), 16 yaya silüeti — hepsi kendi yolunda döner
  • Pencerelerde rastgele yanan/sönen ışıklar, bacalardan duman
  • Bloom (ışık taşması) ile gece ışıkları
  • Responsive arayüz; mobilde 44px dokunma hedefleri

Teknik

  • Three.js 0.160.0 — proje içinde (vendor/), CDN'e bağımlı değil, çevrimdışı çalışır
  • Modüller: city.js (şehir dokusu), motion.js (tren/araba/yaya), atmosfer.js (ışık+hava), main.js (motor), utils.js (tohumlu rastgele)
  • Şehir tohumlu rastgelelikle (seed 20261027) üretilir — her açılışta aynı güzel şehir doğar

Dosyalar

index.html          arayüz + import haritası
css/style.css       arayüz stili
js/main.js          motor, kamera, etkileşim, tur, ses
js/city.js          binalar, yollar, parklar, lambalar, bulutlar
js/motion.js        tren, arabalar, yayalar, raylar
js/atmosfer.js      gündüz/gece/batım, yağmur, kar, yıldızlar
js/utils.js         tohumlu rastgele + yardımcılar
vendor/             three.module.js + jsm (OrbitControls, bloom, composer)

Lisans / kaynak

Tüm kod bu proje için yazıldı. Three.js MIT lisanslıdır (vendor/ içinde). Numex Market'e yüklenmeye hazırdır.