Walk the space
A third-person walk through a furnished floor plan, with the camera following the character through stairs, halls and seating areas.
3D Archtech Studio · 3D web · architecture visualisation
Interactive interiors
3D web prototypes for an architecture studio: walk an interior as a character, trace furniture hotspots on 360° photos, and drop objects into your room with AR.
Screen recording
- Role
- Web application developer
- Year
- 2024
- Platforms
- Web · Mobile web (AR)
- Stack
- React
- three.js
- React Three Fiber
- drei
- WebXR
- Chakra UI
My first job. The studio wanted clients to explore a space on the web instead of flipping through renders. I had not written three.js before; I learned it from the documentation while building these.
My part. The code: scenes, physics, character controls, cameras, the editing and hotspot tools, AR placement. The 3D models and panoramas are not mine.
Outcomes
5
interaction prototypes from my own builds
Source: recordings, repos
360°
panoramas with traced furniture hotspots
Source: recording
AR
tap-to-place objects from the phone browser
Source: recording
What I built
Key decisions
Physics character, rigged camera
The character is a Rapier rigid body and the camera follows two empty groups parented behind it, so walls, stairs and gravity need no hand-written collision.
Problem, choice and trade-off: Physics character, rigged camera
- Problem
- Visitors walk the space as a character, through halls and up stairs, with the camera following.
- Choice
- The character is a Rapier rigid body with a capsule collider and locked rotations; each frame sets its velocity from the keys and eases its facing with an angle lerp. The building is a fixed trimesh collider plus an invisible collider mesh, and the camera follows two empty groups parented behind the character, one for position and one for look-at.
- Why
- Physics handles walls, floors and gravity, so walking needs no hand-written collision, and the follow camera comes down to reading two world positions.
- Trade-off
- Stairs and camera smoothness each needed a follow-up fix, and trimesh colliders built from visual geometry are heavier than simple shapes.
Credit. The walkthrough building is an open-source baked scene and the avatars are downloaded assets; the panoramas came from the studio. The loops are 2024 screen recordings; the cover was captured in 2026 from the original code.
