GUI How to set up gizmo?

Questions
1

The application scenario is that there are a lot of text identifiers, and clicking on the text identifiers can be selected through gizmo. I use transformNode instead of mesh, because the text content is different, it may be very long or very short, and the width of the mesh cannot adapt to the width of the text. So I choose transformNode, which is not visible in the scene, so what if I use gizmo to get transformNode or GUI?

2 
const plane = new BABYLON.TransformNode("1") as BABYLON.Mesh

Example - https://playground.babylonjs.com/#XONE7V#2

3

Thanks, but I don’t need to check it by default, I need to click on it, for example via scene.pick(evt.clientX, evt.clientY), the pickInfo returned, to bind the attachedMesh

4

Probably the simplest way is to use Actions? - Babylon.js docs
Also note, that Mesh may have no geometry, like the root Mesh in GLB imports.

5

Hey, you can access the plane using

text.linkedMesh

And because the text is of type GUI, you can use directly GUI event for picking, you no need scene pick or something else

text.onPointerClickObservable.add(() => {
            gizmo.attachedNode = text.linkedMesh;
        })

image
image1447×490 83.3 KB

Other important thing related to picking directly GUI elements is that you have to set height and width on them otherwise their dimensions probably will be like your full screen

Here is an updated pg :slight_smile:

Cheers!

2 Likes