solved Button3D content

[brianzinn]

I have been trying to get the Button3D (new in 3.3) to work like the 2D button, but it looks like there are effects from Material or Outline.  I have been unable to disable them - maybe it's part of the utility layer?
https://www.babylonjs-playground.com/#7AR2GJ

I would like a button with the image showing clearly like this 2D one:
https://www.babylonjs-playground.com/#7AR2GJ#1

I'd also like to hide the red coloring.

[dbawel]

Why not use css, HTML, and vanilla javascript? Then it's simple. I never try do do everything through the WebGL framework. It's all HTML and javascript anyway. Just my opinion.

DB

[brianzinn]

I'd love to see the CSS transforms for this
https://www.babylonjs-playground.com/#HB4C01#8

The playgrounds are oversimplified to show the minimum code to reproduce, not necessarily what we are trying to build.  I am working on VR experiences, which are only available on the canvas!

[Sebavan]

This comes down from from the fact that Button3d are mush more like meshes subject to lights and using Standard Materials.

You can then modify and change the material as it best fit to you: https://www.babylonjs-playground.com/#7AR2GJ#2

You can also easily overwrite the default behaviors for hover like this: https://www.babylonjs-playground.com/#7AR2GJ#3

And finaly you can control the scale ratio of your 2d content like this: https://www.babylonjs-playground.com/#7AR2GJ#4

My guess is 3d gui is meant to be much more versatile to fit in 3d space hence the lower level of features.

Hope that helps.

 

[brianzinn]

That works perfectly @Sebavan - I could have sworn that I had tried that already and it had no effect.. doh.

[dbawel]

I know this is marked as solved, but a div class is a div class with multiple JavaScript events you can control. However, if you want to completely rely on the WebGL framework, then more power to you...

DB