first commit

.gitignore

@@ -0,0 +1,6 @@
+.DS_Store
+*~
+*.log
+*.js.meta
+node_modules/
+build/

LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2017 Esteban Herrera
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,26 @@
+# earth-moon-vr
+
+VR app made using the pre-released version of React VR that shows 3D models of the Earth and Moon in a space skybox.
+
+You can see the tutorial of how this app was built at https://www.pluralsight.com/guides/front-end-javascript/getting-started-with-react-vr.
+
+3D models used: 
+- [Earth](http://tf3dm.com/3d-model/planet-earth-99065.html)
+- [Moon](http://tf3dm.com/3d-model/moon-17150.html)
+
+The space skybox was created with [Spacescape](http://alexcpeterson.com/spacescape/).
+
+## Requirements
+
+- A browser that supports the WebVR API, like [Firefox Nightly](https://nightly.mozilla.org/) ([here are some instructions](https://github.com/Web-VR/iswebvrready/wiki/Instructions%3A-Firefox-Nightly))
+- Latest version of [Node.js](https://nodejs.org/)
+- Optionally, [Yarn](https://yarnpkg.com/)
+
+## Installation
+1. Download this repository and execute `npm install` to download the dependencies or `yarn` if you have it installed (recommended).
+2. Execute `npm start`. A local web server will be started (it may take some time).
+3. Go to http://localhost:8081/vr and start playing with the app.
+
+
+## License
+MIT

button.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import {
+  StyleSheet,
+  Text,
+  VrButton,
+} from 'react-vr';
+
+export default class Button extends React.Component {
+  constructor() {
+    super();
+    this.styles = StyleSheet.create({
+	  button: {
+		margin: 0.05,
+        height: 0.4,
+        backgroundColor: 'red',
+	  },
+	  text: {
+		fontSize: 0.3,
+		textAlign: 'center',
+	  },
+	});
+  }
+
+  render() {
+    return (
+      <VrButton style={this.styles.button}
+        onClick={() => this.props.callback()}>
+        <Text style={this.styles.text}>
+          {this.props.text}
+        </Text>
+      </VrButton>
+    );
+  }
+}

index.vr.js

@@ -0,0 +1,107 @@
+import React from 'react';
+import {
+  AppRegistry,
+  asset,
+  StyleSheet,
+  Pano,
+  Text,
+  View,
+  Mesh,
+  AmbientLight,
+} from 'react-vr';
+import Button from './button.js';
+
+class EarthMoonVR extends React.Component {
+  constructor() {
+    super();
+    this.state = {
+      rotation: 130,
+	  zoom: -70,
+    };
+    this.lastUpdate = Date.now();
+    this.spaceSkymap = [
+      '../static_assets/space_right.png',
+      '../static_assets/space_left.png',
+      '../static_assets/space_up.png',
+      '../static_assets/space_down.png',
+      '../static_assets/space_back.png',
+      '../static_assets/space_front.png'
+    ];
+    this.styles = StyleSheet.create({
+	  menu: {
+		flex: 1,
+        flexDirection: 'column',
+        width: 1,
+        alignItems: 'stretch',
+        transform: [{translate: [2, 2, -5]}],
+	  },
+	});
+
+    this.rotate = this.rotate.bind(this);
+  }
+
+  componentDidMount() {
+    this.rotate();
+  }
+
+  componentWillUnmount() {
+    if (this.frameHandle) {
+      cancelAnimationFrame(this.frameHandle);
+      this.frameHandle = null;
+    }
+  }
+
+  rotate() {
+    const now = Date.now();
+    const delta = now - this.lastUpdate;
+    this.lastUpdate = now;
+
+    this.setState({
+		rotation: this.state.rotation + delta / 150
+	});
+    this.frameHandle = requestAnimationFrame(this.rotate);
+  }
+
+  render() {
+    return (
+      <View>
+		<Pano source={ {uri: this.spaceSkymap} }/>
+
+        <AmbientLight intensity={ 2.6 }  />
+
+        <View style={ this.styles.menu }>
+          <Button text='+'
+			callback={() => this.setState({ zoom: this.state.zoom + 10 }) } />
+          <Button text='-' 
+			callback={() => this.setState({ zoom: this.state.zoom - 10 }) } />
+        </View>
+
+        <Mesh
+		  style={{
+            transform: [
+              {translate: [-25, 0, this.state.zoom]},
+              {scale: 0.05 },
+              {rotateY: this.state.rotation},
+              {rotateX: 20},
+              {rotateZ: -10}
+            ],
+          }}
+          source={{mesh:asset('earth.obj'), mtl:asset('earth.mtl'), lit: true}}
+        />
+
+		<Mesh
+		  style={{
+			transform: [
+			  {translate: [10, 10, this.state.zoom - 30]},
+			  {scale: 0.05},
+              {rotateY: this.state.rotation / 3},
+			],
+		  }}
+		  source={{mesh:asset('moon.obj'), mtl:asset('moon.mtl'), lit: true}}
+		/>
+      </View>
+    );
+  }
+};
+
+AppRegistry.registerComponent('EarthMoonVR', () => EarthMoonVR);

package.json

@@ -0,0 +1,21 @@
+{
+  "name": "EarthMoonVR",
+  "version": "0.0.1",
+  "private": true,
+  "scripts": {
+    "start": "node -e \"console.log('open browser at http:/localhost:8081/vr/\\n\\n');\" && node node_modules/react-native/local-cli/cli.js start",
+    "bundle": "node node_modules/react-vr/scripts/bundle.js",
+    "open": "node -e \"require('xopen')('http://localhost:8081/vr/')\"",
+    "postinstall": "node postinstall.js && echo done"
+  },
+  "dependencies": {
+    "ovrui": "~0.1.0",
+    "ovr-audio": "~0.1.0",
+    "react": "15.3.2",
+    "react-native": "0.37.0",
+    "three": "^0.80.1",
+    "react-vr": "~0.1.0",
+    "react-vr-web": "~0.1.0",
+    "xopen": "1.0.0"
+  }
+}

postinstall.js

@@ -0,0 +1,22 @@
+// Until 67828a5 lands in React Native, we monkey-patch the CLI configuration
+// to allow a 'vr' platform. This only needs to run after 'npm install'
+const fs = require('fs');
+const path = require('path');
+
+const rn = require.resolve('react-native');
+const resolver = path.resolve(
+  rn.substr(0, rn.lastIndexOf(path.sep)),
+  '..',
+  '..',
+  'packager',
+  'defaults.js'
+);
+
+const fileContents = fs.readFileSync(resolver, 'utf8').replace(
+  "['ios', 'android', 'windows', 'web']",
+  "['ios', 'android', 'vr', 'windows', 'web']"
+).replace(
+  "'parse',",
+  "'parse', 'react-vr',"
+);
+fs.writeFileSync(resolver, fileContents);

rn-cli.config.js

@@ -0,0 +1,33 @@
+'use strict';
+
+var path = require('path');
+var blacklist = require('./node_modules/react-native/packager/blacklist');
+
+var config = {
+  getProjectRoots() {
+    return getRoots();
+  },
+
+  getBlacklistRE() {
+    return blacklist([
+    ]);
+  },
+
+  getAssetExts() {
+    return ['obj', 'mtl'];
+  },
+
+  getPlatforms() {
+    return ['vr'];
+  },
+};
+
+function getRoots() {
+  var root = process.env.REACT_NATIVE_APP_ROOT;
+  if (root) {
+    return [path.resolve(root)];
+  }
+  return [path.resolve(__dirname)];
+}
+
+module.exports = config;

sampleSpace.xml

@@ -0,0 +1,47 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<spacescapelayers>
+    <layer>
+        <destBlendFactor>one</destBlendFactor>
+        <farColor>0 0 0 1</farColor>
+        <hdrMultiplier>1</hdrMultiplier>
+        <hdrPower>1</hdrPower>
+        <maskEnabled>false</maskEnabled>
+        <maskGain>0.5</maskGain>
+        <maskLacunarity>2</maskLacunarity>
+        <maskNoiseType>fbm</maskNoiseType>
+        <maskOctaves>1</maskOctaves>
+        <maskOffset>1</maskOffset>
+        <maskPower>1</maskPower>
+        <maskScale>1</maskScale>
+        <maskSeed>1</maskSeed>
+        <maskThreshold>0</maskThreshold>
+        <name>Fuzzy Blue Stars</name>
+        <nearColor>1 1 1 1</nearColor>
+        <numPoints>3000</numPoints>
+        <pointSize>3</pointSize>
+        <seed>4</seed>
+        <sourceBlendFactor>one</sourceBlendFactor>
+        <type>points</type>
+    </layer>
+    <layer>
+        <destBlendFactor>one</destBlendFactor>
+        <ditherAmount>0.03</ditherAmount>
+        <gain>1.5</gain>
+        <hdrMultiplier>1</hdrMultiplier>
+        <hdrPower>1</hdrPower>
+        <innerColor>1 1 1 1</innerColor>
+        <lacunarity>2</lacunarity>
+        <name>Fuzzy White Star Overlay</name>
+        <noiseType>ridged</noiseType>
+        <octaves>8</octaves>
+        <offset>0.94</offset>
+        <outerColor>0 0 0 1</outerColor>
+        <powerAmount>1</powerAmount>
+        <previewTextureSize>1024</previewTextureSize>
+        <scale>10</scale>
+        <seed>4</seed>
+        <shelfAmount>0.81</shelfAmount>
+        <sourceBlendFactor>one</sourceBlendFactor>
+        <type>noise</type>
+    </layer>
+</spacescapelayers>

static_assets/earth.mtl

@@ -0,0 +1,34 @@
+# 3ds Max Wavefront OBJ Exporter v0.97b - (c)2007 guruware
+# File Created: 25.01.2016 02:22:51
+
+newmtl 01___Default
+	Ns 10.0000
+	Ni 1.5000
+	d 1.0000
+	Tr 0.0000
+	Tf 1.0000 1.0000 1.0000 
+	illum 2
+	Ka 0.0000 0.0000 0.0000
+	Kd 0.0000 0.0000 0.0000
+	Ks 0.0000 0.0000 0.0000
+	Ke 0.0000 0.0000 0.0000
+	map_Ka 4096_earth.jpg
+	map_Kd 4096_earth.jpg
+	map_Ke 4096_night_lights.jpg
+	map_bump 4096_bump.jpg
+	bump 4096_bump.jpg
+
+newmtl 02___Default
+	Ns 10.0000
+	Ni 1.5000
+	d 1.0000
+	Tr 0.0000
+	Tf 1.0000 1.0000 1.0000 
+	illum 2
+	Ka 0.5882 0.5882 0.5882
+	Kd 0.5882 0.5882 0.5882
+	Ks 0.0000 0.0000 0.0000
+	Ke 0.0000 0.0000 0.0000
+	map_Ka 4096_earth.jpg
+	map_Kd 4096_earth.jpg
+	map_d 4096_earth.jpg