Real-world compass headings - configuration?

[jywarren]

Describe your problem

I'm trying to get my photospheres to display with their image north pointed to real-world north -- that is, if I go to that site today, and look at the photosphere, it'll line up.

I used

           const viewer = new Viewer({
                container: 'viewer',
                panorama: 'test.jpg',
                panoData: {
                  poseHeading: 100
                },

But as I turn my phone around to test, it starts with the same image direction visible no matter how I am standing regarding the real-world compass directions. Am I missing something about how to configure a panorama to be pegged to the true real-world compass directions?

Thank you so much! This is such a lovely library! <3

Online demo URL

No response

Photo Sphere Viewer version

5.7.3

Plugins loaded

Gyro, stereo

Additional context

No response

[mistic100]

did you try this ? https://photo-sphere-viewer.js.org/plugins/gyroscope.html#absoluteposition

[jywarren]

TY I will!

[jywarren]

Ah, actually I do have that set.

            import { Viewer } from '@photo-sphere-viewer/core';
            import { GyroscopePlugin } from '@photo-sphere-viewer/gyroscope-plugin';
            import { StereoPlugin } from '@photo-sphere-viewer/stereo-plugin';

            const baseUrl = '';//'https://jywarren.github.io/sfpcrr/';

            let params = new URLSearchParams(document.location.search);

            const viewer = new Viewer({
                container: 'viewer',
                panorama: baseUrl + (params.get("url") || 'spheres/providence.jpg'),
                panoData: {
                  poseHeading: (params.get("heading") || 0), // 0 to 360
                },
                defaultZoomLvl: 0,
                navbar: [
                  'stereo'
                ],
                plugins: [
                    StereoPlugin,
                    [GyroscopePlugin, {
                      absolutePosition: true,
                      moveMode: 'fast',
                    }]
                ],
            });
            window.viewer = viewer;
            viewer.addEventListener('ready', () => {
              viewer.getPlugin(GyroscopePlugin).start();
            }, { once: true });

Is there perhaps a load order issue? I.e. the poseHeading is initialized first, then the gyroscope plugin starts too late?

Thank you!!

[mistic100]

Those are two totally different things, poseHeading is applied on the 3D sphere object itself, it rotates the sphere in the scene, after that it is locked.

With absolutePosition: true the alpha angle reported by the gyroscope is directly applied to the scene camera yaw; without any offset.

You might be in the case explained in the big yellow WARNING box on the documentation page. For which I cannot do anything.

[jywarren]

Ok, I see - thank you! I'm going to research more about this, i found what seems like a good overview at https://leanpub.com/gyronormjs

[mistic100]

I was able to fix a bug which makes the heading remaining the same between gyroscope activations on the same session.

However it does not changes the fact that if you reload the page, the initial device orientation will be used as the origin. Because the API is not meant to find where the North is, it is only relative positionning since activation.

There is the geolocation API but it does not give a static compass value, only "heading" when the device is in movement, so not useable here.

[mistic100]

Found the "deviceorientationabsolute" event which seems promising, but of course iOS does not support it.

[github-actions]

This feature/bug fix has been released in version 5.7.4.