I am developing a Playcanvas VR project based on the 360 lookaround Camera tutorial. The specific functionality I am looking to implement is whenever the user switches areas, they will transition into the new area and look at a specific angle. My current issue is that whenever I set the yaw of lookCamera script, say at a yaw of 0, it will never have a consistent target.
Below is code which I am using, in addition to the scripts used in the 360 lookaround Camera project.
CameraManager.prototype.onKeyDown = function (event)
{
if (event.key === pc.KEY_A )
{
this.MainCamera.script.lookCamera.yaw=0;
}
}
I noticed the main camera has that consistent angle which I could use, if I can convert it to the local space of the camera offset.
I am current looking for solutions, but would there be a simple and efficient way of doing it?
The ‘inconsistency’ is due to the yaw only affecting the camera’s parent and the camera orientation is using the phone’s orientation so there is always an offset based on the which direction the user is facing.
If you are looking to center the view based on the user’s direction, you will have to take the camera orientation into account and apply an offset on top of the yaw value.
Thank you for the reply, but how would I go about that in the case that I would like to set the yaw angle to be 0?
From what I’ve tried I’ve had a variable which had a target angle, 0 in this case, and then added the offset from the getEularAngles of the camera object.
I’ve also tried to set both the look-Camera Yaw and camera’s orientation , using setEularAngles, both to 0.
Both have not been successful in setting the angle.
Am I getting the camera orientation angle from the wrong object?
Getting the localEularAngles from the camera has problems as the orientation can be represented in a couple of different ways that need the other two axis. If you watch the X and Z values in this GIF to see what I mean.
If you calculate the world yaw of the camera in isolation (_getYaw in the LookCamera script should be able to do that) then use that to offset the yaw of the camera parent target yaw, that should work.
Found the correct way!
You were right about using the parent offset, as calculating the offset involved taking away the main camera offset from the parent offset. After that we can use that to set the angle, but we would have to make sure to set the yaw to this new angle, so the look-camera script won’t override our calculations . A bit tricky to re orientate my head around this problem, but thank you for the help!
Below is the code for anyone who’s wondering
var desiredAngle = 30;
var MainOffsetYaw = this.MainCamera.script.lookCamera._getYaw(this.MainCamera.getRotation()); // caluclating the camera yaw based on the global angle
var ParentOffsetYaw = this.MainCamera.script.lookCamera._getYaw(this.CameraOffset.getRotation()); // caluclating the camera's parent yaw based on the global angle
var Offset = ParentOffsetYaw-MainOffsetYaw;// calculate the offset angle need
this.CameraOffset.setEulerAngles(0 , Offset+desiredAngle, 0);// setting the eular angle since the offset is incorrect
ParentOffsetYaw = this.MainCamera.script.lookCamera._getYaw(this.CameraOffset.getRotation());// caluclating the new camera's parent yaw angle
this.MainCamera.script.lookCamera.yaw=ParentOffsetYaw; // setting the yaw to that new angle
I’m not having any gimbal lock issues, so I don’t think its a direct solution. Correct me if I’m wrong, as I’m sure all rotation is done through quaternions in the back end of the Engine.
If anything there is a working solution to the problem, which I’m happy with, and I’ve got other tasks for my project to do.
You will probably get gimbal lock issue if you tried resetting the value and looking straight up (where the camera’s -Z is the same as the world’s +Y). In which case, I would add a check for this and use the camera’s -/+ Y to work out the ‘forward’ direction.
