redhotmagma-visualization 1.43.4 → 1.44.1

package/Three/Three3DScene.js

@@ -13,6 +13,7 @@ var _RGBELoader = require("three/examples/jsm/loaders/RGBELoader");
 var _get = _interopRequireDefault(require("lodash/get"));
 var _size = _interopRequireDefault(require("lodash/size"));
 var _isPlainObject = _interopRequireDefault(require("lodash/isPlainObject"));
+var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
 var _glTFExporter = require("./Exporters/glTFExporter");
 var _findIndex = _interopRequireDefault(require("lodash/findIndex"));
 var _merge = _interopRequireDefault(require("lodash/merge"));
@@ -528,119 +529,32 @@ var Three3DScene = exports.Three3DScene = /*#__PURE__*/function (_Three3D) {
       });
     }
   }, {
-    key: "applyCustomizations",
+    key: "applyMaterialParams",
     value: function () {
-      var _applyCustomizations = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3(model, item, imageLoader) {
+      var _applyMaterialParams = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3(model, materialOptions, imageLoader) {
         var _this4 = this;
-        var options,
-          _options$saveAndResto,
-          saveAndRestore,
-          params,
-          material,
-          _params,
-          _args3 = arguments;
+        var params;
         return _regeneratorRuntime().wrap(function _callee3$(_context3) {
           while (1) switch (_context3.prev = _context3.next) {
             case 0:
-              options = _args3.length > 3 && _args3[3] !== undefined ? _args3[3] : {};
-              _options$saveAndResto = options.saveAndRestore, saveAndRestore = _options$saveAndResto === void 0 ? true : _options$saveAndResto;
-              params = item.params;
-              if (params) {
-                Object.keys(params).forEach(function (p) {
-                  // skip not allowed props
-                  if (allowedObjectProps.indexOf(p) === -1) {
-                    return;
-                  }
-                  // restore original value first
-                  if (params[p] === UNSET) {
-                    if (model.originalValues && model.originalValues[p]) {
-                      model[p].copy(model.originalValues[p]);
-                    }
-                    return;
-                  }
-                  // store original value for later restoration
-                  if (!model.originalValues) {
-                    model.originalValues = {};
-                  }
-                  if (!model.originalValues[p]) {
-                    model.originalValues[p] = model[p] ? model[p].clone() : model[p];
-                  }
-                  // apply the param values
-                  switch (p) {
-                    case "scale":
-                      {
-                        var _params$p = params[p],
-                          _params$p$x = _params$p.x,
-                          x = _params$p$x === void 0 ? 1 : _params$p$x,
-                          _params$p$y = _params$p.y,
-                          y = _params$p$y === void 0 ? 1 : _params$p$y,
-                          _params$p$z = _params$p.z,
-                          z = _params$p$z === void 0 ? 1 : _params$p$z;
-                        model[p].set(x, y, z);
-                        break;
-                      }
-                    case "rotation":
-                    case "position":
-                      {
-                        var _params$p2 = params[p],
-                          _params$p2$x = _params$p2.x,
-                          _x4 = _params$p2$x === void 0 ? 0 : _params$p2$x,
-                          _params$p2$y = _params$p2.y,
-                          _y = _params$p2$y === void 0 ? 0 : _params$p2$y,
-                          _params$p2$z = _params$p2.z,
-                          _z = _params$p2$z === void 0 ? 0 : _params$p2$z;
-                        model[p].set(_x4, _y, _z);
-                        break;
-                      }
-                  }
-                });
-              }
-
-              // store & restore original material and textures before applying new param values
-              saveAndRestore && Object.values(getMaterials(model)).map(function (mat) {
-                if (!mat.original) {
-                  mat.original = mat.clone();
-                  Object.values(mat).filter(function (value) {
-                    return value && value.isTexture;
-                  }).forEach(function (texture) {
-                    if (!texture.original) {
-                      texture.original = texture.clone();
-                    }
-                  });
-                } else {
-                  mat.copy(mat.original);
-                  Object.keys(mat).forEach(function (key) {
-                    var value = mat[key];
-                    if (value && value.original) {
-                      value.copy(value.original);
-                    }
-                  });
-                  mat.needsUpdate = true;
-                }
-              });
-
-              // set new material params if provided
-              // the material object should be located under item.params.material
-              // item.material is only for backward compatibility
-              material = params && params.material || item.material;
-              if (!material) {
-                _context3.next = 12;
+              if (!materialOptions) {
+                _context3.next = 6;
                 break;
               }
-              _params = material.params;
-              _context3.t0 = _params;
+              params = materialOptions.params;
+              _context3.t0 = params;
               if (!_context3.t0) {
-                _context3.next = 12;
+                _context3.next = 6;
                 break;
               }
-              _context3.next = 12;
+              _context3.next = 6;
               return Promise.all(getAllMaterials(model).map( /*#__PURE__*/function () {
                 var _ref6 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(material) {
                   var materialName, materialNames;
                   return _regeneratorRuntime().wrap(function _callee2$(_context2) {
                     while (1) switch (_context2.prev = _context2.next) {
                       case 0:
-                        materialName = _params.materialName, materialNames = _params.materialNames; // check materialNames list if provided
+                        materialName = params.materialName, materialNames = params.materialNames; // check materialNames list if provided
                         if (!(materialNames instanceof Array && materialNames.indexOf(material.name) === -1)) {
                           _context2.next = 3;
                           break;
@@ -654,13 +568,13 @@ var Three3DScene = exports.Three3DScene = /*#__PURE__*/function (_Three3D) {
                         return _context2.abrupt("return");
                       case 5:
                         _context2.next = 7;
-                        return Promise.all(Object.keys(_params).map( /*#__PURE__*/function () {
+                        return Promise.all(Object.keys(params).map( /*#__PURE__*/function () {
                           var _ref7 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(p) {
                             var texture, value;
                             return _regeneratorRuntime().wrap(function _callee$(_context) {
                               while (1) switch (_context.prev = _context.next) {
                                 case 0:
-                                  if (!(_params[p] === UNSET)) {
+                                  if (!(params[p] === UNSET)) {
                                     _context.next = 2;
                                     break;
                                   }
@@ -671,14 +585,14 @@ var Three3DScene = exports.Three3DScene = /*#__PURE__*/function (_Three3D) {
                                   break;
                                 case 5:
                                   texture = material[p] || material.map && material.map.clone() || new _three.Texture();
-                                  _context.t1 = findImageBySrc(_this4.sceneContainer, "".concat(_this4._modelBasePath).concat(_params[p]));
+                                  _context.t1 = findImageBySrc(_this4.sceneContainer, "".concat(_this4._modelBasePath).concat(params[p]));
                                   if (_context.t1) {
                                     _context.next = 11;
                                     break;
                                   }
                                   _context.next = 10;
                                   return new Promise(function (resolve, reject) {
-                                    return imageLoader.load(_params[p], resolve, undefined, reject);
+                                    return imageLoader.load(params[p], resolve, undefined, reject);
                                   });
                                 case 10:
                                   _context.t1 = _context.sent;
@@ -688,13 +602,13 @@ var Three3DScene = exports.Three3DScene = /*#__PURE__*/function (_Three3D) {
                                   material[p] = texture;
                                   return _context.abrupt("break", 20);
                                 case 15:
-                                  value = parseFloat(_params[p]);
+                                  value = parseFloat(params[p]);
                                   if (!isNaN(value)) {
                                     material[p] = value;
                                   }
                                   return _context.abrupt("break", 20);
                                 case 18:
-                                  material[p] = new _three.Color(_params[p]);
+                                  material[p] = new _three.Color(params[p]);
                                   return _context.abrupt("break", 20);
                                 case 20:
                                 case "end":
@@ -702,7 +616,7 @@ var Three3DScene = exports.Three3DScene = /*#__PURE__*/function (_Three3D) {
                               }
                             }, _callee);
                           }));
-                          return function (_x6) {
+                          return function (_x5) {
                             return _ref7.apply(this, arguments);
                           };
                         }()));
@@ -715,17 +629,138 @@ var Three3DScene = exports.Three3DScene = /*#__PURE__*/function (_Three3D) {
                     }
                   }, _callee2);
                 }));
-                return function (_x5) {
+                return function (_x4) {
                   return _ref6.apply(this, arguments);
                 };
               }()));
-            case 12:
+            case 6:
             case "end":
               return _context3.stop();
           }
         }, _callee3);
       }));
-      function applyCustomizations(_x, _x2, _x3) {
+      function applyMaterialParams(_x, _x2, _x3) {
+        return _applyMaterialParams.apply(this, arguments);
+      }
+      return applyMaterialParams;
+    }()
+  }, {
+    key: "applyCustomizations",
+    value: function () {
+      var _applyCustomizations = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee4(model, item, imageLoader) {
+        var _this5 = this;
+        var options,
+          _options$saveAndResto,
+          saveAndRestore,
+          params,
+          materials,
+          material,
+          allMaterials,
+          _args4 = arguments;
+        return _regeneratorRuntime().wrap(function _callee4$(_context4) {
+          while (1) switch (_context4.prev = _context4.next) {
+            case 0:
+              options = _args4.length > 3 && _args4[3] !== undefined ? _args4[3] : {};
+              _options$saveAndResto = options.saveAndRestore, saveAndRestore = _options$saveAndResto === void 0 ? true : _options$saveAndResto;
+              params = item.params;
+              if (params) {
+                Object.keys(params).forEach(function (p) {
+                  // skip not allowed props
+                  if (allowedObjectProps.indexOf(p) === -1) {
+                    return;
+                  }
+                  // restore original value first
+                  if (params[p] === UNSET) {
+                    if (model.originalValues && model.originalValues[p]) {
+                      model[p].copy(model.originalValues[p]);
+                    }
+                    return;
+                  }
+                  // store original value for later restoration
+                  if (!model.originalValues) {
+                    model.originalValues = {};
+                  }
+                  if (!model.originalValues[p]) {
+                    model.originalValues[p] = model[p] ? model[p].clone() : model[p];
+                  }
+                  // apply the param values
+                  switch (p) {
+                    case "scale":
+                      {
+                        var _params$p = params[p],
+                          _params$p$x = _params$p.x,
+                          x = _params$p$x === void 0 ? 1 : _params$p$x,
+                          _params$p$y = _params$p.y,
+                          y = _params$p$y === void 0 ? 1 : _params$p$y,
+                          _params$p$z = _params$p.z,
+                          z = _params$p$z === void 0 ? 1 : _params$p$z;
+                        model[p].set(x, y, z);
+                        break;
+                      }
+                    case "rotation":
+                    case "position":
+                      {
+                        var _params$p2 = params[p],
+                          _params$p2$x = _params$p2.x,
+                          _x9 = _params$p2$x === void 0 ? 0 : _params$p2$x,
+                          _params$p2$y = _params$p2.y,
+                          _y = _params$p2$y === void 0 ? 0 : _params$p2$y,
+                          _params$p2$z = _params$p2.z,
+                          _z = _params$p2$z === void 0 ? 0 : _params$p2$z;
+                        model[p].set(_x9, _y, _z);
+                        break;
+                      }
+                  }
+                });
+              }
+
+              // store & restore original material and textures before applying new param values
+              saveAndRestore && Object.values(getMaterials(model)).map(function (mat) {
+                if (!mat.original) {
+                  mat.original = mat.clone();
+                  Object.values(mat).filter(function (value) {
+                    return value && value.isTexture;
+                  }).forEach(function (texture) {
+                    if (!texture.original) {
+                      texture.original = texture.clone();
+                    }
+                  });
+                } else {
+                  mat.copy(mat.original);
+                  Object.keys(mat).forEach(function (key) {
+                    var value = mat[key];
+                    if (value && value.original) {
+                      value.copy(value.original);
+                    }
+                  });
+                  mat.needsUpdate = true;
+                }
+              });
+
+              // set new material params if provided
+              // the material object should be located under item.params.material
+              // item.material is only for backward compatibility
+              materials = (params === null || params === void 0 ? void 0 : params.materials) || [];
+              material = (params === null || params === void 0 ? void 0 : params.material) || item.material;
+              allMaterials = [].concat(_toConsumableArray(materials), [material]).filter(function (v) {
+                return v;
+              });
+              _context4.t0 = allMaterials.length;
+              if (!_context4.t0) {
+                _context4.next = 12;
+                break;
+              }
+              _context4.next = 12;
+              return Promise.all(allMaterials.map(function (material) {
+                return _this5.applyMaterialParams(model, material, imageLoader);
+              }));
+            case 12:
+            case "end":
+              return _context4.stop();
+          }
+        }, _callee4);
+      }));
+      function applyCustomizations(_x6, _x7, _x8) {
         return _applyCustomizations.apply(this, arguments);
       }
       return applyCustomizations;
@@ -733,7 +768,7 @@ var Three3DScene = exports.Three3DScene = /*#__PURE__*/function (_Three3D) {
   }, {
     key: "loadSceneContainer",
     value: function loadSceneContainer(item) {
-      var _this5 = this;
+      var _this6 = this;
       var path;
       var itemType = _typeof(item);
       if ("string" === itemType) {
@@ -752,32 +787,32 @@ var Three3DScene = exports.Three3DScene = /*#__PURE__*/function (_Three3D) {
       var imageLoader = this.createImageLoader(loaderOptions);
       return new Promise(function (resolve, reject) {
         modelLoader.load(modelFileName, /*#__PURE__*/function () {
-          var _ref8 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee4(gltf) {
+          var _ref8 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee5(gltf) {
             var model;
-            return _regeneratorRuntime().wrap(function _callee4$(_context4) {
-              while (1) switch (_context4.prev = _context4.next) {
+            return _regeneratorRuntime().wrap(function _callee5$(_context5) {
+              while (1) switch (_context5.prev = _context5.next) {
                 case 0:
                   model = gltf.scene;
                   model.userData.path = path;
                   if (undefined !== item.index) {
                     model.userData.index = item.index;
                   }
-                  _this5.fixImportedScene(model);
+                  _this6.fixImportedScene(model);
                   if (!("object" === itemType)) {
-                    _context4.next = 7;
+                    _context5.next = 7;
                     break;
                   }
-                  _context4.next = 7;
-                  return _this5.applyCustomizations(model, item, imageLoader);
+                  _context5.next = 7;
+                  return _this6.applyCustomizations(model, item, imageLoader);
                 case 7:
                   resolve(gltf);
                 case 8:
                 case "end":
-                  return _context4.stop();
+                  return _context5.stop();
               }
-            }, _callee4);
+            }, _callee5);
           }));
-          return function (_x7) {
+          return function (_x10) {
             return _ref8.apply(this, arguments);
           };
         }(), undefined, reject);
@@ -813,10 +848,10 @@ var Three3DScene = exports.Three3DScene = /*#__PURE__*/function (_Three3D) {
   }, {
     key: "initCustomizableMaterialsIfNeeded",
     value: function () {
-      var _initCustomizableMaterialsIfNeeded = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee5() {
+      var _initCustomizableMaterialsIfNeeded = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee6() {
         var materials;
-        return _regeneratorRuntime().wrap(function _callee5$(_context5) {
-          while (1) switch (_context5.prev = _context5.next) {
+        return _regeneratorRuntime().wrap(function _callee6$(_context6) {
+          while (1) switch (_context6.prev = _context6.next) {
             case 0:
               // reset customizable materials to always find the right one in the loaded scene
               this._customizableMaterialKeys.length = 0;
@@ -826,13 +861,13 @@ var Three3DScene = exports.Three3DScene = /*#__PURE__*/function (_Three3D) {
                 this.guessCustomizableMaterialNameIfNotSet(materials);
                 this.findCustomizableMaterials(materials);
               }
-              _context5.next = 6;
+              _context6.next = 6;
               return this.dispatchMaterialUpdateEvent();
             case 6:
             case "end":
-              return _context5.stop();
+              return _context6.stop();
           }
-        }, _callee5, this);
+        }, _callee6, this);
       }));
       function initCustomizableMaterialsIfNeeded() {
         return _initCustomizableMaterialsIfNeeded.apply(this, arguments);
@@ -856,56 +891,56 @@ var Three3DScene = exports.Three3DScene = /*#__PURE__*/function (_Three3D) {
   }, {
     key: "loadSceneSync",
     value: function () {
-      var _loadSceneSync = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee6(resourceList) {
+      var _loadSceneSync = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee7(resourceList) {
         var result;
-        return _regeneratorRuntime().wrap(function _callee6$(_context6) {
-          while (1) switch (_context6.prev = _context6.next) {
+        return _regeneratorRuntime().wrap(function _callee7$(_context7) {
+          while (1) switch (_context7.prev = _context7.next) {
             case 0:
-              _context6.prev = 0;
-              _context6.next = 3;
+              _context7.prev = 0;
+              _context7.next = 3;
               return this._loadScenePromise;
             case 3:
-              _context6.next = 7;
+              _context7.next = 7;
               break;
             case 5:
-              _context6.prev = 5;
-              _context6.t0 = _context6["catch"](0);
+              _context7.prev = 5;
+              _context7.t0 = _context7["catch"](0);
             case 7:
-              _context6.prev = 7;
+              _context7.prev = 7;
               this._loadScenePromise = this.loadScene(resourceList);
-              _context6.next = 11;
+              _context7.next = 11;
               return this._loadScenePromise;
             case 11:
-              result = _context6.sent;
-              _context6.next = 17;
+              result = _context7.sent;
+              _context7.next = 17;
               break;
             case 14:
-              _context6.prev = 14;
-              _context6.t1 = _context6["catch"](7);
+              _context7.prev = 14;
+              _context7.t1 = _context7["catch"](7);
               // remove promise if it is failed
               delete this._loadScenePromise;
             case 17:
-              _context6.prev = 17;
-              _context6.next = 20;
+              _context7.prev = 17;
+              _context7.next = 20;
               return this.envMapPromise;
             case 20:
-              _context6.next = 24;
+              _context7.next = 24;
               break;
             case 22:
-              _context6.prev = 22;
-              _context6.t2 = _context6["catch"](17);
+              _context7.prev = 22;
+              _context7.t2 = _context7["catch"](17);
             case 24:
               if (!this.isAnimating()) {
                 this.render();
               }
-              return _context6.abrupt("return", result);
+              return _context7.abrupt("return", result);
             case 26:
             case "end":
-              return _context6.stop();
+              return _context7.stop();
           }
-        }, _callee6, this, [[0, 5], [7, 14], [17, 22]]);
+        }, _callee7, this, [[0, 5], [7, 14], [17, 22]]);
       }));
-      function loadSceneSync(_x8) {
+      function loadSceneSync(_x11) {
         return _loadSceneSync.apply(this, arguments);
       }
       return loadSceneSync;
@@ -913,11 +948,11 @@ var Three3DScene = exports.Three3DScene = /*#__PURE__*/function (_Three3D) {
   }, {
     key: "loadScene",
     value: function () {
-      var _loadScene = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee7(resourceList) {
-        var _this6 = this;
+      var _loadScene = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee8(resourceList) {
+        var _this7 = this;
         var sceneContainer, _diffResourceLists, toBeRemoved, toBeAdded, toBeUpdated, toBeApplied, shouldResetScene, toBeDisposed, triggerLoadEvent, sceneParts, imageLoader, mixer, animations;
-        return _regeneratorRuntime().wrap(function _callee7$(_context7) {
-          while (1) switch (_context7.prev = _context7.next) {
+        return _regeneratorRuntime().wrap(function _callee8$(_context8) {
+          while (1) switch (_context8.prev = _context8.next) {
             case 0:
               sceneContainer = this.sceneContainer;
               this.stopAnimation();
@@ -942,12 +977,12 @@ var Three3DScene = exports.Three3DScene = /*#__PURE__*/function (_Three3D) {
               });
               triggerLoadEvent = !!(toBeAdded.length || toBeUpdated.length || toBeApplied.length);
               triggerLoadEvent && this.onLoadStart();
-              _context7.next = 13;
+              _context8.next = 13;
               return Promise.all(toBeAdded.map(function (item) {
-                return _this6.loadSceneContainer(item);
+                return _this7.loadSceneContainer(item);
               }));
             case 13:
-              sceneParts = _context7.sent;
+              sceneParts = _context8.sent;
               sceneParts.forEach(function (_ref10) {
                 var scene = _ref10.scene,
                   animations = _ref10.animations;
@@ -955,10 +990,10 @@ var Three3DScene = exports.Three3DScene = /*#__PURE__*/function (_Three3D) {
 
                 // collect animations
                 if (animations.length) {
-                  var _this6$animations;
-                  (_this6$animations = _this6.animations).push.apply(_this6$animations, _toConsumableArray(animations.filter(function (_ref11) {
+                  var _this7$animations;
+                  (_this7$animations = _this7.animations).push.apply(_this7$animations, _toConsumableArray(animations.filter(function (_ref11) {
                     var name = _ref11.name;
-                    return !_this6.animations.find(function (_ref12) {
+                    return !_this7.animations.find(function (_ref12) {
                       var existingName = _ref12.name;
                       return name !== existingName;
                     });
@@ -966,7 +1001,7 @@ var Three3DScene = exports.Three3DScene = /*#__PURE__*/function (_Three3D) {
                 }
               });
               sceneContainer.updateWorldMatrix(true, true);
-              _context7.next = 18;
+              _context8.next = 18;
               return Promise.all(toBeUpdated.map(function (item) {
                 var itemSrc = getSrc(item);
                 var object = findObjectWith(sceneContainer, function (_ref13) {
@@ -974,28 +1009,30 @@ var Three3DScene = exports.Three3DScene = /*#__PURE__*/function (_Three3D) {
                   return userData.path === itemSrc && userData.index === item.index;
                 });
                 var path = getSrc(item);
-                var _this6$parseModelPath = _this6.parseModelPath(path),
-                  resourcePath = _this6$parseModelPath.resourcePath;
+                var _this7$parseModelPath = _this7.parseModelPath(path),
+                  resourcePath = _this7$parseModelPath.resourcePath;
                 var loaderOptions = {
-                  basePath: _this6._modelBasePath,
+                  basePath: _this7._modelBasePath,
                   resourcePath: resourcePath
                 };
-                var imageLoader = _this6.createImageLoader(loaderOptions);
-                return object && _this6.applyCustomizations(object, item, imageLoader);
+                var imageLoader = _this7.createImageLoader(loaderOptions);
+                return object && _this7.applyCustomizations(object, item, imageLoader);
               }));
             case 18:
               // apply global or targeted param values
               imageLoader = this.createImageLoader({
                 basePath: this._modelBasePath
               });
-              _context7.next = 21;
+              _context8.next = 21;
               return Promise.all(toBeApplied.map(function (_ref14) {
                 var optionParams = _ref14.params,
                   files = _ref14.files;
                 // find model based on objectName
                 var objectName = optionParams.objectName,
                   _optionParams$materia = optionParams.material,
-                  material = _optionParams$materia === void 0 ? {} : _optionParams$materia;
+                  material = _optionParams$materia === void 0 ? {} : _optionParams$materia,
+                  _optionParams$materia2 = optionParams.materials,
+                  materials = _optionParams$materia2 === void 0 ? [] : _optionParams$materia2;
                 var objects = objectName ? findAllObjectsWith(sceneContainer, function (_ref15) {
                   var name = _ref15.name;
                   return name === objectName;
@@ -1005,17 +1042,22 @@ var Three3DScene = exports.Three3DScene = /*#__PURE__*/function (_Three3D) {
                   params: _objectSpread(_objectSpread({}, optionParams), {}, {
                     material: _objectSpread(_objectSpread({}, material), {}, {
                       params: params && mapObjectValues(params, files)
+                    }),
+                    materials: materials.map(function (material) {
+                      return _objectSpread(_objectSpread({}, material), {}, {
+                        params: material.params && mapObjectValues(material.params, files)
+                      });
                     })
                   })
                 };
                 return Promise.all(objects.map(function (object) {
-                  return _this6.applyCustomizations(object, item, imageLoader, {
+                  return _this7.applyCustomizations(object, item, imageLoader, {
                     saveAndRestore: false
                   });
                 }));
               }));
             case 21:
-              _context7.next = 23;
+              _context8.next = 23;
               return this.initCustomizableMaterialsIfNeeded();
             case 23:
               this.setupGround();
@@ -1034,11 +1076,11 @@ var Three3DScene = exports.Three3DScene = /*#__PURE__*/function (_Three3D) {
               }
             case 29:
             case "end":
-              return _context7.stop();
+              return _context8.stop();
           }
-        }, _callee7, this);
+        }, _callee8, this);
       }));
-      function loadScene(_x9) {
+      function loadScene(_x12) {
         return _loadScene.apply(this, arguments);
       }
       return loadScene;
@@ -1070,7 +1112,7 @@ var Three3DScene = exports.Three3DScene = /*#__PURE__*/function (_Three3D) {
           var lookat = dir.multiplyScalar(distance).add(position);
           var rotation = new _three.Quaternion();
           camera.getWorldQuaternion(rotation);
-          var orientation = _three.Object3D.DefaultUp.clone().applyQuaternion(rotation);
+          var orientation = _three.Object3D.DefaultUp.clone();
           var fov = camera.fov || 45;
           var cameraView = {
             position: position,
@@ -1146,11 +1188,6 @@ var Three3DScene = exports.Three3DScene = /*#__PURE__*/function (_Three3D) {
         };
       }
       this.screenshotViews = this.calculateRelativeViews(this.relativeScreenshotViews, center, (this.controls.minDistance + this.controls.maxDistance) * 0.5);
-      if (!this._firstCameraInitDone) {
-        this._firstCameraInitDone = true;
-        this.currentCameraView = null;
-        this.jumpToView("default", false);
-      }
     }
   }, {
     key: "initCameraViews",
@@ -1164,8 +1201,18 @@ var Three3DScene = exports.Three3DScene = /*#__PURE__*/function (_Three3D) {
       }
       var box = this.getSceneContainerBox();
       var center = box.getCenter(new _three.Vector3());
+      var currentCameraName = this.currentCameraView;
+      var previousCameraView = this.cameraViews[currentCameraName];
       this.setupRelativeCameras(center);
       this.setupSceneCameras(cameras, center);
+      if (!this._firstCameraInitDone) {
+        this._firstCameraInitDone = true;
+        this.currentCameraView = null;
+        this.jumpToView("default", false);
+      } else if (previousCameraView && this.cameraViews[currentCameraName] && !(0, _isEqual["default"])(previousCameraView, this.cameraViews[currentCameraName])) {
+        this.currentCameraView = null;
+        this.jumpToView(currentCameraName, true);
+      }
     }
   }, {
     key: "jumpToView",
@@ -1360,27 +1407,27 @@ var Three3DScene = exports.Three3DScene = /*#__PURE__*/function (_Three3D) {
   }, {
     key: "update",
     value: function () {
-      var _update = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee8(configuration) {
+      var _update = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee9(configuration) {
         var sceneData;
-        return _regeneratorRuntime().wrap(function _callee8$(_context8) {
-          while (1) switch (_context8.prev = _context8.next) {
+        return _regeneratorRuntime().wrap(function _callee9$(_context9) {
+          while (1) switch (_context9.prev = _context9.next) {
             case 0:
               this._configuration = configuration;
               sceneData = (0, _get["default"])(configuration, "visualizationData.sceneData", false) || (0, _get["default"])(configuration, "visualizationData.designViews[0].models.".concat(this._materialVariantPath), false);
-              _context8.t0 = sceneData;
-              if (!_context8.t0) {
-                _context8.next = 6;
+              _context9.t0 = sceneData;
+              if (!_context9.t0) {
+                _context9.next = 6;
                 break;
               }
-              _context8.next = 6;
+              _context9.next = 6;
               return this.loadSceneSync(sceneData);
             case 6:
             case "end":
-              return _context8.stop();
+              return _context9.stop();
           }
-        }, _callee8, this);
+        }, _callee9, this);
       }));
-      function update(_x10) {
+      function update(_x13) {
         return _update.apply(this, arguments);
       }
       return update;
@@ -1388,24 +1435,24 @@ var Three3DScene = exports.Three3DScene = /*#__PURE__*/function (_Three3D) {
   }, {
     key: "updateMaterial",
     value: function () {
-      var _updateMaterial = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee9() {
+      var _updateMaterial = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee10() {
         var sceneData;
-        return _regeneratorRuntime().wrap(function _callee9$(_context9) {
-          while (1) switch (_context9.prev = _context9.next) {
+        return _regeneratorRuntime().wrap(function _callee10$(_context10) {
+          while (1) switch (_context10.prev = _context10.next) {
             case 0:
               sceneData = (0, _get["default"])(this._designAreaList, "[0].designView.models.".concat(this._materialVariantPath)) || (0, _get["default"])(this._configuration, "visualizationData.designViews[0].models.".concat(this._materialVariantPath)) || false;
-              _context9.t0 = sceneData;
-              if (!_context9.t0) {
-                _context9.next = 5;
+              _context10.t0 = sceneData;
+              if (!_context10.t0) {
+                _context10.next = 5;
                 break;
               }
-              _context9.next = 5;
+              _context10.next = 5;
               return this.loadSceneSync(sceneData);
             case 5:
             case "end":
-              return _context9.stop();
+              return _context10.stop();
           }
-        }, _callee9, this);
+        }, _callee10, this);
       }));
       function updateMaterial() {
         return _updateMaterial.apply(this, arguments);
@@ -1415,27 +1462,27 @@ var Three3DScene = exports.Three3DScene = /*#__PURE__*/function (_Three3D) {
   }, {
     key: "updateDesignAreaList",
     value: function () {
-      var _updateDesignAreaList = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee10(designAreaList) {
+      var _updateDesignAreaList = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee11(designAreaList) {
         var sceneData;
-        return _regeneratorRuntime().wrap(function _callee10$(_context10) {
-          while (1) switch (_context10.prev = _context10.next) {
+        return _regeneratorRuntime().wrap(function _callee11$(_context11) {
+          while (1) switch (_context11.prev = _context11.next) {
             case 0:
               this._designAreaList = designAreaList;
               sceneData = (0, _get["default"])(designAreaList, "[0].designView.models.".concat(this._materialVariantPath));
-              _context10.t0 = sceneData;
-              if (!_context10.t0) {
-                _context10.next = 6;
+              _context11.t0 = sceneData;
+              if (!_context11.t0) {
+                _context11.next = 6;
                 break;
               }
-              _context10.next = 6;
+              _context11.next = 6;
               return this.loadSceneSync(sceneData);
             case 6:
             case "end":
-              return _context10.stop();
+              return _context11.stop();
           }
-        }, _callee10, this);
+        }, _callee11, this);
       }));
-      function updateDesignAreaList(_x11) {
+      function updateDesignAreaList(_x14) {
         return _updateDesignAreaList.apply(this, arguments);
       }
       return updateDesignAreaList;