redhotmagma-visualization 1.31.4 → 1.31.7

package/Three/Three2D.js

@@ -57,10 +57,6 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
 
 function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e2) { throw _e2; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e3) { didErr = true; err = _e3; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -73,6 +69,10 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
 function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
 
 function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
@@ -169,18 +169,50 @@ var Three2D = /*#__PURE__*/function (_ThreeBase) {
 
     _defineProperty(_assertThisInitialized(_this), "_overlayMode", false);
 
+    _defineProperty(_assertThisInitialized(_this), "_options", {
+      sharperFullView: false,
+      // when zoom = 1 use NearestFilter for sharper product image
+      optimizeProductImage: false,
+      // upscale or downscale the product image to fit 2048 x 2048
+      premultiplyAlpha: false
+    });
+
     _defineProperty(_assertThisInitialized(_this), "_imageRepository", (0, _createImageRepository.createImageRepository)((0, _createCache.createCache)(20), function (src) {
       return new Promise(function (resolve, reject) {
         return new _three.ImageLoader(_this._loadingManager).load(src, resolve, undefined, reject);
       });
     }));
 
+    _defineProperty(_assertThisInitialized(_this), "updateModelTextureFilter", function (_ref) {
+      var _this$_model, _this$_model$material;
+
+      var currentZoom = _ref.value;
+
+      if (!_this._options.sharperFullView) {
+        return;
+      }
+
+      var tex = (_this$_model = _this._model) === null || _this$_model === void 0 ? void 0 : (_this$_model$material = _this$_model.material) === null || _this$_model$material === void 0 ? void 0 : _this$_model$material.map;
+
+      if (!tex) {
+        return;
+      }
+
+      if (currentZoom === 1) {
+        tex.magFilter = _three.NearestFilter;
+        tex.needsUpdate = true;
+      } else if (tex.magFilter !== _three.LinearFilter) {
+        tex.magFilter = _three.LinearFilter;
+        tex.needsUpdate = true;
+      }
+    });
+
     _defineProperty(_assertThisInitialized(_this), "redraw", function () {
       return _this._redraw && _this._redraw();
     });
 
     _defineProperty(_assertThisInitialized(_this), "updateView", (0, _SyncCurrentFunction.syncCurrent)( /*#__PURE__*/function () {
-      var _ref = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(designView) {
+      var _ref2 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(designView) {
         var options,
             _options$forceUpdate,
             forceUpdate,
@@ -272,7 +304,7 @@ var Three2D = /*#__PURE__*/function (_ThreeBase) {
       }));
 
       return function (_x) {
-        return _ref.apply(this, arguments);
+        return _ref2.apply(this, arguments);
       };
     }()));
 
@@ -280,9 +312,9 @@ var Three2D = /*#__PURE__*/function (_ThreeBase) {
       _this._modelBasePath = cfg.modelBasePath;
     }
 
-    (0, _PropertyObserver.observeProperty)(_assertThisInitialized(_this), "_size", function (_ref2) {
-      var value = _ref2.value,
-          dispose = _ref2.dispose;
+    (0, _PropertyObserver.observeProperty)(_assertThisInitialized(_this), "_size", function (_ref3) {
+      var value = _ref3.value,
+          dispose = _ref3.dispose;
 
       if (value.width > 0 && value.height > 0) {
         dispose();
@@ -324,8 +356,14 @@ var Three2D = /*#__PURE__*/function (_ThreeBase) {
       camera.far = cameraZ - getPlaneZ(this._overlayMode) + 1000;
       camera.position.set(0, 0, cameraZ);
       redrawOnZoomChange && (0, _PropertyObserver.observeProperty)(camera, "zoom", (0, _debounce["default"])(this.redraw, redrawDebounceWait));
+      (0, _PropertyObserver.observeProperty)(camera, "zoom", this.updateModelTextureFilter);
       return camera;
     }
+  }, {
+    key: "setOptions",
+    value: function setOptions(options) {
+      this._options = _objectSpread(_objectSpread({}, this._options), options);
+    }
   }, {
     key: "createCamera",
     value: function createCamera() {
@@ -335,9 +373,9 @@ var Three2D = /*#__PURE__*/function (_ThreeBase) {
     }
   }, {
     key: "setSize",
-    value: function setSize(_ref3) {
-      var width = _ref3.width,
-          height = _ref3.height;
+    value: function setSize(_ref4) {
+      var width = _ref4.width,
+          height = _ref4.height;
       var rerender = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
 
       _get(_getPrototypeOf(Three2D.prototype), "setSize", this).call(this, {
@@ -367,12 +405,12 @@ var Three2D = /*#__PURE__*/function (_ThreeBase) {
   }, {
     key: "setCameraPositionToCurrentDesignArea",
     value: function setCameraPositionToCurrentDesignArea() {
-      var _ref4 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
+      var _ref5 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
         animate: false,
         duration: {}
       },
-          animate = _ref4.animate,
-          duration = _ref4.duration;
+          animate = _ref5.animate,
+          duration = _ref5.duration;
 
       var designArea = this._currentDesignArea || (0, _first["default"])(this._designAreaList);
       var obj = designArea && this.findAreaObjectByName(designArea.identifier);
@@ -463,16 +501,16 @@ var Three2D = /*#__PURE__*/function (_ThreeBase) {
       var size = new _three.Vector2();
       this.renderer.getSize(size);
 
-      var _ref5 = this.camera.view ? this.camera.view : {
+      var _ref6 = this.camera.view ? this.camera.view : {
         width: size.x,
         height: size.y,
         offsetX: 0,
         offsetY: 0
       },
-          width = _ref5.width,
-          height = _ref5.height,
-          offsetX = _ref5.offsetX,
-          offsetY = _ref5.offsetY;
+          width = _ref6.width,
+          height = _ref6.height,
+          offsetX = _ref6.offsetX,
+          offsetY = _ref6.offsetY;
 
       var realWidth = this._size.width * zoom;
       var realHeight = this._size.height * zoom;
@@ -664,7 +702,7 @@ var Three2D = /*#__PURE__*/function (_ThreeBase) {
                 availableDesignAreas = (0, _get2["default"])(this._currentDesignView, "designAreas") || [];
                 _context5.next = 6;
                 return Promise.all(availableDesignAreas.map( /*#__PURE__*/function () {
-                  var _ref6 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee4(designArea) {
+                  var _ref7 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee4(designArea) {
                     var material, _this4$getCanvasConte, ctx, canvas, texture, getTextureBuilder, width, height;
 
                     return regeneratorRuntime.wrap(function _callee4$(_context4) {
@@ -707,7 +745,7 @@ var Three2D = /*#__PURE__*/function (_ThreeBase) {
                   }));
 
                   return function (_x3) {
-                    return _ref6.apply(this, arguments);
+                    return _ref7.apply(this, arguments);
                   };
                 }()));
 
@@ -878,8 +916,13 @@ var Three2D = /*#__PURE__*/function (_ThreeBase) {
               case 7:
                 image = _context8.sent;
                 this.onLoadFinished();
-                tex = new _three.Texture((0, _optimizeTextureImage.optimizeTextureImage)(image, MAX_TEXTURE_SIZE, MIN_TEXTURE_SIZE));
-                tex.premultiplyAlpha = true;
+                tex = new _three.Texture(this._options.optimizeProductImage ? (0, _optimizeTextureImage.optimizeTextureImage)(image, MAX_TEXTURE_SIZE, MIN_TEXTURE_SIZE) : image);
+                tex.premultiplyAlpha = this._options.premultiplyAlpha;
+
+                if (this._options.sharperFullView) {
+                  tex.magFilter = _three.NearestFilter;
+                }
+
                 tex.originalSize = (0, _getImageSize.getImageSize)(image);
                 tex.needsUpdate = true;
                 this.initModelWithTexture(tex);
@@ -888,7 +931,7 @@ var Three2D = /*#__PURE__*/function (_ThreeBase) {
                   this.render();
                 }
 
-              case 15:
+              case 16:
               case "end":
                 return _context8.stop();
             }
@@ -1026,9 +1069,9 @@ var Three2D = /*#__PURE__*/function (_ThreeBase) {
           w = _max$sub.x,
           h = _max$sub.y;
 
-      var _ref8 = this._fitSize || this.renderer.getSize(new _three.Vector2()),
-          cWidth = _ref8.width,
-          cHeight = _ref8.height;
+      var _ref9 = this._fitSize || this.renderer.getSize(new _three.Vector2()),
+          cWidth = _ref9.width,
+          cHeight = _ref9.height;
 
       return Math.max(cWidth / w, cHeight / h);
     }
@@ -1083,7 +1126,7 @@ var Three2D = /*#__PURE__*/function (_ThreeBase) {
   }, {
     key: "getModelPathFromDesignView",
     value: function getModelPathFromDesignView(designView) {
-      var images = (0, _get2["default"])(designView, 'images');
+      var images = (0, _get2["default"])(designView, "images");
 
       if (this._materialVariantPath && images.hasOwnProperty(this._materialVariantPath)) {
         return images[this._materialVariantPath];
@@ -1385,7 +1428,7 @@ var Three2D = /*#__PURE__*/function (_ThreeBase) {
   }, {
     key: "getScreenshots",
     value: function () {
-      var _getScreenshots = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee15(callback, _ref9) {
+      var _getScreenshots = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee15(callback, _ref10) {
         var _this9 = this;
 
         var designViewList, areaList, variantList, size, removeTempOverlay, origDesignView, designAreaList, variants, screenshots, origVariantPath, origSize, origPixelRatio, restoreOriginalValues, camera, views, _iterator, _step, _loop, _ret;
@@ -1394,7 +1437,7 @@ var Three2D = /*#__PURE__*/function (_ThreeBase) {
           while (1) {
             switch (_context17.prev = _context17.next) {
               case 0:
-                designViewList = _ref9.designViewList, areaList = _ref9.areaList, variantList = _ref9.variantList, size = _ref9.size;
+                designViewList = _ref10.designViewList, areaList = _ref10.areaList, variantList = _ref10.variantList, size = _ref10.size;
 
                 if (this.renderer) {
                   _context17.next = 3;
@@ -1429,7 +1472,7 @@ var Three2D = /*#__PURE__*/function (_ThreeBase) {
                 origPixelRatio = this.renderer.getPixelRatio();
 
                 restoreOriginalValues = /*#__PURE__*/function () {
-                  var _ref10 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee13() {
+                  var _ref11 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee13() {
                     return regeneratorRuntime.wrap(function _callee13$(_context13) {
                       while (1) {
                         switch (_context13.prev = _context13.next) {
@@ -1459,14 +1502,14 @@ var Three2D = /*#__PURE__*/function (_ThreeBase) {
                   }));
 
                   return function restoreOriginalValues() {
-                    return _ref10.apply(this, arguments);
+                    return _ref11.apply(this, arguments);
                   };
                 }();
 
                 camera = this.createCameraBase();
                 this._screenshotCamera = camera;
-                views = designViewList || designAreaList.map(function (_ref11) {
-                  var designView = _ref11.designView;
+                views = designViewList || designAreaList.map(function (_ref12) {
+                  var designView = _ref12.designView;
                   return designView;
                 });
                 _iterator = _createForOfIteratorHelper(variants);

package/package.json

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

package/src/Three/Three2D.js

@@ -6,6 +6,8 @@ import {
   ImageLoader,
   Mesh,
   MeshBasicMaterial,
+  NearestFilter,
+  LinearFilter,
   OrthographicCamera,
   PlaneGeometry,
   Texture,
@@ -74,6 +76,11 @@ export class Three2D extends ThreeBase {
   _modelBasePath = "";
   _modelPath = null;
   _overlayMode = false;
+  _options = {
+    sharperFullView: false, // when zoom = 1 use NearestFilter for sharper product image
+    optimizeProductImage: false, // upscale or downscale the product image to fit 2048 x 2048
+    premultiplyAlpha: false,
+  };
   _imageRepository = createImageRepository(
     createCache(20),
     src =>
@@ -119,9 +126,34 @@ export class Three2D extends ThreeBase {
     camera.position.set(0, 0, cameraZ);
     redrawOnZoomChange &&
       observeProperty(camera, "zoom", debounce(this.redraw, redrawDebounceWait));
+    observeProperty(camera, "zoom", this.updateModelTextureFilter);
     return camera;
   }
 
+  updateModelTextureFilter = ({ value: currentZoom }) => {
+    if (!this._options.sharperFullView) {
+      return;
+    }
+    const tex = this._model?.material?.map;
+    if (!tex) {
+      return;
+    }
+    if (currentZoom === 1) {
+      tex.magFilter = NearestFilter;
+      tex.needsUpdate = true;
+    } else if (tex.magFilter !== LinearFilter) {
+      tex.magFilter = LinearFilter;
+      tex.needsUpdate = true;
+    }
+  };
+
+  setOptions(options) {
+    this._options = {
+      ...this._options,
+      ...options,
+    };
+  }
+
   createCamera() {
     return this.createCameraBase({ redrawOnZoomChange: true });
   }
@@ -441,8 +473,15 @@ export class Three2D extends ThreeBase {
     const image = await this._imageRepository.loadImage(url);
     this.onLoadFinished();
 
-    const tex = new Texture(optimizeTextureImage(image, MAX_TEXTURE_SIZE, MIN_TEXTURE_SIZE));
-    tex.premultiplyAlpha = true;
+    const tex = new Texture(
+      this._options.optimizeProductImage
+        ? optimizeTextureImage(image, MAX_TEXTURE_SIZE, MIN_TEXTURE_SIZE)
+        : image
+    );
+    tex.premultiplyAlpha = this._options.premultiplyAlpha;
+    if (this._options.sharperFullView) {
+      tex.magFilter = NearestFilter;
+    }
     tex.originalSize = getImageSize(image);
     tex.needsUpdate = true;
 
@@ -600,17 +639,15 @@ export class Three2D extends ThreeBase {
   }
 
   getModelPathFromDesignView(designView) {
-    const images = get(designView, 'images');
+    const images = get(designView, "images");
     if (this._materialVariantPath && images.hasOwnProperty(this._materialVariantPath)) {
       return images[this._materialVariantPath];
-    }
-    else if (images.hasOwnProperty(this._itemPath)) {
+    } else if (images.hasOwnProperty(this._itemPath)) {
       return images[this._itemPath];
-    }
-    else {
+    } else {
       return this._materialVariantPath
-          ? get(designView, `images[${this._materialVariantPath}]`)
-          : get(designView, `images[${this._itemPath}]`);
+        ? get(designView, `images[${this._materialVariantPath}]`)
+        : get(designView, `images[${this._itemPath}]`);
     }
   }