Home Linux HTML/CSS PHP React VR Blog PHP Fiddle

React VR: Event Handeling






Coding Commanders Newsletter



Quick Copy Boxes



JavaScriptReact VREvent Handeling

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);
  


Color Selector



Hex:


RBG:


If you find my tutorials helpful, please consider donating to support my free web development resources.

The more money I raise, the more content I can produce.

Thank you,
Commander Candy

DONATE



Check out my blog:

Coding Commanders Blog





Questions? Contact me on my social media:

YouTube

GitHub

Facebook

Instagram

Twitter

T-shirt Shop

Back to Lesson 10 | Continue to Lesson 12