Purpose of the project
This project was created alongside my dissertation, which explored how players connect with video game worlds and characters. During my research. I became particularly interested in how games can offer an escape for those dealing with mental health challenges. This insight shaped the direction of the project and gave me the opportunity to further develop my skills in 3D modelling.
Concept Development & Reseacrh
The conceptual phase began with extensive research in mental health, particularly how it affects day-to-day life and emotional well-being. I also explore the role of video games as safe, immersive spaces where individuals can find relief, distraction, or a sense of agency. This research helped form the emotional foundation of the project and informed every design choice moving forward.
Visual references played a key role in shaping the overall aesthetic of the scene. I studied various styles and layouts, eventually deciding on an isometric room design. This layout allowed for a balance between structure and expression. I aimed to reflect the occupant’s internal world through their environment. This included the use of key visual elements, such as unread messages on a phone screen, scattered medications in a bedside drawer, and general disorganisation. At the same time, the inclusion of a PC gaming setup anchors the room in the project’s core theme: using video games as a method of escape and control.
Below is a series of mood boards that illustrate the layout, style, inspiration, and atmosphere of the space (images were sourced from Pinterest).
Scene Development
The 3D modelling process began with blocking out the environment using basic geometric shapes. This early stage was crucial for defining proportions and spatial relationships between key elements like the bed, desk, and bookshelf. Accurate scale was essential, not only for realism, but to ensure the space felt lived-in and believable.
Once the basic layout was established, I began developing these key components. The desk was enhanced with details like a PlayStation console, its controller, and a pair of headphones. The bed was also modelled with layered, wrinkled bedding to add a sense of use and imperfection. I then introduced layers of environmental storytelling through clutter and decoration. Scattered empty cans and bottles were placed around the room to suggest a sense of neglect and habitual routine. Posters were added to the walls, hinting at the character’s interests. The bookshelf was filled with a variety of books and personal trinkets, adding depth and individuality to the space. Messy piles of clothes, both clean and dirty, were positioned across the room to further reinforce the feeling a disrupted routine and emotional overwhelm.
Each object in the scene was chosen and placed with purpose, to either contribute to the narrative, enrich the aesthetic, or ground the space in reality. The result is a richly detailed, emotionally layered environment that invites viewers to explore and interpret the story behind the room.
Textures & Lighting
For the texturing of the assets within the scene, I opted for a more minimal, stylised approach. This decision was made to allow the lighting to take the lead in establishing the mood and atmosphere of the environment. Most assets use basic lambert shaders, each with flat colours that keep the visual style cohesive and understated.
However, image-based textures were used selectively to introduce subtle realism without overwhelming the scene. Surfaces such as the floor, desk, bedframe, bedside locker, and bookshelf feature image textures that provide just enough visual interest to ground the object in reality while maintaining the stylised aesthetic. Posters on the walls reflect the character’s personality and interests, adding individuality and personal history to the room. Even the medication bottles were designed with accurate prescription-style labels to suggest the character is dealing with mental health challenges more explicitly.
Several elements required custom-designed textures to support the narrative. The phone screen, for example, features a custom image replicating an iPhone lock screen with multiple unread notifications, highlighting a sense of avoidance or emotional distance. The journal contains handwritten text, offering further insight into the character’s declining mental state and hinting at the possible cause behind it.
Lighting played a crucial role in shaping the emotional tone of the scene. The primary light source is sunlight filtering in through the partially opened blinds. This not only casts dramatic shadows but also symbolically suggests the start of a new day. The time displayed on both the phone screen and the digital clock reinforces this idea. While morning light usually implies hope or renewal, in this context, it represents yet another sleepless night for the room’s occupant, adding a layer of emotional weight.
Subtle secondary light sources further enhance the mood. The digital clock emits a low red glow, creating a slightly anxious undertone, while the phone screen has a soft white backlight that reinforces its role as a narrative object. The PC monitor also gives off a faint glow, suggesting a constant presence, without drawing too much focus.
Together, these lighting and texturing choices work in harmony to create a space that is not only visually engaging but deeply expressive, communicating the emotional and psychological state of the character through environmental storytelling.
Adding Interactivity
The final goal of the project was to make the 3D model fully viewable and interactive within a web browser. To enhance user engagement and encourage deeper exploration, I implemented a series of interactive hotspots throughout the scene. These hotspots act as narrative focal points, each revealing meaningful context about the character and environment.
The first step in this process was selecting the right platform. After some research, I chose Google Model Viewer, which supports real-time 3D rendering in-browser. Using a combination of online tutorials and developer forums, I coded the scene using Visual Studio Code. The foundational setup required basic HTML, linking to the model and supporting files, which provided a straightforward starting point.
To build the interactivity, I added custom code to define and position each hotspot on the model. This involved not only specifying their location but also determining the camera angle transitions for when each one is activated. I also implemented text boxes that appear when a hotspot is clicked. These offer additional insight into why each highlighted object was chosen and how it contributes to the project’s overall theme.
The final scene includes six interactive hotspots: a phone with unread notifications symbolising emotional distance, medication representing ongoing mental health treatment, messy piles of clothes suggesting neglect or overwhelm, a journal containing handwritten thoughts and reflections, and overflowing trash can indicating emotional buildup or stagnation, and a PC monitor displaying a video game title screen, representing escapism. Each element with intention, providing narrative depth and emotional resonance while inviting the viewer to engage more thoughtfully with the space.
Running into issues
As with most projects, this one came with its share of challenges. The biggest hurdle was finding a platform that would allow the 3D model to be viewed in a web browser.
Initially, I planned to use a program called 8th Wall, but it quickly became clear that the free version lacked the necessary features. I then explored Three.js, which looked promising. I was able to create a basic scene and interact with the model, but my limited coding experience made it difficult to implement the interactive elements I envisioned.
Eventually, I discovered Goggle’s Model Viewer. It required minimal coding knowledge and offered extensive examples and tutorials. Using this tool, I was finally able to build an interactive scene that met my goals and expectations.
The only limitation I encountered was with atmospheric lighting. I had planned to ‘bake’ the lighting as textures into the scene, but the high level of detail put too much strain on the computers I had access to. As a result, I had to compromise and use a version of the scene with standard lighting instead.
View the Final Project
Explore the space for yourself and become immersed in this online 3D experience.