├── README.md └── chapters ├── chapter 1 └── HelloVirtualWorld │ ├── .babelrc │ ├── .flowconfig │ ├── .gitignore │ ├── .watchmanconfig │ ├── __tests__ │ └── client.js │ ├── index.vr.js │ ├── package.json │ ├── rn-cli.config.js │ ├── static_assets │ ├── chess-world.jpg │ └── horseshoe-bend.jpg │ └── vr │ ├── client.js │ └── index.html ├── chapter 2 ├── HelloVirtualWorld │ ├── .babelrc │ ├── .flowconfig │ ├── .gitignore │ ├── .watchmanconfig │ ├── __tests__ │ │ └── client.js │ ├── index.vr.js │ ├── package.json │ ├── rn-cli.config.js │ ├── static_assets │ │ ├── chess-world.jpg │ │ └── horseshoe-bend.jpg │ └── vr │ │ ├── client.js │ │ └── index.html └── PanoramicRoadTrip │ ├── .babelrc │ ├── .flowconfig │ ├── .gitignore │ ├── .watchmanconfig │ ├── __tests__ │ └── client.js │ ├── index.vr.js │ ├── package.json │ ├── rn-cli.config.js │ ├── static_assets │ ├── Arizona.jpg │ ├── California.jpg │ ├── Hawaii.jpg │ ├── New Hampshire.jpg │ └── Texas.jpg │ └── vr │ ├── client.js │ └── index.html ├── chapter 3 └── OutdoorMovieTheater │ ├── Components │ └── Scenes │ │ ├── Layouts │ │ ├── Elements │ │ │ ├── Button.js │ │ │ ├── Movie.js │ │ │ └── Title.js │ │ ├── MainMenuContainer.js │ │ └── MovieProjector.js │ │ ├── MainMenu.js │ │ └── MovieTheater.js │ ├── __tests__ │ └── client.js │ ├── index.vr.js │ ├── package.json │ ├── rn-cli.config.js │ ├── static_assets │ └── Readme.txt │ └── vr │ ├── client.js │ └── index.html ├── chapter 4 └── OutdoorMovieTheater │ ├── Components │ └── Scenes │ │ ├── Layouts │ │ ├── Elements │ │ │ ├── Button.js │ │ │ ├── Movie.js │ │ │ └── Title.js │ │ ├── MainMenuContainer.js │ │ ├── MovieProjector.js │ │ └── SceneSelectMenu.js │ │ ├── MainMenu.js │ │ ├── MovieTheater.js │ │ └── SceneSelect.js │ ├── __tests__ │ └── client.js │ ├── index.vr.js │ ├── package.json │ ├── rn-cli.config.js │ ├── static_assets │ └── Readme.txt │ └── vr │ ├── client.js │ └── index.html ├── chapter 5 └── StarWarsModeling │ ├── __tests__ │ └── client.js │ ├── index.vr.js │ ├── package.json │ ├── rn-cli.config.js │ ├── static_assets │ └── ReadMe.txt.txt │ └── vr │ ├── client.js │ └── index.html ├── chapter 6 └── VectorGraphicPanoramic │ ├── __tests__ │ └── client.js │ ├── index.vr.js │ ├── package.json │ ├── rn-cli.config.js │ ├── static_assets │ ├── ReadMe.txt │ ├── chess-world.jpg │ └── koala.PNG │ ├── vr │ ├── client.js │ └── index.html │ └── yarn.lock └── chapter 8 ├── After Study Break └── VrVideoApp │ ├── __tests__ │ └── client.js │ ├── components │ └── scenes │ │ ├── Dashboard.js │ │ ├── TitleScene.js │ │ ├── VideoPlayer.js │ │ └── layouts │ │ ├── DashboardLayout.js │ │ ├── TitleLayout.js │ │ ├── VideoPlayerLayout.js │ │ └── elements │ │ ├── Button.js │ │ ├── MenuButtons.js │ │ ├── ProgressCircles.js │ │ ├── TileButtons.js │ │ ├── Title.js │ │ └── VideoElement.js │ ├── index.vr.js │ ├── package-lock.json │ ├── package.json │ ├── rn-cli.config.js │ ├── static_assets │ └── ReadMe.text.txt │ ├── vr │ ├── client.js │ └── index.html │ └── yarn.lock └── Before Study Break └── VrVideoApp ├── __tests__ └── client.js ├── components └── scenes │ ├── Dashboard.js │ ├── TitleScene.js │ └── layouts │ ├── DashboardLayout.js │ ├── TitleLayout.js │ └── elements │ ├── Button.js │ ├── MenuButtons.js │ ├── ProgressCircles.js │ ├── TileButtons.js │ └── Title.js ├── index.vr.js ├── package.json ├── rn-cli.config.js ├── static_assets └── ReadMe.txt ├── vr ├── client.js └── index.html └── yarn.lock /README.md: -------------------------------------------------------------------------------- 1 | # Learn-React-VR 2 | Official code for my ebook Learn React VR 3 | 4 | ![](https://cdn-images-1.medium.com/max/1000/1*R6fJ0bV5SCUJqgi4U0R4zA.png) 5 | 6 | [Download the ebook.](https://leanpub.com/learnreactvr) 7 | -------------------------------------------------------------------------------- /chapters/chapter 1/HelloVirtualWorld/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["react-native"] 3 | } 4 | -------------------------------------------------------------------------------- /chapters/chapter 1/HelloVirtualWorld/.flowconfig: -------------------------------------------------------------------------------- 1 | [ignore] 2 | .*/node_modules/.* 3 | 4 | [include] 5 | 6 | [libs] 7 | 8 | [options] 9 | emoji=true 10 | module.system=haste 11 | -------------------------------------------------------------------------------- /chapters/chapter 1/HelloVirtualWorld/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | *~ 3 | *.log 4 | *.js.meta 5 | node_modules/ 6 | build/ 7 | -------------------------------------------------------------------------------- /chapters/chapter 1/HelloVirtualWorld/.watchmanconfig: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michaelmang/Learn-React-VR/544f5dec5a8ddbb2fe6100e6dd80a47a6a953dba/chapters/chapter 1/HelloVirtualWorld/.watchmanconfig -------------------------------------------------------------------------------- /chapters/chapter 1/HelloVirtualWorld/__tests__/client.js: -------------------------------------------------------------------------------- 1 | import 'react-native'; 2 | import 'react-vr'; 3 | import React from 'react'; 4 | import Index from '../index.vr.js'; 5 | 6 | // Note: test renderer must be required after react-native. 7 | import renderer from 'react-test-renderer'; 8 | 9 | it('renders correctly', () => { 10 | const tree = renderer.create( 11 | 12 | ); 13 | }); 14 | -------------------------------------------------------------------------------- /chapters/chapter 1/HelloVirtualWorld/index.vr.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { 3 | AppRegistry, 4 | asset, 5 | Pano, 6 | Text, 7 | View, 8 | } from 'react-vr'; 9 | 10 | export default class HelloVirtualWorld extends React.Component { 11 | render() { 12 | return ( 13 | 14 | 15 | 27 | Hello Visual World 28 | 29 | 30 | ); 31 | } 32 | }; 33 | 34 | AppRegistry.registerComponent('HelloVirtualWorld', () => HelloVirtualWorld); 35 | -------------------------------------------------------------------------------- /chapters/chapter 1/HelloVirtualWorld/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "HelloVirtualWorld", 3 | "version": "0.0.1", 4 | "private": true, 5 | "scripts": { 6 | "start": "node -e \"console.log('open browser at http://localhost:8081/vr/\\n\\n');\" && node node_modules/react-native/local-cli/cli.js start", 7 | "bundle": "node node_modules/react-vr/scripts/bundle.js", 8 | "open": "node -e \"require('xopen')('http://localhost:8081/vr/')\"", 9 | "devtools": "react-devtools", 10 | "test": "jest" 11 | }, 12 | "dependencies": { 13 | "ovrui": "^1.1.0", 14 | "react": "~15.4.1", 15 | "react-native": "~0.42.0", 16 | "three": "^0.80.1", 17 | "react-vr": "^1.1.0", 18 | "react-vr-web": "^1.1.0" 19 | }, 20 | "devDependencies": { 21 | "babel-jest": "^19.0.0", 22 | "babel-preset-react-native": "^1.9.1", 23 | "jest": "^19.0.2", 24 | "react-devtools": "^2.1.3", 25 | "react-test-renderer": "~15.4.1", 26 | "xopen": "1.0.0" 27 | }, 28 | "jest": { 29 | "preset": "react-vr" 30 | } 31 | } -------------------------------------------------------------------------------- /chapters/chapter 1/HelloVirtualWorld/rn-cli.config.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var path = require('path'); 4 | var blacklist = require('./node_modules/react-native/packager/blacklist'); 5 | 6 | var config = { 7 | getProjectRoots() { 8 | return getRoots(); 9 | }, 10 | 11 | getBlacklistRE() { 12 | return blacklist([ 13 | ]); 14 | }, 15 | 16 | getAssetExts() { 17 | return ['obj', 'mtl']; 18 | }, 19 | 20 | getPlatforms() { 21 | return ['vr']; 22 | }, 23 | 24 | getProvidesModuleNodeModules() { 25 | return ['react-native', 'react-vr']; 26 | }, 27 | }; 28 | 29 | function getRoots() { 30 | var root = process.env.REACT_NATIVE_APP_ROOT; 31 | if (root) { 32 | return [path.resolve(root)]; 33 | } 34 | return [path.resolve(__dirname)]; 35 | } 36 | 37 | module.exports = config; -------------------------------------------------------------------------------- /chapters/chapter 1/HelloVirtualWorld/static_assets/chess-world.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michaelmang/Learn-React-VR/544f5dec5a8ddbb2fe6100e6dd80a47a6a953dba/chapters/chapter 1/HelloVirtualWorld/static_assets/chess-world.jpg -------------------------------------------------------------------------------- /chapters/chapter 1/HelloVirtualWorld/static_assets/horseshoe-bend.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michaelmang/Learn-React-VR/544f5dec5a8ddbb2fe6100e6dd80a47a6a953dba/chapters/chapter 1/HelloVirtualWorld/static_assets/horseshoe-bend.jpg -------------------------------------------------------------------------------- /chapters/chapter 1/HelloVirtualWorld/vr/client.js: -------------------------------------------------------------------------------- 1 | // Auto-generated content. 2 | // This file contains the boilerplate to set up your React app. 3 | // If you want to modify your application, start in "index.vr.js" 4 | 5 | // Auto-generated content. 6 | import {VRInstance} from 'react-vr-web'; 7 | 8 | function init(bundle, parent, options) { 9 | const vr = new VRInstance(bundle, 'HelloVirtualWorld', parent, { 10 | // Add custom options here 11 | ...options, 12 | }); 13 | vr.render = function() { 14 | // Any custom behavior you want to perform on each frame goes here 15 | }; 16 | // Begin the animation loop 17 | vr.start(); 18 | return vr; 19 | } 20 | 21 | window.ReactVR = {init}; 22 | -------------------------------------------------------------------------------- /chapters/chapter 1/HelloVirtualWorld/vr/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | HelloVirtualWorld 4 | 5 | 6 | 7 | 8 | 9 | 10 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /chapters/chapter 2/HelloVirtualWorld/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["react-native"] 3 | } 4 | -------------------------------------------------------------------------------- /chapters/chapter 2/HelloVirtualWorld/.flowconfig: -------------------------------------------------------------------------------- 1 | [ignore] 2 | .*/node_modules/.* 3 | 4 | [include] 5 | 6 | [libs] 7 | 8 | [options] 9 | emoji=true 10 | module.system=haste 11 | -------------------------------------------------------------------------------- /chapters/chapter 2/HelloVirtualWorld/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | *~ 3 | *.log 4 | *.js.meta 5 | node_modules/ 6 | build/ 7 | -------------------------------------------------------------------------------- /chapters/chapter 2/HelloVirtualWorld/.watchmanconfig: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michaelmang/Learn-React-VR/544f5dec5a8ddbb2fe6100e6dd80a47a6a953dba/chapters/chapter 2/HelloVirtualWorld/.watchmanconfig -------------------------------------------------------------------------------- /chapters/chapter 2/HelloVirtualWorld/__tests__/client.js: -------------------------------------------------------------------------------- 1 | import 'react-native'; 2 | import 'react-vr'; 3 | import React from 'react'; 4 | import Index from '../index.vr.js'; 5 | 6 | // Note: test renderer must be required after react-native. 7 | import renderer from 'react-test-renderer'; 8 | 9 | it('renders correctly', () => { 10 | const tree = renderer.create( 11 | 12 | ); 13 | }); 14 | -------------------------------------------------------------------------------- /chapters/chapter 2/HelloVirtualWorld/index.vr.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { 3 | AppRegistry, 4 | asset, 5 | Pano, 6 | Text, 7 | View, 8 | VrButton 9 | } from 'react-vr'; 10 | 11 | export default class HelloVirtualWorld extends React.Component { 12 | 13 | render() { 14 | return ( 15 | 16 | 17 | 18 | 19 | ); 20 | } 21 | }; 22 | 23 | class NestedMessage extends React.Component { 24 | constructor() { 25 | super(); 26 | this.state = {message: "Hello State Message", showMessage: true}; 27 | /* setInterval(() => { 28 | this.setState({ message: "Hello Updated Message" }); 29 | }, 5000); 30 | */ 31 | } 32 | 33 | componentDidMount () { 34 | this.setState({ showMessage: false }); 35 | } 36 | 37 | handleClick () { 38 | this.setState({ message: "Updated Message" }); 39 | } 40 | 41 | render() { 42 | const showMessage = this.state.showMessage; 43 | 44 | return ( 45 | 46 | {showMessage ? ( 47 | 50 | 63 | {this.state.message} 64 | 65 | 66 | ) : ( 67 | 68 | )} 69 | 70 | ); 71 | } 72 | }; 73 | 74 | 75 | AppRegistry.registerComponent('HelloVirtualWorld', () => HelloVirtualWorld); 76 | -------------------------------------------------------------------------------- /chapters/chapter 2/HelloVirtualWorld/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "HelloVirtualWorld", 3 | "version": "0.0.1", 4 | "private": true, 5 | "scripts": { 6 | "start": "node -e \"console.log('open browser at http://localhost:8081/vr/\\n\\n');\" && node node_modules/react-native/local-cli/cli.js start", 7 | "bundle": "node node_modules/react-vr/scripts/bundle.js", 8 | "open": "node -e \"require('xopen')('http://localhost:8081/vr/')\"", 9 | "devtools": "react-devtools", 10 | "test": "jest" 11 | }, 12 | "dependencies": { 13 | "ovrui": "^1.1.0", 14 | "react": "~15.4.1", 15 | "react-native": "~0.42.0", 16 | "three": "^0.80.1", 17 | "react-vr": "^1.1.0", 18 | "react-vr-web": "^1.1.0" 19 | }, 20 | "devDependencies": { 21 | "babel-jest": "^19.0.0", 22 | "babel-preset-react-native": "^1.9.1", 23 | "jest": "^19.0.2", 24 | "react-devtools": "^2.1.3", 25 | "react-test-renderer": "~15.4.1", 26 | "xopen": "1.0.0" 27 | }, 28 | "jest": { 29 | "preset": "react-vr" 30 | } 31 | } -------------------------------------------------------------------------------- /chapters/chapter 2/HelloVirtualWorld/rn-cli.config.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var path = require('path'); 4 | var blacklist = require('./node_modules/react-native/packager/blacklist'); 5 | 6 | var config = { 7 | getProjectRoots() { 8 | return getRoots(); 9 | }, 10 | 11 | getBlacklistRE() { 12 | return blacklist([ 13 | ]); 14 | }, 15 | 16 | getAssetExts() { 17 | return ['obj', 'mtl']; 18 | }, 19 | 20 | getPlatforms() { 21 | return ['vr']; 22 | }, 23 | 24 | getProvidesModuleNodeModules() { 25 | return ['react-native', 'react-vr']; 26 | }, 27 | }; 28 | 29 | function getRoots() { 30 | var root = process.env.REACT_NATIVE_APP_ROOT; 31 | if (root) { 32 | return [path.resolve(root)]; 33 | } 34 | return [path.resolve(__dirname)]; 35 | } 36 | 37 | module.exports = config; -------------------------------------------------------------------------------- /chapters/chapter 2/HelloVirtualWorld/static_assets/chess-world.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michaelmang/Learn-React-VR/544f5dec5a8ddbb2fe6100e6dd80a47a6a953dba/chapters/chapter 2/HelloVirtualWorld/static_assets/chess-world.jpg -------------------------------------------------------------------------------- /chapters/chapter 2/HelloVirtualWorld/static_assets/horseshoe-bend.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michaelmang/Learn-React-VR/544f5dec5a8ddbb2fe6100e6dd80a47a6a953dba/chapters/chapter 2/HelloVirtualWorld/static_assets/horseshoe-bend.jpg -------------------------------------------------------------------------------- /chapters/chapter 2/HelloVirtualWorld/vr/client.js: -------------------------------------------------------------------------------- 1 | // Auto-generated content. 2 | // This file contains the boilerplate to set up your React app. 3 | // If you want to modify your application, start in "index.vr.js" 4 | 5 | // Auto-generated content. 6 | import {VRInstance} from 'react-vr-web'; 7 | 8 | function init(bundle, parent, options) { 9 | const vr = new VRInstance(bundle, 'HelloVirtualWorld', parent, { 10 | // Add custom options here 11 | ...options, 12 | }); 13 | vr.render = function() { 14 | // Any custom behavior you want to perform on each frame goes here 15 | }; 16 | // Begin the animation loop 17 | vr.start(); 18 | return vr; 19 | } 20 | 21 | window.ReactVR = {init}; 22 | -------------------------------------------------------------------------------- /chapters/chapter 2/HelloVirtualWorld/vr/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | HelloVirtualWorld 4 | 5 | 6 | 7 | 8 | 9 | 10 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /chapters/chapter 2/PanoramicRoadTrip/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["react-native"] 3 | } 4 | -------------------------------------------------------------------------------- /chapters/chapter 2/PanoramicRoadTrip/.flowconfig: -------------------------------------------------------------------------------- 1 | [ignore] 2 | .*/node_modules/.* 3 | 4 | [include] 5 | 6 | [libs] 7 | 8 | [options] 9 | emoji=true 10 | module.system=haste 11 | -------------------------------------------------------------------------------- /chapters/chapter 2/PanoramicRoadTrip/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | *~ 3 | *.log 4 | *.js.meta 5 | node_modules/ 6 | build/ 7 | -------------------------------------------------------------------------------- /chapters/chapter 2/PanoramicRoadTrip/.watchmanconfig: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michaelmang/Learn-React-VR/544f5dec5a8ddbb2fe6100e6dd80a47a6a953dba/chapters/chapter 2/PanoramicRoadTrip/.watchmanconfig -------------------------------------------------------------------------------- /chapters/chapter 2/PanoramicRoadTrip/__tests__/client.js: -------------------------------------------------------------------------------- 1 | import 'react-native'; 2 | import 'react-vr'; 3 | import React from 'react'; 4 | import Index from '../index.vr.js'; 5 | 6 | // Note: test renderer must be required after react-native. 7 | import renderer from 'react-test-renderer'; 8 | 9 | it('renders correctly', () => { 10 | const tree = renderer.create( 11 | 12 | ); 13 | }); 14 | -------------------------------------------------------------------------------- /chapters/chapter 2/PanoramicRoadTrip/index.vr.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { 3 | AppRegistry, 4 | asset, 5 | Pano, 6 | Text, 7 | View, 8 | VrButton 9 | } from 'react-vr'; 10 | 11 | export default class PanoramicRoadTrip extends React.Component { 12 | constructor() { 13 | super(); 14 | this.state = {selectedState: ""}; 15 | } 16 | 17 | stateClicked (selection) { 18 | let newState; 19 | switch(selection) { 20 | case 1: 21 | newState = "Arizona"; 22 | break; 23 | case 2: 24 | newState = "New Hampshire"; 25 | break; 26 | case 3: 27 | newState = "California"; 28 | break; 29 | case 4: 30 | newState = "Hawaii"; 31 | break; 32 | case 5: 33 | newState = "Texas"; 34 | break; 35 | } 36 | console.log(newState); 37 | this.setState({ selectedState: newState}); 38 | } 39 | 40 | componentDidMount() { 41 | const random = Math.floor((Math.random() * 5) + 1); 42 | let randState; 43 | switch(random) { 44 | case 1: 45 | randState = "Arizona"; 46 | break; 47 | case 2: 48 | randState = "New Hampshire"; 49 | break; 50 | case 3: 51 | randState = "California"; 52 | break; 53 | case 4: 54 | randState = "Hawaii"; 55 | break; 56 | case 5: 57 | randState = "Texas"; 58 | break; 59 | } 60 | this.setState({ selectedState: randState}); 61 | } 62 | 63 | render() { 64 | const states = { 65 | Arizona: "Arizona", 66 | NewHampshire: "New Hampshire", 67 | California: "California", 68 | Hawaii: "Hawaii", 69 | Texas: "Texas" 70 | } 71 | 72 | return ( 73 | 74 | 75 | 85 | 86 | <TextBoxes stateClicked={this.stateClicked.bind(this)} states={states}/> 87 | </View> 88 | </View> 89 | ); 90 | } 91 | }; 92 | 93 | class TextBoxes extends React.Component { 94 | 95 | render() { 96 | return ( 97 | <View> 98 | <VrButton onClick={() => this.props.stateClicked(1)}> 99 | <View style={{ margin: 0.1, height: 0.3, backgroundColor: '#CF3C7E'}}> 100 | <Text style={{fontSize: 0.2, textAlign: 'center'}}>{this.props.states.Arizona}</Text> 101 | </View> 102 | </VrButton> 103 | <VrButton onClick={() => this.props.stateClicked(2)}> 104 | <View style={{ margin: 0.1, height: 0.3, backgroundColor: '#CF3C7E'}}> 105 | <Text style={{fontSize: 0.2, textAlign: 'center'}}>{this.props.states.NewHampshire}</Text> 106 | </View> 107 | </VrButton> 108 | <VrButton onClick={() => this.props.stateClicked(3)}> 109 | <View style={{ margin: 0.1, height: 0.3, backgroundColor: '#CF3C7E'}}> 110 | <Text style={{fontSize: 0.2, textAlign: 'center'}}>{this.props.states.California}</Text> 111 | </View> 112 | </VrButton> 113 | <VrButton onClick={() => this.props.stateClicked(4)}> 114 | <View style={{ margin: 0.1, height: 0.3, backgroundColor: '#CF3C7E'}}> 115 | <Text style={{fontSize: 0.2, textAlign: 'center'}}>{this.props.states.Hawaii}</Text> 116 | </View> 117 | </VrButton> 118 | <VrButton onClick={() => this.props.stateClicked(5)}> 119 | <View style={{ margin: 0.1, height: 0.3, backgroundColor: '#CF3C7E'}}> 120 | <Text style={{fontSize: 0.2, textAlign: 'center'}}>{this.props.states.Texas}</Text> 121 | </View> 122 | </VrButton> 123 | </View> 124 | ) 125 | } 126 | } 127 | 128 | class Title extends React.Component { 129 | constructor() { 130 | super(); 131 | this.state = {title: "Panoramic Road Trip"}; 132 | } 133 | render() { 134 | return ( 135 | <View> 136 | <Text style={{fontSize: 0.2, textAlign: 'center', color: "#CF3C7E"}}> 137 | {this.state.title} 138 | </Text> 139 | </View> 140 | ) 141 | } 142 | } 143 | 144 | AppRegistry.registerComponent('PanoramicRoadTrip', () => PanoramicRoadTrip); 145 | -------------------------------------------------------------------------------- /chapters/chapter 2/PanoramicRoadTrip/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "PanoramicRoadTrip", 3 | "version": "0.0.1", 4 | "private": true, 5 | "scripts": { 6 | "start": "node -e \"console.log('open browser at http://localhost:8081/vr/\\n\\n');\" && node node_modules/react-native/local-cli/cli.js start", 7 | "bundle": "node node_modules/react-vr/scripts/bundle.js", 8 | "open": "node -e \"require('xopen')('http://localhost:8081/vr/')\"", 9 | "devtools": "react-devtools", 10 | "test": "jest" 11 | }, 12 | "dependencies": { 13 | "ovrui": "^1.1.0", 14 | "react": "~15.4.1", 15 | "react-native": "~0.42.0", 16 | "three": "^0.80.1", 17 | "react-vr": "^1.1.0", 18 | "react-vr-web": "^1.1.0" 19 | }, 20 | "devDependencies": { 21 | "babel-jest": "^19.0.0", 22 | "babel-preset-react-native": "^1.9.1", 23 | "jest": "^19.0.2", 24 | "react-devtools": "^2.1.3", 25 | "react-test-renderer": "~15.4.1", 26 | "xopen": "1.0.0" 27 | }, 28 | "jest": { 29 | "preset": "react-vr" 30 | } 31 | } -------------------------------------------------------------------------------- /chapters/chapter 2/PanoramicRoadTrip/rn-cli.config.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var path = require('path'); 4 | var blacklist = require('./node_modules/react-native/packager/blacklist'); 5 | 6 | var config = { 7 | getProjectRoots() { 8 | return getRoots(); 9 | }, 10 | 11 | getBlacklistRE() { 12 | return blacklist([ 13 | ]); 14 | }, 15 | 16 | getAssetExts() { 17 | return ['obj', 'mtl']; 18 | }, 19 | 20 | getPlatforms() { 21 | return ['vr']; 22 | }, 23 | 24 | getProvidesModuleNodeModules() { 25 | return ['react-native', 'react-vr']; 26 | }, 27 | }; 28 | 29 | function getRoots() { 30 | var root = process.env.REACT_NATIVE_APP_ROOT; 31 | if (root) { 32 | return [path.resolve(root)]; 33 | } 34 | return [path.resolve(__dirname)]; 35 | } 36 | 37 | module.exports = config; -------------------------------------------------------------------------------- /chapters/chapter 2/PanoramicRoadTrip/static_assets/Arizona.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michaelmang/Learn-React-VR/544f5dec5a8ddbb2fe6100e6dd80a47a6a953dba/chapters/chapter 2/PanoramicRoadTrip/static_assets/Arizona.jpg -------------------------------------------------------------------------------- /chapters/chapter 2/PanoramicRoadTrip/static_assets/California.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michaelmang/Learn-React-VR/544f5dec5a8ddbb2fe6100e6dd80a47a6a953dba/chapters/chapter 2/PanoramicRoadTrip/static_assets/California.jpg -------------------------------------------------------------------------------- /chapters/chapter 2/PanoramicRoadTrip/static_assets/Hawaii.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michaelmang/Learn-React-VR/544f5dec5a8ddbb2fe6100e6dd80a47a6a953dba/chapters/chapter 2/PanoramicRoadTrip/static_assets/Hawaii.jpg -------------------------------------------------------------------------------- /chapters/chapter 2/PanoramicRoadTrip/static_assets/New Hampshire.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michaelmang/Learn-React-VR/544f5dec5a8ddbb2fe6100e6dd80a47a6a953dba/chapters/chapter 2/PanoramicRoadTrip/static_assets/New Hampshire.jpg -------------------------------------------------------------------------------- /chapters/chapter 2/PanoramicRoadTrip/static_assets/Texas.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michaelmang/Learn-React-VR/544f5dec5a8ddbb2fe6100e6dd80a47a6a953dba/chapters/chapter 2/PanoramicRoadTrip/static_assets/Texas.jpg -------------------------------------------------------------------------------- /chapters/chapter 2/PanoramicRoadTrip/vr/client.js: -------------------------------------------------------------------------------- 1 | // Auto-generated content. 2 | // This file contains the boilerplate to set up your React app. 3 | // If you want to modify your application, start in "index.vr.js" 4 | 5 | // Auto-generated content. 6 | import {VRInstance} from 'react-vr-web'; 7 | 8 | function init(bundle, parent, options) { 9 | const vr = new VRInstance(bundle, 'PanoramicRoadTrip', parent, { 10 | // Add custom options here 11 | ...options, 12 | }); 13 | vr.render = function() { 14 | // Any custom behavior you want to perform on each frame goes here 15 | }; 16 | // Begin the animation loop 17 | vr.start(); 18 | return vr; 19 | } 20 | 21 | window.ReactVR = {init}; 22 | -------------------------------------------------------------------------------- /chapters/chapter 2/PanoramicRoadTrip/vr/index.html: -------------------------------------------------------------------------------- 1 | <html> 2 | <head> 3 | <title>PanoramicRoadTrip 4 | 5 | 6 | 7 | 8 | 9 | 10 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /chapters/chapter 3/OutdoorMovieTheater/Components/Scenes/Layouts/Elements/Button.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { 3 | Text, 4 | View, 5 | VrButton 6 | } from 'react-vr'; 7 | 8 | //Element 9 | class Button extends React.Component { 10 | render() { 11 | return ( 12 | 13 | 14 | 15 | Select a Movie 16 | 17 | 18 | 19 | ) 20 | } 21 | } 22 | 23 | module.exports = Button; 24 | -------------------------------------------------------------------------------- /chapters/chapter 3/OutdoorMovieTheater/Components/Scenes/Layouts/Elements/Movie.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { 3 | Video, 4 | View, 5 | asset 6 | } from 'react-vr'; 7 | 8 | //Element 9 | class Movie extends React.Component { 10 | render() { 11 | return ( 12 | 13 | 15 | ) 16 | } 17 | } 18 | 19 | module.exports = Movie; 20 | -------------------------------------------------------------------------------- /chapters/chapter 3/OutdoorMovieTheater/Components/Scenes/Layouts/Elements/Title.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { 3 | Text, 4 | View, 5 | } from 'react-vr'; 6 | 7 | //Element 8 | class Title extends React.Component { 9 | render() { 10 | return ( 11 | 12 | 19 | Outdoor Movie Theater 20 | 21 | 22 | ) 23 | } 24 | } 25 | 26 | module.exports = Title; 27 | -------------------------------------------------------------------------------- /chapters/chapter 3/OutdoorMovieTheater/Components/Scenes/Layouts/MainMenuContainer.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { 3 | Text, 4 | View, 5 | } from 'react-vr'; 6 | import Title from './Elements/Title.js'; 7 | import Button from './Elements/Button.js'; 8 | 9 | //Layout 10 | class MainMenuContainer extends React.Component { 11 | render() { 12 | return ( 13 | 21 | 22 | <Button/> 23 | </View> 24 | ) 25 | } 26 | } 27 | 28 | 29 | module.exports = MainMenuContainer; 30 | -------------------------------------------------------------------------------- /chapters/chapter 3/OutdoorMovieTheater/Components/Scenes/Layouts/MovieProjector.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { 3 | Video, 4 | View 5 | } from 'react-vr'; 6 | import Movie from './Elements/Movie.js'; 7 | 8 | //Layout 9 | class MovieProjector extends React.Component { 10 | render() { 11 | return ( 12 | <View style={{ 13 | flex: 1, 14 | width: 5, 15 | flexDirection: 'column', 16 | alignItems: 'stretch', 17 | backgroundColor: '#333333', 18 | layoutOrigin: [0.5, 0.5], 19 | transform: [{translate: [0, 0, -5]}] 20 | }}> 21 | <Movie/> 22 | </View> 23 | ) 24 | } 25 | } 26 | 27 | 28 | module.exports = MovieProjector; 29 | -------------------------------------------------------------------------------- /chapters/chapter 3/OutdoorMovieTheater/Components/Scenes/MainMenu.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { 3 | Text, 4 | View, 5 | } from 'react-vr'; 6 | import MainMenuContainer from './Layouts/MainMenuContainer.js'; 7 | 8 | //Scene 9 | class MainMenu extends React.Component { 10 | render() { 11 | return ( 12 | <MainMenuContainer/> 13 | ) 14 | } 15 | } 16 | 17 | module.exports = MainMenu; 18 | -------------------------------------------------------------------------------- /chapters/chapter 3/OutdoorMovieTheater/Components/Scenes/MovieTheater.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { 3 | View, 4 | Video 5 | } from 'react-vr'; 6 | import MovieProjector from './Layouts/MovieProjector.js'; 7 | 8 | //Scene 9 | class MovieTheater extends React.Component { 10 | render() { 11 | return ( 12 | <MovieProjector/> 13 | ) 14 | } 15 | } 16 | 17 | module.exports = MovieTheater; 18 | -------------------------------------------------------------------------------- /chapters/chapter 3/OutdoorMovieTheater/__tests__/client.js: -------------------------------------------------------------------------------- 1 | import 'react-native'; 2 | import 'react-vr'; 3 | import React from 'react'; 4 | import Index from '../index.vr.js'; 5 | 6 | // Note: test renderer must be required after react-native. 7 | import renderer from 'react-test-renderer'; 8 | 9 | it('renders correctly', () => { 10 | const tree = renderer.create( 11 | <Index /> 12 | ); 13 | }); 14 | -------------------------------------------------------------------------------- /chapters/chapter 3/OutdoorMovieTheater/index.vr.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { 3 | AppRegistry, 4 | asset, 5 | Pano, 6 | Text, 7 | View, 8 | Sound, 9 | VideoPano 10 | } from 'react-vr'; 11 | import MainMenu from './Components/Scenes/MainMenu.js'; 12 | import MovieTheater from './Components/Scenes/MovieTheater.js'; 13 | 14 | export default class OutdoorMovieTheater extends React.Component { 15 | render() { 16 | return ( 17 | <View> 18 | <Pano source={asset('fort-night.jpg')}> 19 | <Sound 20 | volume={0.8} 21 | loop = {true} 22 | source={{mp3: asset('fort-night-atmosphere.mp3')}} 23 | /> 24 | </Pano> 25 | <MovieTheater/> 26 | </View> 27 | ); 28 | } 29 | }; 30 | 31 | AppRegistry.registerComponent('OutdoorMovieTheater', () => OutdoorMovieTheater); 32 | -------------------------------------------------------------------------------- /chapters/chapter 3/OutdoorMovieTheater/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "OutdoorMovieTheater", 3 | "version": "0.0.1", 4 | "private": true, 5 | "scripts": { 6 | "start": "node -e \"console.log('open browser at http://localhost:8081/vr/\\n\\n');\" && node node_modules/react-native/local-cli/cli.js start", 7 | "bundle": "node node_modules/react-vr/scripts/bundle.js", 8 | "open": "node -e \"require('xopen')('http://localhost:8081/vr/')\"", 9 | "devtools": "react-devtools", 10 | "test": "jest" 11 | }, 12 | "dependencies": { 13 | "ovrui": "^1.1.0", 14 | "react": "~15.4.1", 15 | "react-native": "~0.42.0", 16 | "three": "^0.80.1", 17 | "react-vr": "^1.1.0", 18 | "react-vr-web": "^1.1.0" 19 | }, 20 | "devDependencies": { 21 | "babel-jest": "^19.0.0", 22 | "babel-preset-react-native": "^1.9.1", 23 | "jest": "^19.0.2", 24 | "react-devtools": "^2.1.3", 25 | "react-test-renderer": "~15.4.1", 26 | "xopen": "1.0.0" 27 | }, 28 | "jest": { 29 | "preset": "react-vr" 30 | } 31 | } -------------------------------------------------------------------------------- /chapters/chapter 3/OutdoorMovieTheater/rn-cli.config.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var path = require('path'); 4 | var blacklist = require('./node_modules/react-native/packager/blacklist'); 5 | 6 | var config = { 7 | getProjectRoots() { 8 | return getRoots(); 9 | }, 10 | 11 | getBlacklistRE() { 12 | return blacklist([ 13 | ]); 14 | }, 15 | 16 | getAssetExts() { 17 | return ['obj', 'mtl']; 18 | }, 19 | 20 | getPlatforms() { 21 | return ['vr']; 22 | }, 23 | 24 | getProvidesModuleNodeModules() { 25 | return ['react-native', 'react-vr']; 26 | }, 27 | }; 28 | 29 | function getRoots() { 30 | var root = process.env.REACT_NATIVE_APP_ROOT; 31 | if (root) { 32 | return [path.resolve(root)]; 33 | } 34 | return [path.resolve(__dirname)]; 35 | } 36 | 37 | module.exports = config; -------------------------------------------------------------------------------- /chapters/chapter 3/OutdoorMovieTheater/static_assets/Readme.txt: -------------------------------------------------------------------------------- 1 | Check the chapter for all static_asset files 2 | -------------------------------------------------------------------------------- /chapters/chapter 3/OutdoorMovieTheater/vr/client.js: -------------------------------------------------------------------------------- 1 | // Auto-generated content. 2 | // This file contains the boilerplate to set up your React app. 3 | // If you want to modify your application, start in "index.vr.js" 4 | 5 | // Auto-generated content. 6 | import {VRInstance} from 'react-vr-web'; 7 | 8 | function init(bundle, parent, options) { 9 | const vr = new VRInstance(bundle, 'OutdoorMovieTheater', parent, { 10 | // Add custom options here 11 | ...options, 12 | }); 13 | vr.render = function() { 14 | // Any custom behavior you want to perform on each frame goes here 15 | }; 16 | // Begin the animation loop 17 | vr.start(); 18 | return vr; 19 | } 20 | 21 | window.ReactVR = {init}; 22 | -------------------------------------------------------------------------------- /chapters/chapter 3/OutdoorMovieTheater/vr/index.html: -------------------------------------------------------------------------------- 1 | <html> 2 | <head> 3 | <title>OutdoorMovieTheater 4 | 5 | 6 | 7 | 8 | 9 | 10 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /chapters/chapter 4/OutdoorMovieTheater/Components/Scenes/Layouts/Elements/Button.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { 3 | Text, 4 | View, 5 | VrButton 6 | } from 'react-vr'; 7 | 8 | //Element 9 | class Button extends React.Component { 10 | render() { 11 | const scene = this.props.scene; 12 | return ( 13 | 14 | 15 | {scene === 1 ? ( 16 | this.props.updateScene(2)}> 17 | 18 | {this.props.buttonText} 19 | 20 | 21 | ) : ( 22 | this.props.updateScene(3)}> 23 | 24 | {this.props.buttonText} 25 | 26 | 27 | )} 28 | 29 | 30 | ) 31 | } 32 | } 33 | 34 | module.exports = Button; 35 | -------------------------------------------------------------------------------- /chapters/chapter 4/OutdoorMovieTheater/Components/Scenes/Layouts/Elements/Movie.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { 3 | Video, 4 | View, 5 | asset 6 | } from 'react-vr'; 7 | 8 | //Element 9 | class Movie extends React.Component { 10 | render() { 11 | return ( 12 | 13 | 15 | ) 16 | } 17 | } 18 | 19 | module.exports = Movie; 20 | -------------------------------------------------------------------------------- /chapters/chapter 4/OutdoorMovieTheater/Components/Scenes/Layouts/Elements/Title.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { 3 | Text, 4 | View, 5 | Animated 6 | } from 'react-vr'; 7 | 8 | import { Easing } from 'react-native'; 9 | 10 | //Element 11 | class Title extends React.Component { 12 | constructor() { 13 | super(); 14 | this.state = { fade: new Animated.Value(0), slide: new Animated.Value(0) }; 15 | } 16 | 17 | componentDidMount() { 18 | this.state.fade.setValue(1); 19 | this.state.slide.setValue(1.5); 20 | Animated.sequence([ 21 | //animation 1 22 | Animated.timing( 23 | this.state.fade, 24 | { 25 | toValue: 0, 26 | duration: 2000, 27 | easing: Easing.ease 28 | } 29 | ), 30 | //fire animation 2 and 3 with success delay 31 | Animated.stagger(500, [ 32 | //animation 2 33 | Animated.timing( 34 | this.state.fade, 35 | { 36 | toValue: 1, 37 | duration: 2000, 38 | easing: Easing.ease 39 | } 40 | ), 41 | //animation 3 42 | Animated.timing( 43 | this.state.slide, 44 | { 45 | toValue: 0, 46 | duration: 1000, 47 | easing: Easing.ease 48 | } 49 | ) 50 | ]) 51 | ]).start(); 52 | } 53 | 54 | render() { 55 | return ( 56 | 57 | 68 | {this.props.text} 69 | 70 | 71 | ) 72 | } 73 | 74 | } 75 | 76 | module.exports = Title; 77 | -------------------------------------------------------------------------------- /chapters/chapter 4/OutdoorMovieTheater/Components/Scenes/Layouts/MainMenuContainer.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { 3 | Text, 4 | View, 5 | } from 'react-vr'; 6 | import Title from './Elements/Title.js'; 7 | import Button from './Elements/Button.js'; 8 | 9 | //Layout 10 | class MainMenuContainer extends React.Component { 11 | render() { 12 | return ( 13 | 21 | 22 | <Button buttonText={this.props.buttonText} updateScene={this.props.updateScene} scene={this.props.scene}/> 23 | </View> 24 | ) 25 | } 26 | } 27 | 28 | 29 | module.exports = MainMenuContainer; 30 | -------------------------------------------------------------------------------- /chapters/chapter 4/OutdoorMovieTheater/Components/Scenes/Layouts/MovieProjector.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { 3 | Video, 4 | View 5 | } from 'react-vr'; 6 | import Movie from './Elements/Movie.js'; 7 | 8 | //Layout 9 | class MovieProjector extends React.Component { 10 | render() { 11 | return ( 12 | <View style={{ 13 | flex: 1, 14 | width: 5, 15 | flexDirection: 'column', 16 | alignItems: 'stretch', 17 | backgroundColor: '#333333', 18 | layoutOrigin: [0.5, 0.5], 19 | transform: [{translate: [0, 0, -5]}] 20 | }}> 21 | <Movie/> 22 | </View> 23 | ) 24 | } 25 | } 26 | 27 | 28 | module.exports = MovieProjector; 29 | -------------------------------------------------------------------------------- /chapters/chapter 4/OutdoorMovieTheater/Components/Scenes/Layouts/SceneSelectMenu.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { 3 | View, 4 | Text, 5 | VrButton 6 | } from 'react-vr'; 7 | import Title from './Elements/Title.js'; 8 | import Button from './Elements/Button.js'; 9 | 10 | //Layout 11 | class SceneSelectMenu extends React.Component { 12 | render() { 13 | return ( 14 | <View 15 | style={{ 16 | flex: 1, 17 | width: 3, 18 | flexDirection: 'column', 19 | alignItems: 'stretch', 20 | layoutOrigin: [0.5, 0.5], 21 | transform: [{translate: [0, 0, -5]}] 22 | }} 23 | > 24 | <Title text={this.props.text}/> 25 | <Button buttonText={this.props.buttonText} updateScene={this.props.updateScene} scene={this.props.scene}/> 26 | </View> 27 | ) 28 | } 29 | } 30 | 31 | module.exports = SceneSelectMenu; 32 | -------------------------------------------------------------------------------- /chapters/chapter 4/OutdoorMovieTheater/Components/Scenes/MainMenu.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { 3 | Text, 4 | View, 5 | } from 'react-vr'; 6 | import MainMenuContainer from './Layouts/MainMenuContainer.js'; 7 | 8 | //Scene 9 | class MainMenu extends React.Component { 10 | render() { 11 | return ( 12 | <MainMenuContainer text={this.props.text} buttonText={this.props.buttonText} updateScene={this.props.updateScene} scene={this.props.scene}/> 13 | ) 14 | } 15 | } 16 | 17 | module.exports = MainMenu; 18 | -------------------------------------------------------------------------------- /chapters/chapter 4/OutdoorMovieTheater/Components/Scenes/MovieTheater.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { 3 | View, 4 | Video 5 | } from 'react-vr'; 6 | import MovieProjector from './Layouts/MovieProjector.js'; 7 | 8 | //Scene 9 | class MovieTheater extends React.Component { 10 | render() { 11 | return ( 12 | <MovieProjector/> 13 | ) 14 | } 15 | } 16 | 17 | module.exports = MovieTheater; 18 | -------------------------------------------------------------------------------- /chapters/chapter 4/OutdoorMovieTheater/Components/Scenes/SceneSelect.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { 3 | View, 4 | Text, 5 | VrButton 6 | } from 'react-vr'; 7 | import SceneSelectMenu from './Layouts/SceneSelectMenu.js'; 8 | 9 | //Scene 10 | class SceneSelect extends React.Component { 11 | render() { 12 | return ( 13 | <SceneSelectMenu text={this.props.text} buttonText={this.props.buttonText} updateScene={this.props.updateScene} scene={this.props.scene}/> 14 | ) 15 | } 16 | } 17 | 18 | module.exports = SceneSelect; 19 | -------------------------------------------------------------------------------- /chapters/chapter 4/OutdoorMovieTheater/__tests__/client.js: -------------------------------------------------------------------------------- 1 | import 'react-native'; 2 | import 'react-vr'; 3 | import React from 'react'; 4 | import Index from '../index.vr.js'; 5 | 6 | // Note: test renderer must be required after react-native. 7 | import renderer from 'react-test-renderer'; 8 | 9 | it('renders correctly', () => { 10 | const tree = renderer.create( 11 | <Index /> 12 | ); 13 | }); 14 | -------------------------------------------------------------------------------- /chapters/chapter 4/OutdoorMovieTheater/index.vr.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { 3 | AppRegistry, 4 | asset, 5 | Pano, 6 | Text, 7 | View, 8 | Sound, 9 | VideoPano 10 | } from 'react-vr'; 11 | import MainMenu from './Components/Scenes/MainMenu.js'; 12 | import MovieTheater from './Components/Scenes/MovieTheater.js'; 13 | import SceneSelect from './Components/Scenes/SceneSelect.js'; 14 | 15 | export default class OutdoorMovieTheater extends React.Component { 16 | constructor(){ 17 | super(); 18 | this.state={mainMenu: true, sceneSelect: false}; 19 | } 20 | 21 | updateScene(scene) { 22 | switch(scene) { 23 | case 2: 24 | this.setState({ mainMenu: false, sceneSelect: true}); 25 | break; 26 | case 3: 27 | this.setState({ mainMenu: false, sceneSelect: false}); 28 | break; 29 | } 30 | } 31 | 32 | render() { 33 | const mainMenu = this.state.mainMenu; 34 | const sceneSelect = this.state.sceneSelect; 35 | return ( 36 | <View> 37 | <Pano source={asset('fort-night.jpg')}> 38 | <Sound 39 | volume={0.8} 40 | loop = {true} 41 | source={{mp3: asset('fort-night-atmosphere.mp3')}} 42 | /> 43 | </Pano> 44 | { 45 | mainMenu ? ( 46 | <MainMenu text={"Outdoor Movie Theater"} buttonText={"Select a Movie"} updateScene={this.updateScene.bind(this)} scene={1}/> 47 | ) : ( 48 | sceneSelect ? ( 49 | <SceneSelect text={"Scene Select"} buttonText={"Fireplace"} updateScene={this.updateScene.bind(this)} scene={2}/> 50 | ) : ( 51 | <MovieTheater/> 52 | ) 53 | 54 | ) 55 | } 56 | </View> 57 | ); 58 | } 59 | }; 60 | 61 | AppRegistry.registerComponent('OutdoorMovieTheater', () => OutdoorMovieTheater); 62 | -------------------------------------------------------------------------------- /chapters/chapter 4/OutdoorMovieTheater/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "OutdoorMovieTheater", 3 | "version": "0.0.1", 4 | "private": true, 5 | "scripts": { 6 | "start": "node -e \"console.log('open browser at http://localhost:8081/vr/\\n\\n');\" && node node_modules/react-native/local-cli/cli.js start", 7 | "bundle": "node node_modules/react-vr/scripts/bundle.js", 8 | "open": "node -e \"require('xopen')('http://localhost:8081/vr/')\"", 9 | "devtools": "react-devtools", 10 | "test": "jest" 11 | }, 12 | "dependencies": { 13 | "ovrui": "^1.1.0", 14 | "react": "~15.4.1", 15 | "react-native": "~0.42.0", 16 | "three": "^0.80.1", 17 | "react-vr": "^1.1.0", 18 | "react-vr-web": "^1.1.0" 19 | }, 20 | "devDependencies": { 21 | "babel-jest": "^19.0.0", 22 | "babel-preset-react-native": "^1.9.1", 23 | "jest": "^19.0.2", 24 | "react-devtools": "^2.1.3", 25 | "react-test-renderer": "~15.4.1", 26 | "xopen": "1.0.0" 27 | }, 28 | "jest": { 29 | "preset": "react-vr" 30 | } 31 | } -------------------------------------------------------------------------------- /chapters/chapter 4/OutdoorMovieTheater/rn-cli.config.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var path = require('path'); 4 | var blacklist = require('./node_modules/react-native/packager/blacklist'); 5 | 6 | var config = { 7 | getProjectRoots() { 8 | return getRoots(); 9 | }, 10 | 11 | getBlacklistRE() { 12 | return blacklist([ 13 | ]); 14 | }, 15 | 16 | getAssetExts() { 17 | return ['obj', 'mtl']; 18 | }, 19 | 20 | getPlatforms() { 21 | return ['vr']; 22 | }, 23 | 24 | getProvidesModuleNodeModules() { 25 | return ['react-native', 'react-vr']; 26 | }, 27 | }; 28 | 29 | function getRoots() { 30 | var root = process.env.REACT_NATIVE_APP_ROOT; 31 | if (root) { 32 | return [path.resolve(root)]; 33 | } 34 | return [path.resolve(__dirname)]; 35 | } 36 | 37 | module.exports = config; -------------------------------------------------------------------------------- /chapters/chapter 4/OutdoorMovieTheater/static_assets/Readme.txt: -------------------------------------------------------------------------------- 1 | Check the chapter 3 for all static_asset files 2 | -------------------------------------------------------------------------------- /chapters/chapter 4/OutdoorMovieTheater/vr/client.js: -------------------------------------------------------------------------------- 1 | // Auto-generated content. 2 | // This file contains the boilerplate to set up your React app. 3 | // If you want to modify your application, start in "index.vr.js" 4 | 5 | // Auto-generated content. 6 | import {VRInstance} from 'react-vr-web'; 7 | 8 | function init(bundle, parent, options) { 9 | const vr = new VRInstance(bundle, 'OutdoorMovieTheater', parent, { 10 | // Add custom options here 11 | ...options, 12 | }); 13 | vr.render = function() { 14 | // Any custom behavior you want to perform on each frame goes here 15 | }; 16 | // Begin the animation loop 17 | vr.start(); 18 | return vr; 19 | } 20 | 21 | window.ReactVR = {init}; 22 | -------------------------------------------------------------------------------- /chapters/chapter 4/OutdoorMovieTheater/vr/index.html: -------------------------------------------------------------------------------- 1 | <html> 2 | <head> 3 | <title>OutdoorMovieTheater 4 | 5 | 6 | 7 | 8 | 9 | 10 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /chapters/chapter 5/StarWarsModeling/__tests__/client.js: -------------------------------------------------------------------------------- 1 | import 'react-native'; 2 | import 'react-vr'; 3 | import React from 'react'; 4 | import Index from '../index.vr.js'; 5 | 6 | // Note: test renderer must be required after react-native. 7 | import renderer from 'react-test-renderer'; 8 | 9 | it('renders correctly', () => { 10 | const tree = renderer.create( 11 | 12 | ); 13 | }); 14 | -------------------------------------------------------------------------------- /chapters/chapter 5/StarWarsModeling/index.vr.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { 3 | AppRegistry, 4 | asset, 5 | Pano, 6 | Text, 7 | View, 8 | Model, 9 | Animated 10 | } from 'react-vr'; 11 | 12 | import { Easing } from 'react-native'; 13 | 14 | export default class StarWarsModeling extends React.Component { 15 | constructor() { 16 | super(); 17 | this.state = { spin: new Animated.Value(0) }; 18 | } 19 | 20 | componentDidMount() { 21 | this.spinAnimation(); 22 | } 23 | 24 | spinAnimation() { 25 | this.state.spin.setValue(0); 26 | Animated.timing( 27 | this.state.spin, 28 | { 29 | toValue: 1, 30 | duration: 3000, 31 | easing: Easing.linear 32 | } 33 | ).start( () => this.spinAnimation() ); 34 | } 35 | 36 | render() { 37 | const spin = this.state.spin.interpolate({ 38 | inputRange: [0, 1], 39 | outputRange: ['0deg', '360deg'] 40 | }); 41 | 42 | var AnimatedModel = Animated.createAnimatedComponent(Model); 43 | 44 | return ( 45 | 46 | 47 | 61 | 62 | ); 63 | } 64 | }; 65 | 66 | AppRegistry.registerComponent('StarWarsModeling', () => StarWarsModeling); 67 | -------------------------------------------------------------------------------- /chapters/chapter 5/StarWarsModeling/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "StarWarsModeling", 3 | "version": "0.0.1", 4 | "private": true, 5 | "scripts": { 6 | "start": "node -e \"console.log('open browser at http://localhost:8081/vr/\\n\\n');\" && node node_modules/react-native/local-cli/cli.js start", 7 | "bundle": "node node_modules/react-vr/scripts/bundle.js", 8 | "open": "node -e \"require('xopen')('http://localhost:8081/vr/')\"", 9 | "devtools": "react-devtools", 10 | "test": "jest" 11 | }, 12 | "dependencies": { 13 | "ovrui": "~1.2.0", 14 | "react": "~15.4.1", 15 | "react-native": "~0.42.0", 16 | "three": "^0.80.1", 17 | "react-vr": "~1.2.0", 18 | "react-vr-web": "~1.2.0" 19 | }, 20 | "devDependencies": { 21 | "babel-jest": "^19.0.0", 22 | "babel-preset-react-native": "^1.9.1", 23 | "jest": "^19.0.2", 24 | "react-devtools": "^2.1.3", 25 | "react-test-renderer": "~15.4.1", 26 | "xopen": "1.0.0" 27 | }, 28 | "jest": { 29 | "preset": "react-vr" 30 | } 31 | } -------------------------------------------------------------------------------- /chapters/chapter 5/StarWarsModeling/rn-cli.config.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var path = require('path'); 4 | var blacklist = require('./node_modules/react-native/packager/blacklist'); 5 | 6 | var config = { 7 | getProjectRoots() { 8 | return getRoots(); 9 | }, 10 | 11 | getBlacklistRE() { 12 | return blacklist([ 13 | ]); 14 | }, 15 | 16 | getAssetExts() { 17 | return ['obj', 'mtl']; 18 | }, 19 | 20 | getPlatforms() { 21 | return ['vr']; 22 | }, 23 | 24 | getProvidesModuleNodeModules() { 25 | return ['react-native', 'react-vr']; 26 | }, 27 | }; 28 | 29 | function getRoots() { 30 | var root = process.env.REACT_NATIVE_APP_ROOT; 31 | if (root) { 32 | return [path.resolve(root)]; 33 | } 34 | return [path.resolve(__dirname)]; 35 | } 36 | 37 | module.exports = config; -------------------------------------------------------------------------------- /chapters/chapter 5/StarWarsModeling/static_assets/ReadMe.txt.txt: -------------------------------------------------------------------------------- 1 | See the chapter for assets -------------------------------------------------------------------------------- /chapters/chapter 5/StarWarsModeling/vr/client.js: -------------------------------------------------------------------------------- 1 | // Auto-generated content. 2 | // This file contains the boilerplate to set up your React app. 3 | // If you want to modify your application, start in "index.vr.js" 4 | 5 | // Auto-generated content. 6 | import {VRInstance} from 'react-vr-web'; 7 | 8 | function init(bundle, parent, options) { 9 | const vr = new VRInstance(bundle, 'StarWarsModeling', parent, { 10 | // Add custom options here 11 | ...options, 12 | }); 13 | vr.render = function() { 14 | // Any custom behavior you want to perform on each frame goes here 15 | }; 16 | // Begin the animation loop 17 | vr.start(); 18 | return vr; 19 | } 20 | 21 | window.ReactVR = {init}; 22 | -------------------------------------------------------------------------------- /chapters/chapter 5/StarWarsModeling/vr/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | StarWarsModeling 4 | 5 | 6 | 7 | 8 | 9 | 10 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /chapters/chapter 6/VectorGraphicPanoramic/__tests__/client.js: -------------------------------------------------------------------------------- 1 | import 'react-native'; 2 | import 'react-vr'; 3 | import React from 'react'; 4 | import Index from '../index.vr.js'; 5 | 6 | // Note: test renderer must be required after react-native. 7 | import renderer from 'react-test-renderer'; 8 | 9 | it('renders correctly', () => { 10 | const tree = renderer.create( 11 | 12 | ); 13 | }); 14 | -------------------------------------------------------------------------------- /chapters/chapter 6/VectorGraphicPanoramic/index.vr.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { 3 | AppRegistry, 4 | asset, 5 | Pano, 6 | Text, 7 | View, 8 | Image 9 | } from 'react-vr'; 10 | 11 | export default class VectorGraphicPanoramic extends React.Component { 12 | render() { 13 | return ( 14 | 15 | 16 | 25 | 26 | ); 27 | } 28 | }; 29 | 30 | AppRegistry.registerComponent('VectorGraphicPanoramic', () => VectorGraphicPanoramic); 31 | -------------------------------------------------------------------------------- /chapters/chapter 6/VectorGraphicPanoramic/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "VectorGraphicPanoramic", 3 | "version": "0.0.1", 4 | "private": true, 5 | "scripts": { 6 | "start": "node -e \"console.log('open browser at http://localhost:8081/vr/\\n\\n');\" && node node_modules/react-native/local-cli/cli.js start", 7 | "bundle": "node node_modules/react-vr/scripts/bundle.js", 8 | "open": "node -e \"require('xopen')('http://localhost:8081/vr/')\"", 9 | "devtools": "react-devtools", 10 | "test": "jest" 11 | }, 12 | "dependencies": { 13 | "ovrui": "~1.2.0", 14 | "react": "~15.4.1", 15 | "react-native": "~0.42.0", 16 | "three": "^0.80.1", 17 | "react-vr": "~1.2.0", 18 | "react-vr-web": "~1.2.0" 19 | }, 20 | "devDependencies": { 21 | "babel-jest": "^19.0.0", 22 | "babel-preset-react-native": "^1.9.1", 23 | "jest": "^19.0.2", 24 | "react-devtools": "^2.1.3", 25 | "react-test-renderer": "~15.4.1", 26 | "xopen": "1.0.0" 27 | }, 28 | "jest": { 29 | "preset": "react-vr" 30 | } 31 | } -------------------------------------------------------------------------------- /chapters/chapter 6/VectorGraphicPanoramic/rn-cli.config.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var path = require('path'); 4 | var blacklist = require('./node_modules/react-native/packager/blacklist'); 5 | 6 | var config = { 7 | getProjectRoots() { 8 | return getRoots(); 9 | }, 10 | 11 | getBlacklistRE() { 12 | return blacklist([ 13 | ]); 14 | }, 15 | 16 | getAssetExts() { 17 | return ['obj', 'mtl']; 18 | }, 19 | 20 | getPlatforms() { 21 | return ['vr']; 22 | }, 23 | 24 | getProvidesModuleNodeModules() { 25 | return ['react-native', 'react-vr']; 26 | }, 27 | }; 28 | 29 | function getRoots() { 30 | var root = process.env.REACT_NATIVE_APP_ROOT; 31 | if (root) { 32 | return [path.resolve(root)]; 33 | } 34 | return [path.resolve(__dirname)]; 35 | } 36 | 37 | module.exports = config; -------------------------------------------------------------------------------- /chapters/chapter 6/VectorGraphicPanoramic/static_assets/ReadMe.txt: -------------------------------------------------------------------------------- 1 | My panoramic background photo was too large to upload. See chapter. 2 | -------------------------------------------------------------------------------- /chapters/chapter 6/VectorGraphicPanoramic/static_assets/chess-world.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michaelmang/Learn-React-VR/544f5dec5a8ddbb2fe6100e6dd80a47a6a953dba/chapters/chapter 6/VectorGraphicPanoramic/static_assets/chess-world.jpg -------------------------------------------------------------------------------- /chapters/chapter 6/VectorGraphicPanoramic/static_assets/koala.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michaelmang/Learn-React-VR/544f5dec5a8ddbb2fe6100e6dd80a47a6a953dba/chapters/chapter 6/VectorGraphicPanoramic/static_assets/koala.PNG -------------------------------------------------------------------------------- /chapters/chapter 6/VectorGraphicPanoramic/vr/client.js: -------------------------------------------------------------------------------- 1 | // Auto-generated content. 2 | // This file contains the boilerplate to set up your React app. 3 | // If you want to modify your application, start in "index.vr.js" 4 | 5 | // Auto-generated content. 6 | import {VRInstance} from 'react-vr-web'; 7 | 8 | function init(bundle, parent, options) { 9 | const vr = new VRInstance(bundle, 'VectorGraphicPanoramic', parent, { 10 | // Add custom options here 11 | ...options, 12 | }); 13 | vr.render = function() { 14 | // Any custom behavior you want to perform on each frame goes here 15 | }; 16 | // Begin the animation loop 17 | vr.start(); 18 | return vr; 19 | } 20 | 21 | window.ReactVR = {init}; 22 | -------------------------------------------------------------------------------- /chapters/chapter 6/VectorGraphicPanoramic/vr/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | VectorGraphicPanoramic 4 | 5 | 6 | 7 | 8 | 9 | 10 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /chapters/chapter 8/After Study Break/VrVideoApp/__tests__/client.js: -------------------------------------------------------------------------------- 1 | import 'react-native'; 2 | import 'react-vr'; 3 | import React from 'react'; 4 | import Index from '../index.vr.js'; 5 | 6 | // Note: test renderer must be required after react-native. 7 | import renderer from 'react-test-renderer'; 8 | 9 | it('renders correctly', () => { 10 | const tree = renderer.create( 11 | 12 | ); 13 | }); 14 | -------------------------------------------------------------------------------- /chapters/chapter 8/After Study Break/VrVideoApp/components/scenes/Dashboard.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { 3 | Text, 4 | View, 5 | asset, 6 | Pano 7 | } from 'react-vr'; 8 | 9 | import DashboardLayout from './layouts/DashboardLayout.js'; 10 | 11 | //Scene 12 | class Dashboard extends React.Component { 13 | render() { 14 | return ( 15 | 16 | 17 | 25 | 26 | ) 27 | } 28 | } 29 | 30 | module.exports = Dashboard; 31 | -------------------------------------------------------------------------------- /chapters/chapter 8/After Study Break/VrVideoApp/components/scenes/TitleScene.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { 3 | Text, 4 | View, 5 | VrButton, 6 | asset, 7 | Pano 8 | } from 'react-vr'; 9 | 10 | import TitleLayout from './layouts/TitleLayout.js'; 11 | 12 | //Scene 13 | class TitleScene extends React.Component { 14 | render() { 15 | return ( 16 | 17 | 18 | 24 | 25 | ) 26 | } 27 | } 28 | 29 | module.exports = TitleScene; 30 | -------------------------------------------------------------------------------- /chapters/chapter 8/After Study Break/VrVideoApp/components/scenes/VideoPlayer.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { 3 | Text, 4 | View, 5 | asset, 6 | Pano 7 | } from 'react-vr'; 8 | 9 | import VideoPlayerLayout from './layouts/VideoPlayerLayout.js'; 10 | 11 | //Scene 12 | class VideoPlayer extends React.Component { 13 | constructor() { 14 | super(); 15 | this.state = { streamURL: "" } 16 | } 17 | 18 | componentWillMount() { 19 | this.setState({ streamURL: 'http://playertwitch.tv/?channel=' + this.props.streamID }) 20 | //example: http://player.twitch.tv/?channel=beyondthesummit 21 | } 22 | 23 | render() { 24 | return ( 25 | 26 | 27 | 34 | 35 | ) 36 | } 37 | } 38 | 39 | module.exports = VideoPlayer; 40 | -------------------------------------------------------------------------------- /chapters/chapter 8/After Study Break/VrVideoApp/components/scenes/layouts/DashboardLayout.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { 3 | View, 4 | Animated 5 | } from 'react-vr'; 6 | 7 | import { Easing } from 'react-native'; 8 | 9 | import MenuButtons from './elements/MenuButtons.js'; 10 | import TileButtons from './elements/TileButtons.js'; 11 | import ProgressCircles from './elements/ProgressCircles.js'; 12 | 13 | import Button from './elements/Button.js'; 14 | 15 | //Layout 16 | class DashboardLayout extends React.Component { 17 | 18 | constructor(props) { 19 | super(props); 20 | this.state = { 21 | slideLeft: new Animated.Value(-1), 22 | fadeIn: new Animated.Value(0), 23 | showButton: false, 24 | color1: "#A482DF", 25 | color2: "#DBDAF1", 26 | text: this.props.text, 27 | borderWidths: [0, 0, 0, 0, 0, 0], 28 | selectionIndex: "", 29 | stage: 1 30 | }; 31 | } 32 | 33 | componentDidMount() { 34 | Animated.sequence([ 35 | Animated.parallel([ 36 | Animated.timing( 37 | this.state.slideLeft, 38 | { 39 | toValue: 0, 40 | duration: 2000, 41 | easing: Easing.ease 42 | } 43 | ), 44 | Animated.timing( 45 | this.state.fadeIn, 46 | { 47 | toValue: 1, 48 | duration: 2000, 49 | easing: Easing.ease 50 | } 51 | ) 52 | ]) 53 | ]).start(); 54 | } 55 | 56 | updateStage(input) { 57 | if(this.state.showButton === false) { 58 | this.setState({showButton: true}); 59 | } 60 | 61 | switch (input) { 62 | case 1: 63 | this.setState({borderWidths: [0.05, 0, 0, 0, 0, 0], selectionIndex: 1}); 64 | break; 65 | case 2: 66 | this.setState({borderWidths: [0, 0.05, 0, 0, 0, 0], selectionIndex: 2}); 67 | break; 68 | case 3: 69 | this.setState({borderWidths: [0, 0, 0.05, 0, 0, 0], selectionIndex: 3}); 70 | break; 71 | case 4: 72 | this.setState({borderWidths: [0, 0, 0, 0.05, 0, 0], selectionIndex: 4}); 73 | break; 74 | case 5: 75 | this.setState({borderWidths: [0, 0, 0, 0, 0.05, 0], selectionIndex: 5}); 76 | break; 77 | case 6: 78 | this.setState({borderWidths: [0, 0, 0, 0, 0, 0.05], selectionIndex: 6}); 79 | break; 80 | } 81 | } 82 | 83 | updateScene() { 84 | this.props.captureSelection(this.state.stage, this.state.selectionIndex); 85 | this.setState({color1: "#DBDAF1", color2: "#A482DF", text: "Watch Video", stage: 2}); 86 | } 87 | 88 | render() { 89 | return ( 90 | 91 | 106 | 107 | 114 | 115 | 116 | 117 | 127 |