React Vs React VR

Recently I built app in React VR that allows users to tour the solar system in VR. The intention was for it to be a learning tool for any one who wants to learn about the planets of our solar system. I had a lot of fun making it, and best of all I couldn’t believe how simple it was to make! So simple that I would go as far as saying if you are already developing in react, then you are de-facto already a ReactVR developer.

So what’s the deal with ReactVR and why is it so easy to pick up if you already know react? ReactVR is a library built on top of openGL libraries that allows developers to create VR experiences on the web. It does the heavy lifting of rendering a 3d environment, so you can focus on creating content to display. what makes it ReactVR so special, is the fact that its just React! You do not have to learn a new language like three.js(a popular javascript 3d engine). It follows the component architecture, and utilizes JSX. The VR portion of reactVR, requires that a developer uses special ReactVR components designed for the VR environment.

The code below shows what a small app would look like in ReactVR. There are four main VR components utilized.

  1. View
  2. Pano
  3. Text
  4. Model
import React, { Component } from 'react';
import { AppRegistry, asset, Pano, Text, View, Model, AmbientLight, VrButton, Video, VideoPano} from 'react-vr';
class Planet extends Component{
constructor(props){
super(props)
this.state = {
translate: [0,0,0],
scale: 0.05
}
}
componentWillMount(){
this.setState({
translate: this.props.translate,
obj: this.props.obj,
texture: this.props.texture
})
}
render(){
let translate = this.state.translate
let scale = this.state.scale
let obj = this.state.obj
let texture = this.state.texture
return(
<View>
<Pano source={asset('./panos/stars02.jpg')}/>
<AmbientLight intensity={ 0.50 } />
<Model
style={{
transform: [ {translate: translate},{scale: scale }]
}}
source={{obj:asset(obj)}}
texture={asset(texture)}
lit={true} />
</View>
)
}
}
class PlanetsVR extends Component {
render(){
const description = [
'Equatorial Diameter: 12,756 km',
'Polar Diameter: 12,714 km',
'Mass: 5.97 x 10^24 kg',
'Moons: 1 (The Moon)',
'Orbit Distance: 149,598,262 km (1 AU)',
'Orbit Period: 365.24 days',
'Surface Temperature: -88 to 58°C'
]
const planetContainer = <Planet translate={[-50,0,0]} obj='planet.obj' texture='4096_earth.jpg'/>
const planetName = 'earth'
return (
<View style={{
flex: 1,
flexDirection: 'column',
width: 50,
alignItems: 'stretch',
transform: [{translate:[0,0,-70]}]
}}>
<View style={{ margin: 0.1, height: 0.3}}>
{ planetContainer }
</View>
<View style={{ margin: 0.1, height: 3, transform: [{translate:[0,12,0]}]}}>
<Text style={{fontSize: 4, textAlign: 'left'}}>{ planetName }</Text>
</View>
<View style={{ margin: 0.1, height: 10, transform: [{translate:[0,10,0]}]}}>
{description.map((description)=>{
return <Text style={{fontSize: 2, textAlign: 'left'}}>{ description }</Text>
})}
</View>
</View>
)
}
}
AppRegistry.registerComponent('PlanetsVR', () => PlanetsVR);

This as compared to a 2d site showing the exact info that would look like

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component {
render() {
const description = [
'Equatorial Diameter: 12,756 km',
'Polar Diameter: 12,714 km',
'Mass: 5.97 x 10^24 kg',
'Moons: 1 (The Moon)',
'Orbit Distance: 149,598,262 km (1 AU)',
'Orbit Period: 365.24 days',
'Surface Temperature: -88 to 58°C'
]
const style = {
marginBottom: 10,
width: 200,
height: 200
};
return (
<div className="PlanetsContainer">
<div>
<img src='https://images-na.ssl-images-amazon.com/images/I/91Zst3cBAwL._SL1500_.jpg' style={style}/>
</div>
<div>
{description.map((note)=><div>{note}</div>)}
</div>
</div>
);
}
}
export default App;
Show your support

Clapping shows how much you appreciated Duncan maina’s story.