How do you make VR user interface?

Hi folks,

What do you use to make user interfaces in VR ?
I’ve tried dat.guiVR, it is good for testing, but I would like to make similar things with paragraphs, styling, maybe custom buttons etc…

So far (in not-VR experiences I mean) I made my UIs with html/css, so now I’m lost. Should I make text shapes from JSON fonts ? It seems a bit tedious for styling compared to html/css…

I’ve seen some nice panels in Mozilla’s “hello webXR” demo, but I can’t find how they did it in their code.

1 Like

Related article from Mozilla:

1 Like

Well, you can’t use HTML/CSS and scree-space UIs in general when doing VR. The idea is to represent UI elements as real 3D objects and position them in the 3D world. Sometimes they have a fixed position, sometimes they are relative to some other object like the controller.

In any event, representing flat UIs with THREE.PlaneBufferGeometry and THREE.MeshBasicMaterial and then using ray-intersection test for interaction is something you can start with.

2 Likes

OK thank you, that’s what I was afraid to learn… It will be tedious to make text panels, but if it’s the only solution…

I have the same question. I need to make a type of slideshow. just like the https://facebook.github.io/react-360/docs/example-basicapptemplate.html
I am trying o use CSS3DRenderer. While out of WebXR mode , its works, but i see a dark plane in VR mode. There is a easy way to make CSS2D or 3D work in Vr mode ?

Since my last post, I’ve been working on a library to handle this. Feel free to post issues on Github for feature requests or help using the lib.

keyboard_github big-text-reddit

1 Like

That’s awesome. Sounds super useful.

1 Like