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.
Related article from Mozilla:
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 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.
EDIT ! WebXR has evolved since this post, and new and potentially better solutions exist .
That’s awesome. Sounds super useful.
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 https://raw.githack.com/0X-JonMichaelGalindo/three.js/dev/examples/webgl_html_texture.html.
Code here (very short + simple):
https://github.com/0X-JonMichaelGalindo/three.js/blob/46c6e1990de4e7d59450d43d15dbe9127a0f9ae1/src/textures/HTMLTexture.js
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.
I’m super late to the party, but this is great, Thanks!
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.
