├── .babelrc
├── .gitignore
├── LICENSE
├── README.md
├── dist
├── core.js
├── index.js
└── primitives.js
├── package.json
└── src
├── core.js
├── index.js
└── primitives.js
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": ["es2015", "react", "stage-0"]
3 | }
4 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | .idea/
3 | npm-debug.log
4 | *.sw[ponm]
5 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2017 weloobe
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 | react-aframe-ar
2 |
3 |
4 |
5 |
6 | Build virtual and augmented reality experiences with React and A-Frame.
7 |
8 |
9 | 
10 |
11 | ## Get started
12 |
13 | - Install with [npm](https://www.npmjs.com/package/react-aframe-ar) or
14 | [yarn](https://github.com/yarnpkg/yarn).
15 |
16 | ```
17 | npm install --save aframe react-aframe-ar react react-dom
18 | yarn add aframe react-aframe-ar react react-dom
19 | ```
20 |
21 | - Basic example
22 |
23 | ```js
24 | import 'aframe';
25 | import React from 'react';
26 | import ReactDOM from 'react-dom';
27 | import {Box, Sphere, Cylinder, Plane, Sky, Text, Scene} from 'react-aframe-ar';
28 |
29 | class AppScene extends React.Component {
30 | render () {
31 | return (
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 | );
41 | }
42 | }
43 |
44 | ReactDOM.render(, document.querySelector('#sceneContainer'));
45 | ```
46 |
47 | - Checkout [react-aframe-starter](https://github.com/tnga/react-aframe-starter) for easily boilerplate!
48 |
49 | ## More informations
50 |
51 | `react-aframe-ar` is a very thin layer on top of React to bridge with A-Frame.
52 | It passes React props to directly A-Frame using refs and `.setAttribute()`, bypassing the DOM.
53 | This works since A-Frame's `.setAttribute()`s are able to take non-string data such as objects,
54 | arrays, or elements and synchronously modify underlying 3D scene graph.
55 |
56 | ```js
57 | // react-aframe-ar's React Component
58 |
59 |
60 | // renders
61 |
62 |
63 | // and then applies the data directly to the underlying 3D scene graph, bypassing the DOM.
64 | .setAttribute('geometry', {primitive: 'box', width: 5});
65 | .setAttribute('position', '0 0 -5');
66 | ```
67 |
68 | `react-aframe-ar` provides the best of both worlds between A-Frame and React, the
69 | 3D and VR-oriented entity-component architecture of A-Frame, and the view and
70 | state management ergonomics of React, without penalties of attempting to use
71 | React for a VR application.
72 |
73 | [A-Frame](https://aframe.io) is a web framework for building virtual reality
74 | experiences. Since A-Frame is built on top of the DOM, web libraries such as
75 | React, Vue.js, Angular, Ember.js, d3.js are able to sit cleanly on top of
76 | A-Frame.
77 |
78 | A-Frame is an [entity-component-system (ECS) framework exposed through
79 | HTML](https://aframe.io/docs/). ECS is a pattern used in game development that
80 | favors composability over inheritance, which is more naturally suited to 3D
81 | scenes where objects are built of complex appearance, behavior, and
82 | functionality. In A-Frame, HTML attributes map to *components* which are
83 | composable modules that are plugged into ``s to attach appearance,
84 | behavior, and functionality.
85 |
--------------------------------------------------------------------------------
/dist/core.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | Object.defineProperty(exports, "__esModule", {
4 | value: true
5 | });
6 | exports.Scene = exports.Entity = exports._options = undefined;
7 |
8 | var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
9 |
10 | var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
11 |
12 | var _react = require('react');
13 |
14 | var _react2 = _interopRequireDefault(_react);
15 |
16 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
17 |
18 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
19 |
20 | function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
21 |
22 | function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
23 |
24 | var _nonEntityProps = ['children', 'events', 'primitive'];
25 | var _nonStandardProp = ['className', 'id', 'mixin'];
26 | var _checkNonEntityProp = function _checkNonEntityProp(propName) {
27 | return _nonEntityProps.indexOf(propName) === -1;
28 | };
29 | var _checkStandardProp = function _checkStandardProp(propName) {
30 | return _nonStandardProp.indexOf(propName) !== -1 || propName.indexOf('data-') === 0;
31 | };
32 |
33 | var _options = {
34 | // React needs this because React serializes.
35 | // Preact does not because Preact runs `.setAttribute` on its own.
36 | runSetAttributeOnUpdates: true
37 | };
38 | exports._options = _options;
39 |
40 | /**
41 | * Render .
42 | * Tell React to use A-Frame's .setAttribute() on the DOM element
43 | * for all prop initializations and updates.
44 | */
45 |
46 | var Entity = exports.Entity = function (_React$Component) {
47 | _inherits(Entity, _React$Component);
48 |
49 | function Entity() {
50 | _classCallCheck(this, Entity);
51 |
52 | /**
53 | * In response to initial `ref` callback.
54 | */
55 | var _this = _possibleConstructorReturn(this, (Entity.__proto__ || Object.getPrototypeOf(Entity)).call(this));
56 |
57 | _this.initEntity = function (el) {
58 | if (!el) {
59 | return;
60 | }
61 |
62 | var props = _this.props;
63 | // Store.
64 | _this.el = el;
65 |
66 | // Attach events.
67 | if (props.events) {
68 | Object.keys(props.events).forEach(function (eventName) {
69 | addEventListeners(el, eventName, props.events[eventName]);
70 | });
71 | }
72 |
73 | // Update entity.
74 | updateAttributes(el, null, props);
75 |
76 | // Allow ref.
77 | if (props._ref) {
78 | props._ref(el);
79 | }
80 | };
81 | return _this;
82 | }
83 |
84 | /**
85 | * Handle updates after the initial render.
86 | */
87 |
88 |
89 | _createClass(Entity, [{
90 | key: 'componentDidUpdate',
91 | value: function componentDidUpdate(prevProps, prevState) {
92 | var el = this.el;
93 | var props = this.props;
94 |
95 | // Update events.
96 | updateEventListeners(el, prevProps.events, props.events);
97 |
98 | // Update entity.
99 | if (_options.runSetAttributeOnUpdates) {
100 | updateAttributes(el, prevProps, props);
101 | }
102 | }
103 | }, {
104 | key: 'componentWillUnmount',
105 | value: function componentWillUnmount() {
106 | var el = this.el;
107 | var props = this.props;
108 |
109 | if (props.events) {
110 | // Remove events.
111 | Object.keys(props.events).forEach(function (eventName) {
112 | removeEventListeners(el, eventName, props.events[eventName]);
113 | });
114 | }
115 | }
116 |
117 | /**
118 | * Render A-Frame DOM with ref: https://facebook.github.io/react/docs/refs-and-the-dom.html
119 | */
120 |
121 | }, {
122 | key: 'render',
123 | value: function render() {
124 | var props = this.props;
125 | var elementName = this.primitiveName || props.primitive || 'a-entity';
126 |
127 | // Let through props that are OK to render initially.
128 | var reactProps = {};
129 | Object.keys(props).forEach(function (propName) {
130 | if (_checkStandardProp(propName)) reactProps[propName] = props[propName];
131 | });
132 |
133 | return _react2.default.createElement(elementName, _extends({ ref: this.initEntity }, reactProps), props.children);
134 | }
135 | }]);
136 |
137 | return Entity;
138 | }(_react2.default.Component);
139 |
140 | /**
141 | * Render .
142 | * extends from in A-Frame so we reuse .
143 | */
144 |
145 |
146 | var Scene = exports.Scene = function (_Entity) {
147 | _inherits(Scene, _Entity);
148 |
149 | function Scene(props) {
150 | _classCallCheck(this, Scene);
151 |
152 | var _this2 = _possibleConstructorReturn(this, (Scene.__proto__ || Object.getPrototypeOf(Scene)).call(this, props));
153 |
154 | _this2.primitiveName = 'a-scene';
155 | return _this2;
156 | }
157 |
158 | return Scene;
159 | }(Entity);
160 |
161 | /**
162 | * Handle diffing of previous and current attributes.
163 | *
164 | * @param {Element} el
165 | * @param {Object|null} prevProps - Previous props map.
166 | * @param {Object} props - Current props map.
167 | */
168 |
169 |
170 | function updateAttributes(el, prevProps, props) {
171 | if (!props || prevProps === props) {
172 | return;
173 | }
174 |
175 | // Set attributes.
176 | Object.keys(props).filter(_checkNonEntityProp).forEach(function (propName) {
177 | callSetAttribute(el, props[propName], propName);
178 | });
179 |
180 | // See if attributes were removed.
181 | if (prevProps) {
182 | Object.keys(prevProps).filter(_checkNonEntityProp).forEach(function (propName) {
183 | if (props[propName] === undefined) el.removeAttribute(propName);
184 | });
185 | }
186 | }
187 |
188 | /**
189 | * Call `.setAttribute()` on the `ref`,
190 | * passing prop data directly to A-Frame.
191 | *
192 | * @param {Element} el
193 | * @param {Object|null} props - props map.
194 | * @param {Object} propName
195 | */
196 | function callSetAttribute(el, propValue, propName) {
197 | if (!propValue || !(propValue.constructor === Function)) {
198 | if (propName === 'className') propName = 'class';
199 |
200 | el.setAttribute(propName, propValue);
201 | }
202 | }
203 |
204 | /**
205 | * Handle diffing of previous and current event maps.
206 | *
207 | * @param {Element} el
208 | * @param {Object} prevEvents - Previous event map.
209 | * @param {Object} events - Current event map.
210 | */
211 | function updateEventListeners(el, prevEvents, events) {
212 | if (!prevEvents || !events || prevEvents === events) {
213 | return;
214 | }
215 |
216 | Object.keys(events).forEach(function (eventName) {
217 | // Didn't change.
218 | if (prevEvents[eventName] === events[eventName]) return;
219 |
220 | // If changed, remove old previous event listeners.
221 | if (prevEvents[eventName]) removeEventListeners(el, eventName, prevEvents[eventName]);
222 |
223 | // Add new event listeners.
224 | addEventListeners(el, eventName, events[eventName]);
225 | });
226 |
227 | // See if event handlers were removed.
228 | Object.keys(prevEvents).forEach(function (eventName) {
229 | if (!events[eventName]) removeEventListeners(el, eventName, prevEvents[eventName]);
230 | });
231 | }
232 |
233 | /**
234 | * Register event handlers for an event name to ref.
235 | *
236 | * @param {Element} el - DOM element.
237 | * @param {string} eventName
238 | * @param {array|function} eventHandlers - Handler function or array of handler functions.
239 | */
240 | function addEventListeners(el, eventName, handlers) {
241 | if (!handlers) return;
242 |
243 | // Convert to array.
244 | if (handlers.constructor === Function) handlers = [handlers];
245 |
246 | // Register.
247 | handlers.forEach(function (handler) {
248 | el.addEventListener(eventName, handler);
249 | });
250 | }
251 |
252 | /**
253 | * Unregister event handlers for an event name to ref.
254 | *
255 | * @param {Element} el - DOM element.
256 | * @param {string} eventName
257 | * @param {array|function} eventHandlers - Handler function or array of handler functions.
258 | */
259 | function removeEventListeners(el, eventName, handlers) {
260 | if (!handlers) return;
261 |
262 | // Convert to array.
263 | if (handlers.constructor === Function) handlers = [handlers];
264 |
265 | // Unregister.
266 | handlers.forEach(function (handler) {
267 | el.removeEventListener(eventName, handler);
268 | });
269 | }
--------------------------------------------------------------------------------
/dist/index.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | Object.defineProperty(exports, "__esModule", {
4 | value: true
5 | });
6 |
7 | var _core = require('./core');
8 |
9 | Object.keys(_core).forEach(function (key) {
10 | if (key === "default" || key === "__esModule") return;
11 | Object.defineProperty(exports, key, {
12 | enumerable: true,
13 | get: function get() {
14 | return _core[key];
15 | }
16 | });
17 | });
18 |
19 | var _primitives = require('./primitives');
20 |
21 | Object.keys(_primitives).forEach(function (key) {
22 | if (key === "default" || key === "__esModule") return;
23 | Object.defineProperty(exports, key, {
24 | enumerable: true,
25 | get: function get() {
26 | return _primitives[key];
27 | }
28 | });
29 | });
--------------------------------------------------------------------------------
/dist/primitives.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | Object.defineProperty(exports, "__esModule", {
4 | value: true
5 | });
6 | exports.Videosphere = exports.Video = exports.Triangle = exports.Torus = exports.TorusKnot = exports.Text = exports.Tetrahedron = exports.Sphere = exports.Sound = exports.Sky = exports.Ring = exports.Plane = exports.Octahedron = exports.ObjModel = exports.Link = exports.Light = exports.Image = exports.Icosahedron = exports.gltfModel = exports.Dodecahedron = exports.Cylinder = exports.Curvedimage = exports.Cursor = exports.Cone = exports.ColladaModel = exports.Camera = exports.Box = exports.Animation = undefined;
7 |
8 | var _core = require('./core');
9 |
10 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
11 |
12 | function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
13 |
14 | function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
15 |
16 | /**
17 | * Render primitve tag as , eg: .
18 | * primitive tag extends from in A-Frame so we reuse .
19 | */
20 |
21 | var Animation = exports.Animation = function (_Entity) {
22 | _inherits(Animation, _Entity);
23 |
24 | function Animation(props) {
25 | _classCallCheck(this, Animation);
26 |
27 | var _this = _possibleConstructorReturn(this, (Animation.__proto__ || Object.getPrototypeOf(Animation)).call(this, props));
28 |
29 | _this.primitiveName = 'a-animation';
30 | return _this;
31 | }
32 |
33 | return Animation;
34 | }(_core.Entity);
35 |
36 | var Box = exports.Box = function (_Entity2) {
37 | _inherits(Box, _Entity2);
38 |
39 | function Box(props) {
40 | _classCallCheck(this, Box);
41 |
42 | var _this2 = _possibleConstructorReturn(this, (Box.__proto__ || Object.getPrototypeOf(Box)).call(this, props));
43 |
44 | _this2.primitiveName = 'a-box';
45 | return _this2;
46 | }
47 |
48 | return Box;
49 | }(_core.Entity);
50 |
51 | var Camera = exports.Camera = function (_Entity3) {
52 | _inherits(Camera, _Entity3);
53 |
54 | function Camera(props) {
55 | _classCallCheck(this, Camera);
56 |
57 | var _this3 = _possibleConstructorReturn(this, (Camera.__proto__ || Object.getPrototypeOf(Camera)).call(this, props));
58 |
59 | _this3.primitiveName = 'a-camera';
60 | return _this3;
61 | }
62 |
63 | return Camera;
64 | }(_core.Entity);
65 |
66 | var ColladaModel = exports.ColladaModel = function (_Entity4) {
67 | _inherits(ColladaModel, _Entity4);
68 |
69 | function ColladaModel(props) {
70 | _classCallCheck(this, ColladaModel);
71 |
72 | var _this4 = _possibleConstructorReturn(this, (ColladaModel.__proto__ || Object.getPrototypeOf(ColladaModel)).call(this, props));
73 |
74 | _this4.primitiveName = 'a-collada-model';
75 | return _this4;
76 | }
77 |
78 | return ColladaModel;
79 | }(_core.Entity);
80 |
81 | var Cone = exports.Cone = function (_Entity5) {
82 | _inherits(Cone, _Entity5);
83 |
84 | function Cone(props) {
85 | _classCallCheck(this, Cone);
86 |
87 | var _this5 = _possibleConstructorReturn(this, (Cone.__proto__ || Object.getPrototypeOf(Cone)).call(this, props));
88 |
89 | _this5.primitiveName = 'a-cone';
90 | return _this5;
91 | }
92 |
93 | return Cone;
94 | }(_core.Entity);
95 |
96 | var Cursor = exports.Cursor = function (_Entity6) {
97 | _inherits(Cursor, _Entity6);
98 |
99 | function Cursor(props) {
100 | _classCallCheck(this, Cursor);
101 |
102 | var _this6 = _possibleConstructorReturn(this, (Cursor.__proto__ || Object.getPrototypeOf(Cursor)).call(this, props));
103 |
104 | _this6.primitiveName = 'a-cursor';
105 | return _this6;
106 | }
107 |
108 | return Cursor;
109 | }(_core.Entity);
110 |
111 | var Curvedimage = exports.Curvedimage = function (_Entity7) {
112 | _inherits(Curvedimage, _Entity7);
113 |
114 | function Curvedimage(props) {
115 | _classCallCheck(this, Curvedimage);
116 |
117 | var _this7 = _possibleConstructorReturn(this, (Curvedimage.__proto__ || Object.getPrototypeOf(Curvedimage)).call(this, props));
118 |
119 | _this7.primitiveName = 'a-curvedimage';
120 | return _this7;
121 | }
122 |
123 | return Curvedimage;
124 | }(_core.Entity);
125 |
126 | var Cylinder = exports.Cylinder = function (_Entity8) {
127 | _inherits(Cylinder, _Entity8);
128 |
129 | function Cylinder(props) {
130 | _classCallCheck(this, Cylinder);
131 |
132 | var _this8 = _possibleConstructorReturn(this, (Cylinder.__proto__ || Object.getPrototypeOf(Cylinder)).call(this, props));
133 |
134 | _this8.primitiveName = 'a-cylinder';
135 | return _this8;
136 | }
137 |
138 | return Cylinder;
139 | }(_core.Entity);
140 |
141 | var Dodecahedron = exports.Dodecahedron = function (_Entity9) {
142 | _inherits(Dodecahedron, _Entity9);
143 |
144 | function Dodecahedron(props) {
145 | _classCallCheck(this, Dodecahedron);
146 |
147 | var _this9 = _possibleConstructorReturn(this, (Dodecahedron.__proto__ || Object.getPrototypeOf(Dodecahedron)).call(this, props));
148 |
149 | _this9.primitiveName = 'a-dodecahedron';
150 | return _this9;
151 | }
152 |
153 | return Dodecahedron;
154 | }(_core.Entity);
155 |
156 | var gltfModel = exports.gltfModel = function (_Entity10) {
157 | _inherits(gltfModel, _Entity10);
158 |
159 | function gltfModel(props) {
160 | _classCallCheck(this, gltfModel);
161 |
162 | var _this10 = _possibleConstructorReturn(this, (gltfModel.__proto__ || Object.getPrototypeOf(gltfModel)).call(this, props));
163 |
164 | _this10.primitiveName = 'a-gltf-model';
165 | return _this10;
166 | }
167 |
168 | return gltfModel;
169 | }(_core.Entity);
170 |
171 | var Icosahedron = exports.Icosahedron = function (_Entity11) {
172 | _inherits(Icosahedron, _Entity11);
173 |
174 | function Icosahedron(props) {
175 | _classCallCheck(this, Icosahedron);
176 |
177 | var _this11 = _possibleConstructorReturn(this, (Icosahedron.__proto__ || Object.getPrototypeOf(Icosahedron)).call(this, props));
178 |
179 | _this11.primitiveName = 'a-icosahedron';
180 | return _this11;
181 | }
182 |
183 | return Icosahedron;
184 | }(_core.Entity);
185 |
186 | var Image = exports.Image = function (_Entity12) {
187 | _inherits(Image, _Entity12);
188 |
189 | function Image(props) {
190 | _classCallCheck(this, Image);
191 |
192 | var _this12 = _possibleConstructorReturn(this, (Image.__proto__ || Object.getPrototypeOf(Image)).call(this, props));
193 |
194 | _this12.primitiveName = 'a-image';
195 | return _this12;
196 | }
197 |
198 | return Image;
199 | }(_core.Entity);
200 |
201 | var Light = exports.Light = function (_Entity13) {
202 | _inherits(Light, _Entity13);
203 |
204 | function Light(props) {
205 | _classCallCheck(this, Light);
206 |
207 | var _this13 = _possibleConstructorReturn(this, (Light.__proto__ || Object.getPrototypeOf(Light)).call(this, props));
208 |
209 | _this13.primitiveName = 'a-light';
210 | return _this13;
211 | }
212 |
213 | return Light;
214 | }(_core.Entity);
215 |
216 | var Link = exports.Link = function (_Entity14) {
217 | _inherits(Link, _Entity14);
218 |
219 | function Link(props) {
220 | _classCallCheck(this, Link);
221 |
222 | var _this14 = _possibleConstructorReturn(this, (Link.__proto__ || Object.getPrototypeOf(Link)).call(this, props));
223 |
224 | _this14.primitiveName = 'a-link';
225 | return _this14;
226 | }
227 |
228 | return Link;
229 | }(_core.Entity);
230 |
231 | var ObjModel = exports.ObjModel = function (_Entity15) {
232 | _inherits(ObjModel, _Entity15);
233 |
234 | function ObjModel(props) {
235 | _classCallCheck(this, ObjModel);
236 |
237 | var _this15 = _possibleConstructorReturn(this, (ObjModel.__proto__ || Object.getPrototypeOf(ObjModel)).call(this, props));
238 |
239 | _this15.primitiveName = 'a-obj-model';
240 | return _this15;
241 | }
242 |
243 | return ObjModel;
244 | }(_core.Entity);
245 |
246 | var Octahedron = exports.Octahedron = function (_Entity16) {
247 | _inherits(Octahedron, _Entity16);
248 |
249 | function Octahedron(props) {
250 | _classCallCheck(this, Octahedron);
251 |
252 | var _this16 = _possibleConstructorReturn(this, (Octahedron.__proto__ || Object.getPrototypeOf(Octahedron)).call(this, props));
253 |
254 | _this16.primitiveName = 'a-octahedron';
255 | return _this16;
256 | }
257 |
258 | return Octahedron;
259 | }(_core.Entity);
260 |
261 | var Plane = exports.Plane = function (_Entity17) {
262 | _inherits(Plane, _Entity17);
263 |
264 | function Plane(props) {
265 | _classCallCheck(this, Plane);
266 |
267 | var _this17 = _possibleConstructorReturn(this, (Plane.__proto__ || Object.getPrototypeOf(Plane)).call(this, props));
268 |
269 | _this17.primitiveName = 'a-plane';
270 | return _this17;
271 | }
272 |
273 | return Plane;
274 | }(_core.Entity);
275 |
276 | var Ring = exports.Ring = function (_Entity18) {
277 | _inherits(Ring, _Entity18);
278 |
279 | function Ring(props) {
280 | _classCallCheck(this, Ring);
281 |
282 | var _this18 = _possibleConstructorReturn(this, (Ring.__proto__ || Object.getPrototypeOf(Ring)).call(this, props));
283 |
284 | _this18.primitiveName = 'a-ring';
285 | return _this18;
286 | }
287 |
288 | return Ring;
289 | }(_core.Entity);
290 |
291 | var Sky = exports.Sky = function (_Entity19) {
292 | _inherits(Sky, _Entity19);
293 |
294 | function Sky(props) {
295 | _classCallCheck(this, Sky);
296 |
297 | var _this19 = _possibleConstructorReturn(this, (Sky.__proto__ || Object.getPrototypeOf(Sky)).call(this, props));
298 |
299 | _this19.primitiveName = 'a-sky';
300 | return _this19;
301 | }
302 |
303 | return Sky;
304 | }(_core.Entity);
305 |
306 | var Sound = exports.Sound = function (_Entity20) {
307 | _inherits(Sound, _Entity20);
308 |
309 | function Sound(props) {
310 | _classCallCheck(this, Sound);
311 |
312 | var _this20 = _possibleConstructorReturn(this, (Sound.__proto__ || Object.getPrototypeOf(Sound)).call(this, props));
313 |
314 | _this20.primitiveName = 'a-sound';
315 | return _this20;
316 | }
317 |
318 | return Sound;
319 | }(_core.Entity);
320 |
321 | var Sphere = exports.Sphere = function (_Entity21) {
322 | _inherits(Sphere, _Entity21);
323 |
324 | function Sphere(props) {
325 | _classCallCheck(this, Sphere);
326 |
327 | var _this21 = _possibleConstructorReturn(this, (Sphere.__proto__ || Object.getPrototypeOf(Sphere)).call(this, props));
328 |
329 | _this21.primitiveName = 'a-sphere';
330 | return _this21;
331 | }
332 |
333 | return Sphere;
334 | }(_core.Entity);
335 |
336 | var Tetrahedron = exports.Tetrahedron = function (_Entity22) {
337 | _inherits(Tetrahedron, _Entity22);
338 |
339 | function Tetrahedron(props) {
340 | _classCallCheck(this, Tetrahedron);
341 |
342 | var _this22 = _possibleConstructorReturn(this, (Tetrahedron.__proto__ || Object.getPrototypeOf(Tetrahedron)).call(this, props));
343 |
344 | _this22.primitiveName = 'a-tetrahedron';
345 | return _this22;
346 | }
347 |
348 | return Tetrahedron;
349 | }(_core.Entity);
350 |
351 | var Text = exports.Text = function (_Entity23) {
352 | _inherits(Text, _Entity23);
353 |
354 | function Text(props) {
355 | _classCallCheck(this, Text);
356 |
357 | var _this23 = _possibleConstructorReturn(this, (Text.__proto__ || Object.getPrototypeOf(Text)).call(this, props));
358 |
359 | _this23.primitiveName = 'a-text';
360 | return _this23;
361 | }
362 |
363 | return Text;
364 | }(_core.Entity);
365 |
366 | var TorusKnot = exports.TorusKnot = function (_Entity24) {
367 | _inherits(TorusKnot, _Entity24);
368 |
369 | function TorusKnot(props) {
370 | _classCallCheck(this, TorusKnot);
371 |
372 | var _this24 = _possibleConstructorReturn(this, (TorusKnot.__proto__ || Object.getPrototypeOf(TorusKnot)).call(this, props));
373 |
374 | _this24.primitiveName = 'a-torus-knot';
375 | return _this24;
376 | }
377 |
378 | return TorusKnot;
379 | }(_core.Entity);
380 |
381 | var Torus = exports.Torus = function (_Entity25) {
382 | _inherits(Torus, _Entity25);
383 |
384 | function Torus(props) {
385 | _classCallCheck(this, Torus);
386 |
387 | var _this25 = _possibleConstructorReturn(this, (Torus.__proto__ || Object.getPrototypeOf(Torus)).call(this, props));
388 |
389 | _this25.primitiveName = 'a-torus';
390 | return _this25;
391 | }
392 |
393 | return Torus;
394 | }(_core.Entity);
395 |
396 | var Triangle = exports.Triangle = function (_Entity26) {
397 | _inherits(Triangle, _Entity26);
398 |
399 | function Triangle(props) {
400 | _classCallCheck(this, Triangle);
401 |
402 | var _this26 = _possibleConstructorReturn(this, (Triangle.__proto__ || Object.getPrototypeOf(Triangle)).call(this, props));
403 |
404 | _this26.primitiveName = 'a-triangle';
405 | return _this26;
406 | }
407 |
408 | return Triangle;
409 | }(_core.Entity);
410 |
411 | var Video = exports.Video = function (_Entity27) {
412 | _inherits(Video, _Entity27);
413 |
414 | function Video(props) {
415 | _classCallCheck(this, Video);
416 |
417 | var _this27 = _possibleConstructorReturn(this, (Video.__proto__ || Object.getPrototypeOf(Video)).call(this, props));
418 |
419 | _this27.primitiveName = 'a-video';
420 | return _this27;
421 | }
422 |
423 | return Video;
424 | }(_core.Entity);
425 |
426 | var Videosphere = exports.Videosphere = function (_Entity28) {
427 | _inherits(Videosphere, _Entity28);
428 |
429 | function Videosphere(props) {
430 | _classCallCheck(this, Videosphere);
431 |
432 | var _this28 = _possibleConstructorReturn(this, (Videosphere.__proto__ || Object.getPrototypeOf(Videosphere)).call(this, props));
433 |
434 | _this28.primitiveName = 'a-videosphere';
435 | return _this28;
436 | }
437 |
438 | return Videosphere;
439 | }(_core.Entity);
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-aframe-ar",
3 | "version": "1.18.0",
4 | "description": "Build virtual and augmented reality experiences with React and A-Frame.",
5 | "main": "dist/index.js",
6 | "scripts": {
7 | "build": "babel src -d dist",
8 | "prepublish": "npm run build"
9 | },
10 | "devDependencies": {
11 | "aframe": "^0.5.0",
12 | "babel": "^6.3.13",
13 | "babel-cli": "^6.3.15",
14 | "babel-loader": "^6.4.1",
15 | "babel-preset-es2015": "^6.3.13",
16 | "babel-preset-react": "^6.3.13",
17 | "babel-preset-stage-0": "^6.3.13",
18 | "babel-register": "^6.16.3",
19 | "react": "^15.5.4",
20 | "react-dom": "^15.5.4",
21 | "react-test-renderer": "^15.5.4",
22 | "webpack": "^2.3.2"
23 | },
24 | "repository": {
25 | "type": "git",
26 | "url": "git+https://github.com/tnga/react-aframe.git"
27 | },
28 | "keywords": [
29 | "react",
30 | "vr",
31 | "ar",
32 | "a-frame",
33 | "aframe",
34 | "moz-vr",
35 | "react-vr",
36 | "react-component",
37 | "virtual-reality",
38 | "augmented-reality",
39 | "webvr"
40 | ],
41 | "author": "tnga ",
42 | "license": "MIT",
43 | "bugs": {
44 | "url": "https://github.com/tnga/react-aframe/issues"
45 | },
46 | "homepage": "https://github.com/tnga/react-aframe#readme"
47 | }
48 |
--------------------------------------------------------------------------------
/src/core.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | const _nonEntityProps = ['children', 'events', 'primitive']
4 | const _nonStandardProp = ['className', 'id', 'mixin']
5 | const _checkNonEntityProp = propName => _nonEntityProps.indexOf(propName) === -1
6 | const _checkStandardProp = propName => _nonStandardProp.indexOf(propName) !== -1 || propName.indexOf('data-') === 0
7 |
8 | const _options = {
9 | // React needs this because React serializes.
10 | // Preact does not because Preact runs `.setAttribute` on its own.
11 | runSetAttributeOnUpdates: true
12 | }
13 | export {_options}
14 |
15 | /**
16 | * Render .
17 | * Tell React to use A-Frame's .setAttribute() on the DOM element
18 | * for all prop initializations and updates.
19 | */
20 | export class Entity extends React.Component {
21 | constructor () {
22 | super()
23 |
24 | /**
25 | * In response to initial `ref` callback.
26 | */
27 | this.initEntity = (el) => {
28 | if (!el) { return }
29 |
30 | const props = this.props
31 | // Store.
32 | this.el = el
33 |
34 | // Attach events.
35 | if (props.events) {
36 | Object.keys(props.events).forEach(eventName => {
37 | addEventListeners(el, eventName, props.events[eventName])
38 | })
39 | }
40 |
41 | // Update entity.
42 | updateAttributes(el, null, props)
43 |
44 | // Allow ref.
45 | if (props._ref) { props._ref(el) }
46 | }
47 | }
48 |
49 | /**
50 | * Handle updates after the initial render.
51 | */
52 | componentDidUpdate (prevProps, prevState) {
53 | const el = this.el
54 | const props = this.props
55 |
56 | // Update events.
57 | updateEventListeners(el, prevProps.events, props.events)
58 |
59 | // Update entity.
60 | if (_options.runSetAttributeOnUpdates) {
61 | updateAttributes(el, prevProps, props)
62 | }
63 | }
64 |
65 | componentWillUnmount () {
66 | const el = this.el
67 | const props = this.props
68 |
69 | if (props.events) {
70 | // Remove events.
71 | Object.keys(props.events).forEach(eventName => {
72 | removeEventListeners(el, eventName, props.events[eventName])
73 | })
74 | }
75 | }
76 |
77 | /**
78 | * Render A-Frame DOM with ref: https://facebook.github.io/react/docs/refs-and-the-dom.html
79 | */
80 | render () {
81 | const props = this.props
82 | const elementName = this.primitiveName || props.primitive || 'a-entity'
83 |
84 | // Let through props that are OK to render initially.
85 | let reactProps = {}
86 | Object.keys(props).forEach(propName => {
87 | if (_checkStandardProp(propName)) reactProps[propName] = props[propName]
88 | })
89 |
90 | return React.createElement(
91 | elementName,
92 | { ref: this.initEntity, ...reactProps },
93 | props.children
94 | )
95 | }
96 | }
97 |
98 | /**
99 | * Render .
100 | * extends from in A-Frame so we reuse .
101 | */
102 | export class Scene extends Entity {
103 | constructor (props) {
104 | super(props)
105 | this.primitiveName = 'a-scene'
106 | }
107 | }
108 |
109 | /**
110 | * Handle diffing of previous and current attributes.
111 | *
112 | * @param {Element} el
113 | * @param {Object|null} prevProps - Previous props map.
114 | * @param {Object} props - Current props map.
115 | */
116 | function updateAttributes (el, prevProps, props) {
117 | if (!props || prevProps === props) { return }
118 |
119 | // Set attributes.
120 | Object.keys(props).filter(_checkNonEntityProp).forEach(propName => {
121 | callSetAttribute(el, props[propName], propName)
122 | })
123 |
124 | // See if attributes were removed.
125 | if (prevProps) {
126 | Object.keys(prevProps).filter(_checkNonEntityProp).forEach(propName => {
127 | if (props[propName] === undefined) el.removeAttribute(propName)
128 | })
129 | }
130 | }
131 |
132 | /**
133 | * Call `.setAttribute()` on the `ref`,
134 | * passing prop data directly to A-Frame.
135 | *
136 | * @param {Element} el
137 | * @param {Object|null} props - props map.
138 | * @param {Object} propName
139 | */
140 | function callSetAttribute (el, propValue, propName) {
141 | if (!propValue || !(propValue.constructor === Function)) {
142 | if (propName === 'className') propName = 'class'
143 |
144 | el.setAttribute(propName, propValue)
145 | }
146 | }
147 |
148 | /**
149 | * Handle diffing of previous and current event maps.
150 | *
151 | * @param {Element} el
152 | * @param {Object} prevEvents - Previous event map.
153 | * @param {Object} events - Current event map.
154 | */
155 | function updateEventListeners (el, prevEvents, events) {
156 | if (!prevEvents || !events || prevEvents === events) { return }
157 |
158 | Object.keys(events).forEach(eventName => {
159 | // Didn't change.
160 | if (prevEvents[eventName] === events[eventName]) return
161 |
162 | // If changed, remove old previous event listeners.
163 | if (prevEvents[eventName]) removeEventListeners(el, eventName, prevEvents[eventName])
164 |
165 | // Add new event listeners.
166 | addEventListeners(el, eventName, events[eventName])
167 | })
168 |
169 | // See if event handlers were removed.
170 | Object.keys(prevEvents).forEach(eventName => {
171 | if (!events[eventName]) removeEventListeners(el, eventName, prevEvents[eventName])
172 | })
173 | }
174 |
175 | /**
176 | * Register event handlers for an event name to ref.
177 | *
178 | * @param {Element} el - DOM element.
179 | * @param {string} eventName
180 | * @param {array|function} eventHandlers - Handler function or array of handler functions.
181 | */
182 | function addEventListeners (el, eventName, handlers) {
183 | if (!handlers) return
184 |
185 | // Convert to array.
186 | if (handlers.constructor === Function) handlers = [handlers]
187 |
188 | // Register.
189 | handlers.forEach(handler => { el.addEventListener(eventName, handler) })
190 | }
191 |
192 | /**
193 | * Unregister event handlers for an event name to ref.
194 | *
195 | * @param {Element} el - DOM element.
196 | * @param {string} eventName
197 | * @param {array|function} eventHandlers - Handler function or array of handler functions.
198 | */
199 | function removeEventListeners (el, eventName, handlers) {
200 | if (!handlers) return
201 |
202 | // Convert to array.
203 | if (handlers.constructor === Function) handlers = [handlers]
204 |
205 | // Unregister.
206 | handlers.forEach(handler => { el.removeEventListener(eventName, handler) })
207 | }
208 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | export * from './core'
2 | export * from './primitives'
3 |
--------------------------------------------------------------------------------
/src/primitives.js:
--------------------------------------------------------------------------------
1 | import {Entity} from './core'
2 |
3 | /**
4 | * Render primitve tag as , eg: .
5 | * primitive tag extends from in A-Frame so we reuse .
6 | */
7 |
8 | export class Animation extends Entity {
9 | constructor (props) {
10 | super(props)
11 | this.primitiveName = 'a-animation'
12 | }
13 | }
14 |
15 | export class Box extends Entity {
16 | constructor (props) {
17 | super(props)
18 | this.primitiveName = 'a-box'
19 | }
20 | }
21 |
22 | export class Camera extends Entity {
23 | constructor (props) {
24 | super(props)
25 | this.primitiveName = 'a-camera'
26 | }
27 | }
28 |
29 | export class ColladaModel extends Entity {
30 | constructor (props) {
31 | super(props)
32 | this.primitiveName = 'a-collada-model'
33 | }
34 | }
35 |
36 | export class Cone extends Entity {
37 | constructor (props) {
38 | super(props)
39 | this.primitiveName = 'a-cone'
40 | }
41 | }
42 |
43 | export class Cursor extends Entity {
44 | constructor (props) {
45 | super(props)
46 | this.primitiveName = 'a-cursor'
47 | }
48 | }
49 |
50 | export class Curvedimage extends Entity {
51 | constructor (props) {
52 | super(props)
53 | this.primitiveName = 'a-curvedimage'
54 | }
55 | }
56 |
57 | export class Cylinder extends Entity {
58 | constructor (props) {
59 | super(props)
60 | this.primitiveName = 'a-cylinder'
61 | }
62 | }
63 |
64 | export class Dodecahedron extends Entity {
65 | constructor (props) {
66 | super(props)
67 | this.primitiveName = 'a-dodecahedron'
68 | }
69 | }
70 |
71 | export class gltfModel extends Entity {
72 | constructor (props) {
73 | super(props)
74 | this.primitiveName = 'a-gltf-model'
75 | }
76 | }
77 |
78 | export class Icosahedron extends Entity {
79 | constructor (props) {
80 | super(props)
81 | this.primitiveName = 'a-icosahedron'
82 | }
83 | }
84 |
85 | export class Image extends Entity {
86 | constructor (props) {
87 | super(props)
88 | this.primitiveName = 'a-image'
89 | }
90 | }
91 |
92 | export class Light extends Entity {
93 | constructor (props) {
94 | super(props)
95 | this.primitiveName = 'a-light'
96 | }
97 | }
98 |
99 | export class Link extends Entity {
100 | constructor (props) {
101 | super(props)
102 | this.primitiveName = 'a-link'
103 | }
104 | }
105 |
106 | export class ObjModel extends Entity {
107 | constructor (props) {
108 | super(props)
109 | this.primitiveName = 'a-obj-model'
110 | }
111 | }
112 |
113 | export class Octahedron extends Entity {
114 | constructor (props) {
115 | super(props)
116 | this.primitiveName = 'a-octahedron'
117 | }
118 | }
119 |
120 | export class Plane extends Entity {
121 | constructor (props) {
122 | super(props)
123 | this.primitiveName = 'a-plane'
124 | }
125 | }
126 |
127 | export class Ring extends Entity {
128 | constructor (props) {
129 | super(props)
130 | this.primitiveName = 'a-ring'
131 | }
132 | }
133 |
134 | export class Sky extends Entity {
135 | constructor (props) {
136 | super(props)
137 | this.primitiveName = 'a-sky'
138 | }
139 | }
140 |
141 | export class Sound extends Entity {
142 | constructor (props) {
143 | super(props)
144 | this.primitiveName = 'a-sound'
145 | }
146 | }
147 |
148 | export class Sphere extends Entity {
149 | constructor (props) {
150 | super(props)
151 | this.primitiveName = 'a-sphere'
152 | }
153 | }
154 |
155 | export class Tetrahedron extends Entity {
156 | constructor (props) {
157 | super(props)
158 | this.primitiveName = 'a-tetrahedron'
159 | }
160 | }
161 |
162 | export class Text extends Entity {
163 | constructor (props) {
164 | super(props)
165 | this.primitiveName = 'a-text'
166 | }
167 | }
168 |
169 | export class TorusKnot extends Entity {
170 | constructor (props) {
171 | super(props)
172 | this.primitiveName = 'a-torus-knot'
173 | }
174 | }
175 |
176 | export class Torus extends Entity {
177 | constructor (props) {
178 | super(props)
179 | this.primitiveName = 'a-torus'
180 | }
181 | }
182 |
183 | export class Triangle extends Entity {
184 | constructor (props) {
185 | super(props)
186 | this.primitiveName = 'a-triangle'
187 | }
188 | }
189 |
190 | export class Video extends Entity {
191 | constructor (props) {
192 | super(props)
193 | this.primitiveName = 'a-video'
194 | }
195 | }
196 |
197 | export class Videosphere extends Entity {
198 | constructor (props) {
199 | super(props)
200 | this.primitiveName = 'a-videosphere'
201 | }
202 | }
203 |
--------------------------------------------------------------------------------