Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

README.md

image

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

You can’t perform that action at this time.