React VR: Event Handeling

Coding Commanders Newsletter

In this lesson we will learn about React VR events.
Everything I know about Virtual Reality programming, I learned from Praveen, BocaJS and Google!

When creating a Virtual Reality application, your code has to acount for multiple devices. React VR allows one event handler to handle multiple devices (e.g. mouse on PC or gaze on cardboard headsets). Events occur in relation to the cursor's position.

onEnter

onEnter happens when the curser first touches a component.

onEnter={() => this.setState({radius: 1})}
      

onExit

onExit happens when the curser is no longer touching the component.

onExit={() => this.setState({radius: .5})}
  

Coding Practice

To practice event handeling, I am going to make another spaceship. The spaceship will get bigger onEnter and go back to its inital size onExit. We will start with the code below:

import React, { Component } from 'react';

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

export default class Basics extends Component {

 	render() {
		return (
                      <View>
                        <Pano source={asset('space-sky.jpg')}></Pano>
                      </View>
		)
	}
};

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

Step 1: Import Sphere

I am making my spaceship out of a sphere, so I have to import the "sphere" component.

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

➼ Sphere - (spaceship)

Step 2: Make Spaceship

Next, I will make a spaceship and add it to the view.

<View>
  <Pano source={asset('space-sky.jpg')}></Pano>
  <Sphere
    radius={.5}
    widthSegments={10}
    heightSegments={7}
     style={{
       transform: [
           {translate: [0, -1, -3]},
           {rotateX: 45},
           {rotateY: 90},
           {rotateZ: 90},
         ]
     }}
     texture={src=asset('soMetal.jpeg')}
   
</View>
  

➼ Spaceship Code - See 3D Primitives and Transform

Step 3: Constructor

Next we will add a constructor. Inside the constructor we will initialize state. We will set radius equal to .5. This will be the radius of our sphere (spaceship).

// constructor
constructor() {
  super();
  this.state = {
      radius: .5
    };
}
  

➼ constructor - Here is our constructor.
➼ super() - super must be called before using this
➼ this.state - initalizing state
➼ radius - radius equal to .5

Step 4: Edit Spaceship

Now, we will edited our spaceship (sphere) code.

<Sphere
  onEnter={() => this.setState({radius: 1})}
  onExit={() => this.setState({radius: .5})}
  radius={this.state.radius}
  widthSegments={10}
  heightSegments={7}
   ...
/>
  

➼ onEnter - When the cursor touches the spaceship, its radius will equal 1.
➼ onExit - Once the cursor is no longer touching the spaceship, its radius will go back to .5
➼ radius - The radius of the sphere is equal to this.state.radius, which we intialized at .5.

You should see something like this:

Full Lesson Code

import React, { Component } from 'react';

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

export default class Basics extends Component {
  // constructor
  constructor() {
    super();
    this.state = {
        // spaceship radius
        radius: .5
  		};

 }

  render() {

    return (
      <View>
        <Pano source={asset('space-sky.jpg')}></Pano>

          <Sphere
            onEnter={() => this.setState({radius: 1})}
            onExit={() => this.setState({radius: .5})}
            radius={this.state.radius}
            widthSegments={10}
            heightSegments={7}
             style={{
               transform: [
                   {translate: [0, -1, -3]},
                   {rotateX: 45},
                   {rotateY: 90},
                   {rotateZ: 90},

                 ]
             }}
             texture={src=asset('soMetal.jpeg')}
         />
      </View>
    )
  }
};

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

The Best VR Headset:
Oculus Rift + Touch Virtual Reality System



More Affordable Option:
Google Daydream View - VR Headset (Crimson)



Cheap Option:

Google Cardboard,Topmaxions 3D VR Virtual Reality DIY VR Headset For 3D Movies and Games Compatible with Android & Apple Up to 6 Inch Easy Setup Machine



Instructions for setting up ReactVR on cardboard:
React VR dev environment working with an Android Cardboard HMD

Back to Lesson 10 | Continue to Lesson 12