Questions tagged [react-360]

React VR is a framework for the creation of VR applications that run in your web browser. It pairs modern APIs like WebGL and WebVR with the declarative power of react, producing experiences that can be consumed through a variety of devices. Leveraging web technologies and the existing React ecosystem, React VR aims to simplify the construction of 360 experiences and democratize the creation of VR content. If you're familiar with React, you can now build in VR – learn once, write anywhere. React VR takes heavy inspiration from react-native.

It was built and open sourced by Facebook in cooperation with Oculus and was first released on December 13th 2016.

While React VR is available as a standalone npm package, it's much easier to set up a new project by using the React VR CLI tool.

npm install -g react-vr-cli

Once installed, the CLI can be used to create a new project by running:

react-vr init PROJECT_NAME

Below is the starter template that your new project will contain:

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

class WelcomeToVR extends React.Component {
  render() {
    // Displays "hello" text on top of a loaded 360 panorama image.
    // Text is 0.8 meters in size and is centered three meters in front of you.
    return (
      <View>
        <Pano source={asset('chess-world.jpg')}/>
        <Text
          style={{
            fontSize: 0.8,
            layoutOrigin: [0.5, 0.5],
            transform: [{translate: [0, 0, -3]}],
          }}>
          hello
        </Text>
      </View>
    );
  }
};

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

Official links

• Documentation facebook.github.io/react-vr
• GitHub repository: github.com/facebook/react-vr