react-aframe-ar
Build virtual and augmented reality experiences with React and A-Frame.
Get started
npm install --save aframe react-aframe-ar react react-dom
yarn add aframe react-aframe-ar react react-dom
- checkout this basic example
;;;; Component { return <Scene> <Box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9" shadow /> <Sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E" shadow /> <Cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D" shadow /> <Plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4" shadow /> <Sky color="#ECECEC" /> <Text value="Hello world, react-aframe-ar!" align="center" position="0 2.3 -1.5" color="#7BC8A4" /> </Scene> ; } ReactDOM;
More informations
react-aframe-ar
is a very thin layer on top of React to bridge with A-Frame.
It passes React props to directly A-Frame using refs and .setAttribute()
, bypassing the DOM.
This works since A-Frame's .setAttribute()
s are able to take non-string data such as objects,
arrays, or elements and synchronously modify underlying 3D scene graph.
// react-aframe-ar's <Entity/> React Component<Entity geometry=primitive: 'box' width: 5 position="0 0 -5"/> // renders<a-entity> // and then applies the data directly to the underlying 3D scene graph, bypassing the DOM.<a-entity>;<a-entity>;
react-aframe-ar
provides the best of both worlds between A-Frame and React, the
3D and VR-oriented entity-component architecture of A-Frame, and the view and
state management ergonomics of React, without penalties of attempting to use
React for a VR application.
A-Frame is a web framework for building virtual reality experiences. Since A-Frame is built on top of the DOM, web libraries such as React, Vue.js, Angular, Ember.js, d3.js are able to sit cleanly on top of A-Frame.
A-Frame is an entity-component-system (ECS) framework exposed through
HTML. ECS is a pattern used in game development that
favors composability over inheritance, which is more naturally suited to 3D
scenes where objects are built of complex appearance, behavior, and
functionality. In A-Frame, HTML attributes map to components which are
composable modules that are plugged into <a-entity>
s to attach appearance,
behavior, and functionality.