Moving an entity from one position to another smoothly

Help & Support
1

I wanted to move an entity from its position to another smoothly on a button click. This post gives an idea about translating an entity, however I wanted something similar to lerp from one Vec3 to another. Any help would be appreciable.

2

Will the tween library work for you in this use case? https://developer.playcanvas.com/en/tutorials/tweening/

3

This looks promising. Thank you Yauster ! I will try this and post the solution here !

4

Apart from Tween library, you can also lerp between 2 vectors directly. This gives you more control over reacting to the immediate position of the object:

var Script = pc.createScript('script');

Script.prototype.initialize = function() {
    this.from = this.entity.getPosition();
    this.to = new pc.Vec3(0, 2, 0);
    this.val = 0;
};

// "Cubic In" method to ease the interpolation
Script.prototype.ease = function(k) {
    return k * k * k;
};

Script.prototype.update = function(dt) {
    if (this.val > 1) return;
    this.val += dt;
    var target = Script.v1;
    target.lerp(this.from, this.to, this.ease( this.val ));
    this.entity.setPosition(target);
};

// temp
Script.v1 = new pc.Vec3();
2 Likes
5

Thank you Lex. This is working amazing. :slight_smile:

1 Like
6

Keep in mind that this.val interpolation value will be increased by steps that equal to dt. That is the delta time passed from previous frame. You would need to add additional check and clamp this.val to 1.0 if it is over it, otherwise it will stop at close to 1.0, but not 1.0 value. I skipped it for example brevity.

Edit:
You can see how to clamp it in this project example:
https://playcanvas.com/project/711986/overview/rotation-example

7

Thank you Lex. Noticed it before and the example you have given here is very useful.

1 Like
10

Hey master, this script speeds up, and if I want it to slow down reaching the end?

11

You can change an easing function to “Cubic Out”:

function (k) {
    return --k * k * k + 1;
}

Other examples of easing functions can be found in tutorial link by @yaustar.
You can check the source code for the easing function to see how it is implemented. For example Cubic Out:

2 Likes