Highbridge

Highbridge is a Virtual Reality (VR) application designed to immerse users in a web-based virtual world. This application offers room navigation, sound, and user interactivity through VR buttons and info panels.

Key Features • How To Use • Tech Stack • Related • Credit

Key Features

• 3D Navigation - Navigate and change environments
  • Immerse in a VR experience directly from your web browser
• Interaction - Move, click, open, and read
  • Engage in multiple ways, from clicking buttons to modifying settings
• Sound support
• Video/images support
• VR Experience - Dive into Virtual Reality using a VR headset
• Story Telling - Uncover the narrative of each room
• Seamless Navigation - Traverse the experience and return to the start anytime
• Consistent Components - Some elements, like the sound button, are always available
• Cross Browser Compatibility - Works on Chrome, Safari, Mozilla, Opera, IE
• Full-screen mode
  • Get a distraction-free experience
• Cross-Platform Support
  • Ready for Windows, macOS, and Linux

How To Use

• Click on START YOUR TRIP

  

• Use the arrows to navigate between rooms

  

• Click on the bows for exclusive printables

• Access story details by clicking the eyeballs

• Full Experience

Tech Stack

• A-Frame.js - This application was developed using A-Frame.js, an open-source framework for building web-based VR experiences.
• ReactJS - Leveraging the ReactJS framework enabled efficient app development. It played a pivotal role in calculations, data structure management, and adopting modern syntax.
• JavaScript - The core functionalities relied heavily on JavaScript for execution.

The Highbridge is driven by a config.json file that holds all necessary properties for the experience. The application reads from this file, interprets the data, and subsequently delivers the experience. This approach was chosen to keep the application both simple and comprehensible. While the creation and debugging of the config.json were labor-intensive, the outcome is genuinely rewarding.

MadeInBrooklynGames took on this project without prior experience in A-Frame.js. However, their dedication and perseverance have paid off, resulting in this fantastic VR experience.

Related

• A-Frame.js
• A-Frame.js Introduction
• VR Examples

Credit

• Marcos
• Hessvacio
• Akil

Updates

Now, with video support on video.html