Alliance virtual museum: taking over and growing a 3D web museum

The Alliance virtual museum belongs to Alliance Israélite Universelle, an international nonprofit in Jewish education and heritage. It’s a React and Three.js app: visitors walk through 360° halls, open exhibits, watch films and read books in Hebrew, French and Spanish.

I took it over in November 2024 through CGSpark, a Tel Aviv web and mobile studio. The code came from an earlier team, with no documentation. Since then I’ve been its main developer, through version 0.3, version 0.4 and the media pipeline, and over 90% of the commits in the version 0.3 period are mine. The studio owner handles production releases.

Projects

1. 2024–2025

   Taking over an undocumented React and Three.js app

   The museum I took over couldn’t share a single exhibit or show which halls people visited. I fixed both, then added two new halls and a visitor area.

   • Before any feature work I traced how a hall starts up in the inherited code.
   • Every hall, viewpoint and exhibit got its own URL in all three languages. The language comes from the URL before geolocation, and a link opens the exact exhibit and skips the intro film.
   • One function reads the URL and sends GA4 events for halls, exhibits, video, zoom and language. Hotjar can’t record a 3D canvas, so I added its events by hand.
   • Thessaloniki hall: panoramas, exhibits with texts in three languages, films and a timed slide presentation.
   • Library hall: a microfilm carousel, a book catalogue with search and filters, a lift video, and a Botpress chatbot that answers in the visitor’s language.
   • Visitor area: favourites synced across devices through a NestJS and MongoDB API, sharing to Facebook, WhatsApp and email, and a login that lasts a year.

   Version 0.3 with the links, the analytics and the Thessaloniki hall went live on alliance.org.il in April 2025. The library, the catalogue, the chatbot and the visitor area followed in September 2025.

   Stack: React, Three.js, Redux, NestJS, MongoDB

2. 2025–2026

   New 3D halls, a floor map and direct links to exhibits

   Two new 3D halls, an interactive floor map, presentations in sync with the player, and links that open one exhibit without the full 3D entrance.

   • Mikve Israel hall: panoramas, exhibits with texts in three languages, positions tuned for four viewpoints, music and a presentation. I built the Iran hall from 360° renders, with exhibits and plaques placed for seven viewpoints.
   • The coordinates file for the whole museum had grown to about 16,000 lines. I split it into one file per hall.
   • I built the floor map from the Figma design: floors, highlighted rooms, tooltips, the current room, a phone layout and right-to-left text. Room outlines are polygons in a config file, so a new room needs no designer.
   • I re-timed the slide presentations in all three languages to stay in sync with the player.
   • Direct access: a link opens the exhibit popup before the museum starts, because I moved the 3D engine and the video player out of the start bundle. When the visitor closes it, they stand in the hall in front of that exhibit.
   • Before handover I ran our own acceptance check and fixed everything it found. For the client’s round I wrote a headless Chrome script that checks the addresses on both environments, at desktop, tablet and phone widths.

   The new halls and the map went live on alliance.org.il on 20 August 2026, and direct access on 16 September 2026. A link now takes a visitor straight to one exhibit, in any of the three languages.

   Stack: React, Three.js, JavaScript, Node.js

3. 2026

   Media optimisation and an AWS S3 pipeline for a 3D web app

   Visitors waited through about 700 requests on entry, and the museum’s media weighed 5.3 GB, 88% of it video at bitrates up to 7,800 kbps.

   • I moved all media to AWS S3, with path helpers in the app, so deploys no longer carry media.
   • The pipeline scripts live in the repository, each phase backed by a short written spec. Every video gets an H.264 version with fast start, a WebM and a 480p version for phones, and goes out only after checks.
   • Each original image comes out as WebP, an optimised JPEG and a thumbnail, and the browser picks the format.
   • All media files got year-long cache headers with a manual media version, so an updated panorama still reaches everyone. Before deleting unused files I checked each one against the code.
   • I rewrote the loading: floor by floor with priority rooms first, preview frames for videos, and the main bundle split into smaller parts.
   • For updated panoramas I compared the file lists of both environments and wrote down the release order: media first, then code.

   Video fell from about 4.7 GB to about 0.6 GB, and the images now come in optimised variants. On entry the museum loads about 40 textures instead of about 296.

   Stack: AWS S3, ffmpeg, ImageMagick, React, Three.js, Bash