Correct Rotation

Help & Support
1

The structure is like this

1843×867 112 KB

Camera has a parent node,Gyro control Camera rotation.
The following code will make the camera rotate to the current angle of the gyroscope

            var x = pc.math.DEG_TO_RAD * this.beta;
            var y = pc.math.DEG_TO_RAD * this.alpha;
            var z = pc.math.DEG_TO_RAD * -this.gamma;
            var c1 = Math.cos( x / 2 );
            var c2 = Math.cos( y / 2 );
            var c3 = Math.cos( z / 2 );
            var s1 = Math.sin( x / 2 );
            var s2 = Math.sin( y / 2 );
            var s3 = Math.sin( z / 2 );
            var q0 = new pc.Quat(
                s1 * c2 * c3 + c1 * s2 * s3,
                c1 * s2 * c3 - s1 * c2 * s3,
                c1 * c2 * s3 - s1 * s2 * c3,
                c1 * c2 * c3 + s1 * s2 * s3
            );    
            var q1 = new pc.Quat(-Math.sqrt(0.5), 0, 0, Math.sqrt(0.5)); // - PI/2 around the x-axis
            q0.mul(q1);
            var q2 = new pc.Quat();
            q2.setFromAxisAngle(pc.Vec3.FORWARD, this.so);
            q0.mul(q2);
            this.entity.setLocalRotation(q0);

This code is triggered after 2 seconds,so…I need to correct the spin beating at this time

Now the effect is this,Please use your mobile device to open it,Wait for two seconds
https://playcanv.as/p/MlACCORO/

See 2 seconds after a clear beating(Try to correct the rotation)
This is my code

            ///////////////The problem is here//////////////////
            this.jzEA = this.jzEA || pc.Vec3.ZERO;
            if(this.www){
                this.www = false;
                this.jzEA = q0.getEulerAngles().clone();
                // this.jzEA.scale(-1);
            }
            //Correct rotation
            this.entity.rotateLocal(-this.jzEA.x,-this.jzEA.y,-this.jzEA.z);
            ///////////////The problem is here(end)//////////////////

https://playcanvas.com/editor/code/515209?tabs=9813819&line=285&col=36

However, this correction does not seem correct, how to modify?

2

@yaustar Can you help me, may not be very clear description

3

Project is private so I can’t see the code.

What do you want to happen when the user opens the app?

4

it’s good now！！！！Public project:joy_cat:

5

Why do you have the 2 second delay before you start rotating the view? If you are waiting for loading, it would make more sense to have a loading screen and then the user enters the experience.

Otherwise, the user will see the room but it doesn’t feel like it is interactive until the loading has finished which is a poor user experience.

What you are looking to do is to match the initial view angle and offset it by the mobile orientation when the loading has finished.

6

Not necessarily 2 seconds, 2 seconds is a slow process, in 2 seconds I need to Camera correction to 2 seconds offset

]DI~S2MEQW9CA[7W1DQ%7UH.png615×595 37.9 KB

But this correction is wrong

Yes, all I have to do is to cache the camera’s angle in 2 seconds and then correct the camera

7

What are you loading for 2 seconds?

8

For example, the current condition is not 2 seconds, but users turn on the gyroscope.The gyroscope is disabled by default. When the user manually turns on the gyroscope, the camera rotation is controlled by the gyroscope used, so it will be offset when the user turns it on. So I need correction

9

When the user turns on the gyroscope to correct the camera’s offset ，not 2 seconds ，How to do it？ :hushed:

10

On what devices do users need to turn on the gyroscope? On my project, it’s virtually instant. No user interaction required.

In regards to the offset, you need to negate the rotation on the gyro in relation to the initial angle of the camera.

Honestly, I think it be easier to do a fade up from black when you think the device and scene is ready over what you have now.

11

@yaustar Thanks for your reply!

A switch on the UI controls turning on the gyroscope.

like this

You see this very understand（Please use mobile device to open）
https://playcanv.as/b/6E3DFDzu/

Is not this correct?

12

oh! @yaustar The problem of calibration has now been solved, but there is a problem with the rotation of the gyroscope。

You can look at the demo below（Please use mobile device to open and click on the UI ‘gyroscope’）

https://playcanv.as/b/u8s8TggJ/

this code:

https://playcanvas.com/editor/code/515209?tabs=9813819&line=286&col=36

QQ截图20171108163606.jpg775×503 42.3 KB

It seems this is really a headache thing :tired_face: