ngokevin / aframe-react-boilerplate

:sunglasses: Boilerplate for building virtual reality (VR) experiences with A-Frame and React using aframe-react.

aframe-react-boilerplate

Boilerplate for building virtual reality experiences with A-Frame and React with aframe-react.

Installation

To get started:

npm install
npm start

To publish to GitHub Pages:

npm run publish

aframe-react-boilerplate's Issues

Animation with Events not working

I've got a ring which should expand when it emits the 'tapped' event. Using _ref I'm saving a reference to the ring when another click event happens. In the handler I call

this.ring1.emit('tapped');

Is this the correct way to emit aframe events? Is there a better way to trigger animations? thx!

                 <Entity _ref={this.setRing1}
                         geometry={{primitive:'ring', radiusInner:0.5, radiusOuter:1.5}}
                         material={{color:'teal', opacity:1}}
                 >
                     <Entity animation={{
                         attribute:'radius-inner',
                         begin:'tapped',
                         dur:1000,
                         from:0.5,
                         to:9
                     }}/>
                     <Entity animation={{
                         attribute:'radius-outer',
                         begin:'tapped',
                         dur:1000,
                         from:1,
                         to:10
                     }}/>
                     <Entity animation={{
                         attribute:"material.opacity",
                         begin:'tapped',
                         dur:1000,
                         from:1,
                         to:0}}
                     />

                </Entity>

Errors when running npm run serve-js & npm run serve

npm run serve-js & npm run serve
[2] 14344

[email protected] serve-js /Users/casey/Developer/aframe-react-boilerplate
webpack-dev-server --content-base src --progress --watch --history-api-fallback --inline --hot

[email protected] serve /Users/casey/Developer/aframe-react-boilerplate
cd src && python -m SimpleHTTPServer 5555

Serving HTTP on 0.0.0.0 port 5555 ...
70% 1/1 build modulesevents.js:141
throw er; // Unhandled 'error' event
^

Error: listen EADDRINUSE 127.0.0.1:8080
at Object.exports._errnoException (util.js:837:11)
at exports._exceptionWithHostPort (util.js:860:20)
at Server._listen2 (net.js:1231:14)
at listen (net.js:1267:10)
at net.js:1376:9
at GetAddrInfoReqWrap.asyncCallback as callback
at GetAddrInfoReqWrap.onlookup as oncomplete

npm ERR! Darwin 14.5.0
npm ERR! argv "/Users/casey/.nvm/versions/node/v4.1.1/bin/node" "/Users/casey/.nvm/versions/node/v4.1.1/bin/npm" "run" "serve-js"
npm ERR! node v4.1.1
npm ERR! npm v2.14.4
npm ERR! code ELIFECYCLE
npm ERR! [email protected] serve-js: webpack-dev-server --content-base src --progress --watch --history-api-fallback --inline --hot
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] serve-js script 'webpack-dev-server --content-base src --progress --watch --history-api-fallback --inline --hot'.
npm ERR! This is most likely a problem with the aframe-react-boilerplate package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! webpack-dev-server --content-base src --progress --watch --history-api-fallback --inline --hot
npm ERR! You can get their info via:
npm ERR! npm owner ls aframe-react-boilerplate
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR! /Users/casey/Developer/aframe-react-boilerplate/npm-debug.log
[2] + 14344 exit 1 npm run serve-js
127.0.0.1 - - [11/Jan/2016 12:56:11] "GET / HTTP/1.1" 200 -
^CTraceback (most recent call last):
File "/usr/local/Cellar/python/2.7.10_2/Frameworks/Python.framework/Versions/2.7/lib/python2.7/runpy.py", line 162, in _run_module_as_main
"main", fname, loader, pkg_name)
File "/usr/local/Cellar/python/2.7.10_2/Frameworks/Python.framework/Versions/2.7/lib/python2.7/runpy.py", line 72, in _run_code
exec code in run_globals
File "/usr/local/Cellar/python/2.7.10_2/Frameworks/Python.framework/Versions/2.7/lib/python2.7/SimpleHTTPServer.py", line 235, in
test()
File "/usr/local/Cellar/python/2.7.10_2/Frameworks/Python.framework/Versions/2.7/lib/python2.7/SimpleHTTPServer.py", line 231, in test
BaseHTTPServer.test(HandlerClass, ServerClass)
File "/usr/local/Cellar/python/2.7.10_2/Frameworks/Python.framework/Versions/2.7/lib/python2.7/BaseHTTPServer.py", line 599, in test
httpd.serve_forever()
File "/usr/local/Cellar/python/2.7.10_2/Frameworks/Python.framework/Versions/2.7/lib/python2.7/SocketServer.py", line 236, in serve_forever
poll_interval)
File "/usr/local/Cellar/python/2.7.10_2/Frameworks/Python.framework/Versions/2.7/lib/python2.7/SocketServer.py", line 155, in _eintr_retry
return func(*args)
KeyboardInterrupt

