Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Building VR experiences with React360

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.

A59baf8d7898908b4979bb9d5f33bb9b?s=128

Giovanni Laquidara

August 21, 2019
Tweet

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

  8. None
  9. Start

  10. None
  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);
  25. None
  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

  29. None
  30. None
  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