• Current Version : Unreleased
• Current Status : Completed
• Date : 05-07-2019

Shivank Shekhar

Maze Game has been built with the purpose to explore the intermingling of WebVR API and Threejs.
In order to explore this I decided to use Aframe for this project since Aframe. Since Aframe can be developed from a plain HTML file without having to install anything.
A-Frame is a web framework for building virtual reality (VR) experiences. A-Frame is based on top of HTML, making it simple to get started. But A-Frame is not just a 3D scene graph or a markup language; the core is a powerful entity-component framework that provides a declarative, extensible, and composable structure to three.js.
Due to my early days back exploration into Virtual Reality were using Aframe itself so I found this framework really interesting and powerful.

The following features of Aframe have been used in the development of this application.

1. Just dropping in a <script> tag and <a-scene>. A-Frame handles 3D boilerplate, VR setup, and default controls. Nothing to install, no build steps.
2. A-Frame's a powerful three.js framework, provides a declarative, composable, reusable entity-component structure to this code. HTML is just the tip of the iceberg; one can have unlimited access to JavaScript, DOM APIs, three.js, WebVR, and WebGL.
3. Many A-Frame’s core components such as geometries, materials, lights, animations, models, raycasters, shadows, positional audio, text, and controls for most major headsets have been used in the code to make it sharable and usable across many devices.
4. Aframe provides the most lightweight VR applications.

The Maze Game application is loaded with cool features that one can use to enhance the game experience.

Information about the aframe builds used can be found in the libs and

<!--Libraries & external scripts Import-->
    <script src="libs/aframe.js"></script>    <!--Aframe.js(v0.3.0) Library-->
    <script src="libs/aframe-extras.js"></script>    <!--Aframe-extras.js(v2.6.1) Library-->
    <script src="libs/aframe-text-component.min.js"></script>   <!--Aframe library used for rendering text-->
    <script src="libs/lz-string.min.js"></script>   <!--LZ-based compression algorithm for JavaScript-->
    <script src="libs/aframe-bmfont-text-component.js"></script>    <!--Aframe library used for rendering bitmap font text-->
    <script src="src/common.js"></script>    <!--JavaScript for the game-->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/aframe-glow-component.js"></script>

Two main file components are necessary to run the application index.html and common.js which is the core logic file.

Other Important files in the code are

1. aframe.js - To include A-Frame in an HTML file, we drop a <script> tag pointing to the CDN build or we can download the JS build and add them to the code.
2. aframe-bmfont-text-component.js - This is a JS component useful for rendering bitmap and signed distance field font text in A-Frame. Basically, it wraps Matt DesLauriers' three-bmfont-text and load-bmfont.
3. aframe-extras.js - These are Add-ons and helpers for A-Frame VR. Includes components for controls, model loaders, path-finding, and more.
4. aframe-text-component.min.js - A text component for A-Frame. The text geometry component wraps THREE.TextGeometry.
5. lz-string.min.js - LZ-based compression algorithm for JavaScript

Warning (migrating from version 1.3.4 - nov 2014).Files have changed locations and name since a recent release. The new release file is in libs/lz-string.min.js (or in libs/lz-string.js) . Visit lz-string for more details.

This installation section offers several ways to get started with A-Frame projects like this one, although most methods don’t require any actual installation since A-Frame is primarily HTML and JavaScript.

1. Download this code and Remix on Glitch

You will need to change paths of assets since glitch does not allow assets to be put in extra folders.

Another way to Run the project on Glitch would be to fork it and open the project as a glitch project.

2. You can use other online code editors to remix this project like :

• Mozilla Thimble
• CodePen

For using this game on your local machine follow the steps:

We should develop projects using a local server so that files are properly served. Options of local servers include:

1. Downloading the Mongoose application and opening it from the same directory as your HTML file.
2. Running python -m SimpleHTTPServer (or python -m http.server for Python 3) in a terminal in the same directory as your HTML file.
3. Running npm install -g live-server && live-server in a terminal in the same directory as your HTML file.
4. Once we are running our server, we can open our project in the browser using the local URL and port which the server is running on (e.g., http:https://localhost:8000). Try not to open the project using the file:https:// protocol which does not provide a domain; absolute and relative URLs may not work.
5. Clone the project using git-clone URL and run the index.html file.

There is one reported bug in this project (as tested across 5 different devices, both mobile and desktop)

Jittering Screen (On Mobile browsers only) : This issue is due to a hypersensitive gyroscope readings and because DeviceMotionEvent.rotationRate units have changed from degrees per second to radians on Chrome m66

There has been a prolonged discussion on this ISSUE and the only solution was to update to newest version of aframe.

To resolve this issue, I tested the application heavily across v.9.2,0.9.0,0.8.0,0.7.0,0.4.0 and related extras files but the problem still persist

The issue has been raised at Aframe Slack Channel and you can follow #issues and #questions to keep updated on the progress.

This readme will be updated once the issue is resolved.

All other components are working fine as of today.

Aframe Creator: NGO Kevin @ngokevin

Special Thanks : Diego Marcos @dmarcos