Building VR experiences with React360

Do you know you can develop multi platform VR experience just like you build web apps?
Let's see together how to start developing 360 and VR apps running in the browser using React360 from Facebook.
This talk with cover an use case from 0 to deploy. We will go from the configuration of the dev environment, walk into the most common
UI and interactions to use, and will deploy a VR experience ready to be tested with your device, from smartphone to VR headset.

Transcript

1. Building VR Experiences with React360
2. @joaolaq https://laquysoft.com/
3. What is React 360 React 360 is a framework for the creation of 3D and VR user interfaces. Built on top of React – a library designed to simplify the creation of complex UI – React 360 allows you to use familiar tools and concepts to create immersive 360 content on the web. https://facebook.github.io/react-360/
4. Install Node.js https://nodejs.org/it/download/
5. Install React 360 CLI
6. Init Project
7. Init Project
9. Start
11. import React from 'react'; import { AppRegistry, StyleSheet, Text, View, } from 'react-360'; export default class HelloVR extends React.Component { render() { return ( <View style={styles.panel}> <View style={styles.greetingBox}> <Text style={styles.greeting}> Welcome to React 360 </Text> </View> </View> ); } };
12. const styles = StyleSheet.create({ panel: { // Fill the entire surface width: 1000, height: 600, backgroundColor: 'rgba(255, 255, 255, 0.4)', justifyContent: 'center', alignItems: 'center', }, greetingBox: { padding: 20, backgroundColor: '#000000', borderColor: '#639dda', borderWidth: 2, }, greeting: { fontSize: 30, }, });
13. import {ReactInstance} from 'react-360-web'; function init(bundle, parent, options = {}) { const r360 = new ReactInstance(bundle, parent, { // Add custom options here fullScreen: true, ...options, }); // Render your app content to the default cylinder surface r360.renderToSurface( r360.createRoot('HelloVR', { /* initial props */ }), r360.getDefaultSurface() ); // Load the initial environment r360.compositor.setBackground(r360.getAssetURL('360_world.jpg')); } window.React360 = {init};
14. Cylinder
15. import { ReactInstance, Surface } from 'react-360-web'; function init(bundle, parent, options = {}) { const r360 = new ReactInstance(bundle, parent, { // Add custom options here fullScreen: true, ...options, }); const customCylinder = new Surface( 4680, 600, Surface.SurfaceShape.Cylinder ); // Render your app content to the default cylinder surface r360.renderToSurface( r360.createRoot('HelloVR', { /* initial props */ }), //r360.getDefaultSurface(), customCylinder ); ....
16. Flat
17. import React from 'react'; import { AppRegistry, asset, StyleSheet, Image } from 'react-360'; export default class Painting extends React.Component { render() { const { canvas } = styles; return <Image style={canvas} source={asset(this.props.image)} />; } } const styles = StyleSheet.create({ canvas: { height: 400, width: 600 } });
18. const customCylinder = new Surface( 4680, 600, Surface.SurfaceShape.Cylinder ); const flatSurface = new Surface(600, 400, Surface.SurfaceShape.Flat); flatSurface.setAngle(-Math.PI / 2, 0); // Render your app content to the default cylinder surface r360.renderToSurface( r360.createRoot('HelloVR', { /* initial props */ }), r360.getDefaultSurface(), customCylinder ); r360.renderToSurface( r360.createRoot('Painting', { image: 'starry-night.jpg' }), flatSurface );
19. .... }, greeting: { fontSize: 30, }, }); AppRegistry.registerComponent('HelloVR', () => HelloVR); AppRegistry.registerComponent('Painting', () => Painting);
20. 3D Model
21. import React from 'react'; import { AppRegistry, asset, View } from 'react-360'; import Entity from 'Entity'; import AmbientLight from 'AmbientLight'; import PointLight from 'PointLight'; export default class Earth extends React.Component { render() { return ( <View> <Entity source={{ gltf2: asset('earth.gltf') }} style={{ transform: [ { translate: [0, 1.5, 0] }, { scale: 0.001 }, { rotateY: 180 } ] }} /> </View> ); }
22. import React from 'react'; import { AppRegistry, asset, View } from 'react-360'; import Entity from 'Entity'; import AmbientLight from 'AmbientLight'; import PointLight from 'PointLight'; export default class Earth extends React.Component { render() { return ( <View> <AmbientLight intensity={1.0} color={'#fff'} /> <PointLight intensity={1} style={{ transform: [{ translate: [0, 1, -1] }] }} /> <Entity source={{ gltf2: asset('earth.gltf') }} style={{ transform: [ { translate: [0, 1.5, 0] }, { scale: 0.001 }, { rotateY: 180 } ]
23. ... r360.renderToSurface( r360.createRoot('Painting', { image: 'starry-night.jpg' }), flatSurface ); const location = new Location([0, -1, -1]); r360.renderToLocation(r360.createRoot('Earth'), location); ...
24. .... }, greeting: { fontSize: 30, }, }); AppRegistry.registerComponent('HelloVR', () => HelloVR); AppRegistry.registerComponent('Painting', () => Painting); AppRegistry.registerComponent('Earth', () => Earth);
26. Input
27. render() { return ( <View style={styles.wrapper}> <Background uri={current.uri} format={current.format} /> <View style={styles.controls}> <VrButton onClick={this._prevPhoto} style={styles.button}> <Text style={styles.buttonText}>{'<'}</Text> </VrButton> <View> <Text style={styles.title}>{current.title}</Text> </View> <VrButton onClick={this._nextPhoto} style={styles.button}> <Text style={styles.buttonText}>{'>'}</Text> </VrButton> </View> </View> );
28. Deploy
31. https://facebook.github.io/react-360/
32. https://developers.facebook.com/blog/post/2019/07/09/j oin-2019-developer-circles-community-challenge/
33. Thanks