Created
April 22, 2017 22:12
-
-
Save DigiTec/c910853f6954422b47493304b741f37e to your computer and use it in GitHub Desktop.
Hack a ReactVR application to display two different scenes in the same page (kind of like a feed)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Auto-generated content. | |
| // This file contains the boilerplate to set up your React app. | |
| // If you want to modify your application, start in "index.vr.js" | |
| // Auto-generated content. | |
| import {VRInstance} from 'react-vr-web'; | |
| // *** Previously vrapp was hardcoded, by adding it we can target our init | |
| // *** and have it choose a specific component. | |
| function init(bundle, vrapp, parent, options) { | |
| const vr = new VRInstance(bundle, vrapp, parent, { | |
| // Add custom options here | |
| ...options, | |
| }); | |
| vr.render = function() { | |
| // Any custom behavior you want to perform on each frame goes here | |
| }; | |
| // Begin the animation loop | |
| vr.start(); | |
| return vr; | |
| } | |
| window.ReactVR = {init}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script> | |
| // Initialize the React VR application | |
| ReactVR.init( | |
| // When you're ready to deploy your app, update this line to point to | |
| // your compiled index.bundle.js | |
| '../index.vr.bundle?platform=vr&dev=true', | |
| // *** Point at the original component. | |
| 'empty', | |
| // Attach it to the body tag | |
| document.getElementById("first") | |
| ); | |
| // Initialize the React VR application | |
| ReactVR.init( | |
| // When you're ready to deploy your app, update this line to point to | |
| // your compiled index.bundle.js | |
| '../index.vr.bundle?platform=vr&dev=true', | |
| // *** Point at a different component | |
| 'empty2', | |
| // Attach it to the body tag | |
| document.getElementById("second") | |
| ); | |
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React from 'react'; | |
| import { | |
| AppRegistry, | |
| asset, | |
| StyleSheet, | |
| Pano, | |
| Text, | |
| View, | |
| } from 'react-vr'; | |
| export default class empty extends React.Component { | |
| render() { | |
| return ( | |
| <View> | |
| <Pano source={asset('chess-world.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> | |
| </View> | |
| ); | |
| } | |
| }; | |
| // *** Make a slightly different component | |
| // *** Make sure you don't mark it as the default class though, you can only have one. | |
| export class empty2 extends React.Component { | |
| render() { | |
| return ( | |
| <View> | |
| <Pano source={asset('chess-world.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]}], | |
| }}> | |
| world | |
| </Text> | |
| </View> | |
| ); | |
| } | |
| }; | |
| // *** Register both of our components | |
| AppRegistry.registerComponent('empty', () => empty); | |
| AppRegistry.registerComponent('empty2', () => empty2); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment