Tags

, , , , , , , , , , , , ,

In my post Getting started with React 360 I built a virtual world on a web page, which I could pan around with my mouse or step into with my Oculus Rift virtual reality headset.

Let’s add an Image – wrapped in a VRButton – that when clicked will switch the background image of our world from dark starlit mountains to sun-scorched mountains!

First we need to source an image of the sun and moon on which to toggle our background image. Openclipart has the perfect sun and a tweakable moon, for which I add a bit of canvas padding in GIMP to get them sitting nice in my virtual world.

Next I work some magic on the default background image you get with React 360 to turn it from dark starlit mountains to sun-scorched mountains. Okay, not particularly impressive magic with my rubbish hands, just inverted the colour in GIMP with a decrease in brightness of 50.

So here we have the dark starlit mountains, and a new image of a sun ready to be clicked by the mouse or my Oculus Touch controllers:

And when we do click the image of the sun it switches to an image of a moon, whilst also switching the background image from dark starlit mountains to sun-scorched mountains:

Excellent! We can click on the image of the moon to reverse the switch.

The code changes were fairly minor. First I had to ensure that I imported the Image and Environment:

import { AppRegistry, StyleSheet, Text, View, VrButton, Image } from 'react-360';
import { Environment, asset, NativeModules } from 'react-360';

Next I added a some state to switch environment to and from the sun-scorched mountains:

state = {
  count: 0,
  isSunEnvironment: false
};

Then I plumbed in the VRButton click handler to update the state, as well as switching the background image between dark starlit mountains and sun-scorched mountains:

switchEnvironment = () => {
  
  // Switch environment
  const isSunEnvironment = this.state.isSunEnvironment;
  
  isSunEnvironment ? Environment.setBackgroundImage(asset('360_world.jpg')) : Environment.setBackgroundImage(asset('360WorldSun.jpg'));
  
  this.setState({isSunEnvironment: !isSunEnvironment});
};

The state then determines which Image to render within the VRButton i.e. the sun or the moon:

<VrButton
  onClick={this.switchEnvironment}>
  {this.state.isSunEnvironment ?
    <Image source={asset('Moon.png')} style={styles.switchEnvironment}/> : 
    <Image source={asset('Sun.png')} style={styles.switchEnvironment}/>
  }
</VrButton>

And lastly, a bit of style was added to the rendered Image:

switchEnvironment: {
  height: 100, 
  width: 100
},

And that’s it. Firefox hosts a virtual world that is able to switch between dark starlit mountains and sun-scorched mountains!

Here’s a video of the virtual world rendered to the Oculus Rift headset, with a Touch controller clicking on the VRButton to toggle the background image:

I’ve put the latest code for Saltwash360 on GitHub.