HTML library for webxr

Hot off the presses!!

Hey all, due to frustration with existing ways of rendering html/css in webxr scenes, I put together a small library that let’s you render arbitrary html styled with css in an immersive webxr scene. Only has 1 small dependency (library to render dom elements to image…which I might extract as it does more than i need).
and right now there’s only a simple helper to render a simple buttons. May enhance further so feel free to hit me up with feature requests.

Currently has a helper for creating buttons use like this:

const button = new HtmlButton("Click", "click", scene); button.transform.postiion.y = 1; button.onPointerObservable.add((eventData) => { eventData.sourceEvent.type == "pointerup" && console.log('click'); }, -1, false, this, false);

Elements render on planes in the scene you pass in (I got tired of using utility layers, didn’t really need them…but I image you still could if you wanted to. Problem right now is that if you render in utility layer scene, you’ll lose pointer interactions.

2 Likes

Good Stuff!!! I am grateful you are looking into this!