Hi everyone! I’m new to babylonjs
I would like to know whether I can render dom elements for example, a div with some paragraphs , in babylonjs ?
Thanks for reading my newbie question!!
Hello!
You want to render a dom element on a 3D object or just display it above the BabylonJS canvas? I think, you are after the latter. You can use your BabylonJS canvas in a background layer and render the dom elements above. One solution is set the canvas style like this: position: absolute, top:0, left:0, and set right, bottom or width, height to the desired size of the canvas. Don’t forget about the z-index property. If you are still unsure how to do it, just let me know, I can create a little example for you.
2 Likes
Thanks so much for your reply and sorry I didn’t make my question clear
But in this way my dom element will always in front of the scene
Is there any way to make it truely inside the canvas?
For example I can hide the div behind a sphere in the canvas?
To make billboards? I think using GUI is a better choice.
1 Like
Or maybe something like this?
@ywlee we are glad to help you and welcome to the BabylonJS community!
Yes you can:
Those are two h1 elements mixed with the BabylonJS content.
You have to set the z-indexes accordingly. The div must be positioned absolute or fixed to create the layering effect.
And don’t forget to set the alpha in your clear color to zero:
Hope this helps!
R.
3 Likes
There is also the possibility of using DynamicTexture with the drawText method, but using the Babylon GUI would probably be easier in a simple case.
Can you provide more details? Its not clear if you want the DOM elements to display flat, like a web-page in the background, or if you want the DOM elements to be manipulated like a 3D object
Thank you guys for all the replies, I have read them all!
I would like to do some math animation in 3d, I need to render formulas (using KaTeX), and the numbers in formulas might change while the formula is following some moving object in the scene
Actually I have tried rasterized the formulas to canvas then use it as texture, but that was a disaster because converting dom element to texture takes way too much time
I think what @tanpopo mentioned is the thing I’m looking for, I’ll do some research
So the rumor is true, babylonjs has a very supportive community…thank you guys again!!(especially @roland, providing such good example, I’ll use it in my project too!)
2 Likes
You’re welcome dude!
One very important thing here to note. DOM elements are not rendered on VR/AR.
I always try to use the simplest solution. If I can make it in plain HTML and JS I will not opt for a framework or a custom solution. If it gets bigger and you have a complicated DOM tree it’s handy to use some GUI framework. You can use any of the big players available nowadays whether it’s React, Angular, Vue, Svelte, etc.
The BJS GUI is a bit verbose, but after creating some helpers classes/methods you can do very cool things with it very easily.
When mixing HTML layers and making changes to the DOM you have to pay attention to browser reflow and repaint events. Especially CSS animations can degrade performance if not used wisely.
Check this out:
Happy coding!
4 Likes