WebXR Lab teleport with smooth movement

Help & Support
,
1

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.entity.setPosition(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);
        this.entity.setPosition(x,y,z);
    }
};

You can see my project here:
https://playcanvas.com/editor/scene/1494867
Update script on: teleport-camera.js

Thank you

2

Hi @elmiyadinf,

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

this.entity.setPosition(position);

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

1 Like