Jump to content

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


Recommended Posts

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?)

Link to comment
Share on other sites

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;
    _.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);


Link to comment
Share on other sites

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)

Link to comment
Share on other sites

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();
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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...