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 ( + + + + + + +