NPC Character movement

Questions
1

I have a scene with some randomly positioned ‘checkpoints’ and a character with a walk animation.

I want the character to “walk” from one checkpoint to the other.

I tried to use gsap but it looks like the character is sliding along the ground while the walking animation is playing.

This is what I have:


walkTo(checkpoint) {
    return new Promise((resolve) => {
        let self = this;
        this.playerModel.lookAt(
            checkpoint.position.x,
            self.playerModel.position.y,
            checkpoint.position.z
        );
        //
        let walkingAction = this.animationMixer.clipAction(
            THREE.AnimationClip.findByName(this.playerAnimations, "walk")
        );
        walkingAction.clampWhenFinished = true;
        walkingAction.setLoop(THREE.LoopRepeat);
        if (this.previousAction) {
            walkingAction.reset();
            walkingAction.time = 0.0;
            walkingAction.enabled = true;
            walkingAction.setEffectiveTimeScale(1.0);
            walkingAction.setEffectiveWeight(1.0);
            walkingAction.crossFadeFrom(this.previousAction, 1, true);
        }
        walkingAction.play();
        //
        let speed = getSpeedFromDistance(this.playerModel, checkpoint);
        gsap.timeline({ onUpdate: checkDistance })
            .to(self.playerModel.position, speed, {
                x: checkpoint.position.x,
                y: self.playerModel.position.y,
                z: checkpoint.position.z,
            })
            .then(() => {
                console.log('arrived!')
            });
        
        function checkDistance() {
            let px = self.playerModel.position.x.toFixed(1);
            let pz = self.playerModel.position.z.toFixed(1);
            let dx = checkpoint.position.x.toFixed(1);
            let dz = checkpoint.position.z.toFixed(1);
            if (px >= dx && pz >= dz) {
                self.playerModel.rotation.y = 0;
                self.previousAction = walkingAction;
                resolve();
            }
        }

        function getSpeedFromDistance(source, target) {
            let m = Math.floor(getDistanceTo(source, target));
            let s = 3;
            let speed = m * s;
            return speed;
        }

        function getDistanceTo(source, target) {
            let distanceToTarget = source.position.distanceTo(target.position);
            return distanceToTarget;
        }
    });
}

How can I improve this?

Thank you for any suggestions

2

It’s hard to tell without a live example. Other than that only thing that can be said is that you need to adapt your game movement speeds to the animation as it will not automatically happen.

You may also use this constraint further then so make it as multiplication factor to you movement speed in general for slow down or speed up movements.

3

Do you know any resources or examples on how to sync gsap to the animation? Thank you

4

I don’t know gsap and can’t provide help for external frameworks.

5

What is s here? :thinking:
As for me speed is distance / time.