hello everyone , can i display button on babylon canvas without GUI ?
ps : i have a problem with babylon.GUI version and my angular project version
Hi again. Use a plane as button, with dynamicTexture as button label-text, and use actionManager for pointer trigger. That’ll work.
3 Likes
thanks WIngnut , hope your good and safe
Thx, I hope the same for you, my friend.
I thought I would make a little example button… with help from other playground makers…
https://www.babylonjs-playground.com/#1282WV#36
DT text is VERY difficult to position, and difficult to change later… but that one works ok, sort-of. When clicked… watch border color and console report.
It is currently using onPickTrigger but you could use onPickDownTrigger and/or onPickUpTrigger and other triggers, too.
IF you register onPointerOver and/or onPointerOut (users often like “button-hover” stuff), perhaps use those actions to ONLY change the size/color of the white border plane. It is difficult to change things upon the dynamicTexture with over/out, or ever.
Generally speaking, after making a dynamicTexture… DO NOT try to modify it, unless you completely REPLACE it. Wise advice for you, I believe. 
If/when you wish to make MORE buttons with different text… you will need to adjust many things.
Each button of this type… needs lots of work to make. Each button PLANE also needs a unique name, too, so its executeCodeAction (its click-event handler) knows WHICH button was clicked.
Perhaps you can build a universal makeButton(lots_of_params) function that makes many perfect buttons… if you need many. Hard work. This is why many people dislike using dynamicTextures. You have to be an expert in context2d specification, which also sucks (to learn).
Reading it… can cause brain tumors. 
Good luck. As a reminder to others… @Ilyes_ELAYEB cannot use GUI 2d because of compat issues with his/her AngularJS version… used in his/her project.
You may have one other option… for buttons. Perhaps use HTML buttons… that have their CSS set to position: absolute and then use their CSS top and left properties… to put the buttons in the proper place. IF your scene allows mousewheel zooming or mouse-drag mesh rotating… HTML buttons can be big problems.
Also, I hear that most VR headgear/goggles have troubles with HTML buttons, but I have not tested.
1 Like