├── .gitignore ├── 1b881d3761a27ced6236bd47605ed838997ba0bc.json.gzip ├── 36309683d879b1f38fc99c4c59f3a03f1583c88b.json.gzip ├── LICENSE ├── README.md ├── b28eacbc28ed39b84b5b0bc4d47a6070055384a5.json.gzip ├── b49c2ee50b22d334ad3d169c72e2849d3445f660.json.gzip ├── index.html ├── package.json ├── src ├── index.html └── js │ ├── app.js │ └── components │ ├── Camera.js │ ├── Cursor.js │ └── Sky.js └── webpack.config.js /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | npm-debug.log 3 | *.sw[ponm] 4 | gh-pages 5 | build 6 | 7 | ### OSX ### 8 | *.DS_Store 9 | .AppleDouble 10 | .LSOverride 11 | 12 | # Icon must end with two \r 13 | Icon 14 | 15 | 16 | # Thumbnails 17 | ._* 18 | 19 | # Files that might appear in the root of a volume 20 | .DocumentRevisions-V100 21 | .fseventsd 22 | .Spotlight-V100 23 | .TemporaryItems 24 | .Trashes 25 | .VolumeIcon.icns 26 | .com.apple.timemachine.donotpresent 27 | 28 | # Directories potentially created on remote AFP share 29 | .AppleDB 30 | .AppleDesktop 31 | Network Trash Folder 32 | Temporary Items 33 | .apdisk 34 | 35 | 36 | ### Node ### 37 | # Logs 38 | logs 39 | *.log 40 | npm-debug.log* 41 | 42 | # Runtime data 43 | pids 44 | *.pid 45 | *.seed 46 | *.pid.lock 47 | 48 | # Directory for instrumented libs generated by jscoverage/JSCover 49 | lib-cov 50 | 51 | # Coverage directory used by tools like istanbul 52 | coverage 53 | 54 | # nyc test coverage 55 | .nyc_output 56 | 57 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 58 | .grunt 59 | 60 | # node-waf configuration 61 | .lock-wscript 62 | 63 | # Compiled binary addons (http://nodejs.org/api/addons.html) 64 | build/Release 65 | 66 | # Dependency directories 67 | node_modules 68 | jspm_packages 69 | 70 | # Optional npm cache directory 71 | .npm 72 | 73 | # Optional REPL history 74 | .node_repl_history 75 | -------------------------------------------------------------------------------- /1b881d3761a27ced6236bd47605ed838997ba0bc.json.gzip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sdras/react-aframe-demo1/1fe443371195321e2fa9d2f62e9156c97f671419/1b881d3761a27ced6236bd47605ed838997ba0bc.json.gzip -------------------------------------------------------------------------------- /36309683d879b1f38fc99c4c59f3a03f1583c88b.json.gzip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sdras/react-aframe-demo1/1fe443371195321e2fa9d2f62e9156c97f671419/36309683d879b1f38fc99c4c59f3a03f1583c88b.json.gzip -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016 Sarah Drasner 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 | 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## aframe-react-stroll1 2 | 3 | My first attempt playing around with A-Frame and React, this is epically fun. Just a little demo project, nothing special. 4 | 5 | [See the demo live here](https://sdras.github.io/react-aframe-demo1/) 6 | 7 | ![](https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/react-aframe.jpg) 8 | 9 | ### To see it in action 10 | 11 | To get started: 12 | 13 | ```bash 14 | npm install 15 | npm run serve 16 | ``` 17 | 18 | Then head over to `http://localhost:9090`. 19 | 20 | ### Resources 21 | 22 | Here are some of the resources I used to create this: 23 | 24 | An [aframe-react](https://github.com/ngokevin/aframe-react) boilerplate, 25 | combining [A-Frame](https://aframe.io) with React. -------------------------------------------------------------------------------- /b28eacbc28ed39b84b5b0bc4d47a6070055384a5.json.gzip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sdras/react-aframe-demo1/1fe443371195321e2fa9d2f62e9156c97f671419/b28eacbc28ed39b84b5b0bc4d47a6070055384a5.json.gzip -------------------------------------------------------------------------------- /b49c2ee50b22d334ad3d169c72e2849d3445f660.json.gzip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sdras/react-aframe-demo1/1fe443371195321e2fa9d2f62e9156c97f671419/b49c2ee50b22d334ad3d169c72e2849d3445f660.json.gzip -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | A-Frame React Demo 1 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "aframe-react-demo1", 3 | "version": "1.0.0", 4 | "description": "Small Fun Demo using A-Frame with React.", 5 | "dependencies": { 6 | "aframe": "^0.3.1", 7 | "aframe-react": "^2.0.0", 8 | "babel-polyfill": "^6.3.14", 9 | "react": "^0.14.3", 10 | "react-dom": "^0.14.3" 11 | }, 12 | "scripts": { 13 | "build": "webpack", 14 | "preghpages": "npm run build && rm -rf gh-pages && cp -r src gh-pages && cp index.html build/bundle.js gh-pages", 15 | "ghpages": "npm run preghpages && ghpages -p gh-pages", 16 | "gh-pages": "npm run ghpages", 17 | "serve": "webpack-dev-server --content-base src --progress --watch --history-api-fallback --inline --hot --host 0.0.0.0 --port 9090" 18 | }, 19 | "repository": { 20 | "type": "git", 21 | "url": "git+https://github.com/sdras/react-aframe-demo1.git" 22 | }, 23 | "keywords": [ 24 | "aframe", 25 | "react", 26 | "vr", 27 | "boilerplate", 28 | "a-frame", 29 | "mozvr", 30 | "webvr" 31 | ], 32 | "author": "Sarah Drasner ", 33 | "license": "MIT", 34 | "bugs": { 35 | "url": "https://github.com/sdras/react-aframe-demo1/issues" 36 | }, 37 | "homepage": "https://github.com/sdras/react-aframe-demo1#readme", 38 | "devDependencies": { 39 | "babel": "^6.3.13", 40 | "babel-core": "^6.3.15", 41 | "babel-loader": "^6.2.0", 42 | "babel-preset-es2015": "^6.3.13", 43 | "babel-preset-react": "^6.3.13", 44 | "babel-preset-stage-0": "^6.3.13", 45 | "babel-runtime": "^6.3.13", 46 | "css-loader": "^0.23.0", 47 | "ghpages": "0.0.3", 48 | "json-loader": "^0.5.4", 49 | "style-loader": "^0.13.0", 50 | "webpack": "^1.12.9", 51 | "webpack-dev-server": "^1.14.0" 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | A-Frame React Demo 1 5 | 6 | 7 | 8 |
9 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /src/js/app.js: -------------------------------------------------------------------------------- 1 | import 'aframe'; 2 | import 'babel-polyfill'; 3 | import {Animation, Entity, Scene} from 'aframe-react'; 4 | import React from 'react'; 5 | import ReactDOM from 'react-dom'; 6 | 7 | import Camera from './components/Camera'; 8 | import Cursor from './components/Cursor'; 9 | import Sky from './components/Sky'; 10 | 11 | class App extends React.Component { 12 | render () { 13 | const items = [], 14 | amt1 = 5, 15 | amt2 = 7; 16 | for (let i = 0; i < 30; i++) { 17 | let rando1 = Math.floor(Math.random() * (amt1 - -amt1 + 1)) + -amt1, 18 | rando2 = Math.floor(Math.random() * (amt2 - 0 + 1)) + 0, 19 | randoPos = `${rando1} 0 -5`, 20 | addRot = 50 * i, 21 | updateRot = `0 ${addRot} ${addRot}`, 22 | addColor1 = parseInt(rando2 * i), 23 | addColor2 = 255 - parseInt(7 * i), 24 | updateColor = `rgb(200, ${addColor1}, ${addColor2})`; 25 | items.push( 30 | 31 | 33 | ); 34 | } 35 | return ( 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | {items} 46 | 47 | 48 | ); 49 | } 50 | } 51 | 52 | ReactDOM.render(, document.querySelector('.scene-container')); 53 | -------------------------------------------------------------------------------- /src/js/components/Camera.js: -------------------------------------------------------------------------------- 1 | import {Entity} from 'aframe-react'; 2 | import React from 'react'; 3 | 4 | export default props => ( 5 | 6 | 7 | 8 | ); 9 | -------------------------------------------------------------------------------- /src/js/components/Cursor.js: -------------------------------------------------------------------------------- 1 | import {Animation, Entity} from 'aframe-react'; 2 | import React from 'react'; 3 | 4 | export default props => { 5 | const geometry = { 6 | primitive: 'ring', 7 | radiusInner: 0.01, 8 | radiusOuter: 0.016 9 | }; 10 | const material = { 11 | color: props.color, 12 | shader: 'flat', 13 | opacity: props.opacity || 0.9, 14 | transparent: true 15 | }; 16 | return ( 17 | 18 | 20 | 21 | ); 22 | } 23 | -------------------------------------------------------------------------------- /src/js/components/Sky.js: -------------------------------------------------------------------------------- 1 | import {Entity} from 'aframe-react'; 2 | import React from 'react'; 3 | 4 | export default props => ( 5 | 8 | ); 9 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | var path = require('path'); 2 | var webpack = require('webpack'); 3 | require('babel-polyfill'); 4 | 5 | var IS_PRODUCTION = process.env.NODE_ENV === 'production'; 6 | 7 | var ENTRY_POINTS = [ 8 | './src/js/app' 9 | ]; 10 | 11 | var JS_LOADERS = [ 12 | 'babel?cacheDirectory&presets[]=react,presets[]=es2015,presets[]=stage-0' 13 | ]; 14 | 15 | var PLUGINS = []; 16 | if (IS_PRODUCTION) { 17 | // Uglify in production. 18 | PLUGINS.push( 19 | new webpack.optimize.UglifyJsPlugin({ 20 | mangle: { 21 | except: ['$super', '$', 'exports', 'require'] 22 | }, 23 | sourcemap: false 24 | }) 25 | ); 26 | } 27 | 28 | module.exports = { 29 | entry: ENTRY_POINTS, 30 | output: { 31 | // Bundle will be served at /bundle.js locally. 32 | filename: 'bundle.js', 33 | // Bundle will be built at ./src/media/js. 34 | path: './build', 35 | publicPath: '/', 36 | }, 37 | module: { 38 | loaders: [ 39 | { 40 | // JS. 41 | exclude: /(node_modules|bower_components)/, 42 | loaders: JS_LOADERS, 43 | test: /\.js$/, 44 | }, 45 | { 46 | test: /\.css$/, 47 | loader: 'style-loader!css-loader' 48 | }, 49 | { 50 | test: /\.json$/, 51 | loader: 'json-loader' 52 | } 53 | ], 54 | }, 55 | plugins: PLUGINS, 56 | resolve: { 57 | extensions: ['', '.js', '.json'], 58 | fallback: path.join(__dirname, 'node_modules'), 59 | modulesDirectories: [ 60 | 'src/js', 61 | 'node_modules', 62 | ] 63 | }, 64 | resolveLoader: { 65 | fallback: [path.join(__dirname, 'node_modules')] 66 | } 67 | }; 68 | --------------------------------------------------------------------------------