Angular VR Starter Save Abandoned

This is an Angular 4-based environment for building WebVR apps with Mozilla's A-frame.

Live Demo

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 install

Building

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.

License

MIT