Update link when using gizmo manager

hello ,

i’m using gizmo manager for scaling , translate and rotate object . i have links between objects and i want to update links when i move his joint objects.
links are tubes :

path = [
var tube = BABYLON.MeshBuilder.CreateTube(“tube”, {path: path, radius: 2.9}, scene);

thanks for ur help :slight_smile:

Hi @issam_abdelhedi

You can add an observable. The function will be called when the gizmo position is changed:

gizmoManager.gizmos.positionGizmo.xGizmo.dragBehavior.onDragObservable.add(() => {
// recompute link tubes

thanks @Cedric for ur time but i don’t understand u about : “// recompute link tubes” !!

Replace the comment with the code that computes your tubes.


var onPointerMove = function (evt) {
var pickInfo = scene.pick(scene.pointerX, scene.pointerY);
if (!pickInfo.pickedMesh) {

    if (pickInfo.pickedMesh) {

        if (mouseAction === rotateAction) {
            document.onkeydown({key: "e"});

        } else if (mouseAction === dragAction) {
            document.onkeydown({key: "w"});


            gizmoManager.gizmos.positionGizmo.xGizmo.dragBehavior.onDragObservable.add(() => {
           			 var tube = BABYLON.MeshBuilder.CreateTube("tube", {path: path, radius: 2.9}, scene);


        } else if (mouseAction === scaleAction) {
            document.onkeydown({key: "r"});


Nothing change :confused:

Can you log the path in the console and check if it’s updated ?

Can you provide a playground?

1 Like

path it’s update but nothing change :confused:

Can you move this line to add the observer in your init code and not when you get a picked mesh:


Hi guys.
I decided to do some playground testing of this stuff, and using Cedric’s good advice.


Click boxes to activate drag gizmo on each.

Thanks to the original author of this playground series… whomever that was. It made a great starter playground for us, here.

Most of the fun… happens in lines 63-77. There, I create a dispose’n’recreate function named updateTubes (there might be a better way to update tubesMesh, but maybe not).

In lines 71-77, I attach observers to the X and Z drag-events… which simply call updateTubes.

Although we are using tubeMesh (createTube) in a way similar to linesMesh (createLine), I don’t think tubeMesh has the “easy update” feature that linesMesh has.

So, I dispose the old tubes, and recreate, over and over very fast, as the drags happen. (inside updateTubes func)

Want to have y-drag observing/tubesUpdate, too? Easy… I added lines 79-81, here. :slight_smile:

Ok, that’s all I have. I wanted to see it, test it, and make sure things are understood, here. We needed something to play-with, eh? That’s what the playground is all-about, right? Good fun.


Hi again. I wanted to note… that MY demo playground… is one continuous “sequence” of tubes/nodes… but Issam’s challenge… uses NON-sequential tube paths.

In his picture, we see that ONE of the nodes… has 3 tubes attached… and this causes some concerns which we forum helpers COULD try to help-with.

I use the very simple and sequential objs array… in the updateTubes() function - line 66. When doing a “tree” like Issam’s picture, the situation gets more “ugly”.

Let’s try to help Issam invent a way… to do the multi-branch tree.

ONE way… might be to allow sub-paths… within the createTube()'s path parameter… which would take some SERIOUS modification of the createTube function… and possibly break backward compat.

Another way… would be a “pre-process”… of objs array, checking for nodes with multiple tubeMesh needed… not sure. Let’s try… to invent a tree-of-tubes system… somehow… which also updates with each gizmo-drag… but only updates THAT branch-o-tubes. I think we will need multiple tubeMesh… one for each branch/sub-branch.


thanks a lot @Wingnut for ur time and ur help :slight_smile:

1 Like

@Wingnut what do u think about this : https://www.babylonjs-playground.com/#9LYFQL#1 :smiley:

just the performance is not really good

1 Like

COOOOL! i like it.

Are you going to do “the bird”, next? https://www.babylonjs-playground.com/#1ZAXRO#10 :smiley:

1 Like