Console:

EnterVR won't create stereoscopic view on mobile

When entering VR mode on mobile chrome by clicking glasses icon, it doesnt create stereoscopic/VREffects look. Both in prod and dev.

Add gh-pages script for people to easily host their projects.

Allow remote access in dev mode

Would be nice to be able to access the dev server from localhost, but also from a mobile device on the same network.

This can be done:

• by adding the option --host 0.0.0.0 to webpack dev server
• by including dynamically the script tag for the bundle

I'll try to make a PR later if you think it's a good idea.

Animation doesn't seem to work out the box

I cloned and did npm install - everything looks fine but the box doesn't rotate. Any ideas why? I'm on the latest Chrome.

Localhost port

This might be picky, but noticed your docs have 5555 instead of 8080 for the localhost port

prop-types module not found

I am getting this -

Failed to compile.

Error in ./~/aframe-react/dist/index.js
Module not found: 'prop-types' in ~/dev/vr/kastioVR-poc/node_modules/aframe-react/dist

 @ ./~/aframe-react/dist/index.js 20:17-38

I did -

yarn install
yarn run start

webpack dev server

Might want to add

npm i webpack-dev-server -g

to the preinstall instructions

Missing dependency for npm install

Hit an error with "aframe-react"'s index.js -- Had an issue with 'style-attr' being required.

Seemed to work after I npm install --save'd "style-attr", but I'm unfamiliar with webpack and if it should be included into the project a different way.

add text react component to demonstrate installing/using components

Module build failed: ReferenceError: Promise is not defined

I'm getting this error when I run npm run serve-js. It's fixable by adding require('es6-promise').polyfill(); to webpack.config.js and a dev dependency on es6-promise. Should I submit a pull request for this workaround, or is there a better to fix it?

http://localhost:8080/bundle.js not found

Cloned this and ran the commands from the README but continue to get a not found for the bundle. It doesn't seem to be generating. I'm not getting any errors from webpack so it looks like it's running ok, but there are no new files generated outside of node_modules.

I tried messing with the webpack.config.js a bit, but no luck there either.

Here's my output if you have time to take a look and tell me what might be going wrong: https://gist.github.com/sirkitree/3b6a1574a7ac004dfc13606e1b746b7a

NPM Install fails

Npm install fails when searching for "aframe-react": "^1.2.0",

    npm ERR! No compatible version found: aframe-react@^1.2.0  
    npm ERR! Valid install targets:  
    npm ERR! 1.1.0, 1.0.4, 1.0.3, 1.0.2, 1.0.1, 1.0.0

Update to `react-scripts` 1.*

Build should reap from aframe src

npm install

WARNING in .//aframe/dist/aframe.js
Critical dependencies:
1:479-486 This seems to be a pre-built javascript file. Though this is possible, it's not recommended. Try to require the original source to get better results.
@ .//aframe/dist/aframe.js 1:479-486

Browser crashes when looking at the floor?

Runs fine in the latest 64bit firefox until you try to look at the floor, at which point it lags out and crashes (see gif). Not done anything to it, just installed through npm and launched.

Warning: Failed propType: Invalid prop `children` of type `object` supplied to `Entity`, expected `array`.

I see this warning when running the boilerplate project locally without making any changes. It seems to be related to the Camera component, where React both doesn't seem to like the <Entity> wrapped in an <Entity> nor the additional {...props} in <Entity camera look-controls wasd-controls {...props}/>.

If the wrapping <Entity> and {...props} are removed, but then the cursor obviously also disappear. I've so far been unsuccessful in determining exactly why this ends up as an object rather than the array the React validation expects, but it would be nice to not have this warning as the first thing when running the boilerplate.

Get errors when execute "npm run serve-js & npm run serve"

Following errors are what I get when I execute "npm run serve-js & npm run serve".

WARNING in ./~/webvr-polyfill/build/webvr-polyfill.js
Critical dependencies:
1:113-120 This seems to be a pre-built javascript file. Though this is possible, it's not recommended. Try to require the original source to get better results.
 @ ./~/webvr-polyfill/build/webvr-polyfill.js 1:113-120

ERROR in ./~/aframe/elements/templates/index.html
Module parse failed: /Users/eouprince/Workspace/exercises/aframe-react-boilerplate/node_modules/aframe/elements/templates/index.html Line 1: Unexpected token <
You may need an appropriate loader to handle this file type.
| <!doctype html>
| <meta charset="utf-8">
|
 @ ./~/aframe/elements/index.js 7:0-33

ERROR in ./~/aframe/~/aframe-core/lib/three.js
Module not found: Error: Cannot resolve 'file' or 'directory' ../node_modules/three-dev/examples/js/loaders/OBJLoader in /Users/eouprince/Workspace/exercises/aframe-react-boilerplate/node_modules/aframe/node_modules/aframe-core/lib
 @ ./~/aframe/~/aframe-core/lib/three.js 10:0-66

ERROR in ./~/aframe/~/aframe-core/lib/three.js
Module not found: Error: Cannot resolve 'file' or 'directory' ../node_modules/three-dev/examples/js/loaders/ColladaLoader in /Users/eouprince/Workspace/exercises/aframe-react-boilerplate/node_modules/aframe/node_modules/aframe-core/lib
 @ ./~/aframe/~/aframe-core/lib/three.js 11:0-70

ERROR in ./~/aframe/~/aframe-core/lib/three.js
Module not found: Error: Cannot resolve 'file' or 'directory' ../node_modules/three-dev/examples/js/controls/VRControls in /Users/eouprince/Workspace/exercises/aframe-react-boilerplate/node_modules/aframe/node_modules/aframe-core/lib
 @ ./~/aframe/~/aframe-core/lib/three.js 13:0-68

ERROR in ./~/aframe/~/aframe-core/lib/three.js
Module not found: Error: Cannot resolve 'file' or 'directory' ../node_modules/three-dev/examples/js/effects/VREffect in /Users/eouprince/Workspace/exercises/aframe-react-boilerplate/node_modules/aframe/node_modules/aframe-core/lib
 @ ./~/aframe/~/aframe-core/lib/three.js 14:0-65

Use React stateless components for example components.

Cannot resolve module 'react'

Installing react and react-dom from npm worked, but these don't seem to be in package.json so the instructions from the README didn't work for me.

ERROR in ./src/js/app.js
Module not found: Error: Cannot resolve module 'react' in /private/tmp/aframe-react-boilerplate/src/js
 @ ./src/js/app.js 15:13-29

ERROR in ./src/js/app.js
Module not found: Error: Cannot resolve module 'react-dom' in /private/tmp/aframe-react-boilerplate/src/js
 @ ./src/js/app.js 19:16-36

ERROR in ./~/aframe-react/dist/index.js
Module not found: Error: Cannot resolve module 'react' in /private/tmp/aframe-react-boilerplate/node_modules/aframe-react/dist
 @ ./~/aframe-react/dist/index.js 13:13-29

ERROR in ./~/aframe-react/dist/index.js
Module not found: Error: Cannot resolve module 'react-dom' in /private/tmp/aframe-react-boilerplate/node_modules/aframe-react/dist
 @ ./~/aframe-react/dist/index.js 17:16-36

ERROR in ./src/js/components/Camera.js
Module not found: Error: Cannot resolve module 'react' in /private/tmp/aframe-react-boilerplate/src/js/components
 @ ./src/js/components/Camera.js 11:13-29

ERROR in ./src/js/components/Sky.js
Module not found: Error: Cannot resolve module 'react' in /private/tmp/aframe-react-boilerplate/src/js/components
 @ ./src/js/components/Sky.js 9:13-29

ERROR in ./src/js/components/Text.js
Module not found: Error: Cannot resolve module 'react' in /private/tmp/aframe-react-boilerplate/src/js/components
 @ ./src/js/components/Text.js 11:13-29

Performance problems when rotating camera

I stumbled upon a scenario when rendering 1000 planes with react-aframe causes fps drops from 80fps to 15fps on my computer when rotating the camera with the mouse. Moving camera with wasd controls does not cause the performance to drop.

Maybe this is more relevant to aframe-react, but here is the reproducible code based on aframe-react-boilerplate:

import 'aframe';
import 'aframe-animation-component';
import 'aframe-particle-system-component';
import 'babel-polyfill';
import {Entity, Scene} from 'aframe-react';
import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {
    render () {
        const coords = [];
        for (let i = 0; i < 1000; i++) {
            coords.push({x: Math.random(), y: Math.random(), z: -5 + Math.random()});
        }
        return (
            <Scene stats>
                {coords.map((c, i) =>
                    <Entity key={i} geometry={{primitive: 'plane'}} position={c}/>
                )}
            </Scene>
        );
    }
}

ReactDOM.render(<App/>, document.querySelector('#sceneContainer'));

If I wrap an array of planes with Entity component, the problem goes away.