aframe-react | : atom : Build virtual reality experiences with A-Frame | Frontend Framework library

 by   supermedium JavaScript Version: v4.0.3 License: MIT

kandi X-RAY | aframe-react Summary

kandi X-RAY | aframe-react Summary

aframe-react is a JavaScript library typically used in User Interface, Frontend Framework, React applications. aframe-react has no bugs, it has no vulnerabilities, it has a Permissive License and it has medium support. You can download it from GitHub.

I recommend using vanilla A-Frame and aframe-state-component with static templating over aframe-react. React wastes a lot of cycles and incurs a lot of memory garbage. aframe-react is often abused where it is too easy to place 3D/real-time logic at the React layer, causing poor performance (e.g., doing React renders on ticks). aframe-react applications frequently ignore the prescribed ECS framework of A-Frame. Internally, React does tons of computation to compute what changed, and flushes it to the entire application. It is apparent React ecosystem does not care much about memory as most examples allocate functions and objects in the render method, and where immutables are popular. With only ~10ms per frame to do all computation, there is little room for React's massive system.

            kandi-support Support

              aframe-react has a medium active ecosystem.
              It has 1380 star(s) with 164 fork(s). There are 48 watchers for this library.
              It had no major release in the last 12 months.
              There are 34 open issues and 59 have been closed. On average issues are closed in 134 days. There are 7 open pull requests and 0 closed requests.
              It has a neutral sentiment in the developer community.
              The latest version of aframe-react is v4.0.3

            kandi-Quality Quality

              aframe-react has 0 bugs and 0 code smells.

            kandi-Security Security

              aframe-react has no vulnerabilities reported, and its dependent libraries have no vulnerabilities reported.
              aframe-react code analysis shows 0 unresolved vulnerabilities.
              There are 0 security hotspots that need review.

            kandi-License License

              aframe-react is licensed under the MIT License. This license is Permissive.
              Permissive licenses have the least restrictions, and you can use them in most projects.

            kandi-Reuse Reuse

              aframe-react releases are available to install and integrate.
              Installation instructions, examples and code snippets are available.

            Top functions reviewed by kandi - BETA

            kandi has reviewed aframe-react and discovered the below as its top functions. This is intended to give you an instant insight into aframe-react implemented functionality, and help decide if they suit your requirements.
            • Initialize Entity instance .
            • update event listeners
            • Apply attributes to the props object .
            • Adds event handlers .
            • Removes event listeners .
            • Set the className of an element .
            • Create a new Scene
            • Defines properties on an Object .
            • interpolate default module
            • Inherit one class into another .
            Get all kandi verified functions for this library.

            aframe-react Key Features

            No Key Features are available at this moment for aframe-react.

            aframe-react Examples and Code Snippets

            No Code Snippets are available at this moment for aframe-react.

            Community Discussions


            Aframe-react how to register and use custom component?
            Asked 2018-Dec-09 at 06:07

            I would like to register a Aframe-component in Aframe-react; i usually do it AFRAME.registerComponent('leftcamera',{...}); and then use it in Html straight away, but cannot really understand how to do it in proper react way.

            The app is bootstrapped with create-react-app, and reading around i found maybe is about webpack bundle.js not accessible without eject.

            in Chrome-inspector:



            Answered 2018-Dec-09 at 06:07

            thanks for the detailed code and Glitch!



            How to connect a React app with aframe VR app
            Asked 2018-May-04 at 11:07

            I have a React app where a user is making configurations for the VR part of the app which is built with a-frame.

            After the selection and configuration is done in the React part, the a-frame VR part should be shown with the specific configuration.

            What is the best way to connect those two parts?

            I already know about aframe-react, but I'm not sure if it reduces the performance of the app a lot.



            Answered 2018-Mar-24 at 17:53

            There's A-Frame React, yeah.

            Or you could use raw DOM / A-Frame and pass and pass all data as strings, which is fine, just like HTML.

            The performance is an issue if you route all the logic through React, if you can strictly separate the React layer and the A-Frame layer, should be good.



            Aframe - events for dragging
            Asked 2018-Feb-06 at 09:39

            I'm using Aframe-React and the Aframe Click Drag component.

            This is working well, and I'm now trying to work out how to add events to the entity so I can update these calculations when one of my entities is dragged (the lines are a elbow connection between them - I want to update these as the item is dragged)

            The entities are given the Click Drag attributes later on, however I'm assuming its best to add the listener here.

            The library has an example for events


            And registers the events as such



            Answered 2018-Feb-06 at 09:39

            As far as i see, Kevin's event-set component sets the target / self attributes (line 121 of his non-minified dist), which means it can't call methods ( except for update, which is called whenever an attribute is changed)

            I'd make my own listener, either in my component, or just a listener -> caller



            aframe with react- no image coming on the screen
            Asked 2017-Aug-01 at 18:11

            I am trying to implement panorama feature in my code using A-frame and react.

            This is my code in react. In my code, after the loadOne function gets called, only one image appears on the screen if I just call the

            But with , nothing is coming on the screen.



            Answered 2017-Aug-01 at 16:57

            It's important to understand that A-Frame doesn't work with React out of the box.

            Whenever you include a tag like in your JSX, React will expect it to match to an existing component. That's because all of the tags in JSX map to components (either built-in ones like or custom ones).

            So what you'll need to do is use a lib that wraps React component logic over these new vr tags like aframe-react



            Testing custom A-Frame events when using React and aframe-react
            Asked 2017-Apr-17 at 18:15

            In MathworldVR project ( I'm using aframe-super-hands-component which fires 'hover-start' and 'hover-end' events when user hits/leaves the entity with VR hand controllers. Everything is working as expected.

            But how can I call these events from within tests? I cannot simulate those with TestUtils from react-dom/test-utils when A-Frame entity is rendered with Enzyme's shallow, react-test-renderer's renderer or Jest, since it only can simulate traditional React events.

            CalcButton component code:



            Answered 2017-Apr-17 at 18:15

            For actual browser testing, I would use Karma Test Runner. Check out aframe-react's test harness: There are React tests which test React rendering and React-level stuff, and browser tests which test full integration including events.


            Community Discussions, Code Snippets contain sources that include Stack Exchange Network


            No vulnerabilities reported

            Install aframe-react

            Install with npm or yarn.


            For any new features, suggestions and bugs create an issue on GitHub. If you have any questions check and ask questions on community page Stack Overflow .
            Find more information at:

            Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from over 650 million Knowledge Items

            Find more libraries
          • HTTPS


          • CLI

            gh repo clone supermedium/aframe-react

          • sshUrl


          • Stay Updated

            Subscribe to our newsletter for trending solutions and developer bootcamps

            Agree to Sign up and Terms & Conditions

            Share this Page

            share link