Create Toggle Button

Hi All,

I need to create a toggle button on the canvas in the Babylon scene.
ui
Something like this.
Can I use CSS style for this or there is any other way to create a toggle button on the canvas?

Yes you can use HTML and CSS with no problem (unless you want to support WebXR then you will have to use Babylon GUI)

1 Like

Can plz refer some examples where html & css is used in creating world space canvas in babylon?

@Deltakosh
Plz share the reference examples.

Here’s a simple example Babylon.js Playground

If you search the playground you’ll likely find more.

2 Likes

I need world space UI. Like a button is attatched to a mesh.

Did you search the playground?

It sounds like you’d be better off using Babylon GUI instead of HTML as those elements can be attached to meshes. See Babylon GUI Demo

I am using Babylon GUI but it has many styling restrictions.
That is why I asked if I can use CSS for styling

There is HTML example in Documentation - GUI | Babylon.js Documentation

PG example - Babylon.js Playground
Website implementation - https://babylonpress.org/

I want World space Ui. ex: button is attached to the mesh

You’d need to do something like this PG to move an overlaid HTML element in relation to a mesh.

Hi. There all in one pg answer all your questions https://www.babylonjs-playground.com/#5MJ1X9#13
And second example with attached to mesh gui elements https://playground.babylonjs.com/#9X039W#14
But be aware. attached gui drop fps if many elements attached to many meshes https://playground.babylonjs.com/#9X039W#15

3 Likes