tribemedia / aframe-react Goto Github PK

Combining A-Frame VR with React.

aframe-react is the core library. Check out the aframe-react-boilerplate for example usage.

aframe-react can be installed through npm.

npm install aframe-react

aframe-react does not come with the aframe-core library. We will have to require that alongside aframe-react. Again, check out the boilerplate to see how to get everything set up with Webpack.

require('aframe-core');
import {Animation, Entity, Scene} from 'aframe-react';

class ExampleScene extends React.Component {
  render () {
    return (
      <Scene>
        <Entity geometry={{primitive: 'box'}} material="color: red" position="0 0 -5">
          <Animation attribute="rotation" dur="5000" repeat="indefinite" to="0 360 360"/>
        </Entity>
      </Scene>
    );
  }
}

Be aware of the difference between React components and A-Frame components.

A-Frame components refers to components of the entity-component system.

aframe-react ships only with components that are considered core to A-Frame.

The Scene React component is a thin wrapper around <a-scene>. The scene holds all of the entities.

<Scene>
  <Entity/>
</Scene>

The Entity React component is a wrapper around <a-entity>. Entities are general purpose objects in the scene (e.g., tree, player, light, sky) that are modified with components. Entity handles serialization of A-Frame components. A-Frame components can then be passed via props either via object or string.

<Entity geometry={{primitive: 'box'}} material='color: red'
        onClick={() => { console.log('clicked'); }}/>

Events

Check out the A-Frame docs for A-Frame component usage.

The Animation React component is a thin wrapper around <a-animation>.

<Animation attribute="rotation" dur="10000" repeat="indefinite" to="0 360 360"/>

Events

Check out the A-Frame docs for A-Frame animation usage.