Transition of camera position and rotation from one point to another with orbit camera script

Help & Support
1

Hello everyone.
I have an orbit-camera script in my project. I’m trying to move the camera to a certain position and I’m disabling the orbit-camera and enabling it again. What I want is to change the camera rotation also to loot at a certain part of the model. This is the code.

        var nowpos = new pc.Vec3();
        var newAngle = new pc.Vec3();
        var cpos = new pc.Vec3(this.currentPos.x,this.currentPos.y,this.currentPos.z);
        var tpos = new pc.Vec3(this.targetPos.x,this.targetPos.y,this.targetPos.z);
        var cAngle = new pc.Vec3(this.currentAngle.x,this.currentAngle.y,this.currentAngle.z);
        var tAngle = new pc.Vec3(this.targetAngle.x,this.targetAngle.y,this.targetAngle.z);
        this.time += 0.01;
        nowpos.lerp(cpos,tpos,this.time);
        newAngle.lerp(cAngle,tAngle,this.time);
        this.entity.setPosition(nowpos);
        this.entity.setEulerAngles(newAngle);
        this.app.fire('moveCamera:resetPoint',nowpos,this.targetEntity.getPosition());
        if(this.time >= 1){
            this.entity.script.orbitCamera.enabled = true;
            this.orbitCamera.resetAndLookAtPoint(tpos, this.Target);
            this.move = false;
            this.time= 0;
            this.prevPos = this.entity.getLocalPosition();
        }

When I use resetAndLookAtPoint the camera angle changes. Is there any way to not change the camera angle?
Thank you
Project link: PlayCanvas | HTML5 Game Engine

2

Hi @maheshnaik,

Another way of changing the target position of the camera without changing the rotation angles is to update the pivotPoint pc.Vec3 directly.

That is the target point where the camera is looking at. So from any other script you can do this:

var cameraEntity = this.app.root.findByName('Camera');
cameraEntity.script.orbitCamera.pivotPoint.set(2,0,0);
3

Not sure I understand the issue. If you have a target position to look at and a target position for the camera to move to, it will set the orbit camera angle to match those two positions.

Looking at project when pressing ‘NEXT’ for the first time, it looks like the two positions you are setting to the orbit camera on resetAndLookAtPoint aren’t the same as the transition camera.

4

@yaustar

I didn’t get this point. I have passed targetPos, which is the position which I want to move the camera and this.Target is the position of the entity I want to look at.
What should passed to resetPoint and lookAtPoint?

5

Hi @yaustar and @Leonidas
I was wondering is there any way to not change the Z angle of the camera?
Because when I call the resetAndLookAtPoint(), the Z angle is set to zero in _updatePosition().
this.entity.setLocalEulerAngles(this._pitch, this._yaw, 0);
Thank you.

6

Unless you rolling the camera, Z will always be zero. If you rolling the camera, then you will need to modify orbit camera to calculate the Z when resetting.

1 Like
7

I’m rolling the camera actually. The point where camera should move and its rotation, I’m copying to targetPos and targetAngle.
Is there any link or project that you can share to refer to calculate Z?

If you can take a look at this project(scene: bakelight and branch: Raycast), when you click Next button second time, you can observe the shift in camera angle.
Thank you.

8

It’s a bit odd for an orbit camera to have roll in it as orbiting an object would look weird.

AFAIK, there isn’t an example out there that includes calculating roll.

FYI, users can’t see branches unless they are part of the project.

9

Actually we want to get a top view of the model.

Here is a copy of the project.
https://playcanvas.com/editor/scene/1072895

Thank you

10

I’ve looked at this and made a clone of the project: PlayCanvas | HTML5 Game Engine

With the following changes

if(this.time >= 1){
            this.entity.script.orbitCamera.enabled = true;
            // Make a new target look at point to be in front of the camera
            var newTarget = this.entity.forward.clone().scale(2).add(newpos);
            this.orbitCamera.resetAndLookAtPoint(newpos, newTarget);
            this.move = false;
            this.time= 0;
            // this.prevPath = this.entity.getLocalPosition();

        }

The issue is that when the camera is transitioning, it is only doing it via position and not in the direction that it s facing so the camera angle remains the same and the the previous target position is no longer valid.

image
image3322×1696 365 KB

So what I’ve done is create a new target position based on the camera’s direction after the transition.

2 Likes
11

You should be able to do this via pitch and yaw so you can get away without using roll.

12

@yaustar Thank you. I will add that to my new code and try it.

13

I tried and couldn’t figure out how to do that. If you can share how to achieve that, it would be helpful.
Thank you.

14

Set the pitch to 90 or -90 and change the yaw to rotate the view to match the rotation you are looking for.

15

Okay. I will try this.

Currently what we did is set the angles manually, i.e. keeping Z angle as 0 or 180 and change the X and Y angles accordingly to get the desired view. It works properly.