Search code examples
javascriptaugmented-realityaframe

Making interfaces in A-frame


I just started with Javascript 3 days ago. The thing is I have to develop an AR app hosted in web, so I went for A-frame. So far so good. Problem is our client wants to add some complex UI, similar to a classic 2D UI from a videogame.

So, what should I do about it? I tried React but I have read in forums React+A-Frame is a bad idea, and it doesn't render at all. What do you think is the best approach?

Currently, I am trying to hard code it, although I don't have enough understanding of JavaScript to even know if that's a good idea.

There is a nasty deadline in 2 months, in which I guess I'll have to learn JS and develop this thing.

I tried React + A-Frame, but didn't made it to work. I just want to make an interface for a game in A-Frame

Thanks for your replies.


Solution

  • You can use HTML superimposed on the screen, as an overlay and then wire in some event listeners to dispatch to your a-frame scene.

    Drop in your a-frame markup, and then separately add a <div id="ui"></div> which fills all the screen on top of the 3d/ar canvas, then you can add normal HTML such as buttons, text, etc.

    Here's an example you can take inspiration from just to have a visual idea of how it works but please do not use it as a working base as it is not a-frame, it's quite outdated now, it's a lousy integration between react and threejs well before react-three-fiber was even a thing and definitely not friendly for someone starting to code with javascript.