[ReactVR] Start a Virtual Reality Project Using the React VR CLI

We will learn how to set up a React VR project, run the development mode with hot reloading, and take a small dive into the generated code and make a small change.

 

Install:

npm -g i react-vr-cli

 

Create app:

react-vr init app

 

Enable hotreload:

localhost:8081/vr/?hotreload

 

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

export default class app extends React.Component {
  render() {
    return (
      <View>
        <Pano 
          style={{
            transform: [{rotateY: "10deg"}]
          }}
          onLoad={() => {console.log('Image is loaded successfully')}}
          onLoadEnd={() => {console.log('Load end')}}
          source={asset('mittel.jpg')}
          />
        <Text
          style={{
            backgroundColor: '#777879',
            fontSize: 0.8,
            fontWeight: '400',
            layoutOrigin: [0.5, 0.5],
            paddingLeft: 0.2,
            paddingRight: 0.2,
            textAlign: 'center',
            textAlignVertical: 'center',
            transform: [{translate: [0, 0, -3]}],
          }}>
          hello world
        </Text>
      </View>
    );
  }
};

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

 

'source' can also take array of assets:

<Pano
    source={[asset('right.png'), asset('left.png'), asset('up.png'), asset('down.png'), asset('back.png'), asset('front.png')]} 
/>