Building a Full-Sphere 3D Image Gallery with React VR

React VR is a JavaScript library by Facebook that reduces the effort of creating a WebVR application. You may compare React VR with A-Frame by Mozilla, but instead of writing HTML, with React VR we are using JavaScript to create a WebVR scene.

React VR is built on the WebGL library three.js and the React Native framework. This means we are able to use JSX tags, React Native components, like <View> or <Text>, or React Native concepts, like the flexbox layout. To simplify the process of creating a WebVR scene, React VR has a built-in support for 3D meshes, lights, videos, 3D shapes, or spherical images.

via GIPHY

Today we want to use React VR to build a viewer for spherical images. For this we will use four equirectangular photos, I shot at React Conf 2017 with my Theta S camera. The gallery will have four buttons to swap the images, that will work with the mouse and or VR headset. You can download the equirectangular images as well as the button graphics here. Last but not least, we will take a look at how animations work with React VR by adding a simple button transition.

For development, we are using a browser like Chrome on the desktop. To check if the stereoscopic rendering for VR devices works, we are using a Samsung phone with Gear VR. In theory, any mobile browser capable of WebVR should be able to render our app in a stereoscopic way for the usage with GearVR, Google Cardboard, or even Google Daydream. But the library, as well as the API, are still under development, so the support may not be reliable. Here is a good summary of browsers currently supporting WebVR features.

Development Setup and Project Structure

Let us start by installing the React VR CLI tool. Then we are creating a new React VR project with all its dependencies in a new folder called GDVR_REACTVR_SITEPOINT_GALLERY:

npm install -g react-vr-cli
react-vr init GDVR_REACTVR_SITEPOINT_GALLERY
cd GDVR_REACTVR_SITEPOINT_GALLERY

To start a local development server, we will run an npm script and browse to http://localhost:8081/vr/ in Chrome.

npm start

If you see a black and white room with stairs, pillars, and a “hello” text plane, everything is correct.

via GIPHY

The most important files and folders scaffolded by the React VR CLI are:

  • index.vr.js: This is the entry point of the application. At the moment the file contains the whole source code of React VR’s default scene, we already saw in the browser.
  • static_assets: This folder should contain all assets used in the application. We will put the equirectangular images and the button graphics in this folder.

We want our project to have three components:

  • a Canvas component, that holds the code for the full-sphere images,
  • a Button component, that creates a VR button to swap the images,
  • and a UI component, that builds a UI out of four Button components.

The three components will each have their own file, so let us create a components folder to contain these files. Then, before we start creating the Canvas component, let us remove the scaffolded example code from the index.vr.js file so it looks like this:

/* index.vr.js */
import React from 'react';
import {
  AppRegistry,
  View,
} from 'react-vr';

export default class GDVR_REACTVR_SITEPOINT_GALLERY extends React.Component {
  render() {
    return (
      <View>
      </View>
    );
  }
};

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

Adding a Spherical Image to the Scene

To add a spherical image to the scene, we will create a new file Canvas.js in the components folder:

/* Canvas.js */
import React from 'react';
import {
  asset,
  Pano,
} from 'react-vr';

class Canvas extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      src: this.props.src,
    }
  }

  render() {

    return (
      <Pano source={asset(this.state.src)}/>
    );
  }
};

export default Canvas;

In the first six lines of code, we import the dependencies. Then we declare our Canvas component and define how it renders by using the JSX syntax.

If you want to learn more about JSX, you might want to read “Getting Started with React and JSX”.

A look at the JSX code reveals that the Canvas component returns only one component, the React VR <Pano> component. It has a parameter, the source prop, that uses an asset function to load the image from the static_assets folder. The argument refers to a state, which we initialized in the constructor function.

In our case, we do not want to define the path in the Canvas component itself, but use the index.vr.js file to define all image paths. This is why the state.src object refers to the component’s props object.

Check out the ReactJS documentation for React.Component if you would like to know more about state and props.

Let us continue by modifying the index.vr.js file to use the Canvas component and render it to the scene:

/* index.vr.js */
import React from 'react';
import {
  AppRegistry,
  View,
} from 'react-vr';
import Canvas from './components/Canvas';

export default class GDVR_REACTVR_SITEPOINT_GALLERY extends React.Component {

  constructor() {
    super();

    this.state = {
      src: 'reactconf_00.jpg',
    };
  }

  render() {
    return (
      <View>
        <Canvas
          src={this.state.src}
        />
      </View>
    );
  }
};

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

Continue reading %Building a Full-Sphere 3D Image Gallery with React VR%


Source: Sitepoint