This is an Angular 4-based environment for building WebVR apps with Mozilla's A-frame.
Read my article describing the internals.
Notice: this demo contains graphics, SVGs and markups taken from the A-Frame homepage.
All copyrights regarding these materials belong to Mozilla and/or other companies and groups (MozVR team etc.).
Installation
yarn or
npm installBuilding
npm start build:prod Running with Hot-Reloading
Type
npm run start:hmr then open localhost:3000 in your browser.
Structure
The main component loads available vr modules at boot. By using a simple routing mechanism the Wrapper configures the VrElement Directive to activate a selected VR-module.
State Management
The application state management is done via @ngrx.
The currently available VR modules are located in app.loader.ts. Every module implements the IVrModule interface and must contain a single markup structure and several (optional) scripts. All of them will be injected as separate HTML script tags below the markup. The helper function for dynamic creation of components is located in ComponentFactory.
During the application start the VrModuleService registers all of the available modules by sending dispatch messages to @ngrx AppStore.
FAQ
Q: I'm getting Uncaught TypeError: Cannot assign to read only property 'detachedCallback' of object '#'!
A: A-Frame must be imported before Angular's Zone.js. This project's import 'aframe' is
located in polyfills.browser.ts.