Hein Pauwelyn

Action

Author

Authority

Debator

Editor

Enquirer

Organiser

Participant

If Owner

Member Types

Have no restrictions on voting frequency

silver

Bypass spam checks when posting content

silver

gold

SubEditor, Mentor, Protector, Editor

Store personal files in your account area

platinum

SubEditor, Editor

Have live hyperlinks in your profile

bronze

silver

SubEditor, Protector, Editor

Have the ability to include a biography in your profile

bronze

silver

SubEditor, Protector, Editor

Edit a Question in Q&A

silver

Yes

SubEditor, Protector, Editor

Edit an Answer in Q&A

silver

Yes

SubEditor, Protector, Editor

Delete a Question in Q&A

Yes

SubEditor, Protector, Editor

Delete an Answer in Q&A

Yes

SubEditor, Protector, Editor

Report an Article

silver

SubEditor, Mentor, Protector, Editor

Approve/Disapprove a pending Article

gold

SubEditor, Mentor, Protector, Editor

Edit other members' articles

SubEditor, Protector, Editor

Create an article without requiring moderation

platinum

SubEditor, Mentor, Protector, Editor

Approve/Disapprove a pending Question

Protector

Approve/Disapprove a pending Answer

Protector

Report a forum message

silver

bronze

Protector, Editor

Approve/Disapprove a pending Forum Message

Protector

Have the ability to send direct emails to members in the forums

Protector

Create a new tag

silver

Modify a tag

silver

React VR vs. A-frame

Hein Pauwelyn11-Mar-17 5:34

Hein Pauwelyn

11-Mar-17 5:34

I've done some R&D how to create Web VR and found that there are two libraries made for making Web VR applications. Web VR is an experimental JavaScript API that provides access to Virtual Reality devices, such as the Oculus Rift, HTC Vive, Samsung Gear VR, or Google Cardboard, in your browser.

The fist one I've found is A-Frame. This framework uses the Entity-Component-System. This means that A-frame follows the Composition over inheritance principle that allows greater flexibility in defining entities where every object in a game's scene is an entity. The pro of this framework is that it's the documentation is very good and almost every Web VR application uses this framework. Below you could find a demo I've made.

HTML

<script src="https://aframe.io/releases/0.2.0/aframe.min.js"></script>

<a-scene>
  <a-box id="thebox" color="#6173F4" width="2" height="1" depth="1" position="0 1 0" rotation="10 0 10" scale="2.5 0.5 2" src="http://i.imgur.com/NVHVwzd.jpg">
    <a-animation attribute="rotation" begin="click" repeat="indefinite" to="10 1440 10" dur="10000"></a-animation>
    <a-event name="mouseenter" scale="1 0.5 1"></a-event>
  </a-box>

  <a-camera position="0 3 5">
    <a-cursor color="red"></a-cursor>
  </a-camera>

  <a-sky src="http://i.imgur.com/vhdUJIg.jpg"></a-sky>
</a-scene>

The other library I've found is React VR. This framework is really new and the documentation is small and it's difficult to create a working application with it. This comes because the library is not mature enough to develop stable applications with it. The advantage is that the React VR is build on the React Native library that could be used to create native web applications.

JavaScript

import React from 'react';
import { AppRegistry, asset, StyleSheet, Pano, Text, View, Mesh, VrButton, AmbientLight } from 'react-vr';

export class ColorButton extends React.Component {

    selectedColor = "white";

    render() {
        return (
            <VrButton onClick={() => this.colorLight(this.props.name)}>
                <View style={{ margin: 0.1, height: 0.3, backgroundColor: this.props.name }}>
                    <Text style={{ fontSize: 0.2, textAlign: 'center' }}>{this.props.name}</Text>
                </View>
            </VrButton>
        );
    }

    colorLight(color) {
        if (this.selectedColor !== color) {
            this.selectedColor = color;
            console.log(`selectedColor is updated to: ${this.selectedColor}.`);
        }
    }
}

class pokemongo extends React.Component {

    render() {
        return (
            <View>
                <Pano source={'http://i.imgur.com/vhdUJIg.jpg'} />
                <Mesh source={{ mesh: 'https://goo.gl/Pbac72', mtl: 'https://goo.gl/dYCQwQ' }} 
                      style={{ height: 1 }}></Mesh>

                <View style={{ flex: 1,
                               flexDirection: 'column',
                               width: 2,
                               alignItems: 'stretch',
                               transform: [{ translate: [-1, 1, -5] }] }}>

                    <ColorButton name="red"></ColorButton>
                    <ColorButton name="orange"></ColorButton>
                    <ColorButton name="yellow"></ColorButton>
                    <ColorButton name="green"></ColorButton>
                    <ColorButton name="blue"></ColorButton>
                    <ColorButton name="indigo"></ColorButton>
                    <ColorButton name="violet"></ColorButton>
                    <Text>Selected color: 
                        <span onchange={ColorButton.selectedColor.toString()}>
                            {ColorButton.prototype.selectedColor}
                        </span>
                    </Text>
                </View>

                <AmbientLight intensity={100} color={ColorButton.prototype.selectedColor}></AmbientLight>
            </View>
        );
    }
};

AppRegistry.registerComponent('pokemongo', () => pokemongo);

If you use A-frame you can choose to use AngularJS, Angular 2, JQuery or React Native.

Both libraries uses a third party library named Three.js. This is an JavaScript API for rendering interactive 2D and 3D graphics inside a HTML canvas element.

Below you could find a table with an overview of both libraries.

|                               | React VR                                  | A-Frame                                      |
| ----------------------------- | ----------------------------------------- | -------------------------------------------- |
| First release                 | December 13, 2016                         | December 16, 2015                            |
| Official site                 | facebookincubator.github.io/react-vr      | aframe.io                                    |
| Quality of documentation      | Small                                     | Better                                       |
| Difficulty of development     | High                                      | Low                                          |
| Other framework that are used | React native; OVRUI; Three.js             | Three.js                                     |
| Possible to integrate with    | Unknown                                   | React; Angular; JQuery; Redux; Vue.js; d3.js |
| Other information             | Build on React Native                     | Used Entity-Component-System (ECS)           |
| Download with NPM             | npm install --save react-vr               | npm install --save a-frame                   |