Learn React VR (Chapter 1 | Hello Virtual World)

Michael Mangialardi
Jun 8, 2017 · 13 min read
Image for post
Image for post

Prerequisites

What is This All About?


Hello Virtual World

Image for post
Image for post

React VR is a framework for building VR apps using JavaScript. It makes use of the same design as React.

Image for post
Image for post
Image for post
Image for post

Image for post
Image for post

React VR makes use of Three.js under the hood.

React Native makes use of the Flexbox Layout which is an alternative to a Grid Layout for positioning elements within a user interface.

Image for post
Image for post
React Native Flexbox Layout Example

View defines the layout (that is supported by Flexbox) and allows us to define styles.

<div class="container" style="width: 50%; height: 50% ..."></div>
<div className="container" style={{background: "#FFFFFF"}}></div>
<View style={{backgroundColor: 'blue', flex: 0.3}} />

The Image core component is used to display different types of images.

<Image source={require('./my-icon.png')} />

The Text component is used to display text on whatever platform is running the code.

<Text>Hello World!</Text>
Image for post
Image for post

The Pano component is used for displaying 360-degree panoramic photos.

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

Hello Virtual World Example

Image for post
Image for post
npm install -g react-vr-cli
react-vr init HelloVirtualWorld
cd HelloVirtualWorld
Image for post
Image for post
Image for post
Image for post
{
"presets": ["react-native"]
}
AppRegistry.registerComponent('HelloVirtualWorld', () => HelloVirtualWorld);
<script>
// Initialize the React VR application
ReactVR.init(
// your compiled index.bundle.js
'../index.vr.bundle?platform=vr&dev=true', // Attach it to the body tag document.body
);
</script>
npm start
Image for post
Image for post
Image for post
Image for post
<Pano source={asset('chess-world.jpg')}/>
Image for post
Image for post
Image for post
Image for post
<Pano source={asset('horseshoe-bend.jpg')}/>
<Text
style={{
backgroundColor: '#777879',
fontSize: 0.8,
fontWeight: '400',
layoutOrigin: [0.5, 0.5],
paddingLeft: 0.2,
paddingRight: 0.2,
textAlign: 'center',
textAlignVertical: 'center',
transform: [{translate: [0, 0, -3]}],
}}>
hello
</Text>
Image for post
Image for post
transform: [{translate: [0, 0, -5]}],//will appear farther away than to -3
Image for post
Image for post
Hello Visual World Demo

Final Code

Concluding Thoughts

Chapter 2

Support the Author


Coding Artist

Providing journeys for developers who see the web as their…