Character teleports when moving at the start of the game

Hello! I am trying to make my character move, which works, however, when I load the game, the player teleports to the other side of the map, and the movement does what it needs to do normally.

I basically copied the code from here Third Person Controller. The camera is also kinda weird, I’m also just trying to replicate what the creator did in the project.

Here is the game link.

Disclaimer though that I’m not exactly a coder, this is just for the sake of a project in school lol. Also working with a team of non coders so sorry if everything is kinda messy lol

Here’s the code for player movement:

var PlayerMovement = pc.createScript('playerMovement');

PlayerMovement.attributes.add('speed', { type: 'number', default: 0.09 });

PlayerMovement.prototype.initialize = function () {
    var app = this.app;
    var camera = app.root.findByName('Camera');
    this.cameraScript = camera.script.cameraMovement;    
};


// Temp variable to avoid garbarge colleciton
PlayerMovement.worldDirection = new pc.Vec3();
PlayerMovement.tempDirection = new pc.Vec3();

PlayerMovement.prototype.update = function (dt) {
    var app = this.app;
    var worldDirection = PlayerMovement.worldDirection;
    worldDirection.set(0, 0, 0);
    
    var tempDirection = PlayerMovement.tempDirection;
    
    var forward = this.entity.forward;
    var right = this.entity.right;

    var x = 0;
    var z = 0; 
    
    if (app.keyboard.isPressed(pc.KEY_A)) {
        x -= 1;
    }

    if (app.keyboard.isPressed(pc.KEY_D)) {
        x += 1;
    }

    if (app.keyboard.isPressed(pc.KEY_W)) {
        z += 1;
    }

    if (app.keyboard.isPressed(pc.KEY_S)) {
        z -= 1;
    }

    if (x !== 0 || z !== 0) {
        worldDirection.add(tempDirection.copy(forward).mulScalar(z));
        worldDirection.add(tempDirection.copy(right).mulScalar(x));        
        worldDirection.normalize();
        
        var pos = new pc.Vec3(worldDirection.x * dt, 0, worldDirection.z * dt);
        pos.normalize().scale(this.speed);
        pos.add(this.entity.getPosition());

        var targetY = this.cameraScript.eulers.x + 180;
        var rot = new pc.Vec3(0, targetY, 0);

        this.entity.rigidbody.teleport(pos, rot);
    }
    
    this.entity.anim.setFloat('xDirection', x);
    this.entity.anim.setFloat('zDirection', z);
};

Here’s the code for the camera movement:

var CameraMovement = pc.createScript('cameraMovement');

CameraMovement.attributes.add('mouseSpeed', { type: 'number', default: 1.4, description: 'Mouse Sensitivity' });

// Called once after all resources are loaded and before the first update
CameraMovement.prototype.initialize = function () {

    this.eulers = new pc.Vec3();
    this.touchCoords = new pc.Vec2();

    var app = this.app;
    app.mouse.on("mousemove", this.onMouseMove, this);
    app.mouse.on("mousedown", this.onMouseDown, this);

    this.rayEnd = app.root.findByName('RaycastEndPoint');
    
    this.on('destroy', function() {
        app.mouse.off("mousemove", this.onMouseMove, this);
        app.mouse.off("mousedown", this.onMouseDown, this);
    }, this);
};
    
CameraMovement.prototype.postUpdate = function (dt) {
    //var originEntity = this.entity.parent;
    
    //var targetY = this.eulers.x + 180;
   // var targetX = this.eulers.y;

   // var targetAng = new pc.Vec3(-targetX, targetY, 0);
    
   // originEntity.setEulerAngles(targetAng);
                   
   // this.entity.setPosition(this.getWorldPoint());
    
   // this.entity.lookAt(originEntity.getPosition());
   CameraMovement.prototype.postUpdate = function (dt) {

 var app = this.app;

 if (app.keyboard.isPressed(pc.KEY_RIGHT)) {

        this.eulers.x += 1;

    }

 if (app.keyboard.isPressed(pc.KEY_LEFT)) {

        this.eulers.x -= 1;

    }

// if (app.keyboard.isPressed(pc.KEY_W)) {

//         this.eulers.y += 1;

//     }

//  if (app.keyboard.isPressed(pc.KEY_S)) {

//         this.eulers.y -= 1;

//     }
};

CameraMovement.prototype.onMouseMove = function (e) {
    if (pc.Mouse.isPointerLocked()) {
        this.eulers.x -= ((this.mouseSpeed * e.dx) / 60) % 360;
        this.eulers.y += ((this.mouseSpeed * e.dy) / 60) % 360;

        if (this.eulers.x < 0) this.eulers.x += 360;
        if (this.eulers.y < 0) this.eulers.y += 360;
    };
};

//CameraMovement.prototype.onMouseDown = function (e) {
  //  this.app.mouse.enablePointerLock();


CameraMovement.prototype.getWorldPoint = function () {
    var from = this.entity.parent.getPosition(); 
    var to = this.rayEnd.getPosition();

    var hitPoint = to;

    var app = this.app;
    var hit = app.systems.rigidbody.raycastFirst(from, to);
    
    return hit ? hit.point : to;
};
};