03 / 07CAMİ · 3D WEB DENEYİMİYakında
Eyüp Sultan Nijmegen
Nijmegen'deki yeni Eyüp Sultan Camii için kaydırmayla ilerleyen 3D bir web sitesi: 360° tur, tanıtım filmi, güncel namaz vakitleri, duyurular ve arsa alımı için Mollie ile online bağış.
- Ne yaptık
- 3D scroll hikâye anlatımı
- 360° sanal tur
- Mollie ile online bağış
- Üç dil (NL / TR / EN)
- Teknolojiler
- Next.jsReact Three FiberTailwind CSSCloudflare WorkersD1 & R2Mollie
- Tür
- Web sitesi · Müşteri projesi
01Proje hakkında
İhtiyaç
Eyüp Sultan Nijmegen, Jonkerbosplein'de yeni bir cami ve kültür merkezi kurmak için arsa alımına destek topluyor. Henüz yapılmamış bir binayı insanların gözünde canlandıran, cemaati duyurular ve vakitlerle bilgilendiren ve online bağışa imkân veren bir siteye ihtiyaç vardı.
Yaklaşımımız
Planlanan binayı mimari planlara göre gerçek zamanlı bir 3D model olarak kurduk ve açık harita verileriyle gerçek çevresinin içine yerleştirdik. Bunu kurum sayfaları, yöneticiler için bir panel ve Mollie ile bağışla birleştirdik. 3D sahne parça parça yükleniyor, yavaş cihazlarda kaliteyi kendisi ayarlıyor ve hareketi azaltma tercihi olanlara 2D bir görünüm sunuyor.
02Öne çıkan özellikler
- 01
360° tur ve yapı rehberi
Meydanın üstünden avlu kapısından geçip namaz salonuna uzanan bir yolculuk; serbestçe dönülebilen dış görünüm, iç mekân durakları ve gündüz, gün batımı, gece seçenekleri. Numaralı işaretler binanın bölümlerini tanıtır.
- 02
Gerçek çevresinde
Bina, açık harita ve bina verilerinden oluşturulan gerçek mahallenin içinde durur; avludaki ağaçlar, insanlar ve döşenmiş odalarla birlikte.
- 03
Masada AR maket
Telefonla kompleks 1:150 ölçekte masaya ya da yere yerleştirilebilir. Bilgisayarda model ve telefona geçmek için bir QR kodu gösterilir.
- 04
Duyurular ve namaz vakitleri
Duyurular 3D avludaki dijital panoda da görünür; kategoriye göre süzülür, takvime eklenir ve paylaşılır. Günün namaz vakitleri ana sayfada yer alır.
- 05
Online bağış
Mollie ile iDEAL veya kartla bağış yapılır; ödeme sonucu doğrudan Mollie'den alınır. Online ödeme kullanılamadığında havale bilgisi gösterilir.
- 06
Yönetici paneli
Duyurular taslak, zamanlanmış yayın ve sabitleme ile; kontenjanlı etkinlik kayıtları, galeri ve bağış listesi CSV dışa aktarımıyla. Yöneticiler yeni yöneticileri tek kullanımlık bağlantıyla davet eder.
03Ekranlar
04Teknoloji
Arayüz
- Next.js
- Kurum sayfaları ve 3D deneyimin kabuğu
- React Three Fiber
- 3D bina, tur ve AR sahnesi
- Tailwind CSS
- Tasarım sistemi, açık ve koyu tema
- Zustand
- Tur, kalite ve sahne durumu
Sunucu & veri
- Cloudflare Workers
- Panel ve bağışlar için API
- D1 & R2
- Duyurular, kayıtlar ve galeri fotoğrafları
- Mollie
- Online bağış ödemeleri
- Resend
- Davet ve şifre sıfırlama e-postaları
Altyapı
- Blender
- Bina, ağaç ve oda modellerinin üretimi
- Playwright
- Performans ve dayanıklılık testleri
05Durum
Proje geliştirme aşamasında. Benzer bir ürün mü düşünüyorsunuz?
