redhotmagma-visualization 1.37.3 → 1.38.1

package/Three/Three3D.js

@@ -15,8 +15,6 @@ var _first = _interopRequireDefault(require("lodash/first"));
 
 var _findIndex = _interopRequireDefault(require("lodash/findIndex"));
 
-var _get2 = _interopRequireDefault(require("lodash/get"));
-
 var _ThreeBase2 = require("./ThreeBase");
 
 var _MTLLoader = _interopRequireDefault(require("./Loaders/MTLLoader"));
@@ -847,16 +845,17 @@ var Three3D = /*#__PURE__*/function (_ThreeBase) {
      * @param {Vector3|undefined} position The new position
      * @param {Vector3|undefined} orientation The new orientation of the camera (up vector)
      * @param {Vector3|undefined} target The new look at point
-     * @param {{[position]: number, [target]: number, [orientation]: number}} duration The animation duration in ms
+     * @param {number|undefined} fov The new fov
+     * @param {{[position]: number, [target]: number, [orientation]: number, [fov]: number}} duration The animation duration in ms
      * @requires TWEEN
      */
 
   }, {
     key: "moveCamera",
-    value: function moveCamera(position, orientation, target) {
+    value: function moveCamera(position, orientation, target, fov) {
       var _this4 = this;
 
-      var duration = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
+      var duration = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : {};
       this.cleanUpCameraAnimations();
       var animationDef = new _Deferred.DeferredGroup();
 
@@ -884,6 +883,14 @@ var Three3D = /*#__PURE__*/function (_ThreeBase) {
         new _tween["default"].Tween(this.controls.target, this.cameraTweenGroup).to(target, duration.target || 500).easing(_tween["default"].Easing.Quadratic.Out).onComplete(animationDef.createResolver()).start();
       }
 
+      if (fov) {
+        new _tween["default"].Tween(this.camera, this.cameraTweenGroup).to({
+          fov: fov
+        }, duration.fov || 700).easing(_tween["default"].Easing.Quadratic.Out).onUpdate(function () {
+          _this4.camera.updateProjectionMatrix();
+        }).start();
+      }
+
       animationDef.then(function () {
         return _this4.stopAnimation("camera");
       });
@@ -917,19 +924,21 @@ var Three3D = /*#__PURE__*/function (_ThreeBase) {
       var _this$cameraViews$def = _objectSpread(_objectSpread({}, this.cameraViews["default"]), view),
           position = _this$cameraViews$def.position,
           orientation = _this$cameraViews$def.orientation,
-          target = _this$cameraViews$def.lookat;
+          target = _this$cameraViews$def.lookat,
+          fov = _this$cameraViews$def.fov;
 
       if (animate) {
-        this.moveCamera(position, orientation, target, duration);
+        this.moveCamera(position, orientation, target, fov, duration);
       } else {
-        this.setCameraPosition(position, orientation, target);
+        this.setCameraPosition(position, orientation, target, fov);
       }
     }
     /**
      * Sets the camera position and renders the scene if it's not animating
      * @param {{x: number|undefined, y: number|undefined, z: number|undefined}} position
-     * @param {{x: number|undefined, y: number|undefined, z: number|undefined}} oritentation
+     * @param {{x: number|undefined, y: number|undefined, z: number|undefined}} orientation
      * @param {{x: number|undefined, y: number|undefined, z: number|undefined}} target
+     * @param {number|undefined} fov
      */
 
   }, {
@@ -938,17 +947,23 @@ var Three3D = /*#__PURE__*/function (_ThreeBase) {
       var position = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
         y: 30
       };
-      var oritentation = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+      var orientation = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
       var target = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {
         y: 10
       };
+      var fov = arguments.length > 3 ? arguments[3] : undefined;
 
       if (!this.camera) {
         throw new Error("The camera must be available for the setCameraPosition call!");
       }
 
       Object.assign(this.camera.position, position);
-      Object.assign(this.camera.up, oritentation);
+      Object.assign(this.camera.up, orientation);
+
+      if (fov) {
+        this.camera.fov = fov;
+        this.camera.updateProjectionMatrix();
+      }
 
       if (this.controls && this.controls.target) {
         Object.assign(this.controls.target, target);
@@ -971,7 +986,7 @@ var Three3D = /*#__PURE__*/function (_ThreeBase) {
       var _getScreenshots = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee9(callback, _ref3) {
         var _this5 = this;
 
-        var viewList, variantList, size, removeTempOverlay, restoreCameraViewOffset, origVariantPath, origPosition, origOrientation, origTarget, origSize, origPixelRatio, restoreOriginalValues, restoreScreenshotSetup, width, height, screenshots, views, viewKeyList, _iterator3, _step3, variant, data, _iterator4, _step4, viewKey, view, _this$cameraViews$def2, position, orientation, target;
+        var viewList, variantList, size, removeTempOverlay, restoreCameraViewOffset, origVariantPath, origPosition, origOrientation, origTarget, origSize, origPixelRatio, restoreOriginalValues, restoreScreenshotSetup, width, height, screenshots, views, viewKeyList, _iterator3, _step3, variant, data, _iterator4, _step4, viewKey, view, position, orientation, target, fov;
 
         return regeneratorRuntime.wrap(function _callee9$(_context9) {
           while (1) {
@@ -1053,10 +1068,10 @@ var Three3D = /*#__PURE__*/function (_ThreeBase) {
               case 21:
                 restoreScreenshotSetup = _context9.sent;
                 // get the size from the size param, or use default values
-                width = (0, _get2["default"])(size, "width", 1024);
-                height = (0, _get2["default"])(size, "height", 768);
+                width = (size === null || size === void 0 ? void 0 : size.width) || 1024;
+                height = (size === null || size === void 0 ? void 0 : size.height) || 768;
                 screenshots = {};
-                views = this.cameraViews; // if the viewList option is provided, use it as keys instead of the list of all views
+                views = this.screenshotViews || this.cameraViews; // if the viewList option is provided, use it as keys instead of the list of all views
 
                 viewKeyList = viewList instanceof Array && viewList.length > 0 ? viewList : Object.keys(views);
                 _iterator3 = _createForOfIteratorHelper(variantList);
@@ -1128,13 +1143,13 @@ var Three3D = /*#__PURE__*/function (_ThreeBase) {
 
               case 55:
                 view = views[viewKey];
-                _this$cameraViews$def2 = _objectSpread(_objectSpread({}, this.cameraViews["default"]), view), position = _this$cameraViews$def2.position, orientation = _this$cameraViews$def2.orientation, target = _this$cameraViews$def2.lookat; // set the camera to the screenshot size
+                position = view.position, orientation = view.orientation, target = view.lookat, fov = view.fov; // set the camera to the screenshot size
 
                 this.renderer.setPixelRatio(1);
                 this.renderer.setSize(width, height);
                 this.updateCamera(width, height);
                 this.camera.clearViewOffset();
-                this.setCameraPosition(position, orientation, target);
+                this.setCameraPosition(position, orientation, target, fov);
                 this.render();
                 data[viewKey] = this.renderer.domElement.toDataURL("image/png");
 
@@ -1283,7 +1298,8 @@ var Three3D = /*#__PURE__*/function (_ThreeBase) {
                 });
 
                 if (clearTexture) {
-                  // draw the texture image on the drawing canvas to clear the previous state
+                  ctx.clearRect(0, 0, canvas.width, canvas.height); // draw the texture image on the drawing canvas to clear the previous state
+
                   ctx.drawImage(originalImage, 0, 0);
                 }
 
@@ -1366,9 +1382,9 @@ var Three3D = /*#__PURE__*/function (_ThreeBase) {
   }, {
     key: "setControlsDistanceMinMax",
     value: function setControlsDistanceMinMax() {
-      var _this$cameraViews$def3 = this.cameraViews["default"],
-          position = _this$cameraViews$def3.position,
-          lookat = _this$cameraViews$def3.lookat;
+      var _this$cameraViews$def2 = this.cameraViews["default"],
+          position = _this$cameraViews$def2.position,
+          lookat = _this$cameraViews$def2.lookat;
       var d = position.distanceTo(lookat);
       this.controls.maxDistance = d * MAX_DISTANCE_MULTIPLIER;
       this.controls.minDistance = d * MIN_DISTANCE_MULTIPLIER;

package/Three/Three3DScene.js

@@ -385,7 +385,20 @@ var Three3DScene = /*#__PURE__*/function (_Three3D) {
 
     _defineProperty(_assertThisInitialized(_this), "dirLightPosition", new _three.Vector3(1, 1, 1).normalize());
 
-    _defineProperty(_assertThisInitialized(_this), "cameraPosition", new _three.Vector3(0, 1, 2).normalize());
+    _defineProperty(_assertThisInitialized(_this), "defaultCameraPosition", new _three.Vector3(0, 1, 2).normalize());
+
+    _defineProperty(_assertThisInitialized(_this), "defaultScreenshotPosition", new _three.Vector3(0, 0, 1).normalize());
+
+    _defineProperty(_assertThisInitialized(_this), "relativeCameraViews", {});
+
+    _defineProperty(_assertThisInitialized(_this), "relativeScreenshotViews", {});
+
+    _defineProperty(_assertThisInitialized(_this), "groundObjectNames", [/ground/i]);
+
+    _defineProperty(_assertThisInitialized(_this), "config", {
+      useShadowGround: true,
+      removeGroundForScreenshot: true
+    });
 
     _defineProperty(_assertThisInitialized(_this), "animate", function () {
       var time = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
@@ -442,6 +455,11 @@ var Three3DScene = /*#__PURE__*/function (_Three3D) {
   }
 
   _createClass(Three3DScene, [{
+    key: "setOptions3D",
+    value: function setOptions3D(options) {
+      Object.assign(this.config, options);
+    }
+  }, {
     key: "createLoadingManager",
     value: function createLoadingManager() {
       var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
@@ -507,7 +525,7 @@ var Three3DScene = /*#__PURE__*/function (_Three3D) {
     key: "createCamera",
     value: function createCamera() {
       var camera = new _three.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.01);
-      camera.position.copy(this.cameraPosition).multiplyScalar(1000);
+      camera.position.copy(this.defaultCameraPosition).multiplyScalar(1000);
       return camera;
     }
   }, {
@@ -521,7 +539,6 @@ var Three3DScene = /*#__PURE__*/function (_Three3D) {
     value: function createScene() {
       var scene = new _three.Scene();
       scene.add(this.createHemiLight());
-      scene.add(this.createGround());
       scene.add(this.createDirLight());
       scene.add(this.sceneContainer);
       return scene;
@@ -580,7 +597,7 @@ var Three3DScene = /*#__PURE__*/function (_Three3D) {
           object.castShadow = true;
         }
 
-        if (object.isLight && object.target) {
+        if (object.isLight && object.target && _this2.ground) {
           object.target = _this2.ground;
           setLightShadow(object);
         }
@@ -982,17 +999,57 @@ var Three3DScene = /*#__PURE__*/function (_Three3D) {
         modelFileName: modelFileName
       };
     }
+  }, {
+    key: "loadSceneSync",
+    value: function () {
+      var _loadSceneSync = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee6(resourceList) {
+        var _disableRender, result;
+
+        return regeneratorRuntime.wrap(function _callee6$(_context6) {
+          while (1) {
+            switch (_context6.prev = _context6.next) {
+              case 0:
+                _context6.next = 2;
+                return this._loadScenePromise;
+
+              case 2:
+                _disableRender = this._disableRender;
+                this._disableRender = true;
+                this._loadScenePromise = this.loadScene(resourceList);
+                _context6.next = 7;
+                return this._loadScenePromise;
+
+              case 7:
+                result = _context6.sent;
+                this._disableRender = _disableRender;
+                this.render();
+                return _context6.abrupt("return", result);
+
+              case 11:
+              case "end":
+                return _context6.stop();
+            }
+          }
+        }, _callee6, this);
+      }));
+
+      function loadSceneSync(_x8) {
+        return _loadSceneSync.apply(this, arguments);
+      }
+
+      return loadSceneSync;
+    }()
   }, {
     key: "loadScene",
     value: function () {
-      var _loadScene = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee6(resourceList) {
+      var _loadScene = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee7(resourceList) {
         var _this5 = this;
 
         var sceneContainer, _diffResourceLists, toBeRemoved, toBeAdded, toBeUpdated, toBeApplied, shouldResetScene, toBeDisposed, triggerLoadEvent, sceneParts, imageLoader, mixer, animations;
 
-        return regeneratorRuntime.wrap(function _callee6$(_context6) {
+        return regeneratorRuntime.wrap(function _callee7$(_context7) {
           while (1) {
-            switch (_context6.prev = _context6.next) {
+            switch (_context7.prev = _context7.next) {
               case 0:
                 sceneContainer = this.sceneContainer;
                 this.stopAnimation();
@@ -1018,13 +1075,13 @@ var Three3DScene = /*#__PURE__*/function (_Three3D) {
                 });
                 triggerLoadEvent = !!(toBeAdded.length || toBeUpdated.length || toBeApplied.length);
                 triggerLoadEvent && this.onLoadStart();
-                _context6.next = 13;
+                _context7.next = 13;
                 return Promise.all(toBeAdded.map(function (item) {
                   return _this5.loadSceneContainer(item);
                 }));
 
               case 13:
-                sceneParts = _context6.sent;
+                sceneParts = _context7.sent;
                 sceneParts.forEach(function (_ref10) {
                   var scene = _ref10.scene,
                       animations = _ref10.animations;
@@ -1043,7 +1100,7 @@ var Three3DScene = /*#__PURE__*/function (_Three3D) {
                   }
                 });
                 sceneContainer.updateWorldMatrix(true, true);
-                _context6.next = 18;
+                _context7.next = 18;
                 return Promise.all(toBeUpdated.map(function (item) {
                   var itemSrc = getSrc(item);
                   var object = findObjectWith(sceneContainer, function (_ref13) {
@@ -1070,7 +1127,7 @@ var Three3DScene = /*#__PURE__*/function (_Three3D) {
                 imageLoader = this.createImageLoader({
                   basePath: this._modelBasePath
                 });
-                _context6.next = 21;
+                _context7.next = 21;
                 return Promise.all(toBeApplied.map(function (_ref14) {
                   var optionParams = _ref14.params,
                       files = _ref14.files;
@@ -1098,10 +1155,11 @@ var Three3DScene = /*#__PURE__*/function (_Three3D) {
                 }));
 
               case 21:
-                _context6.next = 23;
+                _context7.next = 23;
                 return this.initCustomizableMaterialsIfNeeded();
 
               case 23:
+                this.setupGround();
                 this.addLightsIfNeeded(sceneContainer);
                 this.fitSceneToCamera();
                 this.initCameraViews(this.getCameras(sceneContainer));
@@ -1119,15 +1177,15 @@ var Three3DScene = /*#__PURE__*/function (_Three3D) {
                   this.render();
                 }
 
-              case 29:
+              case 30:
               case "end":
-                return _context6.stop();
+                return _context7.stop();
             }
           }
-        }, _callee6, this);
+        }, _callee7, this);
       }));
 
-      function loadScene(_x8) {
+      function loadScene(_x9) {
         return _loadScene.apply(this, arguments);
       }
 
@@ -1146,38 +1204,167 @@ var Three3DScene = /*#__PURE__*/function (_Three3D) {
       return cameras;
     }
   }, {
-    key: "initCameraViews",
-    value: function initCameraViews(cameras) {
-      var box = this.getSceneContainerBox();
-      var center = new _three.Vector3();
-      box.getCenter(center);
-      this.cameraViews["default"] = null;
-      this.cameraViews = cameras.reduce(function (views, camera) {
-        var position = new _three.Vector3();
-        camera.getWorldPosition(position);
-        var distance = position.distanceTo(center);
-        var dir = new _three.Vector3();
-        camera.getWorldDirection(dir);
-        var lookat = dir.multiplyScalar(distance).add(position);
-        var rotation = new _three.Quaternion();
-        camera.getWorldQuaternion(rotation);
-
-        var orientation = _three.Object3D.DefaultUp.clone().applyQuaternion(rotation);
-
-        return _objectSpread(_objectSpread({}, views), {}, _defineProperty({}, camera.name.toLowerCase(), {
+    key: "setupSceneCameras",
+    value: function setupSceneCameras(cameras, center) {
+      var _iterator4 = _createForOfIteratorHelper(cameras),
+          _step4;
+
+      try {
+        for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
+          var _camera$userData;
+
+          var camera = _step4.value;
+          var position = camera.getWorldPosition(new _three.Vector3());
+          var dir = camera.getWorldDirection(new _three.Vector3());
+          var distance = position.distanceTo(center);
+          var lookat = dir.multiplyScalar(distance).add(position);
+          var rotation = new _three.Quaternion();
+          camera.getWorldQuaternion(rotation);
+
+          var orientation = _three.Object3D.DefaultUp.clone().applyQuaternion(rotation);
+
+          var fov = camera.fov || 45;
+          var cameraView = {
+            position: position,
+            lookat: lookat,
+            orientation: orientation,
+            fov: fov
+          };
+          var cameraName = (_camera$userData = camera.userData) === null || _camera$userData === void 0 ? void 0 : _camera$userData.name;
+
+          if (!cameraName) {
+            continue; // cannot identify, ignore
+          } // map camera views to component names (with the objectName:useFor=component1,component2 name)
+
+
+          var matches = cameraName.match(/:useFor=(([^,]+,?)+)/);
+          var componentIdentifiers = matches && matches[1] && matches[1].split(",");
+
+          if (componentIdentifiers) {
+            var _iterator5 = _createForOfIteratorHelper(componentIdentifiers),
+                _step5;
+
+            try {
+              for (_iterator5.s(); !(_step5 = _iterator5.n()).done;) {
+                var componentIdentifier = _step5.value;
+                // remove _Orientation suffix added by blender gltf exporter
+                this.cameraViews[componentIdentifier.replace("_Orientation", "")] = cameraView;
+              }
+            } catch (err) {
+              _iterator5.e(err);
+            } finally {
+              _iterator5.f();
+            }
+          } else if (cameraName.startsWith("screenshot_")) {
+            this.screenshotViews[cameraName.replace("screenshot_", "")] = cameraView;
+          } else {
+            this.cameraViews[cameraName] = cameraView;
+          }
+        }
+      } catch (err) {
+        _iterator4.e(err);
+      } finally {
+        _iterator4.f();
+      }
+    }
+  }, {
+    key: "calculateRelativeViews",
+    value: function calculateRelativeViews(viewsObj, center, distance) {
+      var views = {};
+
+      for (var _i3 = 0, _Object$keys = Object.keys(viewsObj); _i3 < _Object$keys.length; _i3++) {
+        var key = _Object$keys[_i3];
+
+        var view = _objectSpread(_objectSpread({}, viewsObj["default"]), viewsObj[key]);
+
+        var position = center.clone().add(view.position.clone().multiplyScalar(distance));
+        var lookat = center.clone().add(view.lookat);
+        views[key] = _objectSpread(_objectSpread({}, view), {}, {
           position: position,
-          lookat: lookat,
-          orientation: orientation
-        }));
-      }, {});
+          lookat: lookat
+        });
+      }
 
-      if (!this.cameraViews["default"]) {
-        this.cameraViews["default"] = {
-          position: this.cameraPosition.clone().multiplyScalar(this.controls.maxDistance * 0.75),
-          lookat: center.clone(),
+      return views;
+    }
+  }, {
+    key: "setupRelativeCameras",
+    value: function setupRelativeCameras(center) {
+      if (!this.relativeCameraViews["default"]) {
+        this.relativeCameraViews["default"] = {
+          position: this.defaultCameraPosition.clone(),
+          lookat: new _three.Vector3(0, 0, 0),
           orientation: new _three.Vector3(0, 1, 0)
         };
       }
+
+      this.cameraViews = this.calculateRelativeViews(this.relativeCameraViews, center, this.controls.maxDistance * 0.75);
+
+      if (!this.relativeScreenshotViews["default"]) {
+        this.relativeScreenshotViews["default"] = {
+          position: this.defaultScreenshotPosition.clone(),
+          lookat: new _three.Vector3(0, 0, 0),
+          orientation: new _three.Vector3(0, 1, 0)
+        };
+      }
+
+      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",
+    value: function initCameraViews(cameras) {
+      var _this$sceneContainer, _this$sceneContainer$;
+
+      if (!((_this$sceneContainer = this.sceneContainer) !== null && _this$sceneContainer !== void 0 && (_this$sceneContainer$ = _this$sceneContainer.children) !== null && _this$sceneContainer$ !== void 0 && _this$sceneContainer$.length)) {
+        return;
+      }
+
+      if (!this.controls) {
+        return;
+      }
+
+      var box = this.getSceneContainerBox();
+      var center = box.getCenter(new _three.Vector3());
+      this.setupRelativeCameras(center);
+      this.setupSceneCameras(cameras, center);
+    }
+  }, {
+    key: "jumpToView",
+    value: function jumpToView(viewName) {
+      var animate = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+      var duration = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+
+      if (!this.cameraViews[viewName]) {
+        viewName = "default";
+      }
+
+      if (this.currentCameraView === viewName) {
+        return;
+      }
+
+      this.currentCameraView = viewName;
+      var view = this.cameraViews[viewName];
+
+      if (!view) {
+        return;
+      }
+
+      var position = view.position,
+          orientation = view.orientation,
+          target = view.lookat,
+          fov = view.fov;
+
+      if (animate) {
+        this.moveCamera(position, orientation, target, fov, duration);
+      } else {
+        this.setCameraPosition(position, orientation, target, fov);
+      }
     }
   }, {
     key: "resetScene",
@@ -1189,15 +1376,71 @@ var Three3DScene = /*#__PURE__*/function (_Three3D) {
       this._customizableMaterialKeys.length = 0;
       this._customizableMaterials.length = 0;
     }
+  }, {
+    key: "isGroundObject",
+    value: function isGroundObject(object) {
+      return this.groundObjectNames.some(function (pattern) {
+        var _object$material;
+
+        return pattern.test(object.name) || pattern.test((_object$material = object.material) === null || _object$material === void 0 ? void 0 : _object$material.name);
+      });
+    }
+  }, {
+    key: "findGroundObject",
+    value: function findGroundObject() {
+      var root = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.sceneContainer;
+
+      var _iterator6 = _createForOfIteratorHelper(root.children),
+          _step6;
+
+      try {
+        for (_iterator6.s(); !(_step6 = _iterator6.n()).done;) {
+          var object = _step6.value;
+
+          if (this.isGroundObject(object)) {
+            return object;
+          }
+
+          var ground = this.findGroundObject(object);
+
+          if (ground) {
+            return ground;
+          }
+        }
+      } catch (err) {
+        _iterator6.e(err);
+      } finally {
+        _iterator6.f();
+      }
+
+      return null;
+    }
+  }, {
+    key: "setupGround",
+    value: function setupGround() {
+      this.sceneGround = this.findGroundObject();
+
+      if (this.sceneGround && this.ground) {
+        this.scene.remove(this.ground);
+        this.ground = null;
+      } else if (!this.sceneGround && this.config.useShadowGround) {
+        this.scene.add(this.createGround());
+      }
+    }
   }, {
     key: "getSceneContainerBox",
     value: function getSceneContainerBox() {
+      var _this$sceneGround;
+
+      var groundParent = (_this$sceneGround = this.sceneGround) === null || _this$sceneGround === void 0 ? void 0 : _this$sceneGround.parent;
+      groundParent === null || groundParent === void 0 ? void 0 : groundParent.remove(this.sceneGround);
       var box = new _three.Box3();
       this.sceneContainer.traverse(function (object) {
         if (object.isMesh) {
           box.expandByObject(object);
         }
       });
+      groundParent === null || groundParent === void 0 ? void 0 : groundParent.add(this.sceneGround);
       return box;
     }
   }, {
@@ -1307,33 +1550,33 @@ var Three3DScene = /*#__PURE__*/function (_Three3D) {
   }, {
     key: "update",
     value: function () {
-      var _update = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee7(configuration) {
+      var _update = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee8(configuration) {
         var sceneData;
-        return regeneratorRuntime.wrap(function _callee7$(_context7) {
+        return regeneratorRuntime.wrap(function _callee8$(_context8) {
           while (1) {
-            switch (_context7.prev = _context7.next) {
+            switch (_context8.prev = _context8.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);
-                _context7.t0 = sceneData;
+                _context8.t0 = sceneData;
 
-                if (!_context7.t0) {
-                  _context7.next = 6;
+                if (!_context8.t0) {
+                  _context8.next = 6;
                   break;
                 }
 
-                _context7.next = 6;
-                return this.loadScene(sceneData);
+                _context8.next = 6;
+                return this.loadSceneSync(sceneData);
 
               case 6:
               case "end":
-                return _context7.stop();
+                return _context8.stop();
             }
           }
-        }, _callee7, this);
+        }, _callee8, this);
       }));
 
-      function update(_x9) {
+      function update(_x10) {
         return _update.apply(this, arguments);
       }
 
@@ -1342,29 +1585,29 @@ var Three3DScene = /*#__PURE__*/function (_Three3D) {
   }, {
     key: "updateMaterial",
     value: function () {
-      var _updateMaterial = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee8() {
+      var _updateMaterial = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee9() {
         var sceneData;
-        return regeneratorRuntime.wrap(function _callee8$(_context8) {
+        return regeneratorRuntime.wrap(function _callee9$(_context9) {
           while (1) {
-            switch (_context8.prev = _context8.next) {
+            switch (_context9.prev = _context9.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;
-                _context8.t0 = sceneData;
+                _context9.t0 = sceneData;
 
-                if (!_context8.t0) {
-                  _context8.next = 5;
+                if (!_context9.t0) {
+                  _context9.next = 5;
                   break;
                 }
 
-                _context8.next = 5;
-                return this.loadScene(sceneData);
+                _context9.next = 5;
+                return this.loadSceneSync(sceneData);
 
               case 5:
               case "end":
-                return _context8.stop();
+                return _context9.stop();
             }
           }
-        }, _callee8, this);
+        }, _callee9, this);
       }));
 
       function updateMaterial() {
@@ -1376,33 +1619,33 @@ var Three3DScene = /*#__PURE__*/function (_Three3D) {
   }, {
     key: "updateDesignAreaList",
     value: function () {
-      var _updateDesignAreaList = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee9(designAreaList) {
+      var _updateDesignAreaList = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee10(designAreaList) {
         var sceneData;
-        return regeneratorRuntime.wrap(function _callee9$(_context9) {
+        return regeneratorRuntime.wrap(function _callee10$(_context10) {
           while (1) {
-            switch (_context9.prev = _context9.next) {
+            switch (_context10.prev = _context10.next) {
               case 0:
                 this._designAreaList = designAreaList;
                 sceneData = (0, _get["default"])(designAreaList, "[0].designView.models.".concat(this._materialVariantPath));
-                _context9.t0 = sceneData;
+                _context10.t0 = sceneData;
 
-                if (!_context9.t0) {
-                  _context9.next = 6;
+                if (!_context10.t0) {
+                  _context10.next = 6;
                   break;
                 }
 
-                _context9.next = 6;
-                return this.loadScene(sceneData);
+                _context10.next = 6;
+                return this.loadSceneSync(sceneData);
 
               case 6:
               case "end":
-                return _context9.stop();
+                return _context10.stop();
             }
           }
-        }, _callee9, this);
+        }, _callee10, this);
       }));
 
-      function updateDesignAreaList(_x10) {
+      function updateDesignAreaList(_x11) {
         return _updateDesignAreaList.apply(this, arguments);
       }
 
@@ -1416,13 +1659,17 @@ var Three3DScene = /*#__PURE__*/function (_Three3D) {
   }, {
     key: "setupScreenshots",
     value: function setupScreenshots() {
-      var _this6 = this;
+      var ground = this.ground || this.sceneGround;
 
-      var groundVisibility = this.ground.visible;
-      this.ground.visible = false;
-      return function () {
-        _this6.ground.visible = groundVisibility;
-      };
+      if (ground && this.config.removeGroundForScreenshot) {
+        var groundVisibility = ground.visible;
+        ground.visible = false;
+        return function () {
+          ground.visible = groundVisibility;
+        };
+      }
+
+      return function () {};
     }
   }]);
 

package/Three/ThreeBase.js

@@ -514,6 +514,10 @@ var ThreeBase = /*#__PURE__*/function (_VisualizationInterfa) {
   }, {
     key: "render",
     value: function render() {
+      if (this._disableRender) {
+        return;
+      }
+
       this.renderer && this.renderer.render(this.scene, this.camera);
     }
   }, {

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "redhotmagma-visualization",
-  "version": "1.37.3",
+  "version": "1.38.1",
   "license": "UNLICENSED",
   "private": false,
   "main": "./index.js",
   "dependencies": {
     "@babel/polyfill": "^7.12.1",
-    "@configuratorware/scripts": "1.37.3",
+    "@configuratorware/scripts": "1.38.1",
     "@tweenjs/tween.js": "^17.6.0",
     "console-polyfill": "^0.3.0",
     "css-element-queries": "^1.2.3",

package/src/Three/Three3D.js

@@ -13,7 +13,6 @@ import {
 import TWEEN from "@tweenjs/tween.js";
 import first from "lodash/first";
 import findIndex from "lodash/findIndex";
-import get from "lodash/get";
 
 import { ThreeBase, onProgress } from "./ThreeBase";
 import MTLLoader from "./Loaders/MTLLoader";
@@ -465,10 +464,11 @@ export class Three3D extends ThreeBase {
    * @param {Vector3|undefined} position The new position
    * @param {Vector3|undefined} orientation The new orientation of the camera (up vector)
    * @param {Vector3|undefined} target The new look at point
-   * @param {{[position]: number, [target]: number, [orientation]: number}} duration The animation duration in ms
+   * @param {number|undefined} fov The new fov
+   * @param {{[position]: number, [target]: number, [orientation]: number, [fov]: number}} duration The animation duration in ms
    * @requires TWEEN
    */
-  moveCamera(position, orientation, target, duration = {}) {
+  moveCamera(position, orientation, target, fov, duration = {}) {
     this.cleanUpCameraAnimations();
 
     const animationDef = new DeferredGroup();
@@ -505,6 +505,15 @@ export class Three3D extends ThreeBase {
         .onComplete(animationDef.createResolver())
         .start();
     }
+    if (fov) {
+      new TWEEN.Tween(this.camera, this.cameraTweenGroup)
+        .to({ fov }, duration.fov || 700)
+        .easing(TWEEN.Easing.Quadratic.Out)
+        .onUpdate(() => {
+          this.camera.updateProjectionMatrix();
+        })
+        .start();
+    }
     animationDef.then(() => this.stopAnimation("camera"));
     this.startAnimation("camera");
   }
@@ -527,30 +536,35 @@ export class Three3D extends ThreeBase {
       console.error(`Camera view does not exist: ${viewNameSafe}`);
       return;
     }
-    const { position, orientation, lookat: target } = {
+    const { position, orientation, lookat: target, fov } = {
       ...this.cameraViews.default,
       ...view,
     };
 
     if (animate) {
-      this.moveCamera(position, orientation, target, duration);
+      this.moveCamera(position, orientation, target, fov, duration);
     } else {
-      this.setCameraPosition(position, orientation, target);
+      this.setCameraPosition(position, orientation, target, fov);
     }
   }
 
   /**
    * Sets the camera position and renders the scene if it's not animating
    * @param {{x: number|undefined, y: number|undefined, z: number|undefined}} position
-   * @param {{x: number|undefined, y: number|undefined, z: number|undefined}} oritentation
+   * @param {{x: number|undefined, y: number|undefined, z: number|undefined}} orientation
    * @param {{x: number|undefined, y: number|undefined, z: number|undefined}} target
+   * @param {number|undefined} fov
    */
-  setCameraPosition(position = { y: 30 }, oritentation = {}, target = { y: 10 }) {
+  setCameraPosition(position = { y: 30 }, orientation = {}, target = { y: 10 }, fov) {
     if (!this.camera) {
       throw new Error("The camera must be available for the setCameraPosition call!");
     }
     Object.assign(this.camera.position, position);
-    Object.assign(this.camera.up, oritentation);
+    Object.assign(this.camera.up, orientation);
+    if (fov) {
+      this.camera.fov = fov;
+      this.camera.updateProjectionMatrix();
+    }
     if (this.controls && this.controls.target) {
       Object.assign(this.controls.target, target);
       if (!this.isAnimating()) {
@@ -601,11 +615,11 @@ export class Three3D extends ThreeBase {
     const restoreScreenshotSetup = await this.setupScreenshots();
 
     // get the size from the size param, or use default values
-    const width = get(size, "width", 1024);
-    const height = get(size, "height", 768);
+    const width = size?.width || 1024;
+    const height = size?.height || 768;
 
     const screenshots = {};
-    const views = this.cameraViews;
+    const views = this.screenshotViews || this.cameraViews;
     // if the viewList option is provided, use it as keys instead of the list of all views
     const viewKeyList =
       viewList instanceof Array && viewList.length > 0 ? viewList : Object.keys(views);
@@ -631,17 +645,14 @@ export class Three3D extends ThreeBase {
         }
 
         const view = views[viewKey];
-        const { position, orientation, lookat: target } = {
-          ...this.cameraViews.default,
-          ...view,
-        };
+        const { position, orientation, lookat: target, fov } = view;
         // set the camera to the screenshot size
         this.renderer.setPixelRatio(1);
         this.renderer.setSize(width, height);
         this.updateCamera(width, height);
         this.camera.clearViewOffset();
 
-        this.setCameraPosition(position, orientation, target);
+        this.setCameraPosition(position, orientation, target, fov);
         this.render();
 
         data[viewKey] = this.renderer.domElement.toDataURL("image/png");
@@ -702,6 +713,7 @@ export class Three3D extends ThreeBase {
     const getTextureBuilder = createTextureBuilder(originalImage, { scaling });
 
     if (clearTexture) {
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
       // draw the texture image on the drawing canvas to clear the previous state
       ctx.drawImage(originalImage, 0, 0);
     }

package/src/Three/Three3DScene.js

@@ -271,13 +271,29 @@ export class Three3DScene extends Three3D {
   defaultCamera = null;
 
   dirLightPosition = new Vector3(1, 1, 1).normalize();
-  cameraPosition = new Vector3(0, 1, 2).normalize();
+
+  defaultCameraPosition = new Vector3(0, 1, 2).normalize();
+  defaultScreenshotPosition = new Vector3(0, 0, 1).normalize();
+
+  relativeCameraViews = {};
+  relativeScreenshotViews = {};
+
+  groundObjectNames = [/ground/i];
+
+  config = {
+    useShadowGround: true,
+    removeGroundForScreenshot: true,
+  };
 
   constructor(cfg = {}) {
     super(cfg);
     cfg.modelBasePath ? (this._modelBasePath = cfg.modelBasePath) : (this._modelBasePath = "");
   }
 
+  setOptions3D(options) {
+    Object.assign(this.config, options);
+  }
+
   createLoadingManager(options = {}) {
     const { basePath = "", resourcePath = "/" } = options;
 
@@ -332,7 +348,7 @@ export class Three3DScene extends Three3D {
 
   createCamera() {
     const camera = new PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.01);
-    camera.position.copy(this.cameraPosition).multiplyScalar(1000);
+    camera.position.copy(this.defaultCameraPosition).multiplyScalar(1000);
     return camera;
   }
 
@@ -343,7 +359,6 @@ export class Three3DScene extends Three3D {
   createScene() {
     const scene = new Scene();
     scene.add(this.createHemiLight());
-    scene.add(this.createGround());
     scene.add(this.createDirLight());
     scene.add(this.sceneContainer);
     return scene;
@@ -394,7 +409,7 @@ export class Three3DScene extends Three3D {
       if (object.isMesh) {
         object.castShadow = true;
       }
-      if (object.isLight && object.target) {
+      if (object.isLight && object.target && this.ground) {
         object.target = this.ground;
         setLightShadow(object);
       }
@@ -639,6 +654,22 @@ export class Three3DScene extends Three3D {
     };
   }
 
+  async loadSceneSync(resourceList) {
+    // fix LoadFinished event by trapping the loadScene calls to finish the current one before starting the next one
+    await this._loadScenePromise;
+
+    const { _disableRender } = this;
+    this._disableRender = true;
+
+    this._loadScenePromise = this.loadScene(resourceList);
+    const result = await this._loadScenePromise;
+
+    this._disableRender = _disableRender;
+    this.render();
+
+    return result;
+  }
+
   async loadScene(resourceList) {
     const { sceneContainer } = this;
 
@@ -740,6 +771,8 @@ export class Three3DScene extends Three3D {
 
     await this.initCustomizableMaterialsIfNeeded();
 
+    this.setupGround();
+
     this.addLightsIfNeeded(sceneContainer);
 
     this.fitSceneToCamera();
@@ -772,42 +805,136 @@ export class Three3DScene extends Three3D {
     return cameras;
   }
 
-  initCameraViews(cameras) {
-    const box = this.getSceneContainerBox();
-    const center = new Vector3();
-    box.getCenter(center);
-
-    this.cameraViews.default = null;
-
-    this.cameraViews = cameras.reduce((views, camera) => {
-      const position = new Vector3();
-      camera.getWorldPosition(position);
-
+  setupSceneCameras(cameras, center) {
+    for (const camera of cameras) {
+      const position = camera.getWorldPosition(new Vector3());
+      const dir = camera.getWorldDirection(new Vector3());
       const distance = position.distanceTo(center);
-      const dir = new Vector3();
-      camera.getWorldDirection(dir);
       const lookat = dir.multiplyScalar(distance).add(position);
 
       const rotation = new Quaternion();
       camera.getWorldQuaternion(rotation);
-
       const orientation = Object3D.DefaultUp.clone().applyQuaternion(rotation);
-      return {
-        ...views,
-        [camera.name.toLowerCase()]: {
-          position,
-          lookat,
-          orientation,
-        },
+
+      const fov = camera.fov || 45;
+
+      const cameraView = {
+        position,
+        lookat,
+        orientation,
+        fov,
+      };
+
+      const cameraName = camera.userData?.name;
+      if (!cameraName) {
+        continue; // cannot identify, ignore
+      }
+      // map camera views to component names (with the objectName:useFor=component1,component2 name)
+      const matches = cameraName.match(/:useFor=(([^,]+,?)+)/);
+      const componentIdentifiers = matches && matches[1] && matches[1].split(",");
+      if (componentIdentifiers) {
+        for (const componentIdentifier of componentIdentifiers) {
+          // remove _Orientation suffix added by blender gltf exporter
+          this.cameraViews[componentIdentifier.replace("_Orientation", "")] = cameraView;
+        }
+      } else if (cameraName.startsWith("screenshot_")) {
+        this.screenshotViews[cameraName.replace("screenshot_", "")] = cameraView;
+      } else {
+        this.cameraViews[cameraName] = cameraView;
+      }
+    }
+  }
+
+  calculateRelativeViews(viewsObj, center, distance) {
+    const views = {};
+    for (const key of Object.keys(viewsObj)) {
+      const view = {
+        ...viewsObj.default,
+        ...viewsObj[key],
+      };
+      const position = center.clone().add(view.position.clone().multiplyScalar(distance));
+      const lookat = center.clone().add(view.lookat);
+      views[key] = {
+        ...view,
+        position,
+        lookat,
+      };
+    }
+    return views;
+  }
+
+  setupRelativeCameras(center) {
+    if (!this.relativeCameraViews.default) {
+      this.relativeCameraViews.default = {
+        position: this.defaultCameraPosition.clone(),
+        lookat: new Vector3(0, 0, 0),
+        orientation: new Vector3(0, 1, 0),
       };
-    }, {});
-    if (!this.cameraViews.default) {
-      this.cameraViews.default = {
-        position: this.cameraPosition.clone().multiplyScalar(this.controls.maxDistance * 0.75),
-        lookat: center.clone(),
+    }
+    this.cameraViews = this.calculateRelativeViews(
+      this.relativeCameraViews,
+      center,
+      this.controls.maxDistance * 0.75
+    );
+
+    if (!this.relativeScreenshotViews.default) {
+      this.relativeScreenshotViews.default = {
+        position: this.defaultScreenshotPosition.clone(),
+        lookat: new Vector3(0, 0, 0),
         orientation: new Vector3(0, 1, 0),
       };
     }
+
+    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);
+    }
+  }
+
+  initCameraViews(cameras) {
+    if (!this.sceneContainer?.children?.length) {
+      return;
+    }
+    if (!this.controls) {
+      return;
+    }
+
+    const box = this.getSceneContainerBox();
+    const center = box.getCenter(new Vector3());
+
+    this.setupRelativeCameras(center);
+    this.setupSceneCameras(cameras, center);
+  }
+
+  jumpToView(viewName, animate = true, duration = {}) {
+    if (!this.cameraViews[viewName]) {
+      viewName = "default";
+    }
+    if (this.currentCameraView === viewName) {
+      return;
+    }
+
+    this.currentCameraView = viewName;
+    const view = this.cameraViews[viewName];
+
+    if (!view) {
+      return;
+    }
+
+    const { position, orientation, lookat: target, fov } = view;
+
+    if (animate) {
+      this.moveCamera(position, orientation, target, fov, duration);
+    } else {
+      this.setCameraPosition(position, orientation, target, fov);
+    }
   }
 
   resetScene() {
@@ -819,13 +946,45 @@ export class Three3DScene extends Three3D {
     this._customizableMaterials.length = 0;
   }
 
+  isGroundObject(object) {
+    return this.groundObjectNames.some(
+      pattern => pattern.test(object.name) || pattern.test(object.material?.name)
+    );
+  }
+
+  findGroundObject(root = this.sceneContainer) {
+    for (const object of root.children) {
+      if (this.isGroundObject(object)) {
+        return object;
+      }
+      const ground = this.findGroundObject(object);
+      if (ground) {
+        return ground;
+      }
+    }
+    return null;
+  }
+
+  setupGround() {
+    this.sceneGround = this.findGroundObject();
+    if (this.sceneGround && this.ground) {
+      this.scene.remove(this.ground);
+      this.ground = null;
+    } else if (!this.sceneGround && this.config.useShadowGround) {
+      this.scene.add(this.createGround());
+    }
+  }
+
   getSceneContainerBox() {
+    const groundParent = this.sceneGround?.parent;
+    groundParent?.remove(this.sceneGround);
     const box = new Box3();
     this.sceneContainer.traverse(object => {
       if (object.isMesh) {
         box.expandByObject(object);
       }
     });
+    groundParent?.add(this.sceneGround);
     return box;
   }
 
@@ -948,7 +1107,7 @@ export class Three3DScene extends Three3D {
         `visualizationData.designViews[0].models.${this._materialVariantPath}`,
         false
       );
-    sceneData && (await this.loadScene(sceneData));
+    sceneData && (await this.loadSceneSync(sceneData));
   }
 
   async updateMaterial() {
@@ -959,13 +1118,13 @@ export class Three3DScene extends Three3D {
         `visualizationData.designViews[0].models.${this._materialVariantPath}`
       ) ||
       false;
-    sceneData && (await this.loadScene(sceneData));
+    sceneData && (await this.loadSceneSync(sceneData));
   }
 
   async updateDesignAreaList(designAreaList) {
     this._designAreaList = designAreaList;
     const sceneData = get(designAreaList, `[0].designView.models.${this._materialVariantPath}`);
-    sceneData && (await this.loadScene(sceneData));
+    sceneData && (await this.loadSceneSync(sceneData));
   }
 
   exportGLTF() {
@@ -992,10 +1151,14 @@ export class Three3DScene extends Three3D {
   };
 
   setupScreenshots() {
-    const groundVisibility = this.ground.visible;
-    this.ground.visible = false;
-    return () => {
-      this.ground.visible = groundVisibility;
-    };
+    const ground = this.ground || this.sceneGround;
+    if (ground && this.config.removeGroundForScreenshot) {
+      const groundVisibility = ground.visible;
+      ground.visible = false;
+      return () => {
+        ground.visible = groundVisibility;
+      };
+    }
+    return () => {};
   }
 }

package/src/Three/ThreeBase.js

@@ -294,6 +294,9 @@ export class ThreeBase extends VisualizationInterface {
   endAnimation = () => this.cameraTweenGroup.getAll().forEach(item => item.end());
 
   render() {
+    if (this._disableRender) {
+      return;
+    }
     this.renderer && this.renderer.render(this.scene, this.camera);
   }