dat.GUI for WebXR

Recently I was playing with Three-Mesh-UI: https://github.com/felixmariotto/three-mesh-ui which is a small library for building VR user interfaces. It’s really nice but missing things offered by HTML DOM dat.GUI (https://github.com/dataarts/dat.gui).

I have found that someone actually created dat.guiVR - https://github.com/dataarts/dat.guiVR
but 4 years old WebVR is deprecated. Anyone has seen equivalent of dat.gui for WebXR?

Hi,

I understand if you’re just looking for an available solution, but I’d be interested to know what I can do to add these features in three-mesh-ui.

In particular and unlike dat.gui, there is no browser API or three.js standard for the VR inputs necessary to mark a tickbox or move a cursor. Therefore it’s hard to offer a solution as simple as dat.gui without offering the input solution as well ( the pointer, or the hands input, or something else… and probably not what you need ).

2 Likes

Thanks, Felix. At the moment I am just playing with my custom 3D worlds in Oculus Quest 2 so there is no really specific need or project on the pipeline.

I suppose I can not run WebVR on my Oculus Quest 2. Below there is an animated gif.

I would love to have UI Slider to change the value or something like Colour Picker.
Also, possibilities to drag, minimize or even close UI would be fab.

Also, support/examples of how to use both controllers and more input data from additional buttons.

BTW. Seeking for solutions - I’ve just found very similar to Three-Mesh-UI - CanvasUI CanvasUI - It has text scrolling feature and simple keyboard input.

Ok, I will add tickbox and sliders to the lib, along with a plug-and-play controls module in the examples directory. I firmly think three-mesh-ui should not provide controls, but if it’s in the examples that’s fine.

That’s simingly similar but totally different internally, canvasUI creates dom elements and draws them on a texture displayed on a plane in your scene, whereas three-mesh-ui mimics the dom but add actual three.js meshes in the scene. First method is probably easier to use because it’s actual html/css, but will be pixelated because of the texture size limit, second method is limited compared to html/css, but more accurate.

btw: three-mesh-ui has a keyboard too.

2 Likes

That’a great. I am pretty much sure next month new owners/developers of Oculus Quest 2 will be seeking for more solutions like that. I really like Three-Mesh-UI keyboard but it could be a solution when you limit input to a single value and this a way you can interact with a specific property value. Or you could to provide a sort of AI chatbot interface: Question - Answer so you can talk to (Quest) a game characters, and so on. If you need more detailed explanations of my ideas I am happy to talk to you in a more direct message way. Anyways - Merry Christmas Felix :slight_smile:

Someone directed me to this UI library for A-FRAME - https://github.com/rdub80/aframe-gui - I have never been tested this but it has a slider component, loader, etc.

FairyGUI,GitHub - fairygui/FairyGUI-threejs: A GUI Editor & framework for Three.js

Let’s push up :slight_smile: