How to animate plane which is a child of another plane, to another plane

[thrice]

Context: I am attempting to build a hearthstone like game using babylon.

I am using multiple planes to manage the game state/positions of cards. I.e. current_player_hand is a plane, current_player_units is a plane, current_player_deck is a plane. Cards themselves are planes (with meshes), and are attached to parent plane to set initial position.

What I am struggling to figure out how to do is how to animate, for instance, a card being played from a players hand, moving on to the game board, targeting the center of the game board plane. Since the position of the plane is relative to it's parent, it only animates relative to it's parent.

Is there a way to basically say, animate this object, over to that object using that objects world position? (or am I abusing planes, or is there a better way to do what I've described?)

[thrice]

I've made progress but still not quite hitting the mark, as far as I can tell, this is possible (unless I am missing something) - I can set the plane world position and then position it correctly relative to the targets world position, but I can't get it animating correctly still.  (if I set the end keyframe position.x & y & z to the position of another plane in my scene, it shoots past the mark a bit, so I am thinking perhaps it's using the relative position still when animating) - I read in another thread something about having to call plane.computeWorldMatrix() (or plane.computeWorldMatrix(true)), as well, but still no luck. The below code is what I am using to wrap all my animations, anyone by chance see something obvious or that I am missing?

  run() {
    let subject = this.registry.subject.babylon ? this.registry.subject.babylon : this.registry.subject;
    subject.setAbsolutePosition(subject.getAbsolutePosition());
    subject.computeWorldMatrix();
    _.each(this.$$animations, (_animation) => subject.animations.push(_animation));

    return new Promise((resolve, reject) => {
      this.scene.babylon.beginAnimation(subject, this.startFrame, this.endFrame, false, 1, resolve);
    });
  }

 

[adam]

please create a simple pg of your issue.

[thrice]

Recreating it would take quite a bit of time as I am currently building an angular js babylon wrapper library and using it within my application. If worst comes to worst I may end up doing so but:

It seems there is no way to animate the absolute position is that correct? It all seems to be relative to the parent plane the nested plane is assigned to. However, if I do a simple plane.setAbsolutePosition(target.getAbsolutePosition()), that works perfectly. I tried animating the _absolutePosition property instead but no luck there either (didn't do anything)

[thrice]

As far as I can tell this is not supported, at least easily. I ended up using tween.js and building my own animation system, and using mesh.setAbsolutePosition() instead

[jpdev]

That makes sense, when you look up what setAbsolutePosition actually does, if the object has a parent this happens:

var invertParentWorldMatrix = this.parent.getWorldMatrix().clone();
invertParentWorldMatrix.invert();
var worldPosition = new Vector3(absolutePositionX, absolutePositionY, absolutePositionZ);
this.position = Vector3.TransformCoordinates(worldPosition, invertParentWorldMatrix);

It sets the position taking into account the invertedWorldMatrix of the parent, meaning there is no property _absolutePosition on a mesh.

[thrice]

4 hours ago, jpdev said:

this.position = Vector3.TransformCoordinates(worldPosition, invertParentWorldMatrix);

Ya although even after detaching from the parent, attaching to a higher level parent, it still didn't seem to work correctly