VR Escape Room

Personal Project

HTML5, CSS3, JavaScript, AFrame

Visit live website

This website is available for 1440px screen size. This project was created for the Creative Media Design subject in my diploma. This escape room is an extended version of a WebVR horror story called 'The Old Lady's House'. In the escape room, the player explores inside the old lady's houses and other houses in the neighbourhood to find clues and collect objects that have been scattered around the area. Users can explore inside the house with the 'WASD' key on their keyboard and mouse to interact with some of the objects and do things like playing sounds, seeing objects moving, and showing pop-up boxes with more stories.

CHALLENGE

3D models need to be resized and relocated based on real-world object proportions to maintain realism. To ensure users stay inside one house when exploring (and do not get through the walls), an extension code of AFrame is needed.

SOLUTIONS

Using references of real-world objects through images and photos, I can get a depiction of how much I need to resize or relocate the 3D models. To get the extension code, I went through Github and found an open-source code I can use to set boundaries on the house walls that users can't get through.

DESIGN PROCESS

1. Writing the storyline, clues, and puzzles

The storyline includes a background story or opening messages and interactive treats for some 3D models, such as the clues and puzzles for the escape room.

2. Collecting 3D models and sounds

After settling down with the environment concept, I gathered 3D models and the supporting sound effects from the stock website.

3. Coding the website

Using HTML as the main content, CSS as the styling, JavaScript as the interactivity, and web framework AFrame, the web virtual reality experience is built. In this stage, the 3D models are implemented (resized and relocated) to the environment.

LIKE WHAT YOU SEE?