# Set Custom Gizmo's Position

**URL:** <https://forum.babylonjs.com/t/set-custom-gizmos-position/39146>\
**Category:** Questions\
**Tags:** gizmo\
**Created:** [March 17, 2023, 9:12pm UTC](https://forum.babylonjs.com/t/set-custom-gizmos-position/39146 "2023-03-17T21:12:13Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![nali4214](https://avatars.discourse-cdn.com/v4/letter/n/e5b9ba/32.png) [@nali4214](https://forum.babylonjs.com/u/nali4214)\
**Post date:** [March 17, 2023, 9:12pm UTC](https://forum.babylonjs.com/t/set-custom-gizmos-position/39146/1 "2023-03-17T21:12:13Z")

</div>

Hi! I want to put the custom gizmo at the top of the tree. I dug into gizmo but couldn’t find where I can find a clue to adjust the gizmo’s y position in order to put it at the top of the tree.  
I tried to use the tree’s leaves boundingBox info. (centerWorld, maximumWorld) but was not really successful. As you can see in the console(code line 115, 141) maximumWorld.y doesn’t return consistent value… I think I’ve missed something here…

Would you mind helping me here?

Thanks in advance,

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

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [March 20, 2023, 3:25pm UTC](https://forum.babylonjs.com/t/set-custom-gizmos-position/39146/2 "2023-03-20T15:25:11Z")

</div>

cc @Cedric the Gizmo Guru 🙂

---

<div class="post-metadata">

**Author:** ![Cedric](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/cedric/32/2742_2.png) [@Cedric](https://forum.babylonjs.com/u/Cedric)\
**Post date:** [March 20, 2023, 3:44pm UTC](https://forum.babylonjs.com/t/set-custom-gizmos-position/39146/3 "2023-03-20T15:44:03Z")

</div>

I would add a TransformNode and place it at the top of the tree using boundingbox infos.  
Then, use on DragOversable to set the scaling from the TransformNode to the tree.

---

<div class="post-metadata">

**Author:** ![nali4214](https://avatars.discourse-cdn.com/v4/letter/n/e5b9ba/32.png) [@nali4214](https://forum.babylonjs.com/u/nali4214)\
**Post date:** [March 20, 2023, 3:59pm UTC](https://forum.babylonjs.com/t/set-custom-gizmos-position/39146/4 "2023-03-20T15:59:22Z")

</div>

Hi @Cedric

I thought I appended the right link for the pg. but it looks like the current pg link is outdated.  
This is the most updated one: [https://playground.babylonjs.com/#EEYZY0#18](https://playground.babylonjs.com/#EEYZY0#18)  
I tried the similar way you mentioned. but the problem is that the boundingBox info seemed to return different value for the first time(line 115, 141). it is not placed at the top of the tree. Am I missing something here?

---

<div class="post-metadata">

**Author:** ![Cedric](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/cedric/32/2742_2.png) [@Cedric](https://forum.babylonjs.com/u/Cedric)\
**Post date:** [March 20, 2023, 4:34pm UTC](https://forum.babylonjs.com/t/set-custom-gizmos-position/39146/5 "2023-03-20T16:34:54Z")

</div>

You can add these lines to refresh the bounding volumes:

```auto
tree.computeWorldMatrix();
tree.refreshBoundingInfo();

```

Did you try to use the leaves mesh instead of the tree transformNode?

---

<div class="post-metadata">

**Author:** ![nali4214](https://avatars.discourse-cdn.com/v4/letter/n/e5b9ba/32.png) [@nali4214](https://forum.babylonjs.com/u/nali4214)\
**Post date:** [March 20, 2023, 4:52pm UTC](https://forum.babylonjs.com/t/set-custom-gizmos-position/39146/6 "2023-03-20T16:52:20Z")

</div>

yes~ I used the leaves mesh instead of tree transformNode.

---

<div class="post-metadata">

**Author:** ![nali4214](https://avatars.discourse-cdn.com/v4/letter/n/e5b9ba/32.png) [@nali4214](https://forum.babylonjs.com/u/nali4214)\
**Post date:** [March 20, 2023, 9:28pm UTC](https://forum.babylonjs.com/t/set-custom-gizmos-position/39146/7 "2023-03-20T21:28:35Z")

</div>

Update! I just added a mesh as a handle to a tree. Made it invisible and attached the gizmo and used the scaling factor of the handle mesh and applied it to the leaves. It’s not working as exactly as I wanted (being dragged part) but the attaching/placing the gizmo itself is working as I wanted! I’m not sure this is a good practice though 😅

Thanks, @Cedric @sebavan !!

---

<div class="post-metadata">

**Author:** ![Cedric](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/cedric/32/2742_2.png) [@Cedric](https://forum.babylonjs.com/u/Cedric)\
**Post date:** [March 21, 2023, 8:46am UTC](https://forum.babylonjs.com/t/set-custom-gizmos-position/39146/8 "2023-03-21T08:46:37Z")

</div>

Once thing to try as well is to use a simple mesh drag behavior and then compute a scaling factor from current position and origin position.