03 / 07MOSKEE · 3D-WEBERVARINGBinnenkort
Eyüp Sultan Nijmegen
Een 3D-website die met het scrollen meebeweegt voor de nieuwe Eyüp Sultan-moskee in Nijmegen: een 360°-tour, een film, actuele gebedstijden, aankondigingen en online doneren via Mollie voor de aankoop van de grond.
- Wat we deden
- 3D-scrollverhaal
- 360°-tour
- Online doneren met Mollie
- Drietalig (NL / TR / EN)
- Technologieën
- Next.jsReact Three FiberTailwind CSSCloudflare WorkersD1 & R2Mollie
- Type
- Website · Klantproject
01Over het project
De vraag
Eyüp Sultan Nijmegen zamelt geld in voor de aankoop van grond voor een nieuwe moskee en cultureel centrum aan het Jonkerbosplein. Er was een website nodig die een gebouw dat er nog niet staat voorstelbaar maakt, de gemeenschap op de hoogte houdt met aankondigingen en gebedstijden, en online doneren mogelijk maakt.
Onze aanpak
We bouwden het geplande gebouw na als realtime 3D-model op basis van de architectonische plannen en plaatsten het in zijn echte omgeving, opgebouwd uit open kaartdata. Dat combineerden we met informatiepagina's, een beheeromgeving en doneren via Mollie. De 3D-scène laadt in stappen, past de kwaliteit zelf aan op tragere toestellen en toont een 2D-versie aan wie liever minder beweging ziet.
02Belangrijkste functies
- 01
360°-tour en gebouwgids
Een tocht van boven het plein, door de poort van de binnenplaats, tot in de gebedszaal; vrij rondkijken buiten, stops binnen en dag, zonsondergang of nacht. Genummerde punten lichten de functies van het gebouw toe.
- 02
In de echte omgeving
Het gebouw staat in de echte wijk, opgebouwd uit open kaart- en gebouwdata, met bomen, bezoekers en ingerichte ruimtes.
- 03
AR-maquette op tafel
Met de telefoon zet je het complex op schaal 1:150 op tafel of op de vloer. Op de computer verschijnen het model en een QR-code voor de telefoon.
- 04
Aankondigingen en gebedstijden
Aankondigingen staan ook op een digitaal bord op de 3D-binnenplaats; filteren op categorie, toevoegen aan je agenda en delen. De gebedstijden van de dag staan op de homepage.
- 05
Online doneren
Doneren met iDEAL of kaart via Mollie; de status van een betaling komt altijd rechtstreeks van Mollie. Is online betalen niet beschikbaar, dan toont de pagina de gegevens voor een overboeking.
- 06
Beheeromgeving
Aankondigingen met concepten, geplande publicatie en vastpinnen; evenementen met aanmeldingen en maximum aantal plaatsen, galerij en donaties met CSV-export. Beheerders nodigen nieuwe beheerders uit met een eenmalige link.
03Schermen
04Technologie
Interface
- Next.js
- Informatiepagina's en de 3D-ervaring
- React Three Fiber
- 3D-gebouw, tour en AR-scène
- Tailwind CSS
- Designsysteem met licht en donker thema
- Zustand
- Status van tour, kwaliteit en scène
Server & data
- Cloudflare Workers
- API voor beheer en donaties
- D1 & R2
- Aankondigingen, aanmeldingen en galerijfoto's
- Mollie
- Online donaties
- Resend
- E-mails voor uitnodigingen en wachtwoordherstel
Infrastructuur
- Blender
- Modellen van gebouw, bomen en ruimtes
- Playwright
- Tests op prestaties en stabiliteit
05Status
Dit project is in ontwikkeling. Denkt u aan iets vergelijkbaars?
