Close #251 : setPanorama accepts a new sphere_correction

src/js/PSVAnimation.js

@@ -121,7 +121,9 @@ PSVAnimation.prototype._run = function(timestamp) {
   if (progress < 1.0) {
     // interpolate properties
     for (name in this._options.properties) {
-      current[name] = this._options.properties[name].start + (this._options.properties[name].end - this._options.properties[name].start) * this._options.easing(progress);
+      if (this._options.properties[name]) {
+        current[name] = this._options.properties[name].start + (this._options.properties[name].end - this._options.properties[name].start) * this._options.easing(progress);
+      }
     }
 
     this._options.onTick(current, progress);
@@ -131,7 +133,9 @@ PSVAnimation.prototype._run = function(timestamp) {
   else {
     // call onTick one last time with final values
     for (name in this._options.properties) {
-      current[name] = this._options.properties[name].end;
+      if (this._options.properties[name]) {
+        current[name] = this._options.properties[name].end;
+      }
     }
 
     this._options.onTick(current, 1.0);

src/js/PhotoSphereViewer.core.js

@@ -536,13 +536,25 @@ PhotoSphereViewer.prototype._createSphere = function(scale) {
 
   var mesh = new THREE.Mesh(geometry, material);
   mesh.scale.x = -1;
-  mesh.rotation.x = this.config.sphere_correction.tilt;
-  mesh.rotation.y = this.config.sphere_correction.pan;
-  mesh.rotation.z = this.config.sphere_correction.roll;
 
   return mesh;
 };
 
+/**
+ * @summary Applies a SphereCorrection to a Mesh
+ * @param {THREE.Mesh} mesh
+ * @param {PhotoSphereViewer.SphereCorrection} sphere_correction
+ * @private
+ */
+PhotoSphereViewer.prototype._setSphereCorrection = function(mesh, sphere_correction) {
+  this.cleanSphereCorrection(sphere_correction);
+  mesh.rotation.set(
+    sphere_correction.tilt,
+    sphere_correction.pan,
+    sphere_correction.roll
+  );
+};
+
 /**
  * @summary Creates the cube mesh
  * @param {number} [scale=1]
@@ -577,7 +589,7 @@ PhotoSphereViewer.prototype._createCubemap = function(scale) {
 /**
  * @summary Performs transition between the current and a new texture
  * @param {THREE.Texture} texture
- * @param {PhotoSphereViewer.AnimateOptions} options
+ * @param {PhotoSphereViewer.PanoramaOptions} options
  * @returns {Promise}
  * @private
  * @throws {PSVError} if the panorama is a cubemap
@@ -608,19 +620,23 @@ PhotoSphereViewer.prototype._transition = function(texture, options) {
     mesh.material.map = texture;
     mesh.material.transparent = true;
     mesh.material.opacity = 0;
+
+    if (options.sphere_correction) {
+      this._setSphereCorrection(mesh, options.sphere_correction);
+    }
   }
 
   // rotate the new sphere to make the target position face the camera
   if (positionProvided) {
     this.cleanPosition(options);
 
     // Longitude rotation along the vertical axis
-    mesh.rotateY(options.longitude - this.prop.position.longitude);
+    var verticalAxis = new THREE.Vector3(0, 1, 0);
+    mesh.rotateOnWorldAxis(verticalAxis, options.longitude - this.prop.position.longitude);
 
     // Latitude rotation along the camera horizontal axis
-    var axis = new THREE.Vector3(0, 1, 0).cross(this.camera.getWorldDirection()).normalize();
-    var q = new THREE.Quaternion().setFromAxisAngle(axis, options.latitude - this.prop.position.latitude);
-    mesh.quaternion.multiplyQuaternions(q, mesh.quaternion);
+    var horizontalAxis = new THREE.Vector3(0, 1, 0).cross(this.camera.getWorldDirection()).normalize();
+    mesh.rotateOnWorldAxis(horizontalAxis, options.latitude - this.prop.position.latitude);
 
     // FIXME: find a better way to handle ranges
     if (this.config.latitude_range || this.config.longitude_range) {
@@ -668,6 +684,13 @@ PhotoSphereViewer.prototype._transition = function(texture, options) {
       if (positionProvided) {
         this.rotate(options);
       }
+
+      if (options.sphere_correction) {
+        this._setSphereCorrection(this.mesh, options.sphere_correction);
+      }
+      else {
+        this._setSphereCorrection(this.mesh, {});
+      }
     }.bind(this));
 };
 

src/js/PhotoSphereViewer.js

@@ -30,8 +30,6 @@
  * @typedef {PhotoSphereViewer.Position} PhotoSphereViewer.ExtendedPosition
  * @summary Object defining a spherical or texture position
  * @description A position that can be expressed either in spherical coordinates (radians or degrees) or in texture coordinates (pixels)
- * @property {float} longitude
- * @property {float} latitude
  * @property {int} x
  * @property {int} y
  */
@@ -42,6 +40,19 @@
  * @property {number} zoom - target zoom level between 0 and 100
  */
 
+/**
+ * @typedef {Object} PhotoSphereViewer.SphereCorrection
+ * @property {number} pan
+ * @property {number} tilt
+ * @property {number} roll
+ */
+
+/**
+ * @typedef {PhotoSphereViewer.AnimateOptions} PhotoSphereViewer.PanoramaOptions
+ * @summary Object defining panorama and animation options
+ * @property {PhotoSphereViewer.SphereCorrection} sphere_correction - new sphere correction to apply to the panorama
+ */
+
 /**
  * @typedef {Object} PhotoSphereViewer.CacheItem
  * @summary An entry in the memory cache
@@ -186,17 +197,6 @@ function PhotoSphereViewer(options) {
     this.config.default_fov = PSVUtils.bound(this.config.default_fov, this.config.min_fov, this.config.max_fov);
   }
 
-  // parse default_long, is between 0 and 2*PI
-  this.config.default_long = PSVUtils.parseAngle(this.config.default_long);
-
-  // parse default_lat, is between -PI/2 and PI/2
-  this.config.default_lat = PSVUtils.parseAngle(this.config.default_lat, true);
-
-  // parse camera_correction, is between -PI/2 and PI/2
-  this.config.sphere_correction.pan = PSVUtils.parseAngle(this.config.sphere_correction.pan, true);
-  this.config.sphere_correction.tilt = PSVUtils.parseAngle(this.config.sphere_correction.tilt, true);
-  this.config.sphere_correction.roll = PSVUtils.parseAngle(this.config.sphere_correction.roll, true);
-
   // default anim_lat is default_lat
   if (this.config.anim_lat === null) {
     this.config.anim_lat = this.config.default_lat;
@@ -461,17 +461,11 @@ function PhotoSphereViewer(options) {
 
   // apply default zoom level
   var tempZoom = (this.config.default_fov - this.config.min_fov) / (this.config.max_fov - this.config.min_fov) * 100;
-  this.zoom(tempZoom - 2 * (tempZoom - 50));
+  this.config.default_zoom_lvl = tempZoom - 2 * (tempZoom - 50);
 
   // actual move speed depends on pixel-ratio
   this.prop.move_speed = THREE.Math.degToRad(this.config.move_speed / PhotoSphereViewer.SYSTEM.pixelRatio);
 
-  // set default position
-  this.rotate({
-    longitude: this.config.default_long,
-    latitude: this.config.default_lat
-  });
-
   // load loader (!!)
   this.loader = new PSVLoader(this);
   this.loader.hide();

src/js/PhotoSphereViewer.public.js

@@ -169,7 +169,7 @@ PhotoSphereViewer.prototype.destroy = function() {
  * If the "position" is not defined, the camera will not move and the ongoing animation will continue<br>
  * "config.transition" must be configured for "transition" to be taken in account
  * @param {string|string[]} path - URL of the new panorama file
- * @param {PhotoSphereViewer.AnimateOptions} [options]
+ * @param {PhotoSphereViewer.PanoramaOptions} [options]
  * @param {boolean} [transition=false]
  * @returns {Promise}
  * @throws {PSVError} when another panorama is already loading
@@ -183,7 +183,15 @@ PhotoSphereViewer.prototype.setPanorama = function(path, options, transition) {
     transition = options;
     options = undefined;
   }
-  if (!options) {
+  if (!options && !this.scene) {
+    options = {
+      longitude: this.config.default_long,
+      latitude: this.config.default_lat,
+      zoom: this.config.default_zoom_lvl,
+      sphere_correction: this.config.sphere_correction
+    };
+  }
+  else if (!options) {
     options = {};
   }
 
@@ -213,6 +221,10 @@ PhotoSphereViewer.prototype.setPanorama = function(path, options, transition) {
       .then(function(texture) {
         this._setTexture(texture);
 
+        if (options.sphere_correction && !this.prop.isCubemap) {
+          this._setSphereCorrection(this.mesh, options.sphere_correction);
+        }
+
         if (positionProvided) {
           this.rotate(options);
         }

src/js/PhotoSphereViewer.utils.js

@@ -167,6 +167,16 @@ PhotoSphereViewer.prototype.cleanPosition = function(position) {
   position.latitude = PSVUtils.parseAngle(position.latitude, true);
 };
 
+/**
+ * @summary Clean a SphereCorrection object
+ * @param {PhotoSphereViewer.SphereCorrection} sphere_correction - mutated
+ */
+PhotoSphereViewer.prototype.cleanSphereCorrection = function(sphere_correction) {
+  sphere_correction.pan = PSVUtils.parseAngle(sphere_correction.pan || 0, true);
+  sphere_correction.tilt = PSVUtils.parseAngle(sphere_correction.tilt || 0, true);
+  sphere_correction.roll = PSVUtils.parseAngle(sphere_correction.roll || 0, true);
+};
+
 /**
  * @summary Checks if an object is a {PhotoSphereViewer.ExtendedPosition}, ie has x/y or longitude/latitude
  * @param {object} object