How can i drag objects with babylonjs in Angular framework

Questions
1

Hello, i got project in Angular + babylon.js and i had to make some new fetures. One of them is to make drag and drop items. There is no documentation to the project. Can somebody send me som angular+babylon js tutorials? I have this onClick function. Console log works
I wanted to add method to drag but pointerDragBehavior in addBehavior function is underlined by red. With message Argument of type ‘PointerDragBehavior’ is not assignable to parameter of type ‘Behavior’. Mesh is type of AbstractMesh imported from babylonjs.
public pgCustomMeshEffects: AbstractCustomMeshEffect = [

new OnClickCustomEffect((mesh, scene, model3d) => {

  console.log('User clicked on model3d ', model3d);

  var pointerDragBehavior = new BABYLON.PointerDragBehavior({

    dragAxis: new BABYLON.Vector3(1, 0, 0),

  });

  pointerDragBehavior.useObjectOrientationForDragging = false;

  mesh.addBehavior(pointerDragBehavior);

}),

];

2

drag behavior in the babylon canvas should work the same, inside or out of angular. Unless you want to interact with different angular services, the regular tutorial should work well for you.

If you want to do something after/while/before dragging, you can attach to babylon’s observables and pass them to the angular service you wish to call.

3

Can you send me that tutorial…? Idk why code upper doesnt work.

4

This will be helpful:

5

Thanks, yes i watched this tutorial but last step sphere.addBehavior doesnt work… i must find core structure of that angular project :smiley: There is mesh reprezented by AbstractMesh class.

6

This is my code, there is still this error can you help me? Argument of type ‘PointerDragBehavior’ is not assignable to parameter of type ‘Behavior’. Error is down on addBehavior.(pointerDragBehavior). pointerDragBehavior is undelined

applyEffect(mesh: AbstractMesh, scene: Scene) {
    let actionManager = mesh.actionManager;
    if (actionManager == null) {
      actionManager = new ActionManager(scene);
      mesh.actionManager = actionManager;
      scene.actionManager = actionManager;
    }

    mesh.actionManager.registerAction(
      new ExecuteCodeAction(ActionManager.OnPointerOverTrigger, () => {
        this.dragItem(mesh, scene);

        var pointerDragBehavior = new BABYLON.PointerDragBehavior({
          dragAxis: new BABYLON.Vector3(1, 0, 0),
        });
        pointerDragBehavior.useObjectOrientationForDragging = false;

        pointerDragBehavior.onDragStartObservable.add((event) => {
          console.log('dragStart');
          console.log(event);
        });
        pointerDragBehavior.onDragObservable.add((event) => {
          console.log('drag');
          console.log(event);
        });
        pointerDragBehavior.onDragEndObservable.add((event) => {
          console.log('dragEnd');
          console.log(event);
        });

        mesh.addBehavior(pointerDragBehavior);
      })
    );
7

Moving this to questions since it’s the more appropriate category :slight_smile:

1 Like
8

Oke its work. I just add any type.

9

Do I understand correctly that the issue was a typescript compilation issue because of a missing type?

10

Yes, i think so. Here i wrote any type :smiley:
var pointerDragBehavior: any = new BABYLON.PointerDragBehavior({
dragAxis: new BABYLON.Vector3(1, 0, 0),
});

11

it is rather odd that typescript didnt infer the type from the assignment. there might be a reference to the object somewhere else, which prevents it from compiling?

but i am happy it works.