WebXR Lab teleport with smooth movement

Hello, I want to teleport with smooth movement. When I try to implement it, it doesn’t seem to work very well, because the new position is always updated with the cursor position. Previously I’ve saved the previous position and saved the new position into a variable.

here my code:

TeleportCamera.prototype.initialize = function() {
    this.percent = 1;
    this.time = 0;
    this.newPosition = new pc.Vec3();
    this.beforePosition = this.entity.getPosition();
    this.app.on('teleport:to', function(position) {
        this.beforePosition = this.entity.getPosition();
        this.newPosition = position;
        this.time = 0;
        this.percent = 0;
    }, this);
TeleportCamera.prototype.update = function(dt){
    if(this.percent < 1){
        this.time += dt;
        this.percent = this.time / this.duration;
        if(this.percent > 1) this.percent = 1;
        var x = pc.math.lerp(this.beforePosition.x, this.newPosition.x, this.percent);
        var y = pc.math.lerp(this.beforePosition.y, this.newPosition.y, this.percent);
        var z = pc.math.lerp(this.beforePosition.z, this.newPosition.z, this.percent);

You can see my project here:
Update script on: teleport-camera.js

Thank you

Hi @elmiyadinf,

I think the issue is that on line 8 you teleport your entity to the new position:


So there is no smoothing happening on update since current/target positions point to the same values.

1 Like