Orbit Camera | Can I smoothly transition from one focus entity to another?

Help & Support
16

Here you go, only change I did in the default orbit-camera.js script is introduce this:

this._targetPivotPoint = new pc.Vec3();

Added a single line in the update method:

OrbitCamera.prototype.update = function(dt) {
    // Add inertia, if any
    var t = this.inertiaFactor === 0 ? 1 : Math.min(dt / this.inertiaFactor, 1);
    
    this._targetPivotPoint.lerp(this._targetPivotPoint, this._pivotPoint, 0.1 * t);
    
    this._distance = pc.math.lerp(this._distance, this._targetDistance, t);
    this._yaw = pc.math.lerp(this._yaw, this._targetYaw, t);
    this._pitch = pc.math.lerp(this._pitch, this._targetPitch, t);

    this._updatePosition();
};

And last change the used pivot property in the _updatePosition method:

OrbitCamera.prototype._updatePosition = function () {
    // Work out the camera position based on the pivot point, pitch, yaw and distance
    this.entity.setLocalPosition(0,0,0);
    this.entity.setLocalEulerAngles(this._pitch, this._yaw, 0);

    var position = this.entity.getPosition();
    position.copy(this.entity.forward);
    position.scale(-this._distance);
    position.add(this._targetPivotPoint);
    this.entity.setPosition(position);
};

https://playcanvas.com/editor/scene/984904

Of course this won’t lerp rotations / camera angles. For that you will have to create a more elaborate system. I did something similar on this project:

2 Likes