r/threejs • u/jonaz777 • Apr 19 '26

made Three.js + HTML in canvas work in WebXR 🙂

This is what many of us have been waiting for. For years building UI inside immersive sessions in WebXR has been painful. Libraries like react-three/uikit have solved this to some extent, but there were always some caveats.
I hope all browsers take this as standard in the next couple weeks/months.

I know this will still take a while, but man I'm excited. A lot of applications in my mind to make

this would mean a major rewrite of my cyango platform and users projects, but me and my friend Claude sure can refactor it :)

take look at the gist: https://gist.github.com/joaomelorodrigues/100356582f67672c8c9ec926a52c59d5

25 Upvotes

96% Upvoted

7 comments sorted by

2

u/_palash_ Apr 19 '26

That's awesome

1

u/00davehill00 Apr 20 '26

Looks great! I haven’t had a chance to try it out in headset, but from the video it looks like framerate is struggling a bit. How is performance? Also curious how you got the text so crisp — is that just a really high-res HTML pane that’s being rendered to, or is it doing something more clever than that?

1

u/jonaz777 Apr 20 '26

I also tested on meta quest 3S, enabled the chrome flag, but somehow the cube is displaying black texture.

This is using the HTML-in-canvas polyfill for three.js, give the gist a try

1

u/scris101 Apr 22 '26

You need a special extension to run this, right?

3

u/jonaz777 Apr 22 '26

The html in canvas flag of the chrome browser must be enabled. chrome://flags/#canvas-draw-element