├── .gitignore
├── LICENSE
├── README.md
├── package.json
├── public
    ├── carpet.jpg
    └── index.html
├── src
    ├── components
    │   ├── Camera.js
    │   ├── Cursor.js
    │   ├── Earth.js
    │   ├── Lighting.js
    │   └── Sky.js
    ├── index.js
    └── style.css
└── webpack.config.js


/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | 
 6 | # Runtime data
 7 | pids
 8 | *.pid
 9 | *.seed
10 | 
11 | # Directory for instrumented libs generated by jscoverage/JSCover
12 | lib-cov
13 | 
14 | # Coverage directory used by tools like istanbul
15 | coverage
16 | 
17 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
18 | .grunt
19 | 
20 | # node-waf configuration
21 | .lock-wscript
22 | 
23 | # Compiled binary addons (http://nodejs.org/api/addons.html)
24 | build/Release
25 | 
26 | # Dependency directory
27 | node_modules
28 | 
29 | # Optional npm cache directory
30 | .npm
31 | 
32 | # Optional REPL history
33 | .node_repl_history
34 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2016 Jonathan El-Bizri
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Simple Static React-Aframe
 2 | 
 3 | This repo is minimal boilerplate for VR sites written in React and Aframe. 
 4 | 
 5 | ## 2/14/22 - It's also out of date, and appears not to be working in modern browsers. Pull requests welcome.
 6 | 
 7 | It is intended for to get you up and developing with a minimum of fuss and configuration for a static, single page React & Aframe site. This repo gives you:
 8 | 
 9 | - ES6/React (with sourcemaps)
10 | - Aframe & React-Aframe
11 | - CSS modules
12 | - watchfile'd development builds
13 | 
14 | And that's it. 
15 | 
16 | You can see the initial output here:
17 | 
18 | http://elbizri.com/carpet/
19 | 
20 | The carpet and cube are created by the root component, so you can get quickly remove them. Sky, Earth, Camera and Cursor are all their own external components.
21 | 
22 | About React-Aframe:
23 | 
24 | Kevin Ngo's straight-forward wrapper React-Aframe
25 | ( https://github.com/ngokevin/aframe-react )
26 | provides a React Components for Aframe's `<a-scene>`, `<a-entity>` and `<a-animation>` components. It should be pretty obvious from the code here how React Component `prop`s map to Aframe `components`. 
27 | 
28 | (You can still call the aframe's components directly if you want, but you'll need to stringify de-stringify the component arguments yourself - obviously this is not a bother for any static components.)
29 | 
30 | ##Set up
31 | 
32 | Clone the repo and install the node dependencies.
33 | 
34 | ```
35 | git clone https://github.com/Jon-Biz/simple-static-react-aframe
36 | cd simple-static-react-aframe
37 | npm i
38 | ```
39 | 
40 | ##Usage
41 | 
42 | ###Development
43 | 
44 | Run the npm script `dev` to develop.
45 | 
46 | ```
47 | npm run dev
48 | ```
49 | 
50 | A webpack server will now be running on `4000`, serving the contents of the `public` directory. The `entry` files are in `src` - `index.js` and `style.css`.
51 | 
52 | NOTE: this is using webpack-dev-server, not actually overwriting the files in `public`. For that, you will need to run the build script.
53 | 
54 | ###Production
55 | 
56 | Run the npm script 'build' to update `style.css` and `index.js` in the `public` directory. Upload this directory to your web server.
57 | 
58 | ```
59 | npm run build
60 | ```
61 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "Simple-Static-React-Aframe",
 3 |   "version": "1.0.0",
 4 |   "description": "Minimal boilerplate and configuration for the development of static VR sites using aframe, react & es6",
 5 |   "repository": "https://github.com/Jon-Biz/simple-static-react-aframe",
 6 |   "keywords": [
 7 |     "VR",
 8 |     "AR",
 9 |     "virtual reality",
10 |     "augmented reality",
11 |     "boilerplate",
12 |     "example",
13 |     "react",
14 |     "reactjs",
15 |     "static",
16 |     "es6"
17 |   ],
18 |   "scripts": {
19 |     "webpack": "node ./node_modules/webpack/bin/webpack.js",
20 |     "webpack-dev-server": "node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js",
21 |     "build": "npm run webpack",
22 |     "dev": "npm run webpack-dev-server -s -- --progress --colors --port 4000 --content-base public"
23 |   },
24 |   "babel": {
25 |     "presets": [
26 |       "es2015",
27 |       "react"
28 |     ]
29 |   },
30 |   "author": "jon-biz",
31 |   "license": "MIT",
32 |   "dependencies": {
33 |     "aframe": "^0.2.0",
34 |     "aframe-react": "^1.3.0",
35 |     "babel-core": "^6.7.7",
36 |     "babel-loader": "^6.2.4",
37 |     "babel-polyfill": "^6.7.4",
38 |     "babel-preset-es2015": "^6.6.0",
39 |     "babel-preset-react": "^6.5.0",
40 |     "css-loader": "^0.23.1",
41 |     "extract-text-webpack-plugin": "^1.0.1",
42 |     "react": "^15.0.1",
43 |     "react-dom": "^15.0.1",
44 |     "style-loader": "^0.13.1",
45 |     "webpack": "^1.13.0",
46 |     "webpack-dev-server": "^1.14.1"
47 |   }
48 | }
49 | 


--------------------------------------------------------------------------------
/public/carpet.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Jon-Biz/simple-static-react-aframe/03487a24edd05771509baf194f015d747884c3bd/public/carpet.jpg


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | 
 3 | <head>
 4 |   <title>Hello World</title>
 5 |   <link rel="stylesheet" type="text/css" href="style.css">
 6 | </head>
 7 | 
 8 | <body>
 9 |   <div id="app" />
10 |   <script src="index.js"></script>
11 | </body>
12 | 


--------------------------------------------------------------------------------
/src/components/Camera.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import {Entity} from 'aframe-react'
 3 | 
 4 | export default props => (
 5 |     <Entity
 6 |       camera=""
 7 |       look-controls=""
 8 |       wasd-controls=""
 9 |       {...props}
10 |       />
11 | )


--------------------------------------------------------------------------------
/src/components/Cursor.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import {Animation, Entity} from 'aframe-react'
 3 | 
 4 | const geometry = {
 5 |   primitive: 'ring',
 6 |   radiusInner: 0.01,
 7 |   radiusOuter: 0.016
 8 | }
 9 | 
10 | const material = {
11 |   color: 'white',
12 |   shader: 'flat',
13 |   opacity: 0.9,
14 |   transparent: true
15 | }
16 | 
17 | export default props => {
18 |   return (
19 |     <Entity
20 |       cursor=''
21 |       geometry={geometry}
22 |       material={material}
23 |       position="0 0 -1"
24 |       >
25 |       <Animation
26 |         attribute="scale"
27 |         begin="click"
28 |         dur="150"
29 |         fill="backwards"
30 |         to="0 0 0"
31 |         />
32 |     </Entity>
33 |   );
34 | }


--------------------------------------------------------------------------------
/src/components/Earth.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import {Entity} from 'aframe-react'
 3 | 
 4 | export default props => (
 5 |   <Entity
 6 |     material={{
 7 |       color: 'blue'
 8 |     }}
 9 | 
10 |     position={[0,-20, 0]}
11 |     geometry={
12 |       { primitive:"plane"
13 |       , width: "200000"
14 |       , height: "200000"
15 |       }
16 |     }
17 |     rotation={[-90, 0, 0]}
18 |     >
19 |   </Entity>
20 | )
21 | 


--------------------------------------------------------------------------------
/src/components/Lighting.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import {Entity} from 'aframe-react'
 3 | 
 4 | export default props => (
 5 |   <Entity>
 6 |     <Entity light={{type: 'ambient', color: '#888'}}/>
 7 |     <Entity light={{type: 'directional', intensity: 0.5}} position={[-1, 1, -3]}/>
 8 |     <Entity light={{type: 'directional', intensity: 1}} position={[1, 1, 0]}/>
 9 |   </Entity>
10 | )


--------------------------------------------------------------------------------
/src/components/Sky.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import {Entity} from 'aframe-react'
 3 | 
 4 | export default props => (
 5 |   <Entity
 6 |     geometry={{primitive: 'sphere', radius: 5000}}
 7 |     material={{color: "#73CFF0", shader: 'flat'}}
 8 |     scale="1 1 -1"
 9 |     />
10 | );
11 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import 'babel-polyfill'
 2 | import aframe from 'aframe'
 3 | import {Animation, Entity, Scene} from 'aframe-react'
 4 | import React, {Component} from 'react'
 5 | import ReactDOM from 'react-dom'
 6 | 
 7 | import Cursor from './components/Cursor'
 8 | import Sky from './components/Sky'
 9 | import Camera from './components/Camera'
10 | import Earth from './components/Earth'
11 | import Lighting from './components/Lighting'
12 | 
13 | class HelloWorld extends Component {
14 |   constructor(props) {
15 |     super(props);
16 |     this.state = {
17 |       color: 'red'
18 |     }
19 |   }
20 | 
21 |   render () {
22 | 
23 |     const changeColor = () => {
24 |       const colors = ['red', 'orange', 'yellow', 'green', 'blue']
25 |       const color = colors[Math.floor(Math.random() * colors.length)]
26 |       this.setState({color})
27 |     }
28 | 
29 |     return (
30 |       <Scene>
31 |         <a-assets>
32 |           <img id="carpet" src="./carpet.jpg" />
33 |         </a-assets>
34 | 
35 |         <Camera>
36 |           <Cursor/>
37 |         </Camera>
38 | 
39 |         <Sky />
40 |         <Earth />
41 | 
42 |         <Lighting />
43 | 
44 |         <Entity
45 |           material={{color: this.state.color}}
46 |           onClick={changeColor}
47 |           position="0 0 -5"
48 |           geometry={{primitive:"box"}}
49 |           scale={"2 1 0.5"}
50 |           >
51 |           <Animation attribute="rotation" dur="2000" repeat="indefinite" to="0 360 360"/>
52 |         </Entity>
53 | 
54 |           <Entity
55 |             material={
56 |               { src: '#carpet'
57 |               }
58 |             }
59 |             position={[0,-5, 0]}
60 |             geometry={
61 |               { primitive:"plane"
62 |               , width: "20"
63 |               , height: "20"
64 |               }
65 |             }
66 |             rotation={[-90, 0, 0]}
67 |             >
68 |           </Entity>
69 | 
70 |       </Scene>
71 |     );
72 |   }
73 | }
74 | 
75 | const content = document.getElementById('app')
76 | 
77 | ReactDOM.render(<HelloWorld />, content)
78 | 


--------------------------------------------------------------------------------
/src/style.css:
--------------------------------------------------------------------------------
1 | body {
2 |   background-color: blue;
3 |   color: white;
4 | }


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | const ExtractTextPlugin = require("extract-text-webpack-plugin");
 2 | 
 3 | module.exports = {
 4 |   entry: [
 5 |     './src/index.js'
 6 |   , './src/style.css'
 7 |     ]
 8 | 
 9 | , output: {
10 |     filename: 'index.js'
11 |   , chunkFilename: "[id].js"
12 |   , path: __dirname + '/public/'
13 |   , libraryTarget: 'umd'
14 |   }
15 | 
16 | , module: {
17 |     loaders: [
18 |       { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader' }
19 |     , { test: /\.jsx$/, exclude: /node_modules/, loader: 'babel-loader' }
20 |     , { test: /\.css$/, exclude: /node_modeuls/, loader: ExtractTextPlugin.extract("style-loader", "css-loader")}
21 |     ]
22 |   }
23 | 
24 | , plugins: [
25 |     new ExtractTextPlugin("style.css", {allChunks: true})
26 |   ]
27 | 
28 | , devtool: "#source-map"
29 | }
30 | 


--------------------------------------------------------------------------------