How to add Buttons as UI elements in Three.Js

user_11274732 0
Viewed 1484

So using the code from the given example webxr_ar_hittest , I am putting an object in my room. Now I would like to rotate the object by the push of a button.
I have found several information about how to add UI and HUD elements, but never in combination with any of the "webxr fullscreen" examples (i don't know how to call it).
So I would like to either have a DOM element that is showing over my rendered scene, or a button within the scene.

Is there any functionality of threejs that I haven't seen that could help me here?

webxr three.js augmented-reality javascript
1 Answers

There is a new (experimental) Web API that enables exactly this feature. It's called WebXR DOM Overlays Module.

According to the Chrome Status Platform, this feature should be enabled by default since Chrome 83.

One of the related live demos works fine on my Pixel:

https://klausw.github.io/three.js/examples/webvr_lorenzattractor.html

The most relevant code section is:

document.body.appendChild( ARButton.createButton( renderer, {
    optionalFeatures: [ 'dom-overlay', 'dom-overlay-for-handheld-ar' ],
    domOverlay: { root: document.body } } )
);

As you can see, the AR button is now created slightly different.

user_52508470
Related