aframe-react
is a thin layer on top of A-Frame, which is an
entity-component-system-based layer on
top of three.js. It serializes objects, passed as props,
to strings understandable by A-Frame
components:
<Entity geometry={{primitive: 'box', width: 5}}/>
// to:
<Entity geometry="primitive: box; width: 5"/>
See the aframe-react-boilerplate for example usage.
aframe-react
can be installed through npm
.
npm install --save aframe-react
aframe-react
does not come with the aframe
library. We will have to require
that alongside aframe-react
. Check out the boilerplate to see how to get
everything set up with Webpack.
import 'aframe';
import {Entity, Scene} from 'aframe-react';
class ExampleScene extends React.Component {
render () {
return (
<Scene>
<Entity geometry={{primitive: 'box'}} material="color: red" position={[0, 0, -5]}/>
</Scene>
);
}
}
aframe-react
ships with a Scene
React component and an Entity
React
component, which are all we really need.
Note the difference between React components and A-Frame components. A-Frame components refers to components of the entity-component-system pattern.
The Scene
React component is a thin wrapper around <a-scene>
. The scene
holds <Entity/>
s:
<Scene>
<Entity/>
</Scene>
Event | Description |
---|---|
onLoaded | onLoaded handler is called once scene has loaded all entities. |
The Entity
React component is a wrapper around <a-entity>
. 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'/>
Events
Event | Description |
---|---|
onLoaded | onLoaded handler is called when entity is loaded. |
The Animation
React component is a thin wrapper around <a-animation>
.
<Animation attribute="rotation" dur="10000" repeat="indefinite" to="0 360 360"/>
Events
Event | Description |
---|---|
onAnimationEnd | onAnimationEnd handler is called when animation ends. |
onAnimationStart | onAnimationStart handler is called when animation starts. |