Animating of separate parts of the fbx model

Help & Support
1

Good day to all!
I am trying to implement an animation of climbing a step of a fbx model. The steps are of different heights, so the mixamo animation is not suitable. The problem is when I animate a separate part of the model, it just disappears. Please help

2

Hi @Jest and welcome,

How do you animate a separate part of the model? A skinned animation controls all vertices of the model through bone transformation, so it’s in full control of that.

Normally for perfectly synchronizing a skinned model with its physical environment you will need IK support (inverse kinematics), that isn’t supported in Playcanvas currently.

A trick would be to edit the animation in a modelling program to match the height and width of your steps so when the animation is played it matches your environment. This isn’t optimal but it can work if you only use a single step size.

3 
var AnimatePosition = pc.createScript('animatePosition');
AnimatePosition.attributes.add("offsetCurve", {type: "curve", title: "Offset Curve", curves: [ 'x', 'y', 'z' ]});
AnimatePosition.attributes.add("duration", {type: "number", default: 6, title: "Duration (secs)"});
// initialize code called once per entity
AnimatePosition.prototype.initialize = function() {
    // Store the original position of the entity so we can offset from it
    this.playerFoot = this.entity.model.entity.findByName("mixamorig:RightLeg");
    this.startPosition = this.playerFoot.getPosition().clone();
    console.log(this.startPosition);
    // Keep track of the current position
    this.playerFoot.position = new pc.Vec3();
    
    this.time = 0;
};


// update code called every frame
AnimatePosition.prototype.update = function(dt) {
    this.time += dt;
    
    // Loop the animation forever
    if (this.time > this.duration) {
        this.time -= this.duration;
    }

    var percent = this.time / this.duration;

    var curveValue = this.offsetCurve.value(percent);
    
    // Create our new position from the startPosition and curveValue
    this.playerFoot.position.copy(this.startPosition);
    this.playerFoot.position.x += curveValue[0];
    this.playerFoot.position.y += curveValue[1];
    this.playerFoot.position.z += curveValue[2];
    
    this.playerFoot.setPosition(this.position);
};
4

Thanks for your answer, above I have provided my code for animating raising the right leg

5

Yes, that won’t work for skinned models since the node you are targeting and trying to manually move is controlled by the animation.

6

So, the only way is to create animation for each step height?

7

Yes, if you want that kind of precision for the character feet then currently there aren’t many other alternatives.

8

Thank you very much for your reply. Can you please tell me if it is possible to connect three.js? It seems like IK works there

9

No, that won’t work in this case, at least without a major conversion of the Three.js IK class to work with the Playcanvas models.

Of course if you are up to it pull requests to the playcanvas engine are always welcome :innocent:

2 Likes