Updated VR Demo to include UI components and draggable/resizable windows
Controls include label, button, icon button, radio button, check box, toggle slider, number, text, drop-down list.
Input methods include color picker, keyboard, number pad and list.
Panels contain controls and can be dragged and resize. They can also be collapsed to save resources and expanded when needed.
In browser view, use touch and mouse to interact with controls. Dragging is only along x and y axes.
In VR mode, use pointer to interact with controls. To drag, highlight title and pull trigger to grab. Click button to expand and collapse.
Close button is not implemented since there’s no way to reopen, but you get the idea.
This is a foundation for other flat UI controls.
The major missing piece is relative repositioning (reflow). Right now, if a controls width or height changes, the other controls have to be manually repositioned. Without this, expansion panels will be difficult to implement.
Is there any interest in a native threejs library?
Is there any interest in having an extruded version of these controls?
It evolved a lot since making this post. Mostly from building real applications with it.
The original was built using Angular Three library. This reduced the amount of code to write. However, it also had some limitations which made the code more complex. It also hard-coded the shape of each UI control. Since then, the Angular Three library has been archived. The author started working on a new version but appears to have abandoned it too.
I learned a great deal when building this. I has several limitations. There are a few things I’d do differently for a native threejs version. I’ve been tinkering with a native threejs version which overcomes some of these limitations, but its slow going.
Might be better starting with an exact port of the original. Also, a native threejs version is more likely to get community support too. Maybe even Angular and React wrappers too.
Is this something you’d be willing to help with? It will take several months to do by myself
Before I start this, do you have any feedback from using the current version? Do you have a specific use cases to help with setting milestones?
The demo looks incredible! Thank you for sharing your work. I started a few VR “pet” projects a couple of years ago that I plan to resume working on “any day now”, and it looks like these GUI tools will be an invaluable resource whenever that day comes. I’ll plan on providing feedback then, as well as any code contributions if I end up needing to revise anything. Cheers.
Just wanted to share work in progress of native threejs GUI widgets and draggable window. Created equivalent to lil-gui to prove controls are capable enough. Widgets so far include
label
button
radio and group
checkbox
slider bar
expander
text entry
number entry
color picker
customizable list
select drop down list
material icon button
draggable window which supports resizing and scaling
Includes automatic horizontal and vertical layout (with padding)
Flat and box versions of all widgets
Supports customizable renderer and theme using shared materials
@anidivr - we are about to try out some VR having just launched ZIM TextureActive which brings the 2D ZIM JavaScript Canvas Framework into three.js. Did you use A-frame? Or have an guidance? We just posted in the Resources ZIM TextureActives for Interactive Textures and saw your post here - looks very professional.
Thanks. The original work was implemented as angular-three components. All UI controls render to native threejs geometry. Thought it was an interesting alternative to using HTML canvas. There’s pros and cons.
More recently, I started migrating this to a pure threejs/Javascript implementation (no Angular). This version supports clipping planes so that the geometry within any window can be clipped and scrolled. Clipping works great when looking along -z axis, but not when window is oriented in another plane. Clipping should be optional, so I might release with this limitation for now.
I’m trying to make it so the windows can be customized to look futuristic (like you see in the movies). Right now, I can do this. The window scales and resizes correctly and the bling on the side animates)
