Code Monkey home page Code Monkey logo

angular-vr-starter's Introduction

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

angular-vr-starter's People

Contributors

brakmic avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

angular-vr-starter's Issues

Any chance to port this demo to Ionic 2?

Now that Ionic 2 is at rc0 and Angular 2 final is out, it looks like a good time to play with this on a mobile device! :)

I tried including the minified script for A-Frame in the index.html and didn't get very far:

Uncaught TypeError: Cannot assign to read only property 'detachedCallback' of object '#<a-node>'

I'm just getting into Angular 2, Ionic 2 & Typescript so I don't have yet the skills to do it myself right now, but I'll keep trying.

If you can help that'd be great!

Cannot find module

Hi!
i just clone this repo , and facing this error.

TSLint error:: Initialization error (tslint). Cannot find module 'E:\Angular\Angular-VR-Starter\node_modules\tslint'

i m new to angular and A-Frame , Kindly can u guide me what wrong with this...?

Just Testin

I just wanted to ask/say I tested this out. When I moved in a direction and kept holding the wsad after i released the mouse i kept moving in the nese => wdsa direction that i had holding even when my hands were off the keyboard.

specs {
mb: asus x:99;
cpu: i7 5820k;
32gb ram;
980ti hybrid 6gb nvidia
}

protractor conf with Aframe

Why do you require the zone, after disabling the protractor synchronisation? I think it is to prevent e2e test from timing out. But could you please clarify?

onPrepare: function() {
        browser.ignoreSynchronization = true;
        require(helpers.root('node_modules/zone.js/dist/zone-node'));
    },

How to dynamically add entities

Hey there!

Is it possible to add entititys dynamically to the scene? So for example if you click
a button in vr it creates another entity (not from the pool).

Thanks!

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.