aframe-react | : atom : Build virtual reality experiences with A-Frame | Frontend Framework library
kandi X-RAY | aframe-react Summary
kandi X-RAY | aframe-react Summary
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.
Support
Quality
Security
License
Reuse
Top functions reviewed by kandi - BETA
- 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 .
aframe-react Key Features
aframe-react Examples and Code Snippets
Community Discussions
Trending Discussions on aframe-react
QUESTION
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:
...ANSWER
Answered 2018-Dec-09 at 06:07thanks for the detailed code and Glitch!
QUESTION
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.
ANSWER
Answered 2018-Mar-24 at 17:53There'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.
QUESTION
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
https://github.com/jesstelford/aframe-click-drag-component/blob/master/examples/events/index.html
And registers the events as such
...ANSWER
Answered 2018-Feb-06 at 09:39As 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
QUESTION
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.
ANSWER
Answered 2017-Aug-01 at 16:57It'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
QUESTION
In MathworldVR project (https://github.com/michaltakac/mathworldvr) 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:
...ANSWER
Answered 2017-Apr-17 at 18:15For actual browser testing, I would use Karma Test Runner. Check out aframe-react's test harness: https://github.com/aframevr/aframe-react/tree/master/tests/browser. 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
Vulnerabilities
No vulnerabilities reported
Install aframe-react
Support
Reuse Trending Solutions
Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from over 650 million Knowledge Items
Find more librariesStay Updated
Subscribe to our newsletter for trending solutions and developer bootcamps
Share this Page
