search

supermedium / aframe-react

:atom: Build virtual reality experiences with A-Frame and React.
https://ngokevin.github.io/aframe-react-boilerplate/
MIT License
1.42k stars 151 forks source link

Allow setting properties that are not components for using primitive #51

Closed jsantell closed 7 years ago

jsantell commented 7 years ago

shorthand mappings. Fixes #50

Does not yet work. Looks like this causes entities to be created before the systems are initialized. Apply this patch to aframe-react-bootstrap and change a light to be <Entity primitive='a-light' type='ambient' color='#888' /> to test.

I get warnings of 'Uncaught TypeError: Cannot read property 'registerLight' of undefined', and same with geometry primitives -- the entities' init function is being called before the system's init function -- haven't dug deep enough into aframe internals to figure this one out yet :)

ngokevin commented 7 years ago

Thanks, I'll check it out later.

jsantell commented 7 years ago

Thanks! Some more info, with this patch:

<Entity primitive='a-light' type='ambient' /> works but adding the color property <Entity primitive='a-light' type='ambient' color='#888' /> causes the Light Component init() to be called before the Light System init() within aframe (which gets assigned to the Light Component's prototype.system during the System() constructor, which is called after the Component's init. I think there's some lazy loading of components going on that I don't yet understand.

jsantell commented 7 years ago

Turns out waiting for the scene to load is necessary, same as aframevr/aframe#1965 fixed the system loading issue!

I think #43 is a similar, possibly more robust fix, maybe taking into account the loading issue, but using AFRAME.primitives.primitives['a-box'].prototype.mappings for validation, although if there are other issues with that, the primitive mapping validations can be handled in a follow up, but atleast this works if manually handling loading on your own

jsantell commented 7 years ago

With this patch, ran into another issue:

<Cursor fuse='true' fuseTimeout='100' />

React does not support kebab case arbitrary props (outside of data- and aria-), so maybe adding these from the schema, like in #43, is the way to go to use these shorthand mappings.

ngokevin commented 7 years ago

I've rewritten aframe-react to run data through .setAttribute so data flow should much simpler and less buggy. Now works.