AmplyViewer
A picture of a building where every apartment can be clicked.
You turn a building that is still being sold, click an apartment, and see whether it is free, its layout and its price. A gallery, a room tour and a map sit beside it. It is made to order: each viewer is built for one property and licensed to it. The demo shows how it behaves.
01
How it's built
- TypeScript
- Astro
- Three.js
- WebGL
- glTF
- GSAP
- i18next
- tippy.js
- Airtable
- Google Maps JavaScript API
A static Astro site in TypeScript, embedded in a property's own website as a frame.
- The building: a Three.js scene with a WebGL renderer, loading the building's model as glTF, OBJ or FBX. For each rendered frame the camera moves to where the render's camera stood, and a raycaster turns a click on the picture into an apartment.
- The room tour: 360° panoramas in a Three.js scene of their own, with orbit controls and hotspots drawn as HTML labels through CSS2DRenderer.
- The data: apartments come from Airtable, so availability is changed in something that looks like a spreadsheet, not in code. They can be filtered by price, area, rooms, floor and status, and shown on the building or as a list. Favourites are kept in the browser. A licence is checked before any data loads.
- Around it: Google Maps through its JavaScript API, i18next for languages, tippy.js for tooltips, and GSAP for the animation.
02
What was hard
Making a picture clickable. A photoreal render of a building looks right, but it is a flat image and cannot be clicked. A live model can be clicked, but it is heavy and looks less real. The viewer uses both. It plays a sequence of 100 rendered frames as you turn the building, and keeps an invisible model lined up exactly over each one. What you see is the render. What you click is the model, and every part of it is tied to one apartment's record.
03
The trade-off
The building turns only as far as the frames go. The angles are fixed when the frames are rendered, so a new view means rendering new frames, not moving a camera.