# GUI How to set up gizmo?

**URL:** <https://forum.babylonjs.com/t/gui-how-to-set-up-gizmo/54579>\
**Category:** Questions\
**Created:** [November 6, 2024, 2:58am UTC](https://forum.babylonjs.com/t/gui-how-to-set-up-gizmo/54579 "2024-11-06T02:58:25Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![rookiewxy](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/rookiewxy/32/35612_2.png) [@rookiewxy](https://forum.babylonjs.com/u/rookiewxy)\
**Post date:** [November 6, 2024, 2:58am UTC](https://forum.babylonjs.com/t/gui-how-to-set-up-gizmo/54579/1 "2024-11-06T02:58:25Z")

</div>

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?

> **[Babylon.js Playground](https://playground.babylonjs.com/#XONE7V%231)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL and WebGPU 3D scenes

---

<div class="post-metadata">

**Author:** ![labris](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/labris/32/12576_2.png) [@labris](https://forum.babylonjs.com/u/labris)\
**Post date:** [November 6, 2024, 4:06am UTC](https://forum.babylonjs.com/t/gui-how-to-set-up-gizmo/54579/2 "2024-11-06T04:06:23Z")

</div>

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

```

Example - [https://playground.babylonjs.com/#XONE7V#2](https://playground.babylonjs.com/#XONE7V#2)

---

<div class="post-metadata">

**Author:** ![rookiewxy](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/rookiewxy/32/35612_2.png) [@rookiewxy](https://forum.babylonjs.com/u/rookiewxy)\
**Post date:** [November 6, 2024, 5:37am UTC](https://forum.babylonjs.com/t/gui-how-to-set-up-gizmo/54579/3 "2024-11-06T05:37:43Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![labris](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/labris/32/12576_2.png) [@labris](https://forum.babylonjs.com/u/labris)\
**Post date:** [November 6, 2024, 6:02am UTC](https://forum.babylonjs.com/t/gui-how-to-set-up-gizmo/54579/4 "2024-11-06T06:02:53Z")

</div>

Probably the simplest way is to use Actions? - [Babylon.js docs](https://doc.babylonjs.com/features/featuresDeepDive/events/actions)  
Also note, that Mesh may have no geometry, like the **root** Mesh in GLB imports.

---

<div class="post-metadata">

**Author:** ![MarianG](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mariang/32/138_2.png) [@MarianG](https://forum.babylonjs.com/u/MarianG)\
**Post date:** [November 7, 2024, 7:04am UTC](https://forum.babylonjs.com/t/gui-how-to-set-up-gizmo/54579/5 "2024-11-07T07:04:07Z")

</div>

Hey, you can access the plane using

```auto
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

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

```

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/f/5/f574328da6b2a6caf9e1ffe23e38202d69683446.png)  
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 🙂

> **[Babylon.js Playground](https://playground.babylonjs.com/#XONE7V%236)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL and WebGPU 3D scenes

Cheers!