Case study · Web development · 3DFallstudie · Webentwicklung · 3DRUMI Restaurant.
A restaurant website built as a room rather than a page — a 360° photograph of the real dining room in WebGL, with seven sections you reach by turning, not scrolling.Eine Restaurant-Website, gebaut als Raum statt als Seite — eine 360°-Aufnahme des echten Gastraums in WebGL, mit sieben Bereichen, die Sie erreichen, indem Sie sich umsehen, nicht scrollen.
The dining room is the sales pitch.Der Gastraum ist das Verkaufsargument.
A restaurant is judged on atmosphere, and atmosphere is the one thing a stack of pages cannot carry. So the site does not describe the room — it hands the visitor the room, and hangs everything else inside it.Ein Restaurant wird nach seiner Atmosphäre beurteilt, und Atmosphäre ist das Eine, was ein Stapel Seiten nicht vermitteln kann. Deshalb beschreibt die Website den Raum nicht — sie übergibt der Besucherin und dem Besucher den Raum und hängt alles andere hinein.
A 3D room, not a hero imageEin 3D-Raum, kein Hero-Bild
A 360° photograph of the actual restaurant is mapped onto a sphere in WebGL with three.js and rendered live. The visitor stands in the middle of it: mouse wheel, drag or a click in the nav turns the camera, and the walls, the bar and the street outside the window keep going past the edge of the screen. Atmosphere arrives before the copy does.Eine 360°-Aufnahme des echten Restaurants wird in WebGL mit three.js auf eine Kugel projiziert und live gerendert. Die Besucherin und der Besucher stehen mittendrin: Mausrad, Ziehen oder ein Klick in der Navigation dreht die Kamera, und die Wände, die Bar und die Straße vor dem Fenster laufen über den Bildschirmrand hinaus weiter. Die Atmosphäre ist da, bevor es der Text ist.
A menu you open, not a PDFEine Speisekarte zum Aufschlagen, kein PDF
The menu is a bound book standing on a table in the scene. Click it and it opens into a spread — the dish photographed on the left page, the name, the ingredients, the diet and allergen marks and the price on the right — with four course tabs down the fore-edge and page corners that turn. 34 dishes, 12 marks, no download.Die Speisekarte ist ein gebundenes Buch, das auf einem Tisch in der Szene steht. Klicken Sie es an, und es öffnet sich zu einer Doppelseite — das Gericht auf der linken Seite fotografiert, Name, Zutaten, Diät- und Allergenkennzeichen und Preis auf der rechten — mit vier Gang-Reitern am Schnitt und Seitenecken, die sich umblättern lassen. 34 Gerichte, 12 Kennzeichen, kein Download.
Three languages in the same roomDrei Sprachen im selben Raum
German, English and Persian each ship a full pack — navigation, all seven panels, the reservation form and the course tabs — swapped in place without a reload and without a second URL. Persian is the reason: this is a Persian kitchen, and its guests should not be reading someone else's translation of it.Deutsch, Englisch und Persisch bringen jeweils ein vollständiges Paket mit — Navigation, alle sieben Panels, das Reservierungsformular und die Gang-Reiter —, das an Ort und Stelle ausgetauscht wird, ohne Neuladen und ohne zweite URL. Persisch ist der Grund: Dies ist eine persische Küche, und ihre Gäste sollten nicht die Übersetzung eines anderen davon lesen müssen.
Turn the room, not the pageDrehen Sie den Raum, nicht die Seite
There is no scrollbar on the desktop site. The seven sections are anchored at fixed angles around the panorama, and getting to one means looking at it.Auf der Desktop-Version gibt es keine Bildlaufleiste. Die sieben Bereiche sind an festen Winkeln rund um das Panorama verankert, und zu einem zu gelangen bedeutet, ihn anzusehen.
Arrive insideInnen ankommen
The page opens standing in the restaurant, with a welcome panel floating mid-room and the medallion overhead.Die Seite öffnet sich mitten im Restaurant, mit einem Willkommens-Panel, das im Raum schwebt, und dem Medaillon darüber.
Turn to lookUmsehen
Wheel, drag or the nav rotates the camera. Panels drift into view at their own angle and drift back out.Mausrad, Ziehen oder die Navigation drehen die Kamera. Panels ziehen in ihrem eigenen Winkel ins Bild und wieder heraus.
Pick up the objectDen Gegenstand aufnehmen
Each section has a thing in the room — the menu book, the neon sign, a flip clock, a compass, a telephone.Jeder Bereich hat einen Gegenstand im Raum — die Speisekarte, das Neonschild, eine Klappuhr, einen Kompass, ein Telefon.
Ask for the tableUm den Tisch bitten
Name, phone, date, time, party size, inside or out — the request the house then confirms directly.Name, Telefon, Datum, Uhrzeit, Personenzahl, drinnen oder draußen — die Anfrage, die das Haus dann direkt bestätigt.
What it costs, honestly: two full-resolution panoramas and a WebGL runtime are heavy, and both room states are preloaded so the neon sign switches instantly. On touch devices the experience turns the document into one tall scroll container behind a fixed canvas, so the native swipe drives the rotation instead of a drag gesture nobody would guess at — and prefers-reduced-motion stops every animation for anyone who has asked for that.Was es kostet, ehrlich gesagt: Zwei Panoramen in voller Auflösung und eine WebGL-Laufzeit sind schwer, und beide Raumzustände werden vorgeladen, damit das Neonschild sofort umschaltet. Auf Touch-Geräten macht das Erlebnis das Dokument zu einem hohen Scroll-Container hinter einer festen Leinwand, sodass die native Wischgeste die Drehung steuert statt einer Ziehgeste, die niemand erraten würde — und prefers-reduced-motion stoppt jede Animation für alle, die genau das angefordert haben.
Have a place worth walking into?Haben Sie einen Ort, den zu betreten sich lohnt?
We build sites that put a visitor in the room before they ever book a table.Wir bauen Websites, die Besucher in den Raum stellen, noch bevor sie einen Tisch reservieren.