Convert Vec3 to AxisAngle

[JANGOZ]

Hello
I have camera which rotate with bellow code

this.rotX = pc.math.lerp(this.rotX, this.targetRotX, dt / 0.2);
this.rotY = pc.math.lerp(this.rotY, this.targetRotY, dt / 0.2);
// Calculate the camera's rotation
this.quatX.setFromAxisAngle(pc.Vec3.RIGHT, -this.rotY);
this.quatY.setFromAxisAngle(pc.Vec3.UP, -this.rotX);
this.quatY.mul(this.quatX);

// Set the camera's current position and orientation
this.entity.setPosition(this.viewPos);
this.entity.setRotation(this.quatY);
this.entity.translateLocal(0, 0, this.distance);

I have Vec3 ( a position on my map ) and i don’t know how calculate this.targetRotX and this.targetRotY

[Leonidas]

Hi @JANGOZ,

Where are you using that code? Because this.targetRotX and this.targetRotY are being somewhere upstream. Most likely by user input, that’s not something you calculate based on this code.

[JANGOZ]

that source is from Planet Earth
(PlayCanvas 3D HTML5 Game Engine)

and when i click on Earth, i can find where i clicked, and i want to rotate camera to exact that point

[Leonidas]

To rotate the camera in place one option is to use a system like this:

Rotate the Planet Earth wherever clicked

Hi @JANGOZ, For something like that you will need to calculate the require rotation to animate the camera to that point on click. You could use a dummy parent/child entities for that: Position the parent at the center of the globe. On click position the child entity on the clicked position on the surface. Get the rotation of the child entity. Apply that rotation to the camera, preferably using an animation to smoothly transition to that position.

From the proxy entity you can extract your target rotX/Y values. I don’t have an example in mind sadly.

[JANGOZ]

Where ever user clicked on Earth, i want to set this.targetRotX and this.targetRotY which Camera rotate to that point

[JANGOZ]

what do you mean by “proxy entity” ?

[Leonidas]

A helper entity used to get the rotation from as described in the post I shared above.

[Leonidas]

@JANGOZ, here is a simple script that can do that and a reworked version of the Planer Earth example. For this I have disabled the regular navigation, hope it helps:

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

var CameraClickToGo = pc.createScript('cameraClickToGo');

// initialize code called once per entity
CameraClickToGo.prototype.initialize = function() {

    // --- variables
    this.currentPos = this.entity.getPosition().clone();
    this.targetPos = new pc.Vec3().copy(this.currentPos);
    this.cameraPivot = this.entity.parent;

    // --- events
    this.app.mouse.on(pc.EVENT_MOUSEUP, this.onMouseUp, this);
};

CameraClickToGo.prototype.onMouseUp = function (event) {
    if (event.button === pc.MOUSEBUTTON_LEFT) {
        this.doRaycast(event);
    }
};

// update code called every frame
CameraClickToGo.prototype.update = function(dt) {

    this.currentPos = this.currentPos.lerp(this.currentPos, this.targetPos, dt / 0.35);

    this.cameraPivot.lookAt(this.currentPos);
    this.cameraPivot.rotateLocal(0, 180, 0);
};

CameraClickToGo.prototype.doRaycast = function (screenPosition) {

    const from = this.entity.getPosition();
    const to = this.entity.camera.screenToWorld(screenPosition.x, screenPosition.y, this.entity.camera.farClip);
    const result = this.app.systems.rigidbody.raycastFirst(from, to);

    if (result) {
        this.targetPos.copy(result.point);
    }  
};

[JANGOZ]

Thank you
But i need both, user can navigate with mouse move or it can click on earth and camera rotate to that point

[JANGOZ]

@Leonidas
please check your Personal Message