From e3f13889e382988a86d42fbd02411e5afb2f9f04 Mon Sep 17 00:00:00 2001 From: Esteban Herrera Date: Wed, 18 Jan 2017 21:58:18 -0600 Subject: [PATCH] first commit --- .gitignore | 6 + .watchmanconfig | 0 LICENSE | 21 + README.md | 26 + button.js | 34 + index.vr.js | 107 + package.json | 21 + postinstall.js | 22 + rn-cli.config.js | 33 + sampleSpace.xml | 47 + static_assets/4096_bump.jpg | Bin 0 -> 363510 bytes static_assets/4096_clouds.jpg | Bin 0 -> 2791236 bytes static_assets/4096_earth.jpg | Bin 0 -> 1476210 bytes static_assets/4096_night_lights.jpg | Bin 0 -> 793270 bytes static_assets/4096_normal.jpg | Bin 0 -> 1914926 bytes static_assets/MoonMap2_2500x1250.jpg | Bin 0 -> 1543505 bytes static_assets/earth.mtl | 34 + static_assets/earth.obj | 16361 +++++ static_assets/moon-normal.jpg | Bin 0 -> 221599 bytes static_assets/moon.mtl | 18 + static_assets/moon.obj | 79923 +++++++++++++++++++++++++ static_assets/moonmap2k.jpg | Bin 0 -> 1591331 bytes static_assets/space_back.png | Bin 0 -> 195725 bytes static_assets/space_down.png | Bin 0 -> 197709 bytes static_assets/space_front.png | Bin 0 -> 195912 bytes static_assets/space_left.png | Bin 0 -> 192504 bytes static_assets/space_right.png | Bin 0 -> 197453 bytes static_assets/space_up.png | Bin 0 -> 188463 bytes vr/client.js | 21 + vr/index.html | 21 + yarn.lock | 4219 ++ 31 files changed, 100914 insertions(+) create mode 100644 .gitignore create mode 100644 .watchmanconfig create mode 100644 LICENSE create mode 100644 README.md create mode 100644 button.js create mode 100644 index.vr.js create mode 100644 package.json create mode 100644 postinstall.js create mode 100644 rn-cli.config.js create mode 100644 sampleSpace.xml create mode 100644 static_assets/4096_bump.jpg create mode 100644 static_assets/4096_clouds.jpg create mode 100644 static_assets/4096_earth.jpg create mode 100644 static_assets/4096_night_lights.jpg create mode 100644 static_assets/4096_normal.jpg create mode 100644 static_assets/MoonMap2_2500x1250.jpg create mode 100644 static_assets/earth.mtl create mode 100644 static_assets/earth.obj create mode 100644 static_assets/moon-normal.jpg create mode 100644 static_assets/moon.mtl create mode 100644 static_assets/moon.obj create mode 100644 static_assets/moonmap2k.jpg create mode 100644 static_assets/space_back.png create mode 100644 static_assets/space_down.png create mode 100644 static_assets/space_front.png create mode 100644 static_assets/space_left.png create mode 100644 static_assets/space_right.png create mode 100644 static_assets/space_up.png create mode 100644 vr/client.js create mode 100644 vr/index.html create mode 100644 yarn.lock diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..3a93865 --- /dev/null +++ b/.gitignore @@ -0,0 +1,6 @@ +.DS_Store +*~ +*.log +*.js.meta +node_modules/ +build/ diff --git a/.watchmanconfig b/.watchmanconfig new file mode 100644 index 0000000..e69de29 diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..7f49eb1 --- /dev/null +++ b/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. \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 0000000..c14095b --- /dev/null +++ b/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 \ No newline at end of file diff --git a/button.js b/button.js new file mode 100644 index 0000000..e7c0890 --- /dev/null +++ b/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 ( + this.props.callback()}> + + {this.props.text} + + + ); + } +} \ No newline at end of file diff --git a/index.vr.js b/index.vr.js new file mode 100644 index 0000000..b5e0daf --- /dev/null +++ b/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 ( + + + + + + +