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.


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
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.

EDIT ! WebXR has evolved since this post, and new and potentially better solutions exist .

keyboard_github big-text-reddit


That’s awesome. Sounds super useful.

1 Like

I render HTML / CSS to a texture, then pull that into VR. It takes about 5 lines of code. I added a little more so I could link images live.
Please let me know what you think. I’m fishing around to gauge developer interest in including something like this in three.js.

Example usage here

Code here (very short + simple):

I’ll be reformatting it per community feedback, or I’ll just drop this if existing solutions have rendered the issue moot. (This thread is a year old)

It’s what I’ve been using, so I thought it might be helpful to some one. Feedback appreciated.

1 Like

I’m super late to the party, but this is great, Thanks!

1 Like

Well, with regard to text / document, I’ve chosen the hard way…

I have invested a lot of effort and time to make my own document format, aiming flexibility and compactness, as well as its implementation (3D document word-processor) in the 3D virtual (web) world, aiming usability.

It supports most text styling, mark-up and word-processing features, including live auto-flow with page/document/panel resizing, enhanced 1st letter, vertical text, multimedia, auto-surrounded by text etc.

What is not shown here is the editor (unfinished), the document’s special styling and effects (for the text and the background/panel) as well as some other special features.

Still in development (most part implemented, although it’s in pause for a few months now until my current project completes), and the end version will also be able to transform to a physical-like book-style, with natural page-flipping.

P.S. The font shown is also one of the few I have created, except the first letter which is Times New Roman.

This just demonstrates the live-resizing and auto-flow of a randomly styled text (for testing) by the custom 3D-document word-processor, during editing, it’s only a part of the editing process.