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…

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.

Or maybe something like this? [image] Youtube videos on a mesh (port of CSS3DRenderer.js) Demos and projects We built this Youtube video player to use in our virtual world Cryptovoxels. There are a few people asking about it in these forums so we made a playground so anyo…

@ywlee we are glad to help you and welcome to the BabylonJS community! Yes you can: [image] 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. [image] [image] And …

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 …

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…

Can I render dom elements in babylonjs?

Questions

tanpopo September 1, 2021, 5:48am 5

Or maybe something like this?

Topic		Replies	Views
Rendering HTML in a Babylon scene? Questions	5	3853	October 4, 2021
HTML/DOM GUI instead of BABYLON.GUI Questions	21	8906	June 15, 2022
Track HTML Elements to Canvas Questions	3	481	January 30, 2022
HTML Content in BabylonJS Scenes Demos and projects	83	3830	September 6, 2025
Easy way to render HTML inside of Babylon Scene Questions	5	1483	March 23, 2022

Can I render dom elements in babylonjs?

Related topics