Fix #1406 pose angles are incorrectly applied

- adding global parameter `Viewer.useNewAnglesOrder` for migration purposes
mistic100 · Aug 8, 2024 · 634d871 · 634d871
1 parent c53131f
commit 634d871
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 13 deletions.
diff --git a/packages/core/src/Viewer.ts b/packages/core/src/Viewer.ts
@@ -66,6 +66,12 @@ import {
  * Photo Sphere Viewer controller
  */
 export class Viewer extends TypedEventTarget<ViewerEvents> {
+    /**
+     * Change the order in which the panoData and sphereCorrection angles are applied from 'ZXY' to 'YXZ'
+     * Will default to `true` in version 5.11
+     */
+    static useNewAnglesOrder = false;
+
     readonly state: ViewerState;
     readonly config: ParsedViewerConfig;
 

diff --git a/packages/core/src/services/DataHelper.ts b/packages/core/src/services/DataHelper.ts
@@ -296,7 +296,7 @@ export class DataHelper extends AbstractService {
     /**
      * Parse the pose angles of the pano data
      */
-    cleanPanoramaPose(panoData: PanoData): SphereCorrection {
+    cleanPanoramaPose(panoData: PanoData): SphereCorrection<number> {
         return {
             pan: MathUtils.degToRad(panoData?.poseHeading || 0),
             tilt: MathUtils.degToRad(panoData?.posePitch || 0),

diff --git a/packages/core/src/services/Renderer.ts b/packages/core/src/services/Renderer.ts
@@ -31,8 +31,8 @@ import {
     ZoomUpdatedEvent,
 } from '../events';
 import { PanoData, PanoramaOptions, Point, SphereCorrection, TextureData } from '../model';
-import { Animation, isNil } from '../utils';
-import type { Viewer } from '../Viewer';
+import { Animation, isNil, logWarn } from '../utils';
+import { Viewer } from '../Viewer';
 import { AbstractService } from './AbstractService';
 
 // https://discourse.threejs.org/t/updates-to-color-management-in-three-js-r152/50791
@@ -267,11 +267,19 @@ export class Renderer extends AbstractService {
      * @internal
      */
     setPanoramaPose(panoData: PanoData, mesh: Mesh = this.mesh) {
-        // By Google documentation the angles are applied on the camera in order : heading, pitch, roll
-        // here we apply the reverse transformation on the sphere
         const cleanCorrection = this.viewer.dataHelper.cleanPanoramaPose(panoData);
 
-        mesh.rotation.set(-cleanCorrection.tilt, -cleanCorrection.pan, -cleanCorrection.roll, 'ZXY');
+        const i = (cleanCorrection.pan ? 1 : 0) + (cleanCorrection.tilt ? 1 : 0) + (cleanCorrection.roll ? 1 : 0);
+        if (!Viewer.useNewAnglesOrder && i > 1) {
+            logWarn(`'panoData' Euler angles will change in version 5.11.0.`);
+            logWarn(`Set 'Viewer.useNewAnglesOrder = true;' to remove this warning (you might have to adapt your poseHeading/posePitch/poseRoll parameters).`);
+        }
+
+        if (Viewer.useNewAnglesOrder) {
+            mesh.rotation.set(cleanCorrection.tilt, cleanCorrection.pan, cleanCorrection.roll, 'YXZ');
+        } else {
+            mesh.rotation.set(-cleanCorrection.tilt, -cleanCorrection.pan, -cleanCorrection.roll, 'ZXY');
+        }
     }
 
     /**
@@ -281,7 +289,17 @@ export class Renderer extends AbstractService {
     setSphereCorrection(sphereCorrection: SphereCorrection, group: Object3D = this.meshContainer) {
         const cleanCorrection = this.viewer.dataHelper.cleanSphereCorrection(sphereCorrection);
 
-        group.rotation.set(cleanCorrection.tilt, cleanCorrection.pan, cleanCorrection.roll, 'ZXY');
+        const i = (cleanCorrection.pan ? 1 : 0) + (cleanCorrection.tilt ? 1 : 0) + (cleanCorrection.roll ? 1 : 0);
+        if (!Viewer.useNewAnglesOrder && i > 1) {
+            logWarn(`'sphereCorrection' Euler angles will change in version 5.11.0.`);
+            logWarn(`Set 'Viewer.useNewAnglesOrder = true;' to remove this warning (you might have to adapt your pan/tilt/roll parameters).`);
+        }
+
+        if (Viewer.useNewAnglesOrder) {
+            group.rotation.set(cleanCorrection.tilt, cleanCorrection.pan, cleanCorrection.roll, 'YXZ');
+        } else {
+            group.rotation.set(cleanCorrection.tilt, cleanCorrection.pan, cleanCorrection.roll, 'ZXY');
+        }
     }
 
     /**

diff --git a/packages/virtual-tour-plugin/src/VirtualTourPlugin.ts b/packages/virtual-tour-plugin/src/VirtualTourPlugin.ts
@@ -286,12 +286,6 @@ export class VirtualTourPlugin extends AbstractConfigurablePlugin<
                     panorama: node.panorama,
                     name: node.name,
                     thumbnail: node.thumbnail,
-                    options: {
-                        caption: node.caption,
-                        panoData: node.panoData,
-                        sphereCorrection: node.sphereCorrection,
-                        description: node.description,
-                    },
                 })),
                 (id) => {
                     this.setCurrentNode(id as string);
@@ -359,6 +353,7 @@ export class VirtualTourPlugin extends AbstractConfigurablePlugin<
                 const transitionOptions: VirtualTourTransitionOptions = {
                     ...getConfig.defaults.transitionOptions,
                     rotateTo: fromLinkPosition,
+                    zoomTo: fromLinkPosition ? this.viewer.getZoomLevel() : null, // prevents the adapter to apply InitialHorizontalFOVDegrees
                     ...(typeof this.config.transitionOptions === 'function'
                         ? this.config.transitionOptions(node, fromNode, fromLink)
                         : this.config.transitionOptions),
@@ -369,6 +364,7 @@ export class VirtualTourPlugin extends AbstractConfigurablePlugin<
                     return this.viewer
                         .animate({
                             ...transitionOptions.rotateTo,
+                            zoom: transitionOptions.zoomTo,
                             speed: transitionOptions.speed,
                         })
                         .then(() => [node, transitionOptions] as [VirtualTourNode, VirtualTourTransitionOptions]);