[SOLVED] Trying to roll the camera in Model Viewer example

Help & Support
1

I would like to be able to roll the camera (rotating around forward pointing axis). But so far did not succeed.
I adapted the Model Viewer but it rotates wrong. See this project:

https://playcanvas.com/project/1024399/overview/camera-roll

When running it, it shows a white rectangle in the upper left corner. When clicking with your mouse inside this rectangle and moving the mouse in the horizontal direction, you can change the roll value. This calls the setRoll(value) function of the orbitCamera script.
But as said, it rotates wrong.
Any help would be welcome, because I think I do not fully understand the camera behaviour.

2

Had a quick look

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, this.mRoll);

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

My guess is that the code of positioning the camera is causing some issue.

Applying the roll after the camera is positioned appears to fix the issue.

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.pivotPoint);
    this.entity.setPosition(position);

    this.entity.rotateLocal(0, 0, this.mRoll);
};
3

Yes, that works! Thanks a lot.