1

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.

Improve this question
3
  • Please edit the question to limit it to a specific problem with enough detail to identify an adequate answer. Commented Dec 2, 2022 at 19:18
  • You say react + aframe didn't work. What was the issue? As long as the scene is in a separate component and you don't re-render it you shouldnt fall into any traps Commented Dec 4, 2022 at 0:50
  • Well, I added the <a-scene> that I got to work in a simple previous html and it did not render. Then, I added the one scene in this example link , and yes, it rendered. But, I need to use device's camera, so I changed it to do so, but it did not come to render it. The code I changed is this: <a-scene id="mainscene" embedded arjs='sourceType: webcam;' renderer='antialias: true; alpha: true; precision: medium;'> Thanks. Commented Dec 5, 2022 at 9:07

1 Answer 1

Reset to default
1

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Thanks for the example. Still, I think I am gonna make the functionalities myself, since it is not much work and they aren't that many.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.