Fullstack React: React and WebVR using A-Frame

React and WebVR using A-Frame  #ReactJS #WebVR

  • Today we are going to learn how to create a simple augmented reality experience using a library called A-Frame and React.
  • We are going to take what I learned from that and create a relatively simple application that takes an equirectangle image and use it as our back drop for the beginnings of a virtual experience.
  • A-Frame is a web framework used to build virtual reality experiences built on top of technologies like three.js and the WebVR API The Mozilla VR Team developed it as a fully open project.
  • We now need to import A-Frame into our React component and then add our first tag, the scene.
  • Update the render function of your component by adding some entities: – – A-Frame gives you access to a lot of primitive entities out of the box so we can add a sphere by just using the tag.

Editor’s Note: We are excited to have a guest blogger on our blog for this article! Jordan Papeleo is a technologist, programmer, and code mentor who has deep passions about growing developers, his community, his faith, and his mustache.
Continue reading “Fullstack React: React and WebVR using A-Frame”

5 simple steps to quickly start a new VR project – Hacker Noon

  • This will tell git to ignore the node_modules folder and the final bundled javascript file.Step 2: Create a file structureIn project, there will be two main components, a client and a server.
  • Since this project will use webpack to bundle the react code, add another two folders into the client folder, and name them ‘src’ and ‘dist’Step 3: Creating the ServerThis will create a Node/Express server that will serve the client whenever the url is called.Create a file inside the server folder and name it index.js.Inside terminal, type yarn install and press enter.
  • Inside the terminal type: touch webpack.config.js, then add this into the file:var path = require(‘path’);var SRC_DIR = path.join(__dirname, ‘/client/src’);var DIST_DIR = path.join(__dirname, ‘/client/dist’);module.exports = { entry: `${SRC_DIR}/index.jsx`, output: { filename: ‘bundle.js’, path: DIST_DIR }, module : { loaders : [ { test : /\.
  • Go to the terminal and type yarn build and after it’s done, type yarn start .
  • In the terminal, type:yarn add aframe aframe-react add this into index.jsx (this code is copied directly from aframe-react official repo):import React from ‘react’;import ReactDOM from ‘react-dom’;import ‘aframe’;import {Entity, Scene} from ‘aframe-react’;import ‘babel-polyfill’;import App extends React.Component { render () { return ( Scene Entity geometry={{primitive: ‘box’}} material={{color: ‘red’}} position={{x: 0, y: 0, z: -5}}/ Entity particle-system={{preset: ‘snow’}}/ Entity light={{type: ‘point’}}/ Entity gltf-model={{src: ‘virtualcity.gltf’}}/ Entity text={{value: ‘Hello, WebVR!’}}

A-Frame is a great way to get into developing VR, especially for those who come from a Javascript background. For those who dont know what A-Frame is, here is the official description taken directly…
Continue reading “5 simple steps to quickly start a new VR project – Hacker Noon”