← Back
A digital image gallery that can be viewed by the user physically rotating
The Concept
The core idea is to let the user physically move and explore, rather than just sit and swipe pictures with their fingers. In this digital image gallery, the viewer is placed at the very center of the experience. Unlike traditional two-dimensional interfaces where digital content is consumed passively, this spatial environment is organized concentrically around the user, featuring eight images arranged in a complete 360-degree panorama.
To view each image, the user must perform a deliberate physical action: keeping the phone or tablet in their hand and rotating around their own vertical axis. By utilizing the device’s internal orientation sensors, the interface aligns the virtual camera directly with the user’s real-world movements.
Aim:
This embodied interaction with the digital image circle dissolves the boundary between the user’s physical space and the digital content. By demanding spatial awareness and kinetic engagement, the gallery transforms the viewer from a mere observer into an active explorer.
Project Origin:
This work began as an educational project designed to practically investigate human-computer interaction (HCI) and the capabilities of modern web technologies. It was self-produced as a way to explore how physical movement can alter and enhance our daily digital consumption habits.
As the sole creator of this project, I was responsible for both the conceptual design and the technical development.
Built 3D Environment using the Three.js and Drei library to build the panoramic spatial gallery and render the digital image circle.
For moving mechanics, implement the Drei OrbitControls to map the user’s physical rotation, ensuring a seamless, responsive, and smooth experience.
Also Image optimisation when images are added by the user, they are dynamically resized upon local upload to maintain high rendering performance. For test purposes, there is a working example of this gallery and images are kept strictly on the phone or tablet during the test. Please click on the button below to explore the gallery.
The core idea is to let the user physically move and explore, rather than just sit and swipe pictures with their fingers. In this digital image gallery, the viewer is placed at the very center of the experience. Unlike traditional two-dimensional interfaces where digital content is consumed passively, this spatial environment is organized concentrically around the user, featuring eight images arranged in a complete 360-degree panorama.
To view each image, the user must perform a deliberate physical action: keeping the phone or tablet in their hand and rotating around their own vertical axis. By utilizing the device’s internal orientation sensors, the interface aligns the virtual camera directly with the user’s real-world movements.
Aim:
This embodied interaction with the digital image circle dissolves the boundary between the user’s physical space and the digital content. By demanding spatial awareness and kinetic engagement, the gallery transforms the viewer from a mere observer into an active explorer.
Project Origin:
This work began as an educational project designed to practically investigate human-computer interaction (HCI) and the capabilities of modern web technologies. It was self-produced as a way to explore how physical movement can alter and enhance our daily digital consumption habits.
As the sole creator of this project, I was responsible for both the conceptual design and the technical development.
Built 3D Environment using the Three.js and Drei library to build the panoramic spatial gallery and render the digital image circle.
For moving mechanics, implement the Drei OrbitControls to map the user’s physical rotation, ensuring a seamless, responsive, and smooth experience.
Also Image optimisation when images are added by the user, they are dynamically resized upon local upload to maintain high rendering performance. For test purposes, there is a working example of this gallery and images are kept strictly on the phone or tablet during the test. Please click on the button below to explore the gallery.
Interactive Gallery