Positioning Gui controls with mesh

Hello,

I see in the GUI example that I can have text/labels follow a mesh but can’t quite get that working.

I have an example here:

When I rotate the mesh the text doesn’t track that edge of the mesh. I tried using the moveToVector3 method too but that didn’t seem to work as I expected.

Here’s the type of text I’m trying to display on a mesh:

1 Like

When you say you want to display on the mesh, do you mean in 3D (along the mesh)? or do you just want to show a 2D label?

Edit: From my understanding and from what I understand your current PG does not work because you’re not calling an actual mesh. Quickly made this, is this anything close to what you’re looking for?

2D is fine if it was on the top surface plane of the mesh.

This is my first attempt to do any GUI stuff in BabylonJS

I understand. It’s a bit disturbing when you start with it. Very different from what we know about making UI. Could you may be send a mock-up of how you want your text to show when attached to/linked to a mesh? It would help us point you in the right direction, because there’s also the 3D GUI that could apply here.

From the gui demo… is “You selected option 5” a 2D or 3D GUI control?

image

Here I just quickly twisted your PG using advancedTexture (the 2D GUI). The 3D GUI requires a different approach. You can forget about the advancedTexture but instead will have to create a ‘manager’.
Edit: The (3D GUI) manager will create a utilityLayer on top of the scene. You will next interact with this layer.

Apologies, didn’t quite read the question correctly. So, the answer is (obviously, since the text is showing in 3D), the ‘you selected…blabla’ text is from the 3D GUI.
Edit: Hang on, what is this example, do you have the link? It could be a rotated 2D GUI but with just a SS I can’t be sure…

Edit2: Just thinking of it once more (before it’s time to start the BBQ for dinner :wink:.
May be you want something like this. Look at this recent demo posted by @3dprof.com:
https://3dprof.com/ikizler/
Focus on the panel inside the showroom. It’s attached to a mesh, it’s 2D yet is always facing the camera. Is that the kind of result you want?

2 Likes

BBQ is always ao good choice for dinner :slight_smile:

I switched to using a plane and this is what I had in mind I think… I don’t see though how to position the text on the plane. I have to position the plane?

Yes, well, the problem comes from the textBlock. It’s quite uneasy (not to say impossible) to properly place (with margin and padding) a textBlock directly in the advancedTexture. My recom here would be that you create a stackPanel to host your textBlock. You can set horizontal, vertical, margin and padding on the stackPanel. That should work… Hopefully this helps. Sry, BBQ is calling and it’s the start of season so I cannot fail on this one :wink:

1 Like

Thanks, I’ll check out using a stackPanel.

Quickly made this. Could have done it before, takes less time than typing all this. Silly me :wink:
Sry though, it’s very rushy. I’ve pushed all new instructions to the left (from lines 115 to 142).

Some instructions are not needed; they are here just in case. Such as pushing the advanced texture on top of layers (in case you’re also using a 3D GUI manager or anything).
Have a great WE and GL with your project. Looks serious. Pretty neat in fact.

Edit: Forgot to mention that in case you have just one line of text, you can leave out the stackPanel. It will work the same. But as soon as you’d have more (say a description line) then you’re better off using the stackpanel. That’s it. This time I really have to go. Or the dinner will be overcooked or there will be no dinner at all :wink:

Hello @ajw1970 just checking in if your question has been answered

Hi @carolhmj

I plan to revisit this before too long. I would say the moment I have something working well enough but it’s still not what I have in mind. I’ll have to put together a better example with a mockup or something. This forum has been tremendously helpful.

1 Like