From already existing playgrounds i managed to get something up and running. But the buttons I added are always visible and its very confusing where its pointing to. Is there a way to attach the buttons to mesh and hide them when the mesh is not visible?
Here is the link to the playground (https://www.babylonjs-playground.com/#6Y3IDW#3) but its not working at the moment as I do not know how to upload the gltf file I am using. Sorry for that, also not able to attach documents as new user.
update:
I found a playground that exactly explains my problem: https://www.babylonjs-playground.com/debug.html#JUKXQD#5441. In this example, a button is created on the model when the mouse is clicked. However, the button is visible even after rotating the model to a different position.
My modified playground [https://www.babylonjs-playground.com/#6Y3IDW#6] also now works as I am using the same model now as in this example.
what I already tried is to use Button3D and also CreateForMesh with a Plane. Both does not work
Welcome to the community @Nshen !!! @carolhmj our Gui expert might be able to help you but you would need either 3d gui which is part of the scene of createForMesh on a plane in billboard mode to always face the camera. Could you share what does not work with your attempts using these techniques ?
When I use Button3D, I do see the button coming up and staying in the position it was created. However, when I try to link buttons to meshes using linkToTransformNode, either the button is not visible or there is only one button that comes up depending on the 3D model I use.
Its the same story if I use careateForMesh on a plane.
The model I am using has hierarchy on meshes, not sure if that’s the problem.
Basically, what I have is a GLTF model with hierarchy of meshes.
I want to attach a info buttons to some of the meshes in the hierarchy and when the model is moved the button should become transparent or not visible when the mesh it is attached to is blocked by another mesh.
In the playground I created (https://www.babylonjs-playground.com/#6Y3IDW#6) you can see that button is top of the skull but if I move the skull around the button just stays in the same position.
Hello and welcome!
So, when you use the Fullscreen UI, you are creating a layer that sits on top of the existing 3D scene, which means that things you draw there will always sit on front of the meshes. As Seb said, you could alternatively use the 3D GUI, or a plane GUI, so they live in the same space as the 3D scene. Here’s an example with the plane GUI: GUI Buttons | Babylon.js Playground (babylonjs-playground.com). You’ll see that if you rotate the skull, it will obstruct the button, since they’re all in the same space
Hi @carolhmj thank you so much for the reply. I did try using it in the past but worked only when there was one mesh. I saw your code and realized that the position x,y,z could be changed using the bounding box info of the mesh I am trying to link to. This insight helped to get the buttons as I wanted. Thank you so much for the help.
Now I am trying to position the button at a distance from the mesh and would like to add a line from the button to the mesh.
I tried to create this by setting the x1,y1 and x2,y2 co-ordinates of the line. I know its not correct as I am adding the line to the plane and the size of the plane is not big enough. But I am a little lost here. Could you please guide me here?
