Unselected meshes move alongside the selected mesh

Hi all, I have this code:

private listenModelDrag() {
        const selectorBtn = document.getElementById("selectorButton");
        let isButtonClicked = false;

        selectorBtn?.addEventListener("click", () => {
            console.log("Clicked")
            if (isButtonClicked) {
                isButtonClicked = false;
            }
            else {
                isButtonClicked = true;
            }
        })

         this.scene.onPointerObservable.add((pointerInfo: PointerInfo) => {
            switch (pointerInfo.type) {
                case PointerEventTypes.POINTERDOWN:

                    let selectedMesh = pointerInfo.pickInfo?.pickedMesh;
                    let selectedMeshParent = selectedMesh?.parent

                    const dragBehavior = new SixDofDragBehavior();
                    dragBehavior.rotateDraggedObject = false;

                    if (isButtonClicked) {
                        selectedMeshParent?.addBehavior(dragBehavior);
                        console.log("Dragging parent mesh");
                    }
                    else if (!isButtonClicked && selectedMesh){
                        selectedMesh.addBehavior(dragBehavior)
                        console.log("Dragging mesh => ", selectedMesh?.name);
                    }
            }
        });

    }

And the problem I have is that when i click on some mesh in the model, the rest of the meshes move with it, i don’t know why. I also tried

dragBehavior.disableMovement = true

But then only the parent is capable of moving.

would be great to have a repro in the playground

Here is the playground

But for some reason it works here and not in my code on the start before pressing the button, i can move parts of the model, that is desired behavior, then i click the button to be able to move the whole model, then click again to move parts and there my problem occurs, rest of the meshes start following the dragged mesh, do i need to remove drag behaviors?
Also i dont understarnd why is it working from the start now, in my code when i select the part of the model the rest start to move with it, not like here where i can move the parts freely before clicking the button. If you need any more clarification or if i described poorly im more than happy to provide more info

Unfortunately, it is impossible without a repro :frowning: Are you using the latest version as well ?

Hi, all the best in New Year to you and the BabylonJS team.

I created a new playground:

Here you can see more clearly what I’m trying to achieve:

  1. You can drag the whole model

  2. When the button is clicked you should be able to drag only selected meshes.

  3. When the button is clicked again to drag the whole model, why are the rest of the meshes, if dragged before, not “glued” to the parent like before?

  4. On the phone, when the model is scaled up or down with fingers, the ability to move the camera around is lost .

I don’t know if I’m being more precise in what I’m trying to achieve, I just want to get rid of some of the inconsistencies in the behavior and I don’t know how to.

You weren’t removing the dragging behavior of the parent, so it was dragged along with the child: drag v2 | Babylon.js Playground (babylonjs.com)

Hi, thank you, It did solve the issue, however I’m still not getting any luck with this:

  1. On the phone, when the model is scaled up or down with fingers, the ability to move the camera around is lost

Also, and I can’t reproduce this issue with the snowman model, but on the car model I have 2 of the wheels are constantly getting smaller when I tap on them to drag them around, that issue is on the computer as well as the phone. Do you maybe have any idea what causes that?

Can you share the car PG? The drag behavior doesn’t scale anything, so the only thing that could make them smaller is them getting farther away in the Z direction. You could put a grid on the ground to check this

Sorry I don’t know how to make a pg with local model. The model in question is this one:

I do have a grid on the ground, and the mesh is not going farther away, it’s just getting smaller. I could not reproduce the issue with some of the models I have. Only this one. Front and rear right wheels are getting smaller, only on this model. I find it really strange.

You can see how to use your own models with the PG here: Using External Assets In the Playground | Babylon.js Documentation (babylonjs.com)

Here is the pg with the issue:

To reproduce:
Click the button to be able to move individual meshes, drag front or rear right wheel and they will get smaller as they are being pressed.

cc @Cedric as it feels like a regression to me

Yup I was investigating this, I have a proposed fix in: Fix scaling problems in sixDofDragBehavior by carolhmj · Pull Request #14669 · BabylonJS/Babylon.js (github.com)

3 Likes

Amazing thanks a lot !!!

Thank you so much!

Would you happen to know why is the ability to move camera lost after i rescale the model on my phone with sixddrag?

Let me look into it.

Found the sneaky little bug :bug: Fix in: Fix camera not being reattached after a two pointer SixDofDragBehavior by carolhmj · Pull Request #14677 · BabylonJS/Babylon.js (github.com)

3 Likes