PointerDragBehavior cannot be applied to the Entire GLB Model

I need to add drag functionality to a GLB robot model. However, it seems that PointerDragBehavior only works on a single Mesh. I’ve tried adding a parent Mesh or a parent TransformNode to all the meshes, but it doesn’t work. I also tried adding the behavior to the original TransformNode of the model, but that didn’t work either. I saw some posts suggesting adding a parent BoundingBox, but that was ineffective as well. Below is my code:

public attachBehaviors1(assetContainer: AssetContainer) {
        `Preformatted text`const pointerDragBehavior = new PointerDragBehavior({dragPlaneNormal: new Vector3(0,1,0)});
        pointerDragBehavior.moveAttached = false;
        pointerDragBehavior.useObjectOrientationForDragging = false;
        pointerDragBehavior.onDragStartObservable.add((event)=>{})
        pointerDragBehavior.onDragObservable.add((event)=>{
            pointerDragBehavior.attachedNode.position.x += event.delta.x;
            pointerDragBehavior.attachedNode.position.z += event.delta.z;
        })
        pointerDragBehavior.onDragEndObservable.add((event)=>{})
        const armMesh = assetContainer.meshes[2]; 
        const rootMesh = assetContainer.meshes[0];
        const armTransformNode = assetContainer.transformNodes[1]; 

        const tempRootMesh = new Mesh("tempMesh", this.scene);
        const tempRootTransformNode = new TransformNode("tempTransformNode", this.scene);

        assetContainer.meshes.forEach(mesh => {
            tempRootTransformNode.addChild(mesh);
            // tempMesh.addChild(mesh)
        })
        
        armMesh.addBehavior(pointerDragBehavior); // works
        rootMesh.addBehavior(pointerDragBehavior); // fails
        armTransformNode.addBehavior(pointerDragBehavior); // fails
        tempRootMesh.addBehavior(pointerDragBehavior); // fails
        tempRootTransformNode.addBehavior(pointerDragBehavior); // fails
    }

Hello and welcome!

Here is the example - https://playground.babylonjs.com/#YEZPVT#2639

1 Like

Hello @device and welcome ! :slight_smile:

I think that his problem is with multi meshes GLB, while this seagul is single mesh, it would work anyway :slight_smile:


@device when you load a .GLB, the loaded node can contain an arborescence of TransformNodes and Meshes (eventually “empty geometry” meshes)
The Dragging Behavior won’t work on a TransformNode, but it should work on the first “mesh” of the arborescence. Which is the meshes[0] of the list returned by the loader :

1 Like

Based on the example you provided, after extensive testing, I found that as long as the import is not done through a Vue 3 component, there won’t be any issues, even though the model can load normally. As for why it affects the model’s behavior, I will continue testing and try to document the answer. Regardless, your help has been very important to me. Appreciate it!

Yeah, that totally makes sense. My model’s got a bunch of meshes and transformNodes, and meshes[0] can definitely control them all. Though it wasn’t specifically mentioned, the demo provided by @labris actually uses meshes[0] too. Thanks for everyone’s help!

1 Like

It works - https://playground.babylonjs.com/#YEZPVT#2638
Or with GLB model - https://playground.babylonjs.com/#YEZPVT#2640

1 Like

My bad ! Great ! :smiley:

1 Like