|
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.
<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.
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 |
|
|
|
|
|