Problem with an entity arriving to the exact position

Hi guys, a have a problem with smooth transfering my entity to the exact position.
I have chess 8x8 field. A player entities can travel between these squares, but they must stop at the 0, 0, 0 point of the square the are travelling to.

Here’s the project
You have to have 2 players at the battlefield to be able to move. Active player is blinking and have movement area highlighted.

Network script call player script moveTo function:

Player.prototype.moveTo = function(point) {
    this.targetPoint = point;
    this.direction = new pc.Vec3();
    this.direction.sub2(this.targetPoint, this.entity.localPosition);
    this.distance = utils.getDistanceBetweenTwoPoints(this.entity.localPosition, this.targetPoint);

Player update function has the following code:

if (this.distance > this.approachRange) {
        if (this.state != 'run') {
        var move = this.direction.clone();
        move.scale(this.movingSpeed * dt);        
        this.entity.position.lerp(this.entity.position, this.direction, dt);
        this.distance = utils.getDistanceBetweenTwoPoints(this.entity.position, this.targetPoint);        
    } else {
        if (this.state == 'run') {
            var direction = new pc.Vec3();
            direction.sub2(this.targetPoint, this.entity.localPosition);
            this.entity.position.lerp(this.entity.position, this.direction, dt);
            this.distance = 0;

So, what’s the problem?
I test the project with 2 browsers at the same time. And it may work a little slowly. It seems sometimes i have a situation, when in one frame i have this.distance > 0.5 (the entity hasn’t reached the target point yet) and in the next frame i also have this.distance > 0.5 (the entity has already passed the target point).
As the result the entity keeps moving and never stops.

So, i have multiple questions:

  1. How to avoid the situations i described above?
  2. Perhaps there’s a better solution for a movement code?
  3. Why there’s such performance issues with the project? There’re only 2 models and a plane (battleground).

Thanks in advance

Don’t ever call new in your update code if you care about performance. Create the vectors beforehand in the initialize function and reuse them.

Since the movement you’re describing is from A to B and not continuously changing you can just decide when you wan’t the entity to arrive at the second location. If you’d like to keep the speed constant and not the time of the travel then you first have to calculate it from the distance and speed.
Assuming you’ve got the time figured out the rest is just a matter of simple interpolation like so:

alpha = ( - this.movStartTime) / (this.arriveTime - this.movStartTime)
alpha = pc.match.clamp(alpha, 0, 1)
// lerp

  1. I don’t see a performance problem. Can you describe more about the performance issues you are seeing?

Well, i just have 2 browser windows with the game launched.
Animation plays with “jerks”, it looks like the model freezes for a moment.
Perhaps it’s because i have too many applications running in my system=).
I’ve just checked the project with my friend, and he has no such performance issues at all. So i think this part of question is closed.

The only question remains is the question about movement code. I think my code is quite tricky with that approachRange variable. Redka suggest another solution but it looks a bit tricky too, isn’t it?.
Perhaps there’s a project where i can see how to move an entity to the point was mouseclicked? I think it’s quite typical task and a solution also should be typical.

Sorry guys, it seems it was my stupid time of the month.
I’ve found a solution: now i reduce distance between two point every frame with a distance entity moved last frame and stop the entity when the distance <= 0. It works perfectly.