├── 00-start-a-virtual-reality-project-with-react-360 ├── .babelrc ├── .flowconfig ├── .gitignore ├── .watchmanconfig ├── __tests__ │ └── index-test.js ├── client.js ├── index.html ├── index.js ├── package-lock.json ├── package.json ├── rn-cli.config.js ├── static_assets │ └── 360_world.jpg └── yarn.lock ├── 01-write-text-using-the-react-360-text-component ├── .babelrc ├── .flowconfig ├── .gitignore ├── .watchmanconfig ├── __tests__ │ └── index-test.js ├── client.js ├── index.html ├── index.js ├── package-lock.json ├── package.json ├── rn-cli.config.js ├── static_assets │ └── 360_world.jpg └── yarn.lock ├── 02-use-flexbox-to-create-layouts-in-react-360 ├── .babelrc ├── .flowconfig ├── .gitignore ├── .watchmanconfig ├── __tests__ │ └── index-test.js ├── client.js ├── index.html ├── index.js ├── package-lock.json ├── package.json ├── rn-cli.config.js ├── static_assets │ └── 360_world.jpg └── yarn.lock ├── 03-assign-multiple-styles-to-a-component-in-react-360 ├── .babelrc ├── .flowconfig ├── .gitignore ├── .watchmanconfig ├── __tests__ │ └── index-test.js ├── client.js ├── index.html ├── index.js ├── package-lock.json ├── package.json ├── rn-cli.config.js ├── static_assets │ └── 360_world.jpg └── yarn.lock ├── 04-display-images-using-the-image-component-in-react-360 ├── .babelrc ├── .flowconfig ├── .gitignore ├── .watchmanconfig ├── __tests__ │ └── index-test.js ├── client.js ├── index.html ├── index.js ├── package-lock.json ├── package.json ├── rn-cli.config.js ├── static_assets │ ├── 360_world.jpg │ └── flag_italy.png └── yarn.lock ├── 05-create-a-cylinder-surface-and-attach-a-component-to-it-in-react-360 ├── .babelrc ├── .flowconfig ├── .gitignore ├── .watchmanconfig ├── __tests__ │ └── index-test.js ├── client.js ├── index.html ├── index.js ├── package-lock.json ├── package.json ├── rn-cli.config.js ├── static_assets │ └── 360_world.jpg └── yarn.lock ├── 06-create-a-flat-surface-and-attach-a-component-to-it-in-react-360 ├── .babelrc ├── .flowconfig ├── .gitignore ├── .watchmanconfig ├── __tests__ │ └── index-test.js ├── client.js ├── components │ └── Flag.js ├── index.html ├── index.js ├── package-lock.json ├── package.json ├── rn-cli.config.js ├── static_assets │ ├── 360_world.jpg │ └── flag_italy.png └── yarn.lock ├── 07-add-3d-objects-to-a-react-360-application ├── .babelrc ├── .flowconfig ├── .gitignore ├── .watchmanconfig ├── __tests__ │ └── index-test.js ├── client.js ├── components │ ├── Earth.js │ └── Flag.js ├── index.html ├── index.js ├── package-lock.json ├── package.json ├── rn-cli.config.js ├── static_assets │ ├── 360_world.jpg │ ├── NOVELO_EARTH.bin │ ├── earth.gltf │ └── flag_italy.png └── yarn.lock ├── 08-capture-user-interaction-in-react-360-with-vrbutton-component ├── .babelrc ├── .flowconfig ├── .gitignore ├── .watchmanconfig ├── __tests__ │ └── index-test.js ├── client.js ├── components │ ├── Earth.js │ └── Flag.js ├── index.html ├── index.js ├── package-lock.json ├── package.json ├── rn-cli.config.js ├── static_assets │ ├── 360_world.jpg │ ├── NOVELO_EARTH.bin │ ├── earth.gltf │ ├── flag_italy.png │ ├── flag_nasa.png │ ├── flag_spain.png │ ├── flag_ukraine.jpg │ ├── spain.jpg │ ├── stars.png │ └── ukraine.jpg └── yarn.lock ├── 09-change-360-panorama-background-in-react-360-app ├── .babelrc ├── .flowconfig ├── .gitignore ├── .watchmanconfig ├── __tests__ │ └── index-test.js ├── client.js ├── components │ ├── Earth.js │ └── Flag.js ├── index.html ├── index.js ├── package-lock.json ├── package.json ├── rn-cli.config.js ├── static_assets │ ├── 360_world.jpg │ ├── NOVELO_EARTH.bin │ ├── earth.gltf │ ├── flag_italy.png │ ├── flag_nasa.png │ ├── flag_spain.png │ ├── flag_ukraine.jpg │ ├── italy.jpg │ ├── spain.jpg │ ├── stars.png │ └── ukraine.jpg └── yarn.lock ├── 10-use-prefetch-component-to-fetch-images-before-they-are-needed-in-react-360 ├── .babelrc ├── .flowconfig ├── .gitignore ├── .watchmanconfig ├── __tests__ │ └── index-test.js ├── client.js ├── components │ ├── Earth.js │ └── Flag.js ├── index.html ├── index.js ├── package-lock.json ├── package.json ├── rn-cli.config.js ├── static_assets │ ├── 360_world.jpg │ ├── NOVELO_EARTH.bin │ ├── earth.gltf │ ├── flag_italy.png │ ├── flag_nasa.png │ ├── flag_spain.png │ ├── flag_ukraine.jpg │ ├── italy.jpg │ ├── spain.jpg │ ├── stars.png │ └── ukraine.jpg └── yarn.lock ├── 11-add-animations-to-react-360-components ├── .babelrc ├── .flowconfig ├── .gitignore ├── .watchmanconfig ├── __tests__ │ └── index-test.js ├── client.js ├── components │ ├── Earth.js │ └── Flag.js ├── index.html ├── index.js ├── package-lock.json ├── package.json ├── rn-cli.config.js ├── static_assets │ ├── 360_world.jpg │ ├── NOVELO_EARTH.bin │ ├── earth.gltf │ ├── flag_italy.png │ ├── flag_nasa.png │ ├── flag_spain.png │ ├── flag_ukraine.jpg │ ├── italy.jpg │ ├── spain.jpg │ ├── stars.png │ └── ukraine.jpg └── yarn.lock ├── 12-create-native-modules-to-extend-react-360-app-functionality ├── .babelrc ├── .flowconfig ├── .gitignore ├── .watchmanconfig ├── __tests__ │ └── index-test.js ├── client.js ├── components │ ├── Earth.js │ └── Flag.js ├── index.html ├── index.js ├── package-lock.json ├── package.json ├── rn-cli.config.js ├── static_assets │ ├── 360_world.jpg │ ├── NOVELO_EARTH.bin │ ├── earth.gltf │ ├── flag_italy.png │ ├── flag_nasa.png │ ├── flag_spain.png │ ├── flag_ukraine.jpg │ ├── italy.jpg │ ├── spain.jpg │ ├── stars.png │ └── ukraine.jpg └── yarn.lock ├── 13-build-a-react-360-app-for-production ├── .babelrc ├── .flowconfig ├── .gitignore ├── .watchmanconfig ├── __tests__ │ └── index-test.js ├── client.js ├── components │ ├── Earth.js │ └── Flag.js ├── index.html ├── index.js ├── package-lock.json ├── package.json ├── rn-cli.config.js ├── static_assets │ ├── 360_world.jpg │ ├── NOVELO_EARTH.bin │ ├── earth.gltf │ ├── flag_italy.png │ ├── flag_nasa.png │ ├── flag_spain.png │ ├── flag_ukraine.jpg │ ├── italy.jpg │ ├── spain.jpg │ ├── stars.png │ └── ukraine.jpg └── yarn.lock └── README.md /00-start-a-virtual-reality-project-with-react-360/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["react-native"] 3 | } 4 | -------------------------------------------------------------------------------- /00-start-a-virtual-reality-project-with-react-360/.flowconfig: -------------------------------------------------------------------------------- 1 | [ignore] 2 | .*/node_modules/.* 3 | 4 | [include] 5 | 6 | [libs] 7 | 8 | [options] 9 | emoji=true 10 | module.system=haste 11 | -------------------------------------------------------------------------------- /00-start-a-virtual-reality-project-with-react-360/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | *~ 3 | *.log 4 | *.js.meta 5 | node_modules/ 6 | build/ 7 | -------------------------------------------------------------------------------- /00-start-a-virtual-reality-project-with-react-360/.watchmanconfig: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio-projects/vr-applications-using-react-360/9ce41818eceb767a184d1c0135d6590b1f8f06a6/00-start-a-virtual-reality-project-with-react-360/.watchmanconfig -------------------------------------------------------------------------------- /00-start-a-virtual-reality-project-with-react-360/__tests__/index-test.js: -------------------------------------------------------------------------------- 1 | import 'react-native'; 2 | import 'react-360'; 3 | import React from 'react'; 4 | import Index from '../index.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 | -------------------------------------------------------------------------------- /00-start-a-virtual-reality-project-with-react-360/client.js: -------------------------------------------------------------------------------- 1 | // This file contains the boilerplate to execute your React app. 2 | // If you want to modify your application's content, start in "index.js" 3 | 4 | import {ReactInstance} from 'react-360-web'; 5 | 6 | function init(bundle, parent, options = {}) { 7 | const r360 = new ReactInstance(bundle, parent, { 8 | // Add custom options here 9 | fullScreen: true, 10 | ...options, 11 | }); 12 | 13 | // Render your app content to the default cylinder surface 14 | r360.renderToSurface( 15 | r360.createRoot('travelVR', { /* initial props */ }), 16 | r360.getDefaultSurface() 17 | ); 18 | 19 | // Load the initial environment 20 | r360.compositor.setBackground(r360.getAssetURL('360_world.jpg')); 21 | } 22 | 23 | window.React360 = {init}; 24 | -------------------------------------------------------------------------------- /00-start-a-virtual-reality-project-with-react-360/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | travelVR 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /00-start-a-virtual-reality-project-with-react-360/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { AppRegistry, StyleSheet, Text, View } from 'react-360'; 3 | 4 | export default class travelVR extends React.Component { 5 | render() { 6 | return ( 7 | 8 | 9 | Hello Egghead! 10 | 11 | 12 | ); 13 | } 14 | } 15 | 16 | const styles = StyleSheet.create({ 17 | panel: { 18 | // Fill the entire surface 19 | width: 1000, 20 | height: 600, 21 | backgroundColor: 'rgba(255, 255, 255, 0.4)', 22 | justifyContent: 'center', 23 | alignItems: 'center' 24 | }, 25 | greetingBox: { 26 | padding: 20, 27 | backgroundColor: '#000000', 28 | borderColor: '#639dda', 29 | borderWidth: 2 30 | }, 31 | greeting: { 32 | fontSize: 30 33 | } 34 | }); 35 | 36 | AppRegistry.registerComponent('travelVR', () => travelVR); 37 | -------------------------------------------------------------------------------- /00-start-a-virtual-reality-project-with-react-360/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "travelVR", 3 | "version": "0.0.1", 4 | "private": true, 5 | "scripts": { 6 | "start": "node node_modules/react-360/scripts/packager.js", 7 | "bundle": "node node_modules/react-360/scripts/bundle.js", 8 | "open": "node -e \"require('xopen')('http://localhost:8081/index.html')\"", 9 | "devtools": "react-devtools", 10 | "test": "jest" 11 | }, 12 | "dependencies": { 13 | "react": "16.3.2", 14 | "react-native": "~0.55.4", 15 | "three": "^0.87.0", 16 | "react-360": "~1.1.0", 17 | "react-360-web": "~1.1.0" 18 | }, 19 | "devDependencies": { 20 | "babel-jest": "^19.0.0", 21 | "babel-preset-react-native": "^1.9.1", 22 | "eslint": "^5.14.1", 23 | "eslint-plugin-react": "^7.12.4", 24 | "jest": "^19.0.2", 25 | "react-devtools": "^2.5.2", 26 | "react-test-renderer": "16.0.0", 27 | "xopen": "1.0.0" 28 | }, 29 | "jest": { 30 | "preset": "react-360" 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /00-start-a-virtual-reality-project-with-react-360/rn-cli.config.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var path = require('path'); 4 | var blacklist = require('metro/src/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-360']; 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; -------------------------------------------------------------------------------- /00-start-a-virtual-reality-project-with-react-360/static_assets/360_world.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio-projects/vr-applications-using-react-360/9ce41818eceb767a184d1c0135d6590b1f8f06a6/00-start-a-virtual-reality-project-with-react-360/static_assets/360_world.jpg -------------------------------------------------------------------------------- /01-write-text-using-the-react-360-text-component/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["react-native"] 3 | } 4 | -------------------------------------------------------------------------------- /01-write-text-using-the-react-360-text-component/.flowconfig: -------------------------------------------------------------------------------- 1 | [ignore] 2 | .*/node_modules/.* 3 | 4 | [include] 5 | 6 | [libs] 7 | 8 | [options] 9 | emoji=true 10 | module.system=haste 11 | -------------------------------------------------------------------------------- /01-write-text-using-the-react-360-text-component/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | *~ 3 | *.log 4 | *.js.meta 5 | node_modules/ 6 | build/ 7 | -------------------------------------------------------------------------------- /01-write-text-using-the-react-360-text-component/.watchmanconfig: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio-projects/vr-applications-using-react-360/9ce41818eceb767a184d1c0135d6590b1f8f06a6/01-write-text-using-the-react-360-text-component/.watchmanconfig -------------------------------------------------------------------------------- /01-write-text-using-the-react-360-text-component/__tests__/index-test.js: -------------------------------------------------------------------------------- 1 | import 'react-native'; 2 | import 'react-360'; 3 | import React from 'react'; 4 | import Index from '../index.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 | -------------------------------------------------------------------------------- /01-write-text-using-the-react-360-text-component/client.js: -------------------------------------------------------------------------------- 1 | // This file contains the boilerplate to execute your React app. 2 | // If you want to modify your application's content, start in "index.js" 3 | 4 | import {ReactInstance} from 'react-360-web'; 5 | 6 | function init(bundle, parent, options = {}) { 7 | const r360 = new ReactInstance(bundle, parent, { 8 | // Add custom options here 9 | fullScreen: true, 10 | ...options, 11 | }); 12 | 13 | // Render your app content to the default cylinder surface 14 | r360.renderToSurface( 15 | r360.createRoot('travelVR', { /* initial props */ }), 16 | r360.getDefaultSurface() 17 | ); 18 | 19 | // Load the initial environment 20 | r360.compositor.setBackground(r360.getAssetURL('360_world.jpg')); 21 | } 22 | 23 | window.React360 = {init}; 24 | -------------------------------------------------------------------------------- /01-write-text-using-the-react-360-text-component/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | travelVR 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /01-write-text-using-the-react-360-text-component/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { AppRegistry, StyleSheet, Text, View } from 'react-360'; 3 | 4 | export default class travelVR extends React.Component { 5 | render() { 6 | return ( 7 | 8 | Hello Egghead! 9 | Hello again! 10 | 11 | ); 12 | } 13 | } 14 | 15 | const styles = StyleSheet.create({ 16 | mainView: { 17 | width: 600, 18 | height: 600, 19 | padding: 10, 20 | backgroundColor: '#eee' 21 | }, 22 | greeting: { 23 | fontSize: 40, 24 | width: '50%', 25 | marginTop: 5, 26 | backgroundColor: '#0298D0', 27 | color: 'white' 28 | } 29 | }); 30 | 31 | AppRegistry.registerComponent('travelVR', () => travelVR); 32 | -------------------------------------------------------------------------------- /01-write-text-using-the-react-360-text-component/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "travelVR", 3 | "version": "0.0.1", 4 | "private": true, 5 | "scripts": { 6 | "start": "node node_modules/react-360/scripts/packager.js", 7 | "bundle": "node node_modules/react-360/scripts/bundle.js", 8 | "open": "node -e \"require('xopen')('http://localhost:8081/index.html')\"", 9 | "devtools": "react-devtools", 10 | "test": "jest" 11 | }, 12 | "dependencies": { 13 | "react": "16.3.2", 14 | "react-native": "~0.55.4", 15 | "three": "^0.87.0", 16 | "react-360": "~1.1.0", 17 | "react-360-web": "~1.1.0" 18 | }, 19 | "devDependencies": { 20 | "babel-jest": "^19.0.0", 21 | "babel-preset-react-native": "^1.9.1", 22 | "eslint": "^5.14.1", 23 | "eslint-plugin-react": "^7.12.4", 24 | "jest": "^19.0.2", 25 | "react-devtools": "^2.5.2", 26 | "react-test-renderer": "16.0.0", 27 | "xopen": "1.0.0" 28 | }, 29 | "jest": { 30 | "preset": "react-360" 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /01-write-text-using-the-react-360-text-component/rn-cli.config.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var path = require('path'); 4 | var blacklist = require('metro/src/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-360']; 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; -------------------------------------------------------------------------------- /01-write-text-using-the-react-360-text-component/static_assets/360_world.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio-projects/vr-applications-using-react-360/9ce41818eceb767a184d1c0135d6590b1f8f06a6/01-write-text-using-the-react-360-text-component/static_assets/360_world.jpg -------------------------------------------------------------------------------- /02-use-flexbox-to-create-layouts-in-react-360/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["react-native"] 3 | } 4 | -------------------------------------------------------------------------------- /02-use-flexbox-to-create-layouts-in-react-360/.flowconfig: -------------------------------------------------------------------------------- 1 | [ignore] 2 | .*/node_modules/.* 3 | 4 | [include] 5 | 6 | [libs] 7 | 8 | [options] 9 | emoji=true 10 | module.system=haste 11 | -------------------------------------------------------------------------------- /02-use-flexbox-to-create-layouts-in-react-360/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | *~ 3 | *.log 4 | *.js.meta 5 | node_modules/ 6 | build/ 7 | -------------------------------------------------------------------------------- /02-use-flexbox-to-create-layouts-in-react-360/.watchmanconfig: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio-projects/vr-applications-using-react-360/9ce41818eceb767a184d1c0135d6590b1f8f06a6/02-use-flexbox-to-create-layouts-in-react-360/.watchmanconfig -------------------------------------------------------------------------------- /02-use-flexbox-to-create-layouts-in-react-360/__tests__/index-test.js: -------------------------------------------------------------------------------- 1 | import 'react-native'; 2 | import 'react-360'; 3 | import React from 'react'; 4 | import Index from '../index.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 | -------------------------------------------------------------------------------- /02-use-flexbox-to-create-layouts-in-react-360/client.js: -------------------------------------------------------------------------------- 1 | // This file contains the boilerplate to execute your React app. 2 | // If you want to modify your application's content, start in "index.js" 3 | 4 | import {ReactInstance} from 'react-360-web'; 5 | 6 | function init(bundle, parent, options = {}) { 7 | const r360 = new ReactInstance(bundle, parent, { 8 | // Add custom options here 9 | fullScreen: true, 10 | ...options, 11 | }); 12 | 13 | // Render your app content to the default cylinder surface 14 | r360.renderToSurface( 15 | r360.createRoot('travelVR', { /* initial props */ }), 16 | r360.getDefaultSurface() 17 | ); 18 | 19 | // Load the initial environment 20 | r360.compositor.setBackground(r360.getAssetURL('360_world.jpg')); 21 | } 22 | 23 | window.React360 = {init}; 24 | -------------------------------------------------------------------------------- /02-use-flexbox-to-create-layouts-in-react-360/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | travelVR 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /02-use-flexbox-to-create-layouts-in-react-360/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { AppRegistry, StyleSheet, Text, View } from 'react-360'; 3 | 4 | export default class travelVR extends React.Component { 5 | render() { 6 | return ( 7 | 8 | Poland 9 | Ukraine 10 | United Kingdom 11 | Spain 12 | Italy 13 | Greece 14 | 15 | ); 16 | } 17 | } 18 | 19 | const styles = StyleSheet.create({ 20 | mainView: { 21 | width: 600, 22 | padding: 10, 23 | backgroundColor: '#eee', 24 | alignItems: 'center' 25 | }, 26 | menuItem: { 27 | fontSize: 40, 28 | width: '50%', 29 | marginTop: 5, 30 | backgroundColor: '#0298D0', 31 | color: 'white', 32 | textAlign: 'center' 33 | } 34 | }); 35 | 36 | AppRegistry.registerComponent('travelVR', () => travelVR); 37 | -------------------------------------------------------------------------------- /02-use-flexbox-to-create-layouts-in-react-360/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "travelVR", 3 | "version": "0.0.1", 4 | "private": true, 5 | "scripts": { 6 | "start": "node node_modules/react-360/scripts/packager.js", 7 | "bundle": "node node_modules/react-360/scripts/bundle.js", 8 | "open": "node -e \"require('xopen')('http://localhost:8081/index.html')\"", 9 | "devtools": "react-devtools", 10 | "test": "jest" 11 | }, 12 | "dependencies": { 13 | "react": "16.3.2", 14 | "react-native": "~0.55.4", 15 | "three": "^0.87.0", 16 | "react-360": "~1.1.0", 17 | "react-360-web": "~1.1.0" 18 | }, 19 | "devDependencies": { 20 | "babel-jest": "^19.0.0", 21 | "babel-preset-react-native": "^1.9.1", 22 | "eslint": "^5.14.1", 23 | "eslint-plugin-react": "^7.12.4", 24 | "jest": "^19.0.2", 25 | "react-devtools": "^2.5.2", 26 | "react-test-renderer": "16.0.0", 27 | "xopen": "1.0.0" 28 | }, 29 | "jest": { 30 | "preset": "react-360" 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /02-use-flexbox-to-create-layouts-in-react-360/rn-cli.config.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var path = require('path'); 4 | var blacklist = require('metro/src/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-360']; 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; -------------------------------------------------------------------------------- /02-use-flexbox-to-create-layouts-in-react-360/static_assets/360_world.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio-projects/vr-applications-using-react-360/9ce41818eceb767a184d1c0135d6590b1f8f06a6/02-use-flexbox-to-create-layouts-in-react-360/static_assets/360_world.jpg -------------------------------------------------------------------------------- /03-assign-multiple-styles-to-a-component-in-react-360/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["react-native"] 3 | } 4 | -------------------------------------------------------------------------------- /03-assign-multiple-styles-to-a-component-in-react-360/.flowconfig: -------------------------------------------------------------------------------- 1 | [ignore] 2 | .*/node_modules/.* 3 | 4 | [include] 5 | 6 | [libs] 7 | 8 | [options] 9 | emoji=true 10 | module.system=haste 11 | -------------------------------------------------------------------------------- /03-assign-multiple-styles-to-a-component-in-react-360/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | *~ 3 | *.log 4 | *.js.meta 5 | node_modules/ 6 | build/ 7 | -------------------------------------------------------------------------------- /03-assign-multiple-styles-to-a-component-in-react-360/.watchmanconfig: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio-projects/vr-applications-using-react-360/9ce41818eceb767a184d1c0135d6590b1f8f06a6/03-assign-multiple-styles-to-a-component-in-react-360/.watchmanconfig -------------------------------------------------------------------------------- /03-assign-multiple-styles-to-a-component-in-react-360/__tests__/index-test.js: -------------------------------------------------------------------------------- 1 | import 'react-native'; 2 | import 'react-360'; 3 | import React from 'react'; 4 | import Index from '../index.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 | -------------------------------------------------------------------------------- /03-assign-multiple-styles-to-a-component-in-react-360/client.js: -------------------------------------------------------------------------------- 1 | // This file contains the boilerplate to execute your React app. 2 | // If you want to modify your application's content, start in "index.js" 3 | 4 | import {ReactInstance} from 'react-360-web'; 5 | 6 | function init(bundle, parent, options = {}) { 7 | const r360 = new ReactInstance(bundle, parent, { 8 | // Add custom options here 9 | fullScreen: true, 10 | ...options, 11 | }); 12 | 13 | // Render your app content to the default cylinder surface 14 | r360.renderToSurface( 15 | r360.createRoot('travelVR', { /* initial props */ }), 16 | r360.getDefaultSurface() 17 | ); 18 | 19 | // Load the initial environment 20 | r360.compositor.setBackground(r360.getAssetURL('360_world.jpg')); 21 | } 22 | 23 | window.React360 = {init}; 24 | -------------------------------------------------------------------------------- /03-assign-multiple-styles-to-a-component-in-react-360/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | travelVR 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /03-assign-multiple-styles-to-a-component-in-react-360/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { AppRegistry, StyleSheet, Text, View } from 'react-360'; 3 | 4 | export default class travelVR extends React.Component { 5 | render() { 6 | const { 7 | mainView, 8 | menuItem, 9 | poland, 10 | ukraine, 11 | uk, 12 | spain, 13 | italy, 14 | greece, 15 | redText 16 | } = styles; 17 | 18 | return ( 19 | 20 | Poland 21 | Ukraine 22 | United Kingdom 23 | Spain 24 | Italy 25 | Greece 26 | 27 | ); 28 | } 29 | } 30 | 31 | const styles = StyleSheet.create({ 32 | mainView: { 33 | width: 600, 34 | padding: 10, 35 | backgroundColor: '#eee', 36 | alignItems: 'center' 37 | }, 38 | menuItem: { 39 | fontSize: 40, 40 | width: '50%', 41 | marginTop: 5, 42 | backgroundColor: '#0298D0', 43 | color: 'white', 44 | textAlign: 'center' 45 | }, 46 | poland: { 47 | backgroundColor: '#DC143C' 48 | }, 49 | ukraine: { 50 | backgroundColor: '#FFD500' 51 | }, 52 | uk: { 53 | backgroundColor: '#00247D' 54 | }, 55 | spain: { 56 | backgroundColor: '#C60D1F' 57 | }, 58 | italy: { 59 | backgroundColor: '#029246' 60 | }, 61 | greece: { 62 | backgroundColor: '#0D5EAF' 63 | }, 64 | redText: { 65 | color: 'red' 66 | } 67 | }); 68 | 69 | AppRegistry.registerComponent('travelVR', () => travelVR); 70 | -------------------------------------------------------------------------------- /03-assign-multiple-styles-to-a-component-in-react-360/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "travelVR", 3 | "version": "0.0.1", 4 | "private": true, 5 | "scripts": { 6 | "start": "node node_modules/react-360/scripts/packager.js", 7 | "bundle": "node node_modules/react-360/scripts/bundle.js", 8 | "open": "node -e \"require('xopen')('http://localhost:8081/index.html')\"", 9 | "devtools": "react-devtools", 10 | "test": "jest" 11 | }, 12 | "dependencies": { 13 | "react": "16.3.2", 14 | "react-native": "~0.55.4", 15 | "three": "^0.87.0", 16 | "react-360": "~1.1.0", 17 | "react-360-web": "~1.1.0" 18 | }, 19 | "devDependencies": { 20 | "babel-jest": "^19.0.0", 21 | "babel-preset-react-native": "^1.9.1", 22 | "eslint": "^5.14.1", 23 | "eslint-plugin-react": "^7.12.4", 24 | "jest": "^19.0.2", 25 | "react-devtools": "^2.5.2", 26 | "react-test-renderer": "16.0.0", 27 | "xopen": "1.0.0" 28 | }, 29 | "jest": { 30 | "preset": "react-360" 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /03-assign-multiple-styles-to-a-component-in-react-360/rn-cli.config.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var path = require('path'); 4 | var blacklist = require('metro/src/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-360']; 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; -------------------------------------------------------------------------------- /03-assign-multiple-styles-to-a-component-in-react-360/static_assets/360_world.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio-projects/vr-applications-using-react-360/9ce41818eceb767a184d1c0135d6590b1f8f06a6/03-assign-multiple-styles-to-a-component-in-react-360/static_assets/360_world.jpg -------------------------------------------------------------------------------- /04-display-images-using-the-image-component-in-react-360/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["react-native"] 3 | } 4 | -------------------------------------------------------------------------------- /04-display-images-using-the-image-component-in-react-360/.flowconfig: -------------------------------------------------------------------------------- 1 | [ignore] 2 | .*/node_modules/.* 3 | 4 | [include] 5 | 6 | [libs] 7 | 8 | [options] 9 | emoji=true 10 | module.system=haste 11 | -------------------------------------------------------------------------------- /04-display-images-using-the-image-component-in-react-360/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | *~ 3 | *.log 4 | *.js.meta 5 | node_modules/ 6 | build/ 7 | -------------------------------------------------------------------------------- /04-display-images-using-the-image-component-in-react-360/.watchmanconfig: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio-projects/vr-applications-using-react-360/9ce41818eceb767a184d1c0135d6590b1f8f06a6/04-display-images-using-the-image-component-in-react-360/.watchmanconfig -------------------------------------------------------------------------------- /04-display-images-using-the-image-component-in-react-360/__tests__/index-test.js: -------------------------------------------------------------------------------- 1 | import 'react-native'; 2 | import 'react-360'; 3 | import React from 'react'; 4 | import Index from '../index.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 | -------------------------------------------------------------------------------- /04-display-images-using-the-image-component-in-react-360/client.js: -------------------------------------------------------------------------------- 1 | // This file contains the boilerplate to execute your React app. 2 | // If you want to modify your application's content, start in "index.js" 3 | 4 | import {ReactInstance} from 'react-360-web'; 5 | 6 | function init(bundle, parent, options = {}) { 7 | const r360 = new ReactInstance(bundle, parent, { 8 | // Add custom options here 9 | fullScreen: true, 10 | ...options, 11 | }); 12 | 13 | // Render your app content to the default cylinder surface 14 | r360.renderToSurface( 15 | r360.createRoot('travelVR', { /* initial props */ }), 16 | r360.getDefaultSurface() 17 | ); 18 | 19 | // Load the initial environment 20 | r360.compositor.setBackground(r360.getAssetURL('360_world.jpg')); 21 | } 22 | 23 | window.React360 = {init}; 24 | -------------------------------------------------------------------------------- /04-display-images-using-the-image-component-in-react-360/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | travelVR 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /04-display-images-using-the-image-component-in-react-360/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { AppRegistry, asset, StyleSheet, View, Image } from 'react-360'; 3 | 4 | export default class travelVR extends React.Component { 5 | render() { 6 | const { mainView, flag } = styles; 7 | 8 | return ( 9 | 10 | 17 | 18 | 19 | ); 20 | } 21 | } 22 | 23 | const styles = StyleSheet.create({ 24 | mainView: { 25 | width: 1000, 26 | height: 600, 27 | backgroundColor: '#eee', 28 | flexDirection: 'row', 29 | alignItems: 'center', 30 | justifyContent: 'center' 31 | }, 32 | flag: { 33 | width: 400, 34 | height: '40%' 35 | } 36 | }); 37 | 38 | AppRegistry.registerComponent('travelVR', () => travelVR); 39 | -------------------------------------------------------------------------------- /04-display-images-using-the-image-component-in-react-360/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "travelVR", 3 | "version": "0.0.1", 4 | "private": true, 5 | "scripts": { 6 | "start": "node node_modules/react-360/scripts/packager.js", 7 | "bundle": "node node_modules/react-360/scripts/bundle.js", 8 | "open": "node -e \"require('xopen')('http://localhost:8081/index.html')\"", 9 | "devtools": "react-devtools", 10 | "test": "jest" 11 | }, 12 | "dependencies": { 13 | "react": "16.3.2", 14 | "react-native": "~0.55.4", 15 | "three": "^0.87.0", 16 | "react-360": "~1.1.0", 17 | "react-360-web": "~1.1.0" 18 | }, 19 | "devDependencies": { 20 | "babel-jest": "^19.0.0", 21 | "babel-preset-react-native": "^1.9.1", 22 | "eslint": "^5.14.1", 23 | "eslint-plugin-react": "^7.12.4", 24 | "jest": "^19.0.2", 25 | "react-devtools": "^2.5.2", 26 | "react-test-renderer": "16.0.0", 27 | "xopen": "1.0.0" 28 | }, 29 | "jest": { 30 | "preset": "react-360" 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /04-display-images-using-the-image-component-in-react-360/rn-cli.config.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var path = require('path'); 4 | var blacklist = require('metro/src/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-360']; 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; -------------------------------------------------------------------------------- /04-display-images-using-the-image-component-in-react-360/static_assets/360_world.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio-projects/vr-applications-using-react-360/9ce41818eceb767a184d1c0135d6590b1f8f06a6/04-display-images-using-the-image-component-in-react-360/static_assets/360_world.jpg -------------------------------------------------------------------------------- /04-display-images-using-the-image-component-in-react-360/static_assets/flag_italy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio-projects/vr-applications-using-react-360/9ce41818eceb767a184d1c0135d6590b1f8f06a6/04-display-images-using-the-image-component-in-react-360/static_assets/flag_italy.png -------------------------------------------------------------------------------- /05-create-a-cylinder-surface-and-attach-a-component-to-it-in-react-360/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["react-native"] 3 | } 4 | -------------------------------------------------------------------------------- /05-create-a-cylinder-surface-and-attach-a-component-to-it-in-react-360/.flowconfig: -------------------------------------------------------------------------------- 1 | [ignore] 2 | .*/node_modules/.* 3 | 4 | [include] 5 | 6 | [libs] 7 | 8 | [options] 9 | emoji=true 10 | module.system=haste 11 | -------------------------------------------------------------------------------- /05-create-a-cylinder-surface-and-attach-a-component-to-it-in-react-360/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | *~ 3 | *.log 4 | *.js.meta 5 | node_modules/ 6 | build/ 7 | -------------------------------------------------------------------------------- /05-create-a-cylinder-surface-and-attach-a-component-to-it-in-react-360/.watchmanconfig: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio-projects/vr-applications-using-react-360/9ce41818eceb767a184d1c0135d6590b1f8f06a6/05-create-a-cylinder-surface-and-attach-a-component-to-it-in-react-360/.watchmanconfig -------------------------------------------------------------------------------- /05-create-a-cylinder-surface-and-attach-a-component-to-it-in-react-360/__tests__/index-test.js: -------------------------------------------------------------------------------- 1 | import 'react-native'; 2 | import 'react-360'; 3 | import React from 'react'; 4 | import Index from '../index.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 | -------------------------------------------------------------------------------- /05-create-a-cylinder-surface-and-attach-a-component-to-it-in-react-360/client.js: -------------------------------------------------------------------------------- 1 | // This file contains the boilerplate to execute your React app. 2 | // If you want to modify your application's content, start in "index.js" 3 | 4 | import { ReactInstance, Location, Surface } from 'react-360-web'; 5 | 6 | function init(bundle, parent, options = {}) { 7 | const r360 = new ReactInstance(bundle, parent, { 8 | // Add custom options here 9 | fullScreen: true, 10 | ...options 11 | }); 12 | 13 | const myCylinderSurface = new Surface( 14 | 4680, 15 | 600, 16 | Surface.SurfaceShape.Cylinder 17 | ); 18 | 19 | // Render your app content to the default cylinder surface 20 | r360.renderToSurface( 21 | r360.createRoot('travelVR', { 22 | /* initial props */ 23 | }), 24 | myCylinderSurface 25 | ); 26 | 27 | // Load the initial environment 28 | r360.compositor.setBackground(r360.getAssetURL('360_world.jpg')); 29 | } 30 | 31 | window.React360 = { init }; 32 | -------------------------------------------------------------------------------- /05-create-a-cylinder-surface-and-attach-a-component-to-it-in-react-360/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | travelVR 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /05-create-a-cylinder-surface-and-attach-a-component-to-it-in-react-360/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { AppRegistry, asset, StyleSheet, View, Image } from 'react-360'; 3 | 4 | export default class travelVR extends React.Component { 5 | render() { 6 | const { mainView } = styles; 7 | 8 | return ; 9 | } 10 | } 11 | 12 | const styles = StyleSheet.create({ 13 | mainView: { 14 | width: 4680, 15 | height: 600, 16 | opacity: 0.3, 17 | backgroundColor: '#eee', 18 | flexDirection: 'row', 19 | alignItems: 'center', 20 | justifyContent: 'center' 21 | } 22 | }); 23 | 24 | AppRegistry.registerComponent('travelVR', () => travelVR); 25 | -------------------------------------------------------------------------------- /05-create-a-cylinder-surface-and-attach-a-component-to-it-in-react-360/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "travelVR", 3 | "version": "0.0.1", 4 | "private": true, 5 | "scripts": { 6 | "start": "node node_modules/react-360/scripts/packager.js", 7 | "bundle": "node node_modules/react-360/scripts/bundle.js", 8 | "open": "node -e \"require('xopen')('http://localhost:8081/index.html')\"", 9 | "devtools": "react-devtools", 10 | "test": "jest" 11 | }, 12 | "dependencies": { 13 | "react": "16.3.2", 14 | "react-native": "~0.55.4", 15 | "three": "^0.87.0", 16 | "react-360": "~1.1.0", 17 | "react-360-web": "~1.1.0" 18 | }, 19 | "devDependencies": { 20 | "babel-jest": "^19.0.0", 21 | "babel-preset-react-native": "^1.9.1", 22 | "eslint": "^5.14.1", 23 | "eslint-plugin-react": "^7.12.4", 24 | "jest": "^19.0.2", 25 | "react-devtools": "^2.5.2", 26 | "react-test-renderer": "16.0.0", 27 | "xopen": "1.0.0" 28 | }, 29 | "jest": { 30 | "preset": "react-360" 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /05-create-a-cylinder-surface-and-attach-a-component-to-it-in-react-360/rn-cli.config.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var path = require('path'); 4 | var blacklist = require('metro/src/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-360']; 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; -------------------------------------------------------------------------------- /05-create-a-cylinder-surface-and-attach-a-component-to-it-in-react-360/static_assets/360_world.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio-projects/vr-applications-using-react-360/9ce41818eceb767a184d1c0135d6590b1f8f06a6/05-create-a-cylinder-surface-and-attach-a-component-to-it-in-react-360/static_assets/360_world.jpg -------------------------------------------------------------------------------- /06-create-a-flat-surface-and-attach-a-component-to-it-in-react-360/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["react-native"] 3 | } 4 | -------------------------------------------------------------------------------- /06-create-a-flat-surface-and-attach-a-component-to-it-in-react-360/.flowconfig: -------------------------------------------------------------------------------- 1 | [ignore] 2 | .*/node_modules/.* 3 | 4 | [include] 5 | 6 | [libs] 7 | 8 | [options] 9 | emoji=true 10 | module.system=haste 11 | -------------------------------------------------------------------------------- /06-create-a-flat-surface-and-attach-a-component-to-it-in-react-360/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | *~ 3 | *.log 4 | *.js.meta 5 | node_modules/ 6 | build/ 7 | -------------------------------------------------------------------------------- /06-create-a-flat-surface-and-attach-a-component-to-it-in-react-360/.watchmanconfig: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio-projects/vr-applications-using-react-360/9ce41818eceb767a184d1c0135d6590b1f8f06a6/06-create-a-flat-surface-and-attach-a-component-to-it-in-react-360/.watchmanconfig -------------------------------------------------------------------------------- /06-create-a-flat-surface-and-attach-a-component-to-it-in-react-360/__tests__/index-test.js: -------------------------------------------------------------------------------- 1 | import 'react-native'; 2 | import 'react-360'; 3 | import React from 'react'; 4 | import Index from '../index.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 | -------------------------------------------------------------------------------- /06-create-a-flat-surface-and-attach-a-component-to-it-in-react-360/client.js: -------------------------------------------------------------------------------- 1 | // This file contains the boilerplate to execute your React app. 2 | // If you want to modify your application's content, start in "index.js" 3 | 4 | import { ReactInstance, Location, Surface } from 'react-360-web'; 5 | 6 | function init(bundle, parent, options = {}) { 7 | const r360 = new ReactInstance(bundle, parent, { 8 | // Add custom options here 9 | fullScreen: true, 10 | ...options 11 | }); 12 | 13 | const myCylinderSurface = new Surface( 14 | 4680, 15 | 600, 16 | Surface.SurfaceShape.Cylinder 17 | ); 18 | 19 | const myFlatSurface = new Surface(600, 400, Surface.SurfaceShape.Flat); 20 | myFlatSurface.setAngle(-Math.PI / 2, 0); 21 | 22 | // Render your app content to the default cylinder surface 23 | r360.renderToSurface( 24 | r360.createRoot('travelVR', { 25 | /* initial props */ 26 | }), 27 | myCylinderSurface 28 | ); 29 | 30 | r360.renderToSurface( 31 | r360.createRoot('Flag', { 32 | image: 'flag_italy.png' 33 | }), 34 | myFlatSurface 35 | ); 36 | 37 | // Load the initial environment 38 | r360.compositor.setBackground(r360.getAssetURL('360_world.jpg')); 39 | } 40 | 41 | window.React360 = { init }; 42 | -------------------------------------------------------------------------------- /06-create-a-flat-surface-and-attach-a-component-to-it-in-react-360/components/Flag.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { AppRegistry, asset, StyleSheet, Image } from 'react-360'; 3 | 4 | export default class Flag extends React.Component { 5 | render() { 6 | const { flag } = styles; 7 | 8 | return ; 9 | } 10 | } 11 | 12 | const styles = StyleSheet.create({ 13 | flag: { 14 | height: 400, 15 | width: 600 16 | } 17 | }); 18 | -------------------------------------------------------------------------------- /06-create-a-flat-surface-and-attach-a-component-to-it-in-react-360/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | travelVR 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /06-create-a-flat-surface-and-attach-a-component-to-it-in-react-360/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { AppRegistry, asset, StyleSheet, View, Image } from 'react-360'; 3 | import Flag from './components/Flag'; 4 | 5 | export default class travelVR extends React.Component { 6 | render() { 7 | const { mainView } = styles; 8 | 9 | return ; 10 | } 11 | } 12 | 13 | const styles = StyleSheet.create({ 14 | mainView: { 15 | width: 4680, 16 | height: 600, 17 | opacity: 0.3, 18 | backgroundColor: '#eee', 19 | flexDirection: 'row', 20 | alignItems: 'center', 21 | justifyContent: 'center' 22 | } 23 | }); 24 | 25 | AppRegistry.registerComponent('travelVR', () => travelVR); 26 | AppRegistry.registerComponent('Flag', () => Flag); 27 | -------------------------------------------------------------------------------- /06-create-a-flat-surface-and-attach-a-component-to-it-in-react-360/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "travelVR", 3 | "version": "0.0.1", 4 | "private": true, 5 | "scripts": { 6 | "start": "node node_modules/react-360/scripts/packager.js", 7 | "bundle": "node node_modules/react-360/scripts/bundle.js", 8 | "open": "node -e \"require('xopen')('http://localhost:8081/index.html')\"", 9 | "devtools": "react-devtools", 10 | "test": "jest" 11 | }, 12 | "dependencies": { 13 | "react": "16.3.2", 14 | "react-native": "~0.55.4", 15 | "three": "^0.87.0", 16 | "react-360": "~1.1.0", 17 | "react-360-web": "~1.1.0" 18 | }, 19 | "devDependencies": { 20 | "babel-jest": "^19.0.0", 21 | "babel-preset-react-native": "^1.9.1", 22 | "eslint": "^5.14.1", 23 | "eslint-plugin-react": "^7.12.4", 24 | "jest": "^19.0.2", 25 | "react-devtools": "^2.5.2", 26 | "react-test-renderer": "16.0.0", 27 | "xopen": "1.0.0" 28 | }, 29 | "jest": { 30 | "preset": "react-360" 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /06-create-a-flat-surface-and-attach-a-component-to-it-in-react-360/rn-cli.config.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var path = require('path'); 4 | var blacklist = require('metro/src/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-360']; 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; -------------------------------------------------------------------------------- /06-create-a-flat-surface-and-attach-a-component-to-it-in-react-360/static_assets/360_world.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio-projects/vr-applications-using-react-360/9ce41818eceb767a184d1c0135d6590b1f8f06a6/06-create-a-flat-surface-and-attach-a-component-to-it-in-react-360/static_assets/360_world.jpg -------------------------------------------------------------------------------- /06-create-a-flat-surface-and-attach-a-component-to-it-in-react-360/static_assets/flag_italy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio-projects/vr-applications-using-react-360/9ce41818eceb767a184d1c0135d6590b1f8f06a6/06-create-a-flat-surface-and-attach-a-component-to-it-in-react-360/static_assets/flag_italy.png -------------------------------------------------------------------------------- /07-add-3d-objects-to-a-react-360-application/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["react-native"] 3 | } 4 | -------------------------------------------------------------------------------- /07-add-3d-objects-to-a-react-360-application/.flowconfig: -------------------------------------------------------------------------------- 1 | [ignore] 2 | .*/node_modules/.* 3 | 4 | [include] 5 | 6 | [libs] 7 | 8 | [options] 9 | emoji=true 10 | module.system=haste 11 | -------------------------------------------------------------------------------- /07-add-3d-objects-to-a-react-360-application/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | *~ 3 | *.log 4 | *.js.meta 5 | node_modules/ 6 | build/ 7 | -------------------------------------------------------------------------------- /07-add-3d-objects-to-a-react-360-application/.watchmanconfig: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio-projects/vr-applications-using-react-360/9ce41818eceb767a184d1c0135d6590b1f8f06a6/07-add-3d-objects-to-a-react-360-application/.watchmanconfig -------------------------------------------------------------------------------- /07-add-3d-objects-to-a-react-360-application/__tests__/index-test.js: -------------------------------------------------------------------------------- 1 | import 'react-native'; 2 | import 'react-360'; 3 | import React from 'react'; 4 | import Index from '../index.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 | -------------------------------------------------------------------------------- /07-add-3d-objects-to-a-react-360-application/client.js: -------------------------------------------------------------------------------- 1 | // This file contains the boilerplate to execute your React app. 2 | // If you want to modify your application's content, start in "index.js" 3 | 4 | import { ReactInstance, Location, Surface } from 'react-360-web'; 5 | 6 | function init(bundle, parent, options = {}) { 7 | const r360 = new ReactInstance(bundle, parent, { 8 | // Add custom options here 9 | fullScreen: true, 10 | ...options 11 | }); 12 | 13 | const myCylinderSurface = new Surface( 14 | 4680, 15 | 600, 16 | Surface.SurfaceShape.Cylinder 17 | ); 18 | 19 | const myFlatSurface = new Surface(600, 400, Surface.SurfaceShape.Flat); 20 | myFlatSurface.setAngle(-Math.PI / 2, 0); 21 | 22 | // Render your app content to the default cylinder surface 23 | r360.renderToSurface( 24 | r360.createRoot('travelVR', { 25 | /* initial props */ 26 | }), 27 | myCylinderSurface 28 | ); 29 | 30 | r360.renderToSurface( 31 | r360.createRoot('Flag', { 32 | image: 'flag_italy.png' 33 | }), 34 | myFlatSurface 35 | ); 36 | 37 | const location = new Location([0, -1, -1]); 38 | 39 | // r360.renderToLocation(r360.createRoot('Earth'), r360.getDefaultLocation()); 40 | r360.renderToLocation(r360.createRoot('Earth'), location); 41 | 42 | // Load the initial environment 43 | r360.compositor.setBackground(r360.getAssetURL('360_world.jpg')); 44 | } 45 | 46 | window.React360 = { init }; 47 | -------------------------------------------------------------------------------- /07-add-3d-objects-to-a-react-360-application/components/Earth.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { AppRegistry, asset, View } from 'react-360'; 3 | import Entity from 'Entity'; 4 | import AmbientLight from 'AmbientLight'; 5 | import PointLight from 'PointLight'; 6 | 7 | export default class Earth extends React.Component { 8 | render() { 9 | return ( 10 | 11 | 12 | 16 | 26 | 27 | ); 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /07-add-3d-objects-to-a-react-360-application/components/Flag.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { AppRegistry, asset, StyleSheet, Image } from 'react-360'; 3 | 4 | export default class Flag extends React.Component { 5 | render() { 6 | const { flag } = styles; 7 | 8 | return ; 9 | } 10 | } 11 | 12 | const styles = StyleSheet.create({ 13 | flag: { 14 | height: 400, 15 | width: 600, 16 | marginRight: 20 17 | } 18 | }); 19 | -------------------------------------------------------------------------------- /07-add-3d-objects-to-a-react-360-application/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | travelVR 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /07-add-3d-objects-to-a-react-360-application/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { AppRegistry, asset, StyleSheet, View, Image } from 'react-360'; 3 | import Flag from './components/Flag'; 4 | import Earth from './components/Earth'; 5 | 6 | export default class travelVR extends React.Component { 7 | render() { 8 | const { mainView } = styles; 9 | 10 | return ; 11 | } 12 | } 13 | 14 | const styles = StyleSheet.create({ 15 | mainView: { 16 | width: 4680, 17 | height: 600, 18 | opacity: 0.3, 19 | backgroundColor: '#eee', 20 | flexDirection: 'row', 21 | alignItems: 'center', 22 | justifyContent: 'center' 23 | } 24 | }); 25 | 26 | AppRegistry.registerComponent('travelVR', () => travelVR); 27 | AppRegistry.registerComponent('Flag', () => Flag); 28 | AppRegistry.registerComponent('Earth', () => Earth); 29 | -------------------------------------------------------------------------------- /07-add-3d-objects-to-a-react-360-application/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "travelVR", 3 | "version": "0.0.1", 4 | "private": true, 5 | "scripts": { 6 | "start": "node node_modules/react-360/scripts/packager.js", 7 | "bundle": "node node_modules/react-360/scripts/bundle.js", 8 | "open": "node -e \"require('xopen')('http://localhost:8081/index.html')\"", 9 | "devtools": "react-devtools", 10 | "test": "jest" 11 | }, 12 | "dependencies": { 13 | "react": "16.3.2", 14 | "react-native": "~0.55.4", 15 | "three": "^0.87.0", 16 | "react-360": "~1.1.0", 17 | "react-360-web": "~1.1.0" 18 | }, 19 | "devDependencies": { 20 | "babel-jest": "^19.0.0", 21 | "babel-preset-react-native": "^1.9.1", 22 | "eslint": "^5.14.1", 23 | "eslint-plugin-react": "^7.12.4", 24 | "jest": "^19.0.2", 25 | "react-devtools": "^2.5.2", 26 | "react-test-renderer": "16.0.0", 27 | "xopen": "1.0.0" 28 | }, 29 | "jest": { 30 | "preset": "react-360" 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /07-add-3d-objects-to-a-react-360-application/rn-cli.config.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var path = require('path'); 4 | var blacklist = require('metro/src/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-360']; 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; -------------------------------------------------------------------------------- /07-add-3d-objects-to-a-react-360-application/static_assets/360_world.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio-projects/vr-applications-using-react-360/9ce41818eceb767a184d1c0135d6590b1f8f06a6/07-add-3d-objects-to-a-react-360-application/static_assets/360_world.jpg -------------------------------------------------------------------------------- /07-add-3d-objects-to-a-react-360-application/static_assets/NOVELO_EARTH.bin: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio-projects/vr-applications-using-react-360/9ce41818eceb767a184d1c0135d6590b1f8f06a6/07-add-3d-objects-to-a-react-360-application/static_assets/NOVELO_EARTH.bin -------------------------------------------------------------------------------- /07-add-3d-objects-to-a-react-360-application/static_assets/earth.gltf: -------------------------------------------------------------------------------- 1 | { 2 | "accessors" : [ 3 | { 4 | "bufferView" : 0, 5 | "byteOffset" : 0, 6 | "componentType" : 5123, 7 | "count" : 3960, 8 | "max" : [ 3959 ], 9 | "min" : [ 0 ], 10 | "name" : "buffer-0-accessor-indices-buffer-0-mesh-0", 11 | "type" : "SCALAR" 12 | }, 13 | { 14 | "bufferView" : 2, 15 | "byteOffset" : 0, 16 | "componentType" : 5126, 17 | "count" : 3960, 18 | "max" : [ 339.010986328125, 716.9609985351562, 330.3210144042969 ], 19 | "min" : [ -326.6960144042969, 0, -336.8479919433594 ], 20 | "name" : "buffer-0-accessor-position-buffer-0-mesh-0", 21 | "type" : "VEC3" 22 | }, 23 | { 24 | "bufferView" : 2, 25 | "byteOffset" : 47520, 26 | "componentType" : 5126, 27 | "count" : 3960, 28 | "max" : [ 0.9935380220413208, 0.9992340207099915, 0.9991750121116638 ], 29 | "min" : [ -0.9990860223770142, -0.9994170069694519, -0.9981989860534668 ], 30 | "name" : "buffer-0-accessor-normal-buffer-0-mesh-0", 31 | "type" : "VEC3" 32 | }, 33 | { 34 | "bufferView" : 1, 35 | "byteOffset" : 0, 36 | "componentType" : 5126, 37 | "count" : 3960, 38 | "max" : [ 0.8457000255584717, 0 ], 39 | "min" : [ 0, -1.968799948692322 ], 40 | "name" : "buffer-0-accessor-texcoord-buffer-0-mesh-0", 41 | "type" : "VEC2" 42 | }, 43 | { 44 | "bufferView" : 3, 45 | "byteOffset" : 0, 46 | "componentType" : 5126, 47 | "count" : 0, 48 | "max" : [ 0, 0, 0, 0 ], 49 | "min" : [ 0, 0, 0, 0 ], 50 | "name" : "buffer-0-accessor-color-buffer-0-mesh-0", 51 | "type" : "VEC4" 52 | }, 53 | { 54 | "bufferView" : 0, 55 | "byteOffset" : 7920, 56 | "componentType" : 5123, 57 | "count" : 540, 58 | "max" : [ 539 ], 59 | "min" : [ 0 ], 60 | "name" : "buffer-0-accessor-indices-buffer-0-mesh-0", 61 | "type" : "SCALAR" 62 | }, 63 | { 64 | "bufferView" : 2, 65 | "byteOffset" : 95040, 66 | "componentType" : 5126, 67 | "count" : 540, 68 | "max" : [ 322.6419982910156, 696.3569946289062, 321.4289855957031 ], 69 | "min" : [ -323.0679931640625, 0, -316.4490051269531 ], 70 | "name" : "buffer-0-accessor-position-buffer-0-mesh-0", 71 | "type" : "VEC3" 72 | }, 73 | { 74 | "bufferView" : 2, 75 | "byteOffset" : 101520, 76 | "componentType" : 5126, 77 | "count" : 540, 78 | "max" : [ 0.999550998210907, 0.9806810021400452, 0.9874280095100403 ], 79 | "min" : [ -0.999550998210907, -0.9806810021400452, -0.9874280095100403 ], 80 | "name" : "buffer-0-accessor-normal-buffer-0-mesh-0", 81 | "type" : "VEC3" 82 | }, 83 | { 84 | "bufferView" : 1, 85 | "byteOffset" : 31680, 86 | "componentType" : 5126, 87 | "count" : 540, 88 | "max" : [ 1, 0 ], 89 | "min" : [ 0, -1 ], 90 | "name" : "buffer-0-accessor-texcoord-buffer-0-mesh-0", 91 | "type" : "VEC2" 92 | }, 93 | { 94 | "bufferView" : 3, 95 | "byteOffset" : 0, 96 | "componentType" : 5126, 97 | "count" : 0, 98 | "max" : [ 0, 0, 0, 0 ], 99 | "min" : [ 0, 0, 0, 0 ], 100 | "name" : "buffer-0-accessor-color-buffer-0-mesh-0", 101 | "type" : "VEC4" 102 | } 103 | ], 104 | "asset" : { 105 | "generator" : "Obj2GltfConverter", 106 | "version" : "2.0" 107 | }, 108 | "bufferViews" : [ 109 | { 110 | "buffer" : 0, 111 | "byteLength" : 9000, 112 | "byteOffset" : 0, 113 | "byteStride" : 0, 114 | "name" : "buffer-0-bufferview-ushort", 115 | "target" : 34963 116 | }, 117 | { 118 | "buffer" : 0, 119 | "byteLength" : 36000, 120 | "byteOffset" : 9000, 121 | "byteStride" : 8, 122 | "name" : "buffer-0-bufferview-vec2", 123 | "target" : 34962 124 | }, 125 | { 126 | "buffer" : 0, 127 | "byteLength" : 108000, 128 | "byteOffset" : 45000, 129 | "byteStride" : 12, 130 | "name" : "buffer-0-bufferview-vec3", 131 | "target" : 34962 132 | }, 133 | { 134 | "buffer" : 0, 135 | "byteLength" : 1, 136 | "byteOffset" : 0, 137 | "name" : "buffer-0-bufferview-vec4" 138 | } 139 | ], 140 | "buffers" : [ 141 | { 142 | "byteLength" : 153008, 143 | "name" : "buffer-0", 144 | "uri" : "NOVELO_EARTH.bin" 145 | } 146 | ], 147 | "materials" : [ 148 | { 149 | "alphaMode" : "OPAQUE", 150 | "doubleSided" : true, 151 | "name" : "02___Default", 152 | "pbrMetallicRoughness" : { 153 | "baseColorFactor" : [ 0.34576, 0.7928500000000001, 0.002264, 1 ], 154 | "metallicFactor" : 0, 155 | "roughnessFactor" : 0.9699476628648295 156 | } 157 | }, 158 | { 159 | "alphaMode" : "OPAQUE", 160 | "doubleSided" : true, 161 | "name" : "Mat", 162 | "pbrMetallicRoughness" : { 163 | "baseColorFactor" : [ 0.129412, 0.698039, 0.921569, 1 ], 164 | "metallicFactor" : 0, 165 | "roughnessFactor" : 0.9699476628648295 166 | } 167 | } 168 | ], 169 | "meshes" : [ 170 | { 171 | "name" : "buffer-0-mesh-0", 172 | "primitives" : [ 173 | { 174 | "attributes" : { 175 | "NORMAL" : 2, 176 | "POSITION" : 1, 177 | "TEXCOORD_0" : 3 178 | }, 179 | "indices" : 0, 180 | "material" : 0, 181 | "mode" : 4 182 | }, 183 | { 184 | "attributes" : { 185 | "NORMAL" : 7, 186 | "POSITION" : 6, 187 | "TEXCOORD_0" : 8 188 | }, 189 | "indices" : 5, 190 | "material" : 1, 191 | "mode" : 4 192 | } 193 | ] 194 | } 195 | ], 196 | "nodes" : [ 197 | { 198 | "mesh" : 0, 199 | "name" : "node-0" 200 | } 201 | ], 202 | "scenes" : [ 203 | { 204 | "name" : "scene-0", 205 | "nodes" : [ 0 ] 206 | } 207 | ] 208 | } 209 | -------------------------------------------------------------------------------- /07-add-3d-objects-to-a-react-360-application/static_assets/flag_italy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio-projects/vr-applications-using-react-360/9ce41818eceb767a184d1c0135d6590b1f8f06a6/07-add-3d-objects-to-a-react-360-application/static_assets/flag_italy.png -------------------------------------------------------------------------------- /08-capture-user-interaction-in-react-360-with-vrbutton-component/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["react-native"] 3 | } 4 | -------------------------------------------------------------------------------- /08-capture-user-interaction-in-react-360-with-vrbutton-component/.flowconfig: -------------------------------------------------------------------------------- 1 | [ignore] 2 | .*/node_modules/.* 3 | 4 | [include] 5 | 6 | [libs] 7 | 8 | [options] 9 | emoji=true 10 | module.system=haste 11 | -------------------------------------------------------------------------------- /08-capture-user-interaction-in-react-360-with-vrbutton-component/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | *~ 3 | *.log 4 | *.js.meta 5 | node_modules/ 6 | build/ 7 | -------------------------------------------------------------------------------- /08-capture-user-interaction-in-react-360-with-vrbutton-component/.watchmanconfig: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio-projects/vr-applications-using-react-360/9ce41818eceb767a184d1c0135d6590b1f8f06a6/08-capture-user-interaction-in-react-360-with-vrbutton-component/.watchmanconfig -------------------------------------------------------------------------------- /08-capture-user-interaction-in-react-360-with-vrbutton-component/__tests__/index-test.js: -------------------------------------------------------------------------------- 1 | import 'react-native'; 2 | import 'react-360'; 3 | import React from 'react'; 4 | import Index from '../index.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 | -------------------------------------------------------------------------------- /08-capture-user-interaction-in-react-360-with-vrbutton-component/client.js: -------------------------------------------------------------------------------- 1 | // This file contains the boilerplate to execute your React app. 2 | // If you want to modify your application's content, start in "index.js" 3 | 4 | import { ReactInstance, Location, Surface } from 'react-360-web'; 5 | 6 | function init(bundle, parent, options = {}) { 7 | const r360 = new ReactInstance(bundle, parent, { 8 | // Add custom options here 9 | fullScreen: true, 10 | ...options 11 | }); 12 | 13 | const myCylinderSurface = new Surface( 14 | 4680, 15 | 600, 16 | Surface.SurfaceShape.Cylinder 17 | ); 18 | 19 | // Render your app content to the default cylinder surface 20 | r360.renderToSurface( 21 | r360.createRoot('travelVR', { 22 | /* initial props */ 23 | }), 24 | myCylinderSurface 25 | ); 26 | 27 | // Load the initial environment 28 | r360.compositor.setBackground(r360.getAssetURL('360_world.jpg')); 29 | } 30 | 31 | window.React360 = { init }; 32 | -------------------------------------------------------------------------------- /08-capture-user-interaction-in-react-360-with-vrbutton-component/components/Earth.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { AppRegistry, asset, View } from 'react-360'; 3 | import Entity from 'Entity'; 4 | import AmbientLight from 'AmbientLight'; 5 | import PointLight from 'PointLight'; 6 | 7 | export default class Earth extends React.Component { 8 | render() { 9 | return ( 10 | 11 | 12 | 16 | 26 | 27 | ); 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /08-capture-user-interaction-in-react-360-with-vrbutton-component/components/Flag.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { AppRegistry, asset, StyleSheet, Image } from 'react-360'; 3 | 4 | export default class Flag extends React.Component { 5 | render() { 6 | const { flag, active } = styles; 7 | const { image, activeFlag } = this.props; 8 | 9 | return ( 10 | 14 | ); 15 | } 16 | } 17 | 18 | const styles = StyleSheet.create({ 19 | flag: { 20 | height: 400, 21 | width: 600, 22 | marginRight: 20, 23 | opacity: 0.7 24 | }, 25 | active: { 26 | opacity: 1 27 | } 28 | }); 29 | -------------------------------------------------------------------------------- /08-capture-user-interaction-in-react-360-with-vrbutton-component/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | travelVR 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /08-capture-user-interaction-in-react-360-with-vrbutton-component/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { 3 | AppRegistry, 4 | asset, 5 | StyleSheet, 6 | View, 7 | Image, 8 | VrButton 9 | } from 'react-360'; 10 | import Flag from './components/Flag'; 11 | import Earth from './components/Earth'; 12 | 13 | const FLAGS_IMAGES = [ 14 | 'flag_nasa.png', 15 | 'flag_spain.png', 16 | 'flag_italy.png', 17 | 'flag_ukraine.jpg' 18 | ]; 19 | 20 | export default class travelVR extends React.Component { 21 | state = { 22 | activeFlag: '' 23 | }; 24 | 25 | renderFlags() { 26 | return FLAGS_IMAGES.map(image => ( 27 | console.log('Click')} 30 | onEnter={() => this.setState({ activeFlag: image })} 31 | onExit={() => this.setState({ activeFlag: '' })} 32 | > 33 | 34 | 35 | )); 36 | } 37 | 38 | render() { 39 | const { flagContainer } = styles; 40 | 41 | return {this.renderFlags()}; 42 | } 43 | } 44 | 45 | const styles = StyleSheet.create({ 46 | flagContainer: { 47 | height: 600, 48 | width: 4680, 49 | backgroundColor: 'rgba(255, 255, 255, 0.3)', 50 | flexDirection: 'row', 51 | alignItems: 'center', 52 | justifyContent: 'center' 53 | } 54 | }); 55 | 56 | AppRegistry.registerComponent('travelVR', () => travelVR); 57 | AppRegistry.registerComponent('Flag', () => Flag); 58 | AppRegistry.registerComponent('Earth', () => Earth); 59 | -------------------------------------------------------------------------------- /08-capture-user-interaction-in-react-360-with-vrbutton-component/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "travelVR", 3 | "version": "0.0.1", 4 | "private": true, 5 | "scripts": { 6 | "start": "node node_modules/react-360/scripts/packager.js", 7 | "bundle": "node node_modules/react-360/scripts/bundle.js", 8 | "open": "node -e \"require('xopen')('http://localhost:8081/index.html')\"", 9 | "devtools": "react-devtools", 10 | "test": "jest" 11 | }, 12 | "dependencies": { 13 | "react": "16.3.2", 14 | "react-native": "~0.55.4", 15 | "three": "^0.87.0", 16 | "react-360": "~1.1.0", 17 | "react-360-web": "~1.1.0" 18 | }, 19 | "devDependencies": { 20 | "babel-jest": "^19.0.0", 21 | "babel-preset-react-native": "^1.9.1", 22 | "eslint": "^5.14.1", 23 | "eslint-plugin-react": "^7.12.4", 24 | "jest": "^19.0.2", 25 | "react-devtools": "^2.5.2", 26 | "react-test-renderer": "16.0.0", 27 | "xopen": "1.0.0" 28 | }, 29 | "jest": { 30 | "preset": "react-360" 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /08-capture-user-interaction-in-react-360-with-vrbutton-component/rn-cli.config.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var path = require('path'); 4 | var blacklist = require('metro/src/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-360']; 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; -------------------------------------------------------------------------------- /08-capture-user-interaction-in-react-360-with-vrbutton-component/static_assets/360_world.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio-projects/vr-applications-using-react-360/9ce41818eceb767a184d1c0135d6590b1f8f06a6/08-capture-user-interaction-in-react-360-with-vrbutton-component/static_assets/360_world.jpg -------------------------------------------------------------------------------- /08-capture-user-interaction-in-react-360-with-vrbutton-component/static_assets/NOVELO_EARTH.bin: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio-projects/vr-applications-using-react-360/9ce41818eceb767a184d1c0135d6590b1f8f06a6/08-capture-user-interaction-in-react-360-with-vrbutton-component/static_assets/NOVELO_EARTH.bin -------------------------------------------------------------------------------- /08-capture-user-interaction-in-react-360-with-vrbutton-component/static_assets/earth.gltf: -------------------------------------------------------------------------------- 1 | { 2 | "accessors" : [ 3 | { 4 | "bufferView" : 0, 5 | "byteOffset" : 0, 6 | "componentType" : 5123, 7 | "count" : 3960, 8 | "max" : [ 3959 ], 9 | "min" : [ 0 ], 10 | "name" : "buffer-0-accessor-indices-buffer-0-mesh-0", 11 | "type" : "SCALAR" 12 | }, 13 | { 14 | "bufferView" : 2, 15 | "byteOffset" : 0, 16 | "componentType" : 5126, 17 | "count" : 3960, 18 | "max" : [ 339.010986328125, 716.9609985351562, 330.3210144042969 ], 19 | "min" : [ -326.6960144042969, 0, -336.8479919433594 ], 20 | "name" : "buffer-0-accessor-position-buffer-0-mesh-0", 21 | "type" : "VEC3" 22 | }, 23 | { 24 | "bufferView" : 2, 25 | "byteOffset" : 47520, 26 | "componentType" : 5126, 27 | "count" : 3960, 28 | "max" : [ 0.9935380220413208, 0.9992340207099915, 0.9991750121116638 ], 29 | "min" : [ -0.9990860223770142, -0.9994170069694519, -0.9981989860534668 ], 30 | "name" : "buffer-0-accessor-normal-buffer-0-mesh-0", 31 | "type" : "VEC3" 32 | }, 33 | { 34 | "bufferView" : 1, 35 | "byteOffset" : 0, 36 | "componentType" : 5126, 37 | "count" : 3960, 38 | "max" : [ 0.8457000255584717, 0 ], 39 | "min" : [ 0, -1.968799948692322 ], 40 | "name" : "buffer-0-accessor-texcoord-buffer-0-mesh-0", 41 | "type" : "VEC2" 42 | }, 43 | { 44 | "bufferView" : 3, 45 | "byteOffset" : 0, 46 | "componentType" : 5126, 47 | "count" : 0, 48 | "max" : [ 0, 0, 0, 0 ], 49 | "min" : [ 0, 0, 0, 0 ], 50 | "name" : "buffer-0-accessor-color-buffer-0-mesh-0", 51 | "type" : "VEC4" 52 | }, 53 | { 54 | "bufferView" : 0, 55 | "byteOffset" : 7920, 56 | "componentType" : 5123, 57 | "count" : 540, 58 | "max" : [ 539 ], 59 | "min" : [ 0 ], 60 | "name" : "buffer-0-accessor-indices-buffer-0-mesh-0", 61 | "type" : "SCALAR" 62 | }, 63 | { 64 | "bufferView" : 2, 65 | "byteOffset" : 95040, 66 | "componentType" : 5126, 67 | "count" : 540, 68 | "max" : [ 322.6419982910156, 696.3569946289062, 321.4289855957031 ], 69 | "min" : [ -323.0679931640625, 0, -316.4490051269531 ], 70 | "name" : "buffer-0-accessor-position-buffer-0-mesh-0", 71 | "type" : "VEC3" 72 | }, 73 | { 74 | "bufferView" : 2, 75 | "byteOffset" : 101520, 76 | "componentType" : 5126, 77 | "count" : 540, 78 | "max" : [ 0.999550998210907, 0.9806810021400452, 0.9874280095100403 ], 79 | "min" : [ -0.999550998210907, -0.9806810021400452, -0.9874280095100403 ], 80 | "name" : "buffer-0-accessor-normal-buffer-0-mesh-0", 81 | "type" : "VEC3" 82 | }, 83 | { 84 | "bufferView" : 1, 85 | "byteOffset" : 31680, 86 | "componentType" : 5126, 87 | "count" : 540, 88 | "max" : [ 1, 0 ], 89 | "min" : [ 0, -1 ], 90 | "name" : "buffer-0-accessor-texcoord-buffer-0-mesh-0", 91 | "type" : "VEC2" 92 | }, 93 | { 94 | "bufferView" : 3, 95 | "byteOffset" : 0, 96 | "componentType" : 5126, 97 | "count" : 0, 98 | "max" : [ 0, 0, 0, 0 ], 99 | "min" : [ 0, 0, 0, 0 ], 100 | "name" : "buffer-0-accessor-color-buffer-0-mesh-0", 101 | "type" : "VEC4" 102 | } 103 | ], 104 | "asset" : { 105 | "generator" : "Obj2GltfConverter", 106 | "version" : "2.0" 107 | }, 108 | "bufferViews" : [ 109 | { 110 | "buffer" : 0, 111 | "byteLength" : 9000, 112 | "byteOffset" : 0, 113 | "byteStride" : 0, 114 | "name" : "buffer-0-bufferview-ushort", 115 | "target" : 34963 116 | }, 117 | { 118 | "buffer" : 0, 119 | "byteLength" : 36000, 120 | "byteOffset" : 9000, 121 | "byteStride" : 8, 122 | "name" : "buffer-0-bufferview-vec2", 123 | "target" : 34962 124 | }, 125 | { 126 | "buffer" : 0, 127 | "byteLength" : 108000, 128 | "byteOffset" : 45000, 129 | "byteStride" : 12, 130 | "name" : "buffer-0-bufferview-vec3", 131 | "target" : 34962 132 | }, 133 | { 134 | "buffer" : 0, 135 | "byteLength" : 1, 136 | "byteOffset" : 0, 137 | "name" : "buffer-0-bufferview-vec4" 138 | } 139 | ], 140 | "buffers" : [ 141 | { 142 | "byteLength" : 153008, 143 | "name" : "buffer-0", 144 | "uri" : "NOVELO_EARTH.bin" 145 | } 146 | ], 147 | "materials" : [ 148 | { 149 | "alphaMode" : "OPAQUE", 150 | "doubleSided" : true, 151 | "name" : "02___Default", 152 | "pbrMetallicRoughness" : { 153 | "baseColorFactor" : [ 0.34576, 0.7928500000000001, 0.002264, 1 ], 154 | "metallicFactor" : 0, 155 | "roughnessFactor" : 0.9699476628648295 156 | } 157 | }, 158 | { 159 | "alphaMode" : "OPAQUE", 160 | "doubleSided" : true, 161 | "name" : "Mat", 162 | "pbrMetallicRoughness" : { 163 | "baseColorFactor" : [ 0.129412, 0.698039, 0.921569, 1 ], 164 | "metallicFactor" : 0, 165 | "roughnessFactor" : 0.9699476628648295 166 | } 167 | } 168 | ], 169 | "meshes" : [ 170 | { 171 | "name" : "buffer-0-mesh-0", 172 | "primitives" : [ 173 | { 174 | "attributes" : { 175 | "NORMAL" : 2, 176 | "POSITION" : 1, 177 | "TEXCOORD_0" : 3 178 | }, 179 | "indices" : 0, 180 | "material" : 0, 181 | "mode" : 4 182 | }, 183 | { 184 | "attributes" : { 185 | "NORMAL" : 7, 186 | "POSITION" : 6, 187 | "TEXCOORD_0" : 8 188 | }, 189 | "indices" : 5, 190 | "material" : 1, 191 | "mode" : 4 192 | } 193 | ] 194 | } 195 | ], 196 | "nodes" : [ 197 | { 198 | "mesh" : 0, 199 | "name" : "node-0" 200 | } 201 | ], 202 | "scenes" : [ 203 | { 204 | "name" : "scene-0", 205 | "nodes" : [ 0 ] 206 | } 207 | ] 208 | } 209 | -------------------------------------------------------------------------------- /08-capture-user-interaction-in-react-360-with-vrbutton-component/static_assets/flag_italy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio-projects/vr-applications-using-react-360/9ce41818eceb767a184d1c0135d6590b1f8f06a6/08-capture-user-interaction-in-react-360-with-vrbutton-component/static_assets/flag_italy.png -------------------------------------------------------------------------------- /08-capture-user-interaction-in-react-360-with-vrbutton-component/static_assets/flag_nasa.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio-projects/vr-applications-using-react-360/9ce41818eceb767a184d1c0135d6590b1f8f06a6/08-capture-user-interaction-in-react-360-with-vrbutton-component/static_assets/flag_nasa.png -------------------------------------------------------------------------------- /08-capture-user-interaction-in-react-360-with-vrbutton-component/static_assets/flag_spain.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio-projects/vr-applications-using-react-360/9ce41818eceb767a184d1c0135d6590b1f8f06a6/08-capture-user-interaction-in-react-360-with-vrbutton-component/static_assets/flag_spain.png -------------------------------------------------------------------------------- /08-capture-user-interaction-in-react-360-with-vrbutton-component/static_assets/flag_ukraine.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio-projects/vr-applications-using-react-360/9ce41818eceb767a184d1c0135d6590b1f8f06a6/08-capture-user-interaction-in-react-360-with-vrbutton-component/static_assets/flag_ukraine.jpg -------------------------------------------------------------------------------- /08-capture-user-interaction-in-react-360-with-vrbutton-component/static_assets/spain.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio-projects/vr-applications-using-react-360/9ce41818eceb767a184d1c0135d6590b1f8f06a6/08-capture-user-interaction-in-react-360-with-vrbutton-component/static_assets/spain.jpg -------------------------------------------------------------------------------- /08-capture-user-interaction-in-react-360-with-vrbutton-component/static_assets/stars.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio-projects/vr-applications-using-react-360/9ce41818eceb767a184d1c0135d6590b1f8f06a6/08-capture-user-interaction-in-react-360-with-vrbutton-component/static_assets/stars.png -------------------------------------------------------------------------------- /08-capture-user-interaction-in-react-360-with-vrbutton-component/static_assets/ukraine.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio-projects/vr-applications-using-react-360/9ce41818eceb767a184d1c0135d6590b1f8f06a6/08-capture-user-interaction-in-react-360-with-vrbutton-component/static_assets/ukraine.jpg -------------------------------------------------------------------------------- /09-change-360-panorama-background-in-react-360-app/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["react-native"] 3 | } 4 | -------------------------------------------------------------------------------- /09-change-360-panorama-background-in-react-360-app/.flowconfig: -------------------------------------------------------------------------------- 1 | [ignore] 2 | .*/node_modules/.* 3 | 4 | [include] 5 | 6 | [libs] 7 | 8 | [options] 9 | emoji=true 10 | module.system=haste 11 | -------------------------------------------------------------------------------- /09-change-360-panorama-background-in-react-360-app/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | *~ 3 | *.log 4 | *.js.meta 5 | node_modules/ 6 | build/ 7 | -------------------------------------------------------------------------------- /09-change-360-panorama-background-in-react-360-app/.watchmanconfig: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio-projects/vr-applications-using-react-360/9ce41818eceb767a184d1c0135d6590b1f8f06a6/09-change-360-panorama-background-in-react-360-app/.watchmanconfig -------------------------------------------------------------------------------- /09-change-360-panorama-background-in-react-360-app/__tests__/index-test.js: -------------------------------------------------------------------------------- 1 | import 'react-native'; 2 | import 'react-360'; 3 | import React from 'react'; 4 | import Index from '../index.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 | -------------------------------------------------------------------------------- /09-change-360-panorama-background-in-react-360-app/client.js: -------------------------------------------------------------------------------- 1 | // This file contains the boilerplate to execute your React app. 2 | // If you want to modify your application's content, start in "index.js" 3 | 4 | import { ReactInstance, Location, Surface } from 'react-360-web'; 5 | 6 | function init(bundle, parent, options = {}) { 7 | const r360 = new ReactInstance(bundle, parent, { 8 | // Add custom options here 9 | fullScreen: true, 10 | ...options 11 | }); 12 | 13 | const myCylinderSurface = new Surface( 14 | 4680, 15 | 600, 16 | Surface.SurfaceShape.Cylinder 17 | ); 18 | 19 | // Render your app content to the default cylinder surface 20 | r360.renderToSurface( 21 | r360.createRoot('travelVR', { 22 | /* initial props */ 23 | }), 24 | myCylinderSurface 25 | ); 26 | 27 | // Load the initial environment 28 | r360.compositor.setBackground(r360.getAssetURL('360_world.jpg')); 29 | // r360.compositor.setBackground(r360.getAssetURL('spain.jpg')); 30 | } 31 | 32 | window.React360 = { init }; 33 | -------------------------------------------------------------------------------- /09-change-360-panorama-background-in-react-360-app/components/Earth.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { AppRegistry, asset, View } from 'react-360'; 3 | import Entity from 'Entity'; 4 | import AmbientLight from 'AmbientLight'; 5 | import PointLight from 'PointLight'; 6 | 7 | export default class Earth extends React.Component { 8 | render() { 9 | return ( 10 | 11 | 12 | 16 | 26 | 27 | ); 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /09-change-360-panorama-background-in-react-360-app/components/Flag.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { AppRegistry, asset, StyleSheet, Image } from 'react-360'; 3 | 4 | export default class Flag extends React.Component { 5 | render() { 6 | const { flag, active } = styles; 7 | const { image, activeFlag } = this.props; 8 | 9 | return ( 10 | 14 | ); 15 | } 16 | } 17 | 18 | const styles = StyleSheet.create({ 19 | flag: { 20 | height: 400, 21 | width: 600, 22 | marginRight: 20, 23 | opacity: 0.7 24 | }, 25 | active: { 26 | opacity: 1 27 | } 28 | }); 29 | -------------------------------------------------------------------------------- /09-change-360-panorama-background-in-react-360-app/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | travelVR 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /09-change-360-panorama-background-in-react-360-app/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { 3 | AppRegistry, 4 | asset, 5 | StyleSheet, 6 | View, 7 | Image, 8 | Environment, 9 | VrButton 10 | } from 'react-360'; 11 | import Flag from './components/Flag'; 12 | import Earth from './components/Earth'; 13 | 14 | const PLACES = [ 15 | { 16 | flag: 'flag_nasa.png', 17 | panorama: 'stars.png' 18 | }, 19 | { 20 | flag: 'flag_spain.png', 21 | panorama: 'spain.jpg' 22 | }, 23 | { 24 | flag: 'flag_italy.png', 25 | panorama: 'italy.jpg' 26 | }, 27 | { 28 | flag: 'flag_ukraine.jpg', 29 | panorama: 'ukraine.jpg' 30 | } 31 | ]; 32 | 33 | export default class travelVR extends React.Component { 34 | state = { 35 | activeFlag: '' 36 | }; 37 | 38 | changeBackground(panorama) { 39 | Environment.setBackgroundImage(asset(panorama)); 40 | } 41 | 42 | renderFlags() { 43 | return PLACES.map(({ panorama, flag }) => ( 44 | this.changeBackground(panorama)} 47 | onEnter={() => this.setState({ activeFlag: flag })} 48 | onExit={() => this.setState({ activeFlag: '' })} 49 | > 50 | 51 | 52 | )); 53 | } 54 | 55 | render() { 56 | const { flagContainer } = styles; 57 | 58 | return {this.renderFlags()}; 59 | } 60 | } 61 | 62 | const styles = StyleSheet.create({ 63 | flagContainer: { 64 | height: 600, 65 | width: 4680, 66 | backgroundColor: 'rgba(255, 255, 255, 0.3)', 67 | flexDirection: 'row', 68 | alignItems: 'center', 69 | justifyContent: 'center' 70 | } 71 | }); 72 | 73 | AppRegistry.registerComponent('travelVR', () => travelVR); 74 | AppRegistry.registerComponent('Flag', () => Flag); 75 | AppRegistry.registerComponent('Earth', () => Earth); 76 | -------------------------------------------------------------------------------- /09-change-360-panorama-background-in-react-360-app/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "travelVR", 3 | "version": "0.0.1", 4 | "private": true, 5 | "scripts": { 6 | "start": "node node_modules/react-360/scripts/packager.js", 7 | "bundle": "node node_modules/react-360/scripts/bundle.js", 8 | "open": "node -e \"require('xopen')('http://localhost:8081/index.html')\"", 9 | "devtools": "react-devtools", 10 | "test": "jest" 11 | }, 12 | "dependencies": { 13 | "react": "16.3.2", 14 | "react-native": "~0.55.4", 15 | "three": "^0.87.0", 16 | "react-360": "~1.1.0", 17 | "react-360-web": "~1.1.0" 18 | }, 19 | "devDependencies": { 20 | "babel-jest": "^19.0.0", 21 | "babel-preset-react-native": "^1.9.1", 22 | "eslint": "^5.14.1", 23 | "eslint-plugin-react": "^7.12.4", 24 | "jest": "^19.0.2", 25 | "react-devtools": "^2.5.2", 26 | "react-test-renderer": "16.0.0", 27 | "xopen": "1.0.0" 28 | }, 29 | "jest": { 30 | "preset": "react-360" 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /09-change-360-panorama-background-in-react-360-app/rn-cli.config.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var path = require('path'); 4 | var blacklist = require('metro/src/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-360']; 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; -------------------------------------------------------------------------------- /09-change-360-panorama-background-in-react-360-app/static_assets/360_world.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio-projects/vr-applications-using-react-360/9ce41818eceb767a184d1c0135d6590b1f8f06a6/09-change-360-panorama-background-in-react-360-app/static_assets/360_world.jpg -------------------------------------------------------------------------------- /09-change-360-panorama-background-in-react-360-app/static_assets/NOVELO_EARTH.bin: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio-projects/vr-applications-using-react-360/9ce41818eceb767a184d1c0135d6590b1f8f06a6/09-change-360-panorama-background-in-react-360-app/static_assets/NOVELO_EARTH.bin -------------------------------------------------------------------------------- /09-change-360-panorama-background-in-react-360-app/static_assets/earth.gltf: -------------------------------------------------------------------------------- 1 | { 2 | "accessors" : [ 3 | { 4 | "bufferView" : 0, 5 | "byteOffset" : 0, 6 | "componentType" : 5123, 7 | "count" : 3960, 8 | "max" : [ 3959 ], 9 | "min" : [ 0 ], 10 | "name" : "buffer-0-accessor-indices-buffer-0-mesh-0", 11 | "type" : "SCALAR" 12 | }, 13 | { 14 | "bufferView" : 2, 15 | "byteOffset" : 0, 16 | "componentType" : 5126, 17 | "count" : 3960, 18 | "max" : [ 339.010986328125, 716.9609985351562, 330.3210144042969 ], 19 | "min" : [ -326.6960144042969, 0, -336.8479919433594 ], 20 | "name" : "buffer-0-accessor-position-buffer-0-mesh-0", 21 | "type" : "VEC3" 22 | }, 23 | { 24 | "bufferView" : 2, 25 | "byteOffset" : 47520, 26 | "componentType" : 5126, 27 | "count" : 3960, 28 | "max" : [ 0.9935380220413208, 0.9992340207099915, 0.9991750121116638 ], 29 | "min" : [ -0.9990860223770142, -0.9994170069694519, -0.9981989860534668 ], 30 | "name" : "buffer-0-accessor-normal-buffer-0-mesh-0", 31 | "type" : "VEC3" 32 | }, 33 | { 34 | "bufferView" : 1, 35 | "byteOffset" : 0, 36 | "componentType" : 5126, 37 | "count" : 3960, 38 | "max" : [ 0.8457000255584717, 0 ], 39 | "min" : [ 0, -1.968799948692322 ], 40 | "name" : "buffer-0-accessor-texcoord-buffer-0-mesh-0", 41 | "type" : "VEC2" 42 | }, 43 | { 44 | "bufferView" : 3, 45 | "byteOffset" : 0, 46 | "componentType" : 5126, 47 | "count" : 0, 48 | "max" : [ 0, 0, 0, 0 ], 49 | "min" : [ 0, 0, 0, 0 ], 50 | "name" : "buffer-0-accessor-color-buffer-0-mesh-0", 51 | "type" : "VEC4" 52 | }, 53 | { 54 | "bufferView" : 0, 55 | "byteOffset" : 7920, 56 | "componentType" : 5123, 57 | "count" : 540, 58 | "max" : [ 539 ], 59 | "min" : [ 0 ], 60 | "name" : "buffer-0-accessor-indices-buffer-0-mesh-0", 61 | "type" : "SCALAR" 62 | }, 63 | { 64 | "bufferView" : 2, 65 | "byteOffset" : 95040, 66 | "componentType" : 5126, 67 | "count" : 540, 68 | "max" : [ 322.6419982910156, 696.3569946289062, 321.4289855957031 ], 69 | "min" : [ -323.0679931640625, 0, -316.4490051269531 ], 70 | "name" : "buffer-0-accessor-position-buffer-0-mesh-0", 71 | "type" : "VEC3" 72 | }, 73 | { 74 | "bufferView" : 2, 75 | "byteOffset" : 101520, 76 | "componentType" : 5126, 77 | "count" : 540, 78 | "max" : [ 0.999550998210907, 0.9806810021400452, 0.9874280095100403 ], 79 | "min" : [ -0.999550998210907, -0.9806810021400452, -0.9874280095100403 ], 80 | "name" : "buffer-0-accessor-normal-buffer-0-mesh-0", 81 | "type" : "VEC3" 82 | }, 83 | { 84 | "bufferView" : 1, 85 | "byteOffset" : 31680, 86 | "componentType" : 5126, 87 | "count" : 540, 88 | "max" : [ 1, 0 ], 89 | "min" : [ 0, -1 ], 90 | "name" : "buffer-0-accessor-texcoord-buffer-0-mesh-0", 91 | "type" : "VEC2" 92 | }, 93 | { 94 | "bufferView" : 3, 95 | "byteOffset" : 0, 96 | "componentType" : 5126, 97 | "count" : 0, 98 | "max" : [ 0, 0, 0, 0 ], 99 | "min" : [ 0, 0, 0, 0 ], 100 | "name" : "buffer-0-accessor-color-buffer-0-mesh-0", 101 | "type" : "VEC4" 102 | } 103 | ], 104 | "asset" : { 105 | "generator" : "Obj2GltfConverter", 106 | "version" : "2.0" 107 | }, 108 | "bufferViews" : [ 109 | { 110 | "buffer" : 0, 111 | "byteLength" : 9000, 112 | "byteOffset" : 0, 113 | "byteStride" : 0, 114 | "name" : "buffer-0-bufferview-ushort", 115 | "target" : 34963 116 | }, 117 | { 118 | "buffer" : 0, 119 | "byteLength" : 36000, 120 | "byteOffset" : 9000, 121 | "byteStride" : 8, 122 | "name" : "buffer-0-bufferview-vec2", 123 | "target" : 34962 124 | }, 125 | { 126 | "buffer" : 0, 127 | "byteLength" : 108000, 128 | "byteOffset" : 45000, 129 | "byteStride" : 12, 130 | "name" : "buffer-0-bufferview-vec3", 131 | "target" : 34962 132 | }, 133 | { 134 | "buffer" : 0, 135 | "byteLength" : 1, 136 | "byteOffset" : 0, 137 | "name" : "buffer-0-bufferview-vec4" 138 | } 139 | ], 140 | "buffers" : [ 141 | { 142 | "byteLength" : 153008, 143 | "name" : "buffer-0", 144 | "uri" : "NOVELO_EARTH.bin" 145 | } 146 | ], 147 | "materials" : [ 148 | { 149 | "alphaMode" : "OPAQUE", 150 | "doubleSided" : true, 151 | "name" : "02___Default", 152 | "pbrMetallicRoughness" : { 153 | "baseColorFactor" : [ 0.34576, 0.7928500000000001, 0.002264, 1 ], 154 | "metallicFactor" : 0, 155 | "roughnessFactor" : 0.9699476628648295 156 | } 157 | }, 158 | { 159 | "alphaMode" : "OPAQUE", 160 | "doubleSided" : true, 161 | "name" : "Mat", 162 | "pbrMetallicRoughness" : { 163 | "baseColorFactor" : [ 0.129412, 0.698039, 0.921569, 1 ], 164 | "metallicFactor" : 0, 165 | "roughnessFactor" : 0.9699476628648295 166 | } 167 | } 168 | ], 169 | "meshes" : [ 170 | { 171 | "name" : "buffer-0-mesh-0", 172 | "primitives" : [ 173 | { 174 | "attributes" : { 175 | "NORMAL" : 2, 176 | "POSITION" : 1, 177 | "TEXCOORD_0" : 3 178 | }, 179 | "indices" : 0, 180 | "material" : 0, 181 | "mode" : 4 182 | }, 183 | { 184 | "attributes" : { 185 | "NORMAL" : 7, 186 | "POSITION" : 6, 187 | "TEXCOORD_0" : 8 188 | }, 189 | "indices" : 5, 190 | "material" : 1, 191 | "mode" : 4 192 | } 193 | ] 194 | } 195 | ], 196 | "nodes" : [ 197 | { 198 | "mesh" : 0, 199 | "name" : "node-0" 200 | } 201 | ], 202 | "scenes" : [ 203 | { 204 | "name" : "scene-0", 205 | "nodes" : [ 0 ] 206 | } 207 | ] 208 | } 209 | -------------------------------------------------------------------------------- /09-change-360-panorama-background-in-react-360-app/static_assets/flag_italy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio-projects/vr-applications-using-react-360/9ce41818eceb767a184d1c0135d6590b1f8f06a6/09-change-360-panorama-background-in-react-360-app/static_assets/flag_italy.png -------------------------------------------------------------------------------- /09-change-360-panorama-background-in-react-360-app/static_assets/flag_nasa.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio-projects/vr-applications-using-react-360/9ce41818eceb767a184d1c0135d6590b1f8f06a6/09-change-360-panorama-background-in-react-360-app/static_assets/flag_nasa.png -------------------------------------------------------------------------------- /09-change-360-panorama-background-in-react-360-app/static_assets/flag_spain.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio-projects/vr-applications-using-react-360/9ce41818eceb767a184d1c0135d6590b1f8f06a6/09-change-360-panorama-background-in-react-360-app/static_assets/flag_spain.png -------------------------------------------------------------------------------- /09-change-360-panorama-background-in-react-360-app/static_assets/flag_ukraine.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio-projects/vr-applications-using-react-360/9ce41818eceb767a184d1c0135d6590b1f8f06a6/09-change-360-panorama-background-in-react-360-app/static_assets/flag_ukraine.jpg -------------------------------------------------------------------------------- /09-change-360-panorama-background-in-react-360-app/static_assets/italy.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio-projects/vr-applications-using-react-360/9ce41818eceb767a184d1c0135d6590b1f8f06a6/09-change-360-panorama-background-in-react-360-app/static_assets/italy.jpg -------------------------------------------------------------------------------- /09-change-360-panorama-background-in-react-360-app/static_assets/spain.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio-projects/vr-applications-using-react-360/9ce41818eceb767a184d1c0135d6590b1f8f06a6/09-change-360-panorama-background-in-react-360-app/static_assets/spain.jpg -------------------------------------------------------------------------------- /09-change-360-panorama-background-in-react-360-app/static_assets/stars.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio-projects/vr-applications-using-react-360/9ce41818eceb767a184d1c0135d6590b1f8f06a6/09-change-360-panorama-background-in-react-360-app/static_assets/stars.png -------------------------------------------------------------------------------- /09-change-360-panorama-background-in-react-360-app/static_assets/ukraine.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio-projects/vr-applications-using-react-360/9ce41818eceb767a184d1c0135d6590b1f8f06a6/09-change-360-panorama-background-in-react-360-app/static_assets/ukraine.jpg -------------------------------------------------------------------------------- /10-use-prefetch-component-to-fetch-images-before-they-are-needed-in-react-360/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["react-native"] 3 | } 4 | -------------------------------------------------------------------------------- /10-use-prefetch-component-to-fetch-images-before-they-are-needed-in-react-360/.flowconfig: -------------------------------------------------------------------------------- 1 | [ignore] 2 | .*/node_modules/.* 3 | 4 | [include] 5 | 6 | [libs] 7 | 8 | [options] 9 | emoji=true 10 | module.system=haste 11 | -------------------------------------------------------------------------------- /10-use-prefetch-component-to-fetch-images-before-they-are-needed-in-react-360/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | *~ 3 | *.log 4 | *.js.meta 5 | node_modules/ 6 | build/ 7 | -------------------------------------------------------------------------------- /10-use-prefetch-component-to-fetch-images-before-they-are-needed-in-react-360/.watchmanconfig: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio-projects/vr-applications-using-react-360/9ce41818eceb767a184d1c0135d6590b1f8f06a6/10-use-prefetch-component-to-fetch-images-before-they-are-needed-in-react-360/.watchmanconfig -------------------------------------------------------------------------------- /10-use-prefetch-component-to-fetch-images-before-they-are-needed-in-react-360/__tests__/index-test.js: -------------------------------------------------------------------------------- 1 | import 'react-native'; 2 | import 'react-360'; 3 | import React from 'react'; 4 | import Index from '../index.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 | -------------------------------------------------------------------------------- /10-use-prefetch-component-to-fetch-images-before-they-are-needed-in-react-360/client.js: -------------------------------------------------------------------------------- 1 | // This file contains the boilerplate to execute your React app. 2 | // If you want to modify your application's content, start in "index.js" 3 | 4 | import { ReactInstance, Location, Surface } from 'react-360-web'; 5 | 6 | function init(bundle, parent, options = {}) { 7 | const r360 = new ReactInstance(bundle, parent, { 8 | // Add custom options here 9 | fullScreen: true, 10 | ...options 11 | }); 12 | 13 | const myCylinderSurface = new Surface( 14 | 4680, 15 | 600, 16 | Surface.SurfaceShape.Cylinder 17 | ); 18 | 19 | // Render your app content to the default cylinder surface 20 | r360.renderToSurface( 21 | r360.createRoot('travelVR', { 22 | /* initial props */ 23 | }), 24 | myCylinderSurface 25 | ); 26 | 27 | // Load the initial environment 28 | r360.compositor.setBackground(r360.getAssetURL('360_world.jpg')); 29 | // r360.compositor.setBackground(r360.getAssetURL('spain.jpg')); 30 | } 31 | 32 | window.React360 = { init }; 33 | -------------------------------------------------------------------------------- /10-use-prefetch-component-to-fetch-images-before-they-are-needed-in-react-360/components/Earth.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { AppRegistry, asset, View } from 'react-360'; 3 | import Entity from 'Entity'; 4 | import AmbientLight from 'AmbientLight'; 5 | import PointLight from 'PointLight'; 6 | 7 | export default class Earth extends React.Component { 8 | render() { 9 | return ( 10 | 11 | 12 | 16 | 26 | 27 | ); 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /10-use-prefetch-component-to-fetch-images-before-they-are-needed-in-react-360/components/Flag.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { AppRegistry, asset, StyleSheet, Image } from 'react-360'; 3 | 4 | export default class Flag extends React.Component { 5 | render() { 6 | const { flag } = styles; 7 | const { activeFlag, image } = this.props; 8 | 9 | return ( 10 | 14 | ); 15 | } 16 | } 17 | 18 | const styles = StyleSheet.create({ 19 | flag: { 20 | height: 400, 21 | width: 600, 22 | marginRight: 20, 23 | opacity: 0.7 24 | }, 25 | activeFlag: { 26 | opacity: 1 27 | } 28 | }); 29 | -------------------------------------------------------------------------------- /10-use-prefetch-component-to-fetch-images-before-they-are-needed-in-react-360/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | travelVR 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /10-use-prefetch-component-to-fetch-images-before-they-are-needed-in-react-360/index.js: -------------------------------------------------------------------------------- 1 | import React, { Fragment } from 'react'; 2 | import { 3 | AppRegistry, 4 | asset, 5 | StyleSheet, 6 | Environment, 7 | Prefetch, 8 | View, 9 | Image, 10 | VrButton 11 | } from 'react-360'; 12 | import Flag from './components/Flag'; 13 | import Earth from './components/Earth'; 14 | 15 | const PLACES = [ 16 | { 17 | flag: 'flag_nasa.png', 18 | panorama: 'stars.png' 19 | }, 20 | { 21 | flag: 'flag_spain.png', 22 | panorama: 'spain.jpg' 23 | }, 24 | { 25 | flag: 'flag_italy.png', 26 | panorama: 'italy.jpg' 27 | }, 28 | { 29 | flag: 'flag_ukraine.jpg', 30 | panorama: 'ukraine.jpg' 31 | } 32 | ]; 33 | 34 | export default class travelVR extends React.Component { 35 | state = { 36 | activeFlag: '' 37 | }; 38 | 39 | changeBackground(panorama) { 40 | Environment.setBackgroundImage(asset(panorama)); 41 | } 42 | 43 | renderFlags() { 44 | return PLACES.map(place => { 45 | const { flag, panorama } = place; 46 | return ( 47 | 48 | 49 | this.changeBackground(panorama)} 51 | onEnter={() => this.setState({ activeFlag: flag })} 52 | onExit={() => this.setState({ activeFlag: '' })} 53 | > 54 | 55 | 56 | 57 | ); 58 | }); 59 | } 60 | 61 | render() { 62 | const { flagContainer } = styles; 63 | 64 | return {this.renderFlags()}; 65 | } 66 | } 67 | 68 | const styles = StyleSheet.create({ 69 | flagContainer: { 70 | height: 600, 71 | width: 4680, 72 | backgroundColor: 'rgba(255, 255, 255, 0.3)', 73 | flexDirection: 'row', 74 | alignItems: 'center', 75 | justifyContent: 'center' 76 | } 77 | }); 78 | 79 | AppRegistry.registerComponent('travelVR', () => travelVR); 80 | AppRegistry.registerComponent('Flag', () => Flag); 81 | AppRegistry.registerComponent('Earth', () => Earth); 82 | -------------------------------------------------------------------------------- /10-use-prefetch-component-to-fetch-images-before-they-are-needed-in-react-360/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "travelVR", 3 | "version": "0.0.1", 4 | "private": true, 5 | "scripts": { 6 | "start": "node node_modules/react-360/scripts/packager.js", 7 | "bundle": "node node_modules/react-360/scripts/bundle.js", 8 | "open": "node -e \"require('xopen')('http://localhost:8081/index.html')\"", 9 | "devtools": "react-devtools", 10 | "test": "jest" 11 | }, 12 | "dependencies": { 13 | "react": "16.3.2", 14 | "react-native": "~0.55.4", 15 | "three": "^0.87.0", 16 | "react-360": "~1.1.0", 17 | "react-360-web": "~1.1.0" 18 | }, 19 | "devDependencies": { 20 | "babel-jest": "^19.0.0", 21 | "babel-preset-react-native": "^1.9.1", 22 | "eslint": "^5.14.1", 23 | "eslint-plugin-react": "^7.12.4", 24 | "jest": "^19.0.2", 25 | "react-devtools": "^2.5.2", 26 | "react-test-renderer": "16.0.0", 27 | "xopen": "1.0.0" 28 | }, 29 | "jest": { 30 | "preset": "react-360" 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /10-use-prefetch-component-to-fetch-images-before-they-are-needed-in-react-360/rn-cli.config.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var path = require('path'); 4 | var blacklist = require('metro/src/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-360']; 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; -------------------------------------------------------------------------------- /10-use-prefetch-component-to-fetch-images-before-they-are-needed-in-react-360/static_assets/360_world.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio-projects/vr-applications-using-react-360/9ce41818eceb767a184d1c0135d6590b1f8f06a6/10-use-prefetch-component-to-fetch-images-before-they-are-needed-in-react-360/static_assets/360_world.jpg -------------------------------------------------------------------------------- /10-use-prefetch-component-to-fetch-images-before-they-are-needed-in-react-360/static_assets/NOVELO_EARTH.bin: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio-projects/vr-applications-using-react-360/9ce41818eceb767a184d1c0135d6590b1f8f06a6/10-use-prefetch-component-to-fetch-images-before-they-are-needed-in-react-360/static_assets/NOVELO_EARTH.bin -------------------------------------------------------------------------------- /10-use-prefetch-component-to-fetch-images-before-they-are-needed-in-react-360/static_assets/earth.gltf: -------------------------------------------------------------------------------- 1 | { 2 | "accessors" : [ 3 | { 4 | "bufferView" : 0, 5 | "byteOffset" : 0, 6 | "componentType" : 5123, 7 | "count" : 3960, 8 | "max" : [ 3959 ], 9 | "min" : [ 0 ], 10 | "name" : "buffer-0-accessor-indices-buffer-0-mesh-0", 11 | "type" : "SCALAR" 12 | }, 13 | { 14 | "bufferView" : 2, 15 | "byteOffset" : 0, 16 | "componentType" : 5126, 17 | "count" : 3960, 18 | "max" : [ 339.010986328125, 716.9609985351562, 330.3210144042969 ], 19 | "min" : [ -326.6960144042969, 0, -336.8479919433594 ], 20 | "name" : "buffer-0-accessor-position-buffer-0-mesh-0", 21 | "type" : "VEC3" 22 | }, 23 | { 24 | "bufferView" : 2, 25 | "byteOffset" : 47520, 26 | "componentType" : 5126, 27 | "count" : 3960, 28 | "max" : [ 0.9935380220413208, 0.9992340207099915, 0.9991750121116638 ], 29 | "min" : [ -0.9990860223770142, -0.9994170069694519, -0.9981989860534668 ], 30 | "name" : "buffer-0-accessor-normal-buffer-0-mesh-0", 31 | "type" : "VEC3" 32 | }, 33 | { 34 | "bufferView" : 1, 35 | "byteOffset" : 0, 36 | "componentType" : 5126, 37 | "count" : 3960, 38 | "max" : [ 0.8457000255584717, 0 ], 39 | "min" : [ 0, -1.968799948692322 ], 40 | "name" : "buffer-0-accessor-texcoord-buffer-0-mesh-0", 41 | "type" : "VEC2" 42 | }, 43 | { 44 | "bufferView" : 3, 45 | "byteOffset" : 0, 46 | "componentType" : 5126, 47 | "count" : 0, 48 | "max" : [ 0, 0, 0, 0 ], 49 | "min" : [ 0, 0, 0, 0 ], 50 | "name" : "buffer-0-accessor-color-buffer-0-mesh-0", 51 | "type" : "VEC4" 52 | }, 53 | { 54 | "bufferView" : 0, 55 | "byteOffset" : 7920, 56 | "componentType" : 5123, 57 | "count" : 540, 58 | "max" : [ 539 ], 59 | "min" : [ 0 ], 60 | "name" : "buffer-0-accessor-indices-buffer-0-mesh-0", 61 | "type" : "SCALAR" 62 | }, 63 | { 64 | "bufferView" : 2, 65 | "byteOffset" : 95040, 66 | "componentType" : 5126, 67 | "count" : 540, 68 | "max" : [ 322.6419982910156, 696.3569946289062, 321.4289855957031 ], 69 | "min" : [ -323.0679931640625, 0, -316.4490051269531 ], 70 | "name" : "buffer-0-accessor-position-buffer-0-mesh-0", 71 | "type" : "VEC3" 72 | }, 73 | { 74 | "bufferView" : 2, 75 | "byteOffset" : 101520, 76 | "componentType" : 5126, 77 | "count" : 540, 78 | "max" : [ 0.999550998210907, 0.9806810021400452, 0.9874280095100403 ], 79 | "min" : [ -0.999550998210907, -0.9806810021400452, -0.9874280095100403 ], 80 | "name" : "buffer-0-accessor-normal-buffer-0-mesh-0", 81 | "type" : "VEC3" 82 | }, 83 | { 84 | "bufferView" : 1, 85 | "byteOffset" : 31680, 86 | "componentType" : 5126, 87 | "count" : 540, 88 | "max" : [ 1, 0 ], 89 | "min" : [ 0, -1 ], 90 | "name" : "buffer-0-accessor-texcoord-buffer-0-mesh-0", 91 | "type" : "VEC2" 92 | }, 93 | { 94 | "bufferView" : 3, 95 | "byteOffset" : 0, 96 | "componentType" : 5126, 97 | "count" : 0, 98 | "max" : [ 0, 0, 0, 0 ], 99 | "min" : [ 0, 0, 0, 0 ], 100 | "name" : "buffer-0-accessor-color-buffer-0-mesh-0", 101 | "type" : "VEC4" 102 | } 103 | ], 104 | "asset" : { 105 | "generator" : "Obj2GltfConverter", 106 | "version" : "2.0" 107 | }, 108 | "bufferViews" : [ 109 | { 110 | "buffer" : 0, 111 | "byteLength" : 9000, 112 | "byteOffset" : 0, 113 | "byteStride" : 0, 114 | "name" : "buffer-0-bufferview-ushort", 115 | "target" : 34963 116 | }, 117 | { 118 | "buffer" : 0, 119 | "byteLength" : 36000, 120 | "byteOffset" : 9000, 121 | "byteStride" : 8, 122 | "name" : "buffer-0-bufferview-vec2", 123 | "target" : 34962 124 | }, 125 | { 126 | "buffer" : 0, 127 | "byteLength" : 108000, 128 | "byteOffset" : 45000, 129 | "byteStride" : 12, 130 | "name" : "buffer-0-bufferview-vec3", 131 | "target" : 34962 132 | }, 133 | { 134 | "buffer" : 0, 135 | "byteLength" : 1, 136 | "byteOffset" : 0, 137 | "name" : "buffer-0-bufferview-vec4" 138 | } 139 | ], 140 | "buffers" : [ 141 | { 142 | "byteLength" : 153008, 143 | "name" : "buffer-0", 144 | "uri" : "NOVELO_EARTH.bin" 145 | } 146 | ], 147 | "materials" : [ 148 | { 149 | "alphaMode" : "OPAQUE", 150 | "doubleSided" : true, 151 | "name" : "02___Default", 152 | "pbrMetallicRoughness" : { 153 | "baseColorFactor" : [ 0.34576, 0.7928500000000001, 0.002264, 1 ], 154 | "metallicFactor" : 0, 155 | "roughnessFactor" : 0.9699476628648295 156 | } 157 | }, 158 | { 159 | "alphaMode" : "OPAQUE", 160 | "doubleSided" : true, 161 | "name" : "Mat", 162 | "pbrMetallicRoughness" : { 163 | "baseColorFactor" : [ 0.129412, 0.698039, 0.921569, 1 ], 164 | "metallicFactor" : 0, 165 | "roughnessFactor" : 0.9699476628648295 166 | } 167 | } 168 | ], 169 | "meshes" : [ 170 | { 171 | "name" : "buffer-0-mesh-0", 172 | "primitives" : [ 173 | { 174 | "attributes" : { 175 | "NORMAL" : 2, 176 | "POSITION" : 1, 177 | "TEXCOORD_0" : 3 178 | }, 179 | "indices" : 0, 180 | "material" : 0, 181 | "mode" : 4 182 | }, 183 | { 184 | "attributes" : { 185 | "NORMAL" : 7, 186 | "POSITION" : 6, 187 | "TEXCOORD_0" : 8 188 | }, 189 | "indices" : 5, 190 | "material" : 1, 191 | "mode" : 4 192 | } 193 | ] 194 | } 195 | ], 196 | "nodes" : [ 197 | { 198 | "mesh" : 0, 199 | "name" : "node-0" 200 | } 201 | ], 202 | "scenes" : [ 203 | { 204 | "name" : "scene-0", 205 | "nodes" : [ 0 ] 206 | } 207 | ] 208 | } 209 | -------------------------------------------------------------------------------- /10-use-prefetch-component-to-fetch-images-before-they-are-needed-in-react-360/static_assets/flag_italy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio-projects/vr-applications-using-react-360/9ce41818eceb767a184d1c0135d6590b1f8f06a6/10-use-prefetch-component-to-fetch-images-before-they-are-needed-in-react-360/static_assets/flag_italy.png -------------------------------------------------------------------------------- /10-use-prefetch-component-to-fetch-images-before-they-are-needed-in-react-360/static_assets/flag_nasa.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio-projects/vr-applications-using-react-360/9ce41818eceb767a184d1c0135d6590b1f8f06a6/10-use-prefetch-component-to-fetch-images-before-they-are-needed-in-react-360/static_assets/flag_nasa.png -------------------------------------------------------------------------------- /10-use-prefetch-component-to-fetch-images-before-they-are-needed-in-react-360/static_assets/flag_spain.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio-projects/vr-applications-using-react-360/9ce41818eceb767a184d1c0135d6590b1f8f06a6/10-use-prefetch-component-to-fetch-images-before-they-are-needed-in-react-360/static_assets/flag_spain.png -------------------------------------------------------------------------------- /10-use-prefetch-component-to-fetch-images-before-they-are-needed-in-react-360/static_assets/flag_ukraine.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio-projects/vr-applications-using-react-360/9ce41818eceb767a184d1c0135d6590b1f8f06a6/10-use-prefetch-component-to-fetch-images-before-they-are-needed-in-react-360/static_assets/flag_ukraine.jpg -------------------------------------------------------------------------------- /10-use-prefetch-component-to-fetch-images-before-they-are-needed-in-react-360/static_assets/italy.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio-projects/vr-applications-using-react-360/9ce41818eceb767a184d1c0135d6590b1f8f06a6/10-use-prefetch-component-to-fetch-images-before-they-are-needed-in-react-360/static_assets/italy.jpg -------------------------------------------------------------------------------- /10-use-prefetch-component-to-fetch-images-before-they-are-needed-in-react-360/static_assets/spain.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio-projects/vr-applications-using-react-360/9ce41818eceb767a184d1c0135d6590b1f8f06a6/10-use-prefetch-component-to-fetch-images-before-they-are-needed-in-react-360/static_assets/spain.jpg -------------------------------------------------------------------------------- /10-use-prefetch-component-to-fetch-images-before-they-are-needed-in-react-360/static_assets/stars.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio-projects/vr-applications-using-react-360/9ce41818eceb767a184d1c0135d6590b1f8f06a6/10-use-prefetch-component-to-fetch-images-before-they-are-needed-in-react-360/static_assets/stars.png -------------------------------------------------------------------------------- /10-use-prefetch-component-to-fetch-images-before-they-are-needed-in-react-360/static_assets/ukraine.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio-projects/vr-applications-using-react-360/9ce41818eceb767a184d1c0135d6590b1f8f06a6/10-use-prefetch-component-to-fetch-images-before-they-are-needed-in-react-360/static_assets/ukraine.jpg -------------------------------------------------------------------------------- /11-add-animations-to-react-360-components/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["react-native"] 3 | } 4 | -------------------------------------------------------------------------------- /11-add-animations-to-react-360-components/.flowconfig: -------------------------------------------------------------------------------- 1 | [ignore] 2 | .*/node_modules/.* 3 | 4 | [include] 5 | 6 | [libs] 7 | 8 | [options] 9 | emoji=true 10 | module.system=haste 11 | -------------------------------------------------------------------------------- /11-add-animations-to-react-360-components/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | *~ 3 | *.log 4 | *.js.meta 5 | node_modules/ 6 | build/ 7 | -------------------------------------------------------------------------------- /11-add-animations-to-react-360-components/.watchmanconfig: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio-projects/vr-applications-using-react-360/9ce41818eceb767a184d1c0135d6590b1f8f06a6/11-add-animations-to-react-360-components/.watchmanconfig -------------------------------------------------------------------------------- /11-add-animations-to-react-360-components/__tests__/index-test.js: -------------------------------------------------------------------------------- 1 | import 'react-native'; 2 | import 'react-360'; 3 | import React from 'react'; 4 | import Index from '../index.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 | -------------------------------------------------------------------------------- /11-add-animations-to-react-360-components/client.js: -------------------------------------------------------------------------------- 1 | // This file contains the boilerplate to execute your React app. 2 | // If you want to modify your application's content, start in "index.js" 3 | 4 | import { ReactInstance, Location, Surface } from 'react-360-web'; 5 | 6 | function init(bundle, parent, options = {}) { 7 | const r360 = new ReactInstance(bundle, parent, { 8 | // Add custom options here 9 | fullScreen: true, 10 | ...options 11 | }); 12 | 13 | const myCylinderSurface = new Surface( 14 | 4680, 15 | 600, 16 | Surface.SurfaceShape.Cylinder 17 | ); 18 | 19 | // Render your app content to the default cylinder surface 20 | r360.renderToSurface( 21 | r360.createRoot('travelVR', { 22 | /* initial props */ 23 | }), 24 | myCylinderSurface 25 | ); 26 | 27 | const location = new Location([0, -1, -1]); 28 | 29 | r360.renderToLocation(r360.createRoot('Earth'), location); 30 | 31 | // Load the initial environment 32 | r360.compositor.setBackground(r360.getAssetURL('360_world.jpg')); 33 | } 34 | 35 | window.React360 = { init }; 36 | -------------------------------------------------------------------------------- /11-add-animations-to-react-360-components/components/Earth.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Animated, asset, View } from 'react-360'; 3 | import Entity from 'Entity'; 4 | import Easing from 'Easing'; 5 | import AmbientLight from 'AmbientLight'; 6 | import PointLight from 'PointLight'; 7 | 8 | const AnimatedEntity = Animated.createAnimatedComponent(Entity); 9 | const LOW_JUMP_VALUE = 1.5; 10 | const TOP_JUMP_VALUE = 1.75; 11 | 12 | export default class Earth extends React.Component { 13 | rotation = new Animated.Value(0); 14 | jumpValue = new Animated.Value(LOW_JUMP_VALUE); 15 | 16 | spin() { 17 | this.rotation.setValue(0); 18 | Animated.timing(this.rotation, { 19 | toValue: 360, 20 | duration: 4000, 21 | easing: Easing.linear 22 | }).start(() => this.spin()); 23 | } 24 | 25 | jump(value) { 26 | let currentVal = 27 | value === TOP_JUMP_VALUE ? LOW_JUMP_VALUE : TOP_JUMP_VALUE; 28 | Animated.timing(this.jumpValue, { 29 | toValue: currentVal, 30 | duration: 500 31 | }).start(() => this.jump(currentVal)); 32 | } 33 | 34 | componentDidMount() { 35 | this.spin(); 36 | this.jump(LOW_JUMP_VALUE); 37 | } 38 | 39 | render() { 40 | return ( 41 | 42 | 43 | 47 | 57 | 58 | ); 59 | } 60 | } 61 | -------------------------------------------------------------------------------- /11-add-animations-to-react-360-components/components/Flag.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { AppRegistry, asset, StyleSheet, Image } from 'react-360'; 3 | 4 | export default class Flag extends React.Component { 5 | render() { 6 | const { flag } = styles; 7 | const { activeFlag, image } = this.props; 8 | 9 | return ( 10 | 14 | ); 15 | } 16 | } 17 | 18 | const styles = StyleSheet.create({ 19 | flag: { 20 | height: 400, 21 | width: 600, 22 | marginRight: 20, 23 | opacity: 0.7 24 | }, 25 | activeFlag: { 26 | opacity: 1 27 | } 28 | }); 29 | -------------------------------------------------------------------------------- /11-add-animations-to-react-360-components/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | travelVR 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /11-add-animations-to-react-360-components/index.js: -------------------------------------------------------------------------------- 1 | import React, { Fragment } from 'react'; 2 | import { 3 | AppRegistry, 4 | asset, 5 | StyleSheet, 6 | Environment, 7 | Prefetch, 8 | View, 9 | Image, 10 | VrButton 11 | } from 'react-360'; 12 | import Flag from './components/Flag'; 13 | import Earth from './components/Earth'; 14 | 15 | const PLACES = [ 16 | { 17 | flag: 'flag_nasa.png', 18 | panorama: 'stars.png' 19 | }, 20 | { 21 | flag: 'flag_spain.png', 22 | panorama: 'spain.jpg' 23 | }, 24 | { 25 | flag: 'flag_italy.png', 26 | panorama: 'italy.jpg' 27 | }, 28 | { 29 | flag: 'flag_ukraine.jpg', 30 | panorama: 'ukraine.jpg' 31 | } 32 | ]; 33 | 34 | export default class travelVR extends React.Component { 35 | state = { 36 | activeFlag: '' 37 | }; 38 | 39 | changeBackground(panorama) { 40 | Environment.setBackgroundImage(asset(panorama)); 41 | } 42 | 43 | renderFlags() { 44 | return PLACES.map(place => { 45 | const { flag, panorama } = place; 46 | return ( 47 | 48 | 49 | this.setState({ activeFlag: flag })} 51 | onExit={() => this.setState({ activeFlag: '' })} 52 | onClick={() => this.changeBackground(panorama)} 53 | > 54 | 55 | 56 | 57 | ); 58 | }); 59 | } 60 | 61 | render() { 62 | const { flagContainer } = styles; 63 | 64 | return {this.renderFlags()}; 65 | } 66 | } 67 | 68 | const styles = StyleSheet.create({ 69 | flagContainer: { 70 | height: 600, 71 | width: 4680, 72 | backgroundColor: 'rgba(255, 255, 255, 0.3)', 73 | flexDirection: 'row', 74 | alignItems: 'center', 75 | justifyContent: 'center' 76 | } 77 | }); 78 | 79 | AppRegistry.registerComponent('travelVR', () => travelVR); 80 | AppRegistry.registerComponent('Flag', () => Flag); 81 | AppRegistry.registerComponent('Earth', () => Earth); 82 | -------------------------------------------------------------------------------- /11-add-animations-to-react-360-components/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "travelVR", 3 | "version": "0.0.1", 4 | "private": true, 5 | "scripts": { 6 | "start": "node node_modules/react-360/scripts/packager.js", 7 | "bundle": "node node_modules/react-360/scripts/bundle.js", 8 | "open": "node -e \"require('xopen')('http://localhost:8081/index.html')\"", 9 | "devtools": "react-devtools", 10 | "test": "jest" 11 | }, 12 | "dependencies": { 13 | "react": "16.3.2", 14 | "react-native": "~0.55.4", 15 | "three": "^0.87.0", 16 | "react-360": "~1.1.0", 17 | "react-360-web": "~1.1.0" 18 | }, 19 | "devDependencies": { 20 | "babel-jest": "^19.0.0", 21 | "babel-preset-react-native": "^1.9.1", 22 | "eslint": "^5.14.1", 23 | "eslint-plugin-react": "^7.12.4", 24 | "jest": "^19.0.2", 25 | "react-devtools": "^2.5.2", 26 | "react-test-renderer": "16.0.0", 27 | "xopen": "1.0.0" 28 | }, 29 | "jest": { 30 | "preset": "react-360" 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /11-add-animations-to-react-360-components/rn-cli.config.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var path = require('path'); 4 | var blacklist = require('metro/src/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-360']; 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; -------------------------------------------------------------------------------- /11-add-animations-to-react-360-components/static_assets/360_world.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio-projects/vr-applications-using-react-360/9ce41818eceb767a184d1c0135d6590b1f8f06a6/11-add-animations-to-react-360-components/static_assets/360_world.jpg -------------------------------------------------------------------------------- /11-add-animations-to-react-360-components/static_assets/NOVELO_EARTH.bin: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio-projects/vr-applications-using-react-360/9ce41818eceb767a184d1c0135d6590b1f8f06a6/11-add-animations-to-react-360-components/static_assets/NOVELO_EARTH.bin -------------------------------------------------------------------------------- /11-add-animations-to-react-360-components/static_assets/earth.gltf: -------------------------------------------------------------------------------- 1 | { 2 | "accessors" : [ 3 | { 4 | "bufferView" : 0, 5 | "byteOffset" : 0, 6 | "componentType" : 5123, 7 | "count" : 3960, 8 | "max" : [ 3959 ], 9 | "min" : [ 0 ], 10 | "name" : "buffer-0-accessor-indices-buffer-0-mesh-0", 11 | "type" : "SCALAR" 12 | }, 13 | { 14 | "bufferView" : 2, 15 | "byteOffset" : 0, 16 | "componentType" : 5126, 17 | "count" : 3960, 18 | "max" : [ 339.010986328125, 716.9609985351562, 330.3210144042969 ], 19 | "min" : [ -326.6960144042969, 0, -336.8479919433594 ], 20 | "name" : "buffer-0-accessor-position-buffer-0-mesh-0", 21 | "type" : "VEC3" 22 | }, 23 | { 24 | "bufferView" : 2, 25 | "byteOffset" : 47520, 26 | "componentType" : 5126, 27 | "count" : 3960, 28 | "max" : [ 0.9935380220413208, 0.9992340207099915, 0.9991750121116638 ], 29 | "min" : [ -0.9990860223770142, -0.9994170069694519, -0.9981989860534668 ], 30 | "name" : "buffer-0-accessor-normal-buffer-0-mesh-0", 31 | "type" : "VEC3" 32 | }, 33 | { 34 | "bufferView" : 1, 35 | "byteOffset" : 0, 36 | "componentType" : 5126, 37 | "count" : 3960, 38 | "max" : [ 0.8457000255584717, 0 ], 39 | "min" : [ 0, -1.968799948692322 ], 40 | "name" : "buffer-0-accessor-texcoord-buffer-0-mesh-0", 41 | "type" : "VEC2" 42 | }, 43 | { 44 | "bufferView" : 3, 45 | "byteOffset" : 0, 46 | "componentType" : 5126, 47 | "count" : 0, 48 | "max" : [ 0, 0, 0, 0 ], 49 | "min" : [ 0, 0, 0, 0 ], 50 | "name" : "buffer-0-accessor-color-buffer-0-mesh-0", 51 | "type" : "VEC4" 52 | }, 53 | { 54 | "bufferView" : 0, 55 | "byteOffset" : 7920, 56 | "componentType" : 5123, 57 | "count" : 540, 58 | "max" : [ 539 ], 59 | "min" : [ 0 ], 60 | "name" : "buffer-0-accessor-indices-buffer-0-mesh-0", 61 | "type" : "SCALAR" 62 | }, 63 | { 64 | "bufferView" : 2, 65 | "byteOffset" : 95040, 66 | "componentType" : 5126, 67 | "count" : 540, 68 | "max" : [ 322.6419982910156, 696.3569946289062, 321.4289855957031 ], 69 | "min" : [ -323.0679931640625, 0, -316.4490051269531 ], 70 | "name" : "buffer-0-accessor-position-buffer-0-mesh-0", 71 | "type" : "VEC3" 72 | }, 73 | { 74 | "bufferView" : 2, 75 | "byteOffset" : 101520, 76 | "componentType" : 5126, 77 | "count" : 540, 78 | "max" : [ 0.999550998210907, 0.9806810021400452, 0.9874280095100403 ], 79 | "min" : [ -0.999550998210907, -0.9806810021400452, -0.9874280095100403 ], 80 | "name" : "buffer-0-accessor-normal-buffer-0-mesh-0", 81 | "type" : "VEC3" 82 | }, 83 | { 84 | "bufferView" : 1, 85 | "byteOffset" : 31680, 86 | "componentType" : 5126, 87 | "count" : 540, 88 | "max" : [ 1, 0 ], 89 | "min" : [ 0, -1 ], 90 | "name" : "buffer-0-accessor-texcoord-buffer-0-mesh-0", 91 | "type" : "VEC2" 92 | }, 93 | { 94 | "bufferView" : 3, 95 | "byteOffset" : 0, 96 | "componentType" : 5126, 97 | "count" : 0, 98 | "max" : [ 0, 0, 0, 0 ], 99 | "min" : [ 0, 0, 0, 0 ], 100 | "name" : "buffer-0-accessor-color-buffer-0-mesh-0", 101 | "type" : "VEC4" 102 | } 103 | ], 104 | "asset" : { 105 | "generator" : "Obj2GltfConverter", 106 | "version" : "2.0" 107 | }, 108 | "bufferViews" : [ 109 | { 110 | "buffer" : 0, 111 | "byteLength" : 9000, 112 | "byteOffset" : 0, 113 | "byteStride" : 0, 114 | "name" : "buffer-0-bufferview-ushort", 115 | "target" : 34963 116 | }, 117 | { 118 | "buffer" : 0, 119 | "byteLength" : 36000, 120 | "byteOffset" : 9000, 121 | "byteStride" : 8, 122 | "name" : "buffer-0-bufferview-vec2", 123 | "target" : 34962 124 | }, 125 | { 126 | "buffer" : 0, 127 | "byteLength" : 108000, 128 | "byteOffset" : 45000, 129 | "byteStride" : 12, 130 | "name" : "buffer-0-bufferview-vec3", 131 | "target" : 34962 132 | }, 133 | { 134 | "buffer" : 0, 135 | "byteLength" : 1, 136 | "byteOffset" : 0, 137 | "name" : "buffer-0-bufferview-vec4" 138 | } 139 | ], 140 | "buffers" : [ 141 | { 142 | "byteLength" : 153008, 143 | "name" : "buffer-0", 144 | "uri" : "NOVELO_EARTH.bin" 145 | } 146 | ], 147 | "materials" : [ 148 | { 149 | "alphaMode" : "OPAQUE", 150 | "doubleSided" : true, 151 | "name" : "02___Default", 152 | "pbrMetallicRoughness" : { 153 | "baseColorFactor" : [ 0.34576, 0.7928500000000001, 0.002264, 1 ], 154 | "metallicFactor" : 0, 155 | "roughnessFactor" : 0.9699476628648295 156 | } 157 | }, 158 | { 159 | "alphaMode" : "OPAQUE", 160 | "doubleSided" : true, 161 | "name" : "Mat", 162 | "pbrMetallicRoughness" : { 163 | "baseColorFactor" : [ 0.129412, 0.698039, 0.921569, 1 ], 164 | "metallicFactor" : 0, 165 | "roughnessFactor" : 0.9699476628648295 166 | } 167 | } 168 | ], 169 | "meshes" : [ 170 | { 171 | "name" : "buffer-0-mesh-0", 172 | "primitives" : [ 173 | { 174 | "attributes" : { 175 | "NORMAL" : 2, 176 | "POSITION" : 1, 177 | "TEXCOORD_0" : 3 178 | }, 179 | "indices" : 0, 180 | "material" : 0, 181 | "mode" : 4 182 | }, 183 | { 184 | "attributes" : { 185 | "NORMAL" : 7, 186 | "POSITION" : 6, 187 | "TEXCOORD_0" : 8 188 | }, 189 | "indices" : 5, 190 | "material" : 1, 191 | "mode" : 4 192 | } 193 | ] 194 | } 195 | ], 196 | "nodes" : [ 197 | { 198 | "mesh" : 0, 199 | "name" : "node-0" 200 | } 201 | ], 202 | "scenes" : [ 203 | { 204 | "name" : "scene-0", 205 | "nodes" : [ 0 ] 206 | } 207 | ] 208 | } 209 | -------------------------------------------------------------------------------- /11-add-animations-to-react-360-components/static_assets/flag_italy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio-projects/vr-applications-using-react-360/9ce41818eceb767a184d1c0135d6590b1f8f06a6/11-add-animations-to-react-360-components/static_assets/flag_italy.png -------------------------------------------------------------------------------- /11-add-animations-to-react-360-components/static_assets/flag_nasa.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio-projects/vr-applications-using-react-360/9ce41818eceb767a184d1c0135d6590b1f8f06a6/11-add-animations-to-react-360-components/static_assets/flag_nasa.png -------------------------------------------------------------------------------- /11-add-animations-to-react-360-components/static_assets/flag_spain.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio-projects/vr-applications-using-react-360/9ce41818eceb767a184d1c0135d6590b1f8f06a6/11-add-animations-to-react-360-components/static_assets/flag_spain.png -------------------------------------------------------------------------------- /11-add-animations-to-react-360-components/static_assets/flag_ukraine.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio-projects/vr-applications-using-react-360/9ce41818eceb767a184d1c0135d6590b1f8f06a6/11-add-animations-to-react-360-components/static_assets/flag_ukraine.jpg -------------------------------------------------------------------------------- /11-add-animations-to-react-360-components/static_assets/italy.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio-projects/vr-applications-using-react-360/9ce41818eceb767a184d1c0135d6590b1f8f06a6/11-add-animations-to-react-360-components/static_assets/italy.jpg -------------------------------------------------------------------------------- /11-add-animations-to-react-360-components/static_assets/spain.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio-projects/vr-applications-using-react-360/9ce41818eceb767a184d1c0135d6590b1f8f06a6/11-add-animations-to-react-360-components/static_assets/spain.jpg -------------------------------------------------------------------------------- /11-add-animations-to-react-360-components/static_assets/stars.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio-projects/vr-applications-using-react-360/9ce41818eceb767a184d1c0135d6590b1f8f06a6/11-add-animations-to-react-360-components/static_assets/stars.png -------------------------------------------------------------------------------- /11-add-animations-to-react-360-components/static_assets/ukraine.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio-projects/vr-applications-using-react-360/9ce41818eceb767a184d1c0135d6590b1f8f06a6/11-add-animations-to-react-360-components/static_assets/ukraine.jpg -------------------------------------------------------------------------------- /12-create-native-modules-to-extend-react-360-app-functionality/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["react-native"] 3 | } 4 | -------------------------------------------------------------------------------- /12-create-native-modules-to-extend-react-360-app-functionality/.flowconfig: -------------------------------------------------------------------------------- 1 | [ignore] 2 | .*/node_modules/.* 3 | 4 | [include] 5 | 6 | [libs] 7 | 8 | [options] 9 | emoji=true 10 | module.system=haste 11 | -------------------------------------------------------------------------------- /12-create-native-modules-to-extend-react-360-app-functionality/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | *~ 3 | *.log 4 | *.js.meta 5 | node_modules/ 6 | build/ 7 | -------------------------------------------------------------------------------- /12-create-native-modules-to-extend-react-360-app-functionality/.watchmanconfig: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio-projects/vr-applications-using-react-360/9ce41818eceb767a184d1c0135d6590b1f8f06a6/12-create-native-modules-to-extend-react-360-app-functionality/.watchmanconfig -------------------------------------------------------------------------------- /12-create-native-modules-to-extend-react-360-app-functionality/__tests__/index-test.js: -------------------------------------------------------------------------------- 1 | import 'react-native'; 2 | import 'react-360'; 3 | import React from 'react'; 4 | import Index from '../index.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 | -------------------------------------------------------------------------------- /12-create-native-modules-to-extend-react-360-app-functionality/client.js: -------------------------------------------------------------------------------- 1 | // This file contains the boilerplate to execute your React app. 2 | // If you want to modify your application's content, start in "index.js" 3 | 4 | import { ReactInstance, Location, Surface, Module } from 'react-360-web'; 5 | 6 | class TitleChanger extends Module { 7 | constructor() { 8 | super('TitleChanger'); 9 | } 10 | 11 | changeTitle(title) { 12 | document.title = 'Welcome to ' + title; 13 | } 14 | } 15 | 16 | function init(bundle, parent, options = {}) { 17 | const r360 = new ReactInstance(bundle, parent, { 18 | // Add custom options here 19 | fullScreen: true, 20 | nativeModules: [new TitleChanger()], 21 | ...options 22 | }); 23 | 24 | const myCylinderSurface = new Surface( 25 | 4680, 26 | 600, 27 | Surface.SurfaceShape.Cylinder 28 | ); 29 | 30 | // Render your app content to the default cylinder surface 31 | r360.renderToSurface( 32 | r360.createRoot('travelVR', { 33 | /* initial props */ 34 | }), 35 | myCylinderSurface 36 | ); 37 | 38 | const location = new Location([0, -1, -1]); 39 | 40 | r360.renderToLocation(r360.createRoot('Earth'), location); 41 | 42 | // Load the initial environment 43 | r360.compositor.setBackground(r360.getAssetURL('360_world.jpg')); 44 | } 45 | 46 | window.React360 = { init }; 47 | -------------------------------------------------------------------------------- /12-create-native-modules-to-extend-react-360-app-functionality/components/Earth.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Animated, asset, View } from 'react-360'; 3 | import Entity from 'Entity'; 4 | import Easing from 'Easing'; 5 | import AmbientLight from 'AmbientLight'; 6 | import PointLight from 'PointLight'; 7 | 8 | const AnimatedEntity = Animated.createAnimatedComponent(Entity); 9 | const LOW_JUMP_VALUE = 1.5; 10 | const TOP_JUMP_VALUE = 1.75; 11 | 12 | export default class Earth extends React.Component { 13 | rotation = new Animated.Value(0); 14 | jumpValue = new Animated.Value(LOW_JUMP_VALUE); 15 | 16 | spin() { 17 | this.rotation.setValue(0); 18 | Animated.timing(this.rotation, { 19 | toValue: 360, 20 | duration: 4000, 21 | easing: Easing.linear 22 | }).start(() => this.spin()); 23 | } 24 | 25 | jump(value) { 26 | let currentVal = 27 | value === TOP_JUMP_VALUE ? LOW_JUMP_VALUE : TOP_JUMP_VALUE; 28 | Animated.timing(this.jumpValue, { 29 | toValue: currentVal, 30 | duration: 500 31 | }).start(() => this.jump(currentVal)); 32 | } 33 | 34 | componentDidMount() { 35 | this.spin(); 36 | this.jump(LOW_JUMP_VALUE); 37 | } 38 | 39 | render() { 40 | return ( 41 | 42 | 43 | 47 | 57 | 58 | ); 59 | } 60 | } 61 | -------------------------------------------------------------------------------- /12-create-native-modules-to-extend-react-360-app-functionality/components/Flag.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { AppRegistry, asset, StyleSheet, Image } from 'react-360'; 3 | 4 | export default class Flag extends React.Component { 5 | render() { 6 | const { flag } = styles; 7 | const { activeFlag, image } = this.props; 8 | 9 | return ( 10 | 14 | ); 15 | } 16 | } 17 | 18 | const styles = StyleSheet.create({ 19 | flag: { 20 | height: 400, 21 | width: 600, 22 | marginRight: 20, 23 | opacity: 0.7 24 | }, 25 | activeFlag: { 26 | opacity: 1 27 | } 28 | }); 29 | -------------------------------------------------------------------------------- /12-create-native-modules-to-extend-react-360-app-functionality/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | travelVR 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /12-create-native-modules-to-extend-react-360-app-functionality/index.js: -------------------------------------------------------------------------------- 1 | import React, { Fragment } from 'react'; 2 | import { 3 | AppRegistry, 4 | asset, 5 | StyleSheet, 6 | Environment, 7 | Prefetch, 8 | View, 9 | Image, 10 | NativeModules, 11 | VrButton 12 | } from 'react-360'; 13 | import Flag from './components/Flag'; 14 | import Earth from './components/Earth'; 15 | 16 | const { TitleChanger } = NativeModules; 17 | 18 | const PLACES = [ 19 | { 20 | name: 'Space', 21 | flag: 'flag_nasa.png', 22 | panorama: 'stars.png' 23 | }, 24 | { 25 | name: 'Spain', 26 | flag: 'flag_spain.png', 27 | panorama: 'spain.jpg' 28 | }, 29 | { 30 | name: 'Italy', 31 | flag: 'flag_italy.png', 32 | panorama: 'italy.jpg' 33 | }, 34 | { 35 | name: 'Ukraine', 36 | flag: 'flag_ukraine.jpg', 37 | panorama: 'ukraine.jpg' 38 | } 39 | ]; 40 | 41 | export default class travelVR extends React.Component { 42 | state = { 43 | activeFlag: '' 44 | }; 45 | 46 | changeBackground(panorama, name) { 47 | Environment.setBackgroundImage(asset(panorama)); 48 | TitleChanger.changeTitle(name); 49 | } 50 | 51 | renderFlags() { 52 | return PLACES.map(({ flag, panorama, name }) => { 53 | return ( 54 | 55 | 56 | this.setState({ activeFlag: flag })} 58 | onExit={() => this.setState({ activeFlag: '' })} 59 | onClick={() => this.changeBackground(panorama, name)} 60 | > 61 | 62 | 63 | 64 | ); 65 | }); 66 | } 67 | 68 | render() { 69 | const { flagContainer } = styles; 70 | 71 | return {this.renderFlags()}; 72 | } 73 | } 74 | 75 | const styles = StyleSheet.create({ 76 | flagContainer: { 77 | height: 600, 78 | width: 4680, 79 | backgroundColor: 'rgba(255, 255, 255, 0.3)', 80 | flexDirection: 'row', 81 | alignItems: 'center', 82 | justifyContent: 'center' 83 | } 84 | }); 85 | 86 | AppRegistry.registerComponent('travelVR', () => travelVR); 87 | AppRegistry.registerComponent('Flag', () => Flag); 88 | AppRegistry.registerComponent('Earth', () => Earth); 89 | -------------------------------------------------------------------------------- /12-create-native-modules-to-extend-react-360-app-functionality/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "travelVR", 3 | "version": "0.0.1", 4 | "private": true, 5 | "scripts": { 6 | "start": "node node_modules/react-360/scripts/packager.js", 7 | "bundle": "node node_modules/react-360/scripts/bundle.js", 8 | "open": "node -e \"require('xopen')('http://localhost:8081/index.html')\"", 9 | "devtools": "react-devtools", 10 | "test": "jest" 11 | }, 12 | "dependencies": { 13 | "react": "16.3.2", 14 | "react-native": "~0.55.4", 15 | "three": "^0.87.0", 16 | "react-360": "~1.1.0", 17 | "react-360-web": "~1.1.0" 18 | }, 19 | "devDependencies": { 20 | "babel-jest": "^19.0.0", 21 | "babel-preset-react-native": "^1.9.1", 22 | "eslint": "^5.14.1", 23 | "eslint-plugin-react": "^7.12.4", 24 | "jest": "^19.0.2", 25 | "react-devtools": "^2.5.2", 26 | "react-test-renderer": "16.0.0", 27 | "xopen": "1.0.0" 28 | }, 29 | "jest": { 30 | "preset": "react-360" 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /12-create-native-modules-to-extend-react-360-app-functionality/rn-cli.config.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var path = require('path'); 4 | var blacklist = require('metro/src/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-360']; 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; -------------------------------------------------------------------------------- /12-create-native-modules-to-extend-react-360-app-functionality/static_assets/360_world.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio-projects/vr-applications-using-react-360/9ce41818eceb767a184d1c0135d6590b1f8f06a6/12-create-native-modules-to-extend-react-360-app-functionality/static_assets/360_world.jpg -------------------------------------------------------------------------------- /12-create-native-modules-to-extend-react-360-app-functionality/static_assets/NOVELO_EARTH.bin: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio-projects/vr-applications-using-react-360/9ce41818eceb767a184d1c0135d6590b1f8f06a6/12-create-native-modules-to-extend-react-360-app-functionality/static_assets/NOVELO_EARTH.bin -------------------------------------------------------------------------------- /12-create-native-modules-to-extend-react-360-app-functionality/static_assets/earth.gltf: -------------------------------------------------------------------------------- 1 | { 2 | "accessors" : [ 3 | { 4 | "bufferView" : 0, 5 | "byteOffset" : 0, 6 | "componentType" : 5123, 7 | "count" : 3960, 8 | "max" : [ 3959 ], 9 | "min" : [ 0 ], 10 | "name" : "buffer-0-accessor-indices-buffer-0-mesh-0", 11 | "type" : "SCALAR" 12 | }, 13 | { 14 | "bufferView" : 2, 15 | "byteOffset" : 0, 16 | "componentType" : 5126, 17 | "count" : 3960, 18 | "max" : [ 339.010986328125, 716.9609985351562, 330.3210144042969 ], 19 | "min" : [ -326.6960144042969, 0, -336.8479919433594 ], 20 | "name" : "buffer-0-accessor-position-buffer-0-mesh-0", 21 | "type" : "VEC3" 22 | }, 23 | { 24 | "bufferView" : 2, 25 | "byteOffset" : 47520, 26 | "componentType" : 5126, 27 | "count" : 3960, 28 | "max" : [ 0.9935380220413208, 0.9992340207099915, 0.9991750121116638 ], 29 | "min" : [ -0.9990860223770142, -0.9994170069694519, -0.9981989860534668 ], 30 | "name" : "buffer-0-accessor-normal-buffer-0-mesh-0", 31 | "type" : "VEC3" 32 | }, 33 | { 34 | "bufferView" : 1, 35 | "byteOffset" : 0, 36 | "componentType" : 5126, 37 | "count" : 3960, 38 | "max" : [ 0.8457000255584717, 0 ], 39 | "min" : [ 0, -1.968799948692322 ], 40 | "name" : "buffer-0-accessor-texcoord-buffer-0-mesh-0", 41 | "type" : "VEC2" 42 | }, 43 | { 44 | "bufferView" : 3, 45 | "byteOffset" : 0, 46 | "componentType" : 5126, 47 | "count" : 0, 48 | "max" : [ 0, 0, 0, 0 ], 49 | "min" : [ 0, 0, 0, 0 ], 50 | "name" : "buffer-0-accessor-color-buffer-0-mesh-0", 51 | "type" : "VEC4" 52 | }, 53 | { 54 | "bufferView" : 0, 55 | "byteOffset" : 7920, 56 | "componentType" : 5123, 57 | "count" : 540, 58 | "max" : [ 539 ], 59 | "min" : [ 0 ], 60 | "name" : "buffer-0-accessor-indices-buffer-0-mesh-0", 61 | "type" : "SCALAR" 62 | }, 63 | { 64 | "bufferView" : 2, 65 | "byteOffset" : 95040, 66 | "componentType" : 5126, 67 | "count" : 540, 68 | "max" : [ 322.6419982910156, 696.3569946289062, 321.4289855957031 ], 69 | "min" : [ -323.0679931640625, 0, -316.4490051269531 ], 70 | "name" : "buffer-0-accessor-position-buffer-0-mesh-0", 71 | "type" : "VEC3" 72 | }, 73 | { 74 | "bufferView" : 2, 75 | "byteOffset" : 101520, 76 | "componentType" : 5126, 77 | "count" : 540, 78 | "max" : [ 0.999550998210907, 0.9806810021400452, 0.9874280095100403 ], 79 | "min" : [ -0.999550998210907, -0.9806810021400452, -0.9874280095100403 ], 80 | "name" : "buffer-0-accessor-normal-buffer-0-mesh-0", 81 | "type" : "VEC3" 82 | }, 83 | { 84 | "bufferView" : 1, 85 | "byteOffset" : 31680, 86 | "componentType" : 5126, 87 | "count" : 540, 88 | "max" : [ 1, 0 ], 89 | "min" : [ 0, -1 ], 90 | "name" : "buffer-0-accessor-texcoord-buffer-0-mesh-0", 91 | "type" : "VEC2" 92 | }, 93 | { 94 | "bufferView" : 3, 95 | "byteOffset" : 0, 96 | "componentType" : 5126, 97 | "count" : 0, 98 | "max" : [ 0, 0, 0, 0 ], 99 | "min" : [ 0, 0, 0, 0 ], 100 | "name" : "buffer-0-accessor-color-buffer-0-mesh-0", 101 | "type" : "VEC4" 102 | } 103 | ], 104 | "asset" : { 105 | "generator" : "Obj2GltfConverter", 106 | "version" : "2.0" 107 | }, 108 | "bufferViews" : [ 109 | { 110 | "buffer" : 0, 111 | "byteLength" : 9000, 112 | "byteOffset" : 0, 113 | "byteStride" : 0, 114 | "name" : "buffer-0-bufferview-ushort", 115 | "target" : 34963 116 | }, 117 | { 118 | "buffer" : 0, 119 | "byteLength" : 36000, 120 | "byteOffset" : 9000, 121 | "byteStride" : 8, 122 | "name" : "buffer-0-bufferview-vec2", 123 | "target" : 34962 124 | }, 125 | { 126 | "buffer" : 0, 127 | "byteLength" : 108000, 128 | "byteOffset" : 45000, 129 | "byteStride" : 12, 130 | "name" : "buffer-0-bufferview-vec3", 131 | "target" : 34962 132 | }, 133 | { 134 | "buffer" : 0, 135 | "byteLength" : 1, 136 | "byteOffset" : 0, 137 | "name" : "buffer-0-bufferview-vec4" 138 | } 139 | ], 140 | "buffers" : [ 141 | { 142 | "byteLength" : 153008, 143 | "name" : "buffer-0", 144 | "uri" : "NOVELO_EARTH.bin" 145 | } 146 | ], 147 | "materials" : [ 148 | { 149 | "alphaMode" : "OPAQUE", 150 | "doubleSided" : true, 151 | "name" : "02___Default", 152 | "pbrMetallicRoughness" : { 153 | "baseColorFactor" : [ 0.34576, 0.7928500000000001, 0.002264, 1 ], 154 | "metallicFactor" : 0, 155 | "roughnessFactor" : 0.9699476628648295 156 | } 157 | }, 158 | { 159 | "alphaMode" : "OPAQUE", 160 | "doubleSided" : true, 161 | "name" : "Mat", 162 | "pbrMetallicRoughness" : { 163 | "baseColorFactor" : [ 0.129412, 0.698039, 0.921569, 1 ], 164 | "metallicFactor" : 0, 165 | "roughnessFactor" : 0.9699476628648295 166 | } 167 | } 168 | ], 169 | "meshes" : [ 170 | { 171 | "name" : "buffer-0-mesh-0", 172 | "primitives" : [ 173 | { 174 | "attributes" : { 175 | "NORMAL" : 2, 176 | "POSITION" : 1, 177 | "TEXCOORD_0" : 3 178 | }, 179 | "indices" : 0, 180 | "material" : 0, 181 | "mode" : 4 182 | }, 183 | { 184 | "attributes" : { 185 | "NORMAL" : 7, 186 | "POSITION" : 6, 187 | "TEXCOORD_0" : 8 188 | }, 189 | "indices" : 5, 190 | "material" : 1, 191 | "mode" : 4 192 | } 193 | ] 194 | } 195 | ], 196 | "nodes" : [ 197 | { 198 | "mesh" : 0, 199 | "name" : "node-0" 200 | } 201 | ], 202 | "scenes" : [ 203 | { 204 | "name" : "scene-0", 205 | "nodes" : [ 0 ] 206 | } 207 | ] 208 | } 209 | -------------------------------------------------------------------------------- /12-create-native-modules-to-extend-react-360-app-functionality/static_assets/flag_italy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio-projects/vr-applications-using-react-360/9ce41818eceb767a184d1c0135d6590b1f8f06a6/12-create-native-modules-to-extend-react-360-app-functionality/static_assets/flag_italy.png -------------------------------------------------------------------------------- /12-create-native-modules-to-extend-react-360-app-functionality/static_assets/flag_nasa.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio-projects/vr-applications-using-react-360/9ce41818eceb767a184d1c0135d6590b1f8f06a6/12-create-native-modules-to-extend-react-360-app-functionality/static_assets/flag_nasa.png -------------------------------------------------------------------------------- /12-create-native-modules-to-extend-react-360-app-functionality/static_assets/flag_spain.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio-projects/vr-applications-using-react-360/9ce41818eceb767a184d1c0135d6590b1f8f06a6/12-create-native-modules-to-extend-react-360-app-functionality/static_assets/flag_spain.png -------------------------------------------------------------------------------- /12-create-native-modules-to-extend-react-360-app-functionality/static_assets/flag_ukraine.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio-projects/vr-applications-using-react-360/9ce41818eceb767a184d1c0135d6590b1f8f06a6/12-create-native-modules-to-extend-react-360-app-functionality/static_assets/flag_ukraine.jpg -------------------------------------------------------------------------------- /12-create-native-modules-to-extend-react-360-app-functionality/static_assets/italy.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio-projects/vr-applications-using-react-360/9ce41818eceb767a184d1c0135d6590b1f8f06a6/12-create-native-modules-to-extend-react-360-app-functionality/static_assets/italy.jpg -------------------------------------------------------------------------------- /12-create-native-modules-to-extend-react-360-app-functionality/static_assets/spain.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio-projects/vr-applications-using-react-360/9ce41818eceb767a184d1c0135d6590b1f8f06a6/12-create-native-modules-to-extend-react-360-app-functionality/static_assets/spain.jpg -------------------------------------------------------------------------------- /12-create-native-modules-to-extend-react-360-app-functionality/static_assets/stars.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio-projects/vr-applications-using-react-360/9ce41818eceb767a184d1c0135d6590b1f8f06a6/12-create-native-modules-to-extend-react-360-app-functionality/static_assets/stars.png -------------------------------------------------------------------------------- /12-create-native-modules-to-extend-react-360-app-functionality/static_assets/ukraine.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio-projects/vr-applications-using-react-360/9ce41818eceb767a184d1c0135d6590b1f8f06a6/12-create-native-modules-to-extend-react-360-app-functionality/static_assets/ukraine.jpg -------------------------------------------------------------------------------- /13-build-a-react-360-app-for-production/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["react-native"] 3 | } 4 | -------------------------------------------------------------------------------- /13-build-a-react-360-app-for-production/.flowconfig: -------------------------------------------------------------------------------- 1 | [ignore] 2 | .*/node_modules/.* 3 | 4 | [include] 5 | 6 | [libs] 7 | 8 | [options] 9 | emoji=true 10 | module.system=haste 11 | -------------------------------------------------------------------------------- /13-build-a-react-360-app-for-production/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | *~ 3 | *.log 4 | *.js.meta 5 | node_modules/ 6 | build/ 7 | -------------------------------------------------------------------------------- /13-build-a-react-360-app-for-production/.watchmanconfig: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio-projects/vr-applications-using-react-360/9ce41818eceb767a184d1c0135d6590b1f8f06a6/13-build-a-react-360-app-for-production/.watchmanconfig -------------------------------------------------------------------------------- /13-build-a-react-360-app-for-production/__tests__/index-test.js: -------------------------------------------------------------------------------- 1 | import 'react-native'; 2 | import 'react-360'; 3 | import React from 'react'; 4 | import Index from '../index.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 | -------------------------------------------------------------------------------- /13-build-a-react-360-app-for-production/client.js: -------------------------------------------------------------------------------- 1 | // This file contains the boilerplate to execute your React app. 2 | // If you want to modify your application's content, start in "index.js" 3 | 4 | import { ReactInstance, Location, Surface, Module } from 'react-360-web'; 5 | 6 | class TitleChanger extends Module { 7 | constructor() { 8 | super('TitleChanger'); 9 | } 10 | 11 | changeTitle(title) { 12 | document.title = 'Welcome to ' + title; 13 | } 14 | } 15 | 16 | function init(bundle, parent, options = {}) { 17 | const r360 = new ReactInstance(bundle, parent, { 18 | // Add custom options here 19 | fullScreen: true, 20 | nativeModules: [new TitleChanger()], 21 | ...options 22 | }); 23 | 24 | const myCylinderSurface = new Surface( 25 | 4680, 26 | 600, 27 | Surface.SurfaceShape.Cylinder 28 | ); 29 | 30 | // Render your app content to the default cylinder surface 31 | r360.renderToSurface( 32 | r360.createRoot('travelVR', { 33 | /* initial props */ 34 | }), 35 | myCylinderSurface 36 | ); 37 | 38 | const location = new Location([0, -1, -1]); 39 | 40 | r360.renderToLocation(r360.createRoot('Earth'), location); 41 | 42 | // Load the initial environment 43 | r360.compositor.setBackground(r360.getAssetURL('360_world.jpg')); 44 | } 45 | 46 | window.React360 = { init }; 47 | -------------------------------------------------------------------------------- /13-build-a-react-360-app-for-production/components/Earth.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Animated, asset, View } from 'react-360'; 3 | import Entity from 'Entity'; 4 | import Easing from 'Easing'; 5 | import AmbientLight from 'AmbientLight'; 6 | import PointLight from 'PointLight'; 7 | 8 | const AnimatedEntity = Animated.createAnimatedComponent(Entity); 9 | const LOW_JUMP_VALUE = 1.5; 10 | const TOP_JUMP_VALUE = 1.75; 11 | 12 | export default class Earth extends React.Component { 13 | rotation = new Animated.Value(0); 14 | jumpValue = new Animated.Value(LOW_JUMP_VALUE); 15 | 16 | spin() { 17 | this.rotation.setValue(0); 18 | Animated.timing(this.rotation, { 19 | toValue: 360, 20 | duration: 4000, 21 | easing: Easing.linear 22 | }).start(() => this.spin()); 23 | } 24 | 25 | jump(value) { 26 | let currentVal = 27 | value === TOP_JUMP_VALUE ? LOW_JUMP_VALUE : TOP_JUMP_VALUE; 28 | Animated.timing(this.jumpValue, { 29 | toValue: currentVal, 30 | duration: 500 31 | }).start(() => this.jump(currentVal)); 32 | } 33 | 34 | componentDidMount() { 35 | this.spin(); 36 | this.jump(LOW_JUMP_VALUE); 37 | } 38 | 39 | render() { 40 | return ( 41 | 42 | 43 | 47 | 57 | 58 | ); 59 | } 60 | } 61 | -------------------------------------------------------------------------------- /13-build-a-react-360-app-for-production/components/Flag.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { AppRegistry, asset, StyleSheet, Image } from 'react-360'; 3 | 4 | export default class Flag extends React.Component { 5 | render() { 6 | const { flag } = styles; 7 | const { activeFlag, image } = this.props; 8 | 9 | return ( 10 | 14 | ); 15 | } 16 | } 17 | 18 | const styles = StyleSheet.create({ 19 | flag: { 20 | height: 400, 21 | width: 600, 22 | marginRight: 20, 23 | opacity: 0.7 24 | }, 25 | activeFlag: { 26 | opacity: 1 27 | } 28 | }); 29 | -------------------------------------------------------------------------------- /13-build-a-react-360-app-for-production/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | travelVR 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /13-build-a-react-360-app-for-production/index.js: -------------------------------------------------------------------------------- 1 | import React, { Fragment } from 'react'; 2 | import { 3 | AppRegistry, 4 | asset, 5 | StyleSheet, 6 | Environment, 7 | Prefetch, 8 | View, 9 | Image, 10 | NativeModules, 11 | VrButton 12 | } from 'react-360'; 13 | import Flag from './components/Flag'; 14 | import Earth from './components/Earth'; 15 | 16 | const { TitleChanger } = NativeModules; 17 | 18 | const PLACES = [ 19 | { 20 | name: 'Space', 21 | flag: 'flag_nasa.png', 22 | panorama: 'stars.png' 23 | }, 24 | { 25 | name: 'Spain', 26 | flag: 'flag_spain.png', 27 | panorama: 'spain.jpg' 28 | }, 29 | { 30 | name: 'Italy', 31 | flag: 'flag_italy.png', 32 | panorama: 'italy.jpg' 33 | }, 34 | { 35 | name: 'Ukraine', 36 | flag: 'flag_ukraine.jpg', 37 | panorama: 'ukraine.jpg' 38 | } 39 | ]; 40 | 41 | export default class travelVR extends React.Component { 42 | state = { 43 | activeFlag: '' 44 | }; 45 | 46 | changeBackground(panorama, name) { 47 | Environment.setBackgroundImage(asset(panorama)); 48 | TitleChanger.changeTitle(name); 49 | } 50 | 51 | renderFlags() { 52 | return PLACES.map(({ flag, panorama, name }) => { 53 | return ( 54 | 55 | 56 | this.setState({ activeFlag: flag })} 58 | onExit={() => this.setState({ activeFlag: '' })} 59 | onClick={() => this.changeBackground(panorama, name)} 60 | > 61 | 62 | 63 | 64 | ); 65 | }); 66 | } 67 | 68 | render() { 69 | const { flagContainer } = styles; 70 | 71 | return {this.renderFlags()}; 72 | } 73 | } 74 | 75 | const styles = StyleSheet.create({ 76 | flagContainer: { 77 | height: 600, 78 | width: 4680, 79 | backgroundColor: 'rgba(255, 255, 255, 0.3)', 80 | flexDirection: 'row', 81 | alignItems: 'center', 82 | justifyContent: 'center' 83 | } 84 | }); 85 | 86 | AppRegistry.registerComponent('travelVR', () => travelVR); 87 | AppRegistry.registerComponent('Flag', () => Flag); 88 | AppRegistry.registerComponent('Earth', () => Earth); 89 | -------------------------------------------------------------------------------- /13-build-a-react-360-app-for-production/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "travelVR", 3 | "version": "0.0.1", 4 | "private": true, 5 | "scripts": { 6 | "start": "node node_modules/react-360/scripts/packager.js", 7 | "bundle": "node node_modules/react-360/scripts/bundle.js", 8 | "open": "node -e \"require('xopen')('http://localhost:8081/index.html')\"", 9 | "devtools": "react-devtools", 10 | "test": "jest" 11 | }, 12 | "dependencies": { 13 | "react": "16.3.2", 14 | "react-native": "~0.55.4", 15 | "three": "^0.87.0", 16 | "react-360": "~1.1.0", 17 | "react-360-web": "~1.1.0" 18 | }, 19 | "devDependencies": { 20 | "babel-jest": "^19.0.0", 21 | "babel-preset-react-native": "^1.9.1", 22 | "eslint": "^5.14.1", 23 | "eslint-plugin-react": "^7.12.4", 24 | "jest": "^19.0.2", 25 | "react-devtools": "^2.5.2", 26 | "react-test-renderer": "16.0.0", 27 | "xopen": "1.0.0" 28 | }, 29 | "jest": { 30 | "preset": "react-360" 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /13-build-a-react-360-app-for-production/rn-cli.config.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var path = require('path'); 4 | var blacklist = require('metro/src/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-360']; 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; -------------------------------------------------------------------------------- /13-build-a-react-360-app-for-production/static_assets/360_world.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio-projects/vr-applications-using-react-360/9ce41818eceb767a184d1c0135d6590b1f8f06a6/13-build-a-react-360-app-for-production/static_assets/360_world.jpg -------------------------------------------------------------------------------- /13-build-a-react-360-app-for-production/static_assets/NOVELO_EARTH.bin: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio-projects/vr-applications-using-react-360/9ce41818eceb767a184d1c0135d6590b1f8f06a6/13-build-a-react-360-app-for-production/static_assets/NOVELO_EARTH.bin -------------------------------------------------------------------------------- /13-build-a-react-360-app-for-production/static_assets/earth.gltf: -------------------------------------------------------------------------------- 1 | { 2 | "accessors" : [ 3 | { 4 | "bufferView" : 0, 5 | "byteOffset" : 0, 6 | "componentType" : 5123, 7 | "count" : 3960, 8 | "max" : [ 3959 ], 9 | "min" : [ 0 ], 10 | "name" : "buffer-0-accessor-indices-buffer-0-mesh-0", 11 | "type" : "SCALAR" 12 | }, 13 | { 14 | "bufferView" : 2, 15 | "byteOffset" : 0, 16 | "componentType" : 5126, 17 | "count" : 3960, 18 | "max" : [ 339.010986328125, 716.9609985351562, 330.3210144042969 ], 19 | "min" : [ -326.6960144042969, 0, -336.8479919433594 ], 20 | "name" : "buffer-0-accessor-position-buffer-0-mesh-0", 21 | "type" : "VEC3" 22 | }, 23 | { 24 | "bufferView" : 2, 25 | "byteOffset" : 47520, 26 | "componentType" : 5126, 27 | "count" : 3960, 28 | "max" : [ 0.9935380220413208, 0.9992340207099915, 0.9991750121116638 ], 29 | "min" : [ -0.9990860223770142, -0.9994170069694519, -0.9981989860534668 ], 30 | "name" : "buffer-0-accessor-normal-buffer-0-mesh-0", 31 | "type" : "VEC3" 32 | }, 33 | { 34 | "bufferView" : 1, 35 | "byteOffset" : 0, 36 | "componentType" : 5126, 37 | "count" : 3960, 38 | "max" : [ 0.8457000255584717, 0 ], 39 | "min" : [ 0, -1.968799948692322 ], 40 | "name" : "buffer-0-accessor-texcoord-buffer-0-mesh-0", 41 | "type" : "VEC2" 42 | }, 43 | { 44 | "bufferView" : 3, 45 | "byteOffset" : 0, 46 | "componentType" : 5126, 47 | "count" : 0, 48 | "max" : [ 0, 0, 0, 0 ], 49 | "min" : [ 0, 0, 0, 0 ], 50 | "name" : "buffer-0-accessor-color-buffer-0-mesh-0", 51 | "type" : "VEC4" 52 | }, 53 | { 54 | "bufferView" : 0, 55 | "byteOffset" : 7920, 56 | "componentType" : 5123, 57 | "count" : 540, 58 | "max" : [ 539 ], 59 | "min" : [ 0 ], 60 | "name" : "buffer-0-accessor-indices-buffer-0-mesh-0", 61 | "type" : "SCALAR" 62 | }, 63 | { 64 | "bufferView" : 2, 65 | "byteOffset" : 95040, 66 | "componentType" : 5126, 67 | "count" : 540, 68 | "max" : [ 322.6419982910156, 696.3569946289062, 321.4289855957031 ], 69 | "min" : [ -323.0679931640625, 0, -316.4490051269531 ], 70 | "name" : "buffer-0-accessor-position-buffer-0-mesh-0", 71 | "type" : "VEC3" 72 | }, 73 | { 74 | "bufferView" : 2, 75 | "byteOffset" : 101520, 76 | "componentType" : 5126, 77 | "count" : 540, 78 | "max" : [ 0.999550998210907, 0.9806810021400452, 0.9874280095100403 ], 79 | "min" : [ -0.999550998210907, -0.9806810021400452, -0.9874280095100403 ], 80 | "name" : "buffer-0-accessor-normal-buffer-0-mesh-0", 81 | "type" : "VEC3" 82 | }, 83 | { 84 | "bufferView" : 1, 85 | "byteOffset" : 31680, 86 | "componentType" : 5126, 87 | "count" : 540, 88 | "max" : [ 1, 0 ], 89 | "min" : [ 0, -1 ], 90 | "name" : "buffer-0-accessor-texcoord-buffer-0-mesh-0", 91 | "type" : "VEC2" 92 | }, 93 | { 94 | "bufferView" : 3, 95 | "byteOffset" : 0, 96 | "componentType" : 5126, 97 | "count" : 0, 98 | "max" : [ 0, 0, 0, 0 ], 99 | "min" : [ 0, 0, 0, 0 ], 100 | "name" : "buffer-0-accessor-color-buffer-0-mesh-0", 101 | "type" : "VEC4" 102 | } 103 | ], 104 | "asset" : { 105 | "generator" : "Obj2GltfConverter", 106 | "version" : "2.0" 107 | }, 108 | "bufferViews" : [ 109 | { 110 | "buffer" : 0, 111 | "byteLength" : 9000, 112 | "byteOffset" : 0, 113 | "byteStride" : 0, 114 | "name" : "buffer-0-bufferview-ushort", 115 | "target" : 34963 116 | }, 117 | { 118 | "buffer" : 0, 119 | "byteLength" : 36000, 120 | "byteOffset" : 9000, 121 | "byteStride" : 8, 122 | "name" : "buffer-0-bufferview-vec2", 123 | "target" : 34962 124 | }, 125 | { 126 | "buffer" : 0, 127 | "byteLength" : 108000, 128 | "byteOffset" : 45000, 129 | "byteStride" : 12, 130 | "name" : "buffer-0-bufferview-vec3", 131 | "target" : 34962 132 | }, 133 | { 134 | "buffer" : 0, 135 | "byteLength" : 1, 136 | "byteOffset" : 0, 137 | "name" : "buffer-0-bufferview-vec4" 138 | } 139 | ], 140 | "buffers" : [ 141 | { 142 | "byteLength" : 153008, 143 | "name" : "buffer-0", 144 | "uri" : "NOVELO_EARTH.bin" 145 | } 146 | ], 147 | "materials" : [ 148 | { 149 | "alphaMode" : "OPAQUE", 150 | "doubleSided" : true, 151 | "name" : "02___Default", 152 | "pbrMetallicRoughness" : { 153 | "baseColorFactor" : [ 0.34576, 0.7928500000000001, 0.002264, 1 ], 154 | "metallicFactor" : 0, 155 | "roughnessFactor" : 0.9699476628648295 156 | } 157 | }, 158 | { 159 | "alphaMode" : "OPAQUE", 160 | "doubleSided" : true, 161 | "name" : "Mat", 162 | "pbrMetallicRoughness" : { 163 | "baseColorFactor" : [ 0.129412, 0.698039, 0.921569, 1 ], 164 | "metallicFactor" : 0, 165 | "roughnessFactor" : 0.9699476628648295 166 | } 167 | } 168 | ], 169 | "meshes" : [ 170 | { 171 | "name" : "buffer-0-mesh-0", 172 | "primitives" : [ 173 | { 174 | "attributes" : { 175 | "NORMAL" : 2, 176 | "POSITION" : 1, 177 | "TEXCOORD_0" : 3 178 | }, 179 | "indices" : 0, 180 | "material" : 0, 181 | "mode" : 4 182 | }, 183 | { 184 | "attributes" : { 185 | "NORMAL" : 7, 186 | "POSITION" : 6, 187 | "TEXCOORD_0" : 8 188 | }, 189 | "indices" : 5, 190 | "material" : 1, 191 | "mode" : 4 192 | } 193 | ] 194 | } 195 | ], 196 | "nodes" : [ 197 | { 198 | "mesh" : 0, 199 | "name" : "node-0" 200 | } 201 | ], 202 | "scenes" : [ 203 | { 204 | "name" : "scene-0", 205 | "nodes" : [ 0 ] 206 | } 207 | ] 208 | } 209 | -------------------------------------------------------------------------------- /13-build-a-react-360-app-for-production/static_assets/flag_italy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio-projects/vr-applications-using-react-360/9ce41818eceb767a184d1c0135d6590b1f8f06a6/13-build-a-react-360-app-for-production/static_assets/flag_italy.png -------------------------------------------------------------------------------- /13-build-a-react-360-app-for-production/static_assets/flag_nasa.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio-projects/vr-applications-using-react-360/9ce41818eceb767a184d1c0135d6590b1f8f06a6/13-build-a-react-360-app-for-production/static_assets/flag_nasa.png -------------------------------------------------------------------------------- /13-build-a-react-360-app-for-production/static_assets/flag_spain.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio-projects/vr-applications-using-react-360/9ce41818eceb767a184d1c0135d6590b1f8f06a6/13-build-a-react-360-app-for-production/static_assets/flag_spain.png -------------------------------------------------------------------------------- /13-build-a-react-360-app-for-production/static_assets/flag_ukraine.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio-projects/vr-applications-using-react-360/9ce41818eceb767a184d1c0135d6590b1f8f06a6/13-build-a-react-360-app-for-production/static_assets/flag_ukraine.jpg -------------------------------------------------------------------------------- /13-build-a-react-360-app-for-production/static_assets/italy.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio-projects/vr-applications-using-react-360/9ce41818eceb767a184d1c0135d6590b1f8f06a6/13-build-a-react-360-app-for-production/static_assets/italy.jpg -------------------------------------------------------------------------------- /13-build-a-react-360-app-for-production/static_assets/spain.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio-projects/vr-applications-using-react-360/9ce41818eceb767a184d1c0135d6590b1f8f06a6/13-build-a-react-360-app-for-production/static_assets/spain.jpg -------------------------------------------------------------------------------- /13-build-a-react-360-app-for-production/static_assets/stars.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio-projects/vr-applications-using-react-360/9ce41818eceb767a184d1c0135d6590b1f8f06a6/13-build-a-react-360-app-for-production/static_assets/stars.png -------------------------------------------------------------------------------- /13-build-a-react-360-app-for-production/static_assets/ukraine.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio-projects/vr-applications-using-react-360/9ce41818eceb767a184d1c0135d6590b1f8f06a6/13-build-a-react-360-app-for-production/static_assets/ukraine.jpg -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # VR Applications Using React 360 Course 2 | 3 | ![VR Applications Using React 360 Course Logo](https://i.imgur.com/0DXGmzw.png) 4 | 5 | by Tomasz Łakomy ([twitter](https://twitter.com/tlakomy)) 6 | 7 | ## What's this? 8 | 9 | This repository contains the code for all lessons accompanying the [React 360 Course](https://egghead.io/courses/vr-applications-using-react-360) on [egghead.io](https://egghead.io). 10 | 11 | Each folder contains the code for a single lesson within the course, from starting a brand new project all the way to building a completed app for production environment. 12 | 13 | ## Test your knowledge 14 | 15 | [Test your knowledge with tinycard flashcards](https://tinycards.duolingo.com/decks/P2bLtJMF/vr-applications-using-react-360). 16 | 17 | ## Contents 18 | 19 | 1. **Start a Virtual Reality project with React 360** [code](https://github.com/eggheadio-projects/vr-applications-using-react-360/tree/master/00-start-a-virtual-reality-project-with-react-360) [video](https://egghead.io/lessons/react-start-a-virtual-reality-project-with-react-360) 20 | 2. **Write text using the React 360 Text component** [code](https://github.com/eggheadio-projects/vr-applications-using-react-360/tree/master/01-write-text-using-the-react-360-text-component) [video](https://egghead.io/lessons/egghead-write-text-using-the-react-360-text-component) 21 | 3. **Use flexbox to create layouts in React 360** [code](https://github.com/eggheadio-projects/vr-applications-using-react-360/tree/master/02-use-flexbox-to-create-layouts-in-react-360) [video](https://egghead.io/lessons/egghead-use-flexbox-to-create-layouts-in-react-360) 22 | 4. **Assign multiple styles to a component in React 360** [code](https://github.com/eggheadio-projects/vr-applications-using-react-360/tree/master/03-assign-multiple-styles-to-a-component-in-react-360) [video](https://egghead.io/lessons/react-assign-multiple-styles-to-a-component-in-react-360) 23 | 5. **Display images using the Image component in React 360** [code](https://github.com/eggheadio-projects/vr-applications-using-react-360/tree/master/04-display-images-using-the-image-component-in-react-360) [video](https://egghead.io/lessons/egghead-display-images-using-the-image-component-in-react-360) 24 | 6. **Create a Cylinder Surface and attach a component to it in React 360** [code](https://github.com/eggheadio-projects/vr-applications-using-react-360/tree/master/05-create-a-cylinder-surface-and-attach-a-component-to-it-in-react-360) [video](https://egghead.io/lessons/egghead-create-a-cylinder-surface-and-attach-a-component-to-it-in-react-360) 25 | 7. **Create a Flat Surface and attach a component to it in React 360** [code](https://github.com/eggheadio-projects/vr-applications-using-react-360/tree/master/06-create-a-flat-surface-and-attach-a-component-to-it-in-react-360) [video](https://egghead.io/lessons/egghead-create-a-flat-surface-and-attach-a-component-to-it-in-react-360) 26 | 8. **Add 3D objects to a React 360 application** [code](https://github.com/eggheadio-projects/vr-applications-using-react-360/tree/master/07-add-3d-objects-to-a-react-360-application) [video](https://egghead.io/lessons/egghead-add-3d-objects-to-a-react-360-application) 27 | 9. **Capture user interaction in React 360 with VrButton component** [code](https://github.com/eggheadio-projects/vr-applications-using-react-360/tree/master/08-capture-user-interaction-in-react-360-with-vrbutton-component) [video](https://egghead.io/lessons/egghead-capture-user-interaction-in-react-360-with-vrbutton-component) 28 | 10. **Change 360 panorama background in React 360 app** [code](https://github.com/eggheadio-projects/vr-applications-using-react-360/tree/master/09-change-360-panorama-background-in-react-360-app) [video](https://egghead.io/lessons/egghead-change-360-panorama-background-in-react-360-app) 29 | 11. **Use Prefetch component to fetch images before they are needed in React 360** [code](https://github.com/eggheadio-projects/vr-applications-using-react-360/tree/master/10-use-prefetch-component-to-fetch-images-before-they-are-needed-in-react-360) [video](https://egghead.io/lessons/egghead-use-prefetch-component-to-fetch-images-before-they-are-needed-in-react-360) 30 | 12. **Add animations to React 360 components** [code](https://github.com/eggheadio-projects/vr-applications-using-react-360/tree/master/11-add-animations-to-react-360-components) [video](https://egghead.io/lessons/egghead-add-animations-to-react-360-components) 31 | 13. **Create Native Modules to extend React 360 app functionality** [code](https://github.com/eggheadio-projects/vr-applications-using-react-360/tree/master/12-create-native-modules-to-extend-react-360-app-functionality) [video](https://egghead.io/lessons/egghead-create-native-modules-to-extend-react-360-app-functionality) 32 | 14. **Build a React 360 app for production** [code](https://github.com/eggheadio-projects/vr-applications-using-react-360/tree/master/13-build-a-react-360-app-for-production) [video](https://egghead.io/lessons/react-build-a-react-360-app-for-production) 33 | --------------------------------------------------------------------------------