A-Frame (in progress!)

Table of Contents

Chapter 1 - A-Frame

Install and Debugging browsers

A-Frame boilerplates

IntelliJ Setup

  • Install NodeJS plugin
  • “Edit Configuration” > NodeJS. Before Launch > Add Npm “start”
  • Press “Play”

Editing in A-Frame

  • Add Sky <a-sky color="#C500FF"></a-sky>
  • Change sky using 360 degree panorama from Flickr

A-Frame.io Docs

A-Frame.io Docs Intro A-Frame Registry with Examples

  • A-Frame Animations
  • http://ngokevin.com/blog/aframe/
  • https://aframe.io/docs/0.2.0/core/animations.html

Deploy to device

3D Modelling

Google SketchUp http://www.sketchup.com/

React

  • Setup React https://github.com/ngokevin/aframe-react
  • Example http://codepen.io/fabricius/pen/VejpBp
  • Example2 https://github.com/sdras/react-aframe-demo1/blob/master/webpack.config.js
  • Example3 http://ngokevin.com/blog/aframe/
  • Example4 https://github.com/RSpace/aframe-meetup-example
  • Example5 https://github.com/povdocs/webvr-starter-kit
npm install --save aframe aframe-react react
npm install --save react-dom
npm install --save-dev webpack  
npm install --save-dev babel  
npm install --save-dev babel-loader 
npm install --save-dev babel-core

A-Frame Node.js Compatibility

  • Feature request for 0.5.0 https://github.com/aframevr/aframe/issues/2031
  • Link https://github.com/aframevr/aframe/issues/1989
  • Patterns https://addyosmani.com/largescalejavascript/
  • Patterns2 https://addyosmani.com/resources/essentialjsdesignpatterns/book/#modulepatternjavascript
  • Example React A-Frame https://medium.com/immersion-for-the-win/hands-on-with-virtual-reality-using-a-frame-react-and-redux-bc66240834f7#.3crhvt3t2
  • SurviveJS React https://github.com/survivejs/react/tree/dev/project_source
  • Angular A-Frame https://github.com/youmustfight/aframe-angular
  • FinTank WebVR A-Frame https://github.com/FintanK/webvr-angular-aframe
Written on November 5, 2016