redhotmagma-visualization 1.44.10 → 1.45.1

package/Three/Three3DScene.js

@@ -8,9 +8,9 @@ var _three = require("three");
 var _Three3D2 = require("./Three3D");
 var _isMobileDevice = require("../Utils/isMobileDevice");
 var _GLTFLoader = require("three/examples/jsm/loaders/GLTFLoader");
-var _DRACOLoader = require("three/examples/jsm/loaders/DRACOLoader");
+var _DRACOLoader2 = require("three/examples/jsm/loaders/DRACOLoader");
 var _RGBELoader = require("three/examples/jsm/loaders/RGBELoader");
-var _get = _interopRequireDefault(require("lodash/get"));
+var _get2 = _interopRequireDefault(require("lodash/get"));
 var _size = _interopRequireDefault(require("lodash/size"));
 var _isPlainObject = _interopRequireDefault(require("lodash/isPlainObject"));
 var _glTFExporter = require("./Exporters/glTFExporter");
@@ -18,10 +18,15 @@ var _findIndex = _interopRequireDefault(require("lodash/findIndex"));
 var _merge = _interopRequireDefault(require("lodash/merge"));
 var _createBakedShadow = _interopRequireDefault(require("../Utils/createBakedShadow"));
 var _setLightShadow2 = _interopRequireDefault(require("../Utils/setLightShadow"));
+var _Constants = require("../Constants");
+var _createImageRepository = require("../Utils/createImageRepository");
+var _createCache = require("../Utils/createCache");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 function _regeneratorRuntime() { "use strict"; /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */ _regeneratorRuntime = function _regeneratorRuntime() { return e; }; var t, e = {}, r = Object.prototype, n = r.hasOwnProperty, o = Object.defineProperty || function (t, e, r) { t[e] = r.value; }, i = "function" == typeof Symbol ? Symbol : {}, a = i.iterator || "@@iterator", c = i.asyncIterator || "@@asyncIterator", u = i.toStringTag || "@@toStringTag"; function define(t, e, r) { return Object.defineProperty(t, e, { value: r, enumerable: !0, configurable: !0, writable: !0 }), t[e]; } try { define({}, ""); } catch (t) { define = function define(t, e, r) { return t[e] = r; }; } function wrap(t, e, r, n) { var i = e && e.prototype instanceof Generator ? e : Generator, a = Object.create(i.prototype), c = new Context(n || []); return o(a, "_invoke", { value: makeInvokeMethod(t, r, c) }), a; } function tryCatch(t, e, r) { try { return { type: "normal", arg: t.call(e, r) }; } catch (t) { return { type: "throw", arg: t }; } } e.wrap = wrap; var h = "suspendedStart", l = "suspendedYield", f = "executing", s = "completed", y = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} var p = {}; define(p, a, function () { return this; }); var d = Object.getPrototypeOf, v = d && d(d(values([]))); v && v !== r && n.call(v, a) && (p = v); var g = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(p); function defineIteratorMethods(t) { ["next", "throw", "return"].forEach(function (e) { define(t, e, function (t) { return this._invoke(e, t); }); }); } function AsyncIterator(t, e) { function invoke(r, o, i, a) { var c = tryCatch(t[r], t, o); if ("throw" !== c.type) { var u = c.arg, h = u.value; return h && "object" == _typeof(h) && n.call(h, "__await") ? e.resolve(h.__await).then(function (t) { invoke("next", t, i, a); }, function (t) { invoke("throw", t, i, a); }) : e.resolve(h).then(function (t) { u.value = t, i(u); }, function (t) { return invoke("throw", t, i, a); }); } a(c.arg); } var r; o(this, "_invoke", { value: function value(t, n) { function callInvokeWithMethodAndArg() { return new e(function (e, r) { invoke(t, n, e, r); }); } return r = r ? r.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg(); } }); } function makeInvokeMethod(e, r, n) { var o = h; return function (i, a) { if (o === f) throw new Error("Generator is already running"); if (o === s) { if ("throw" === i) throw a; return { value: t, done: !0 }; } for (n.method = i, n.arg = a;;) { var c = n.delegate; if (c) { var u = maybeInvokeDelegate(c, n); if (u) { if (u === y) continue; return u; } } if ("next" === n.method) n.sent = n._sent = n.arg;else if ("throw" === n.method) { if (o === h) throw o = s, n.arg; n.dispatchException(n.arg); } else "return" === n.method && n.abrupt("return", n.arg); o = f; var p = tryCatch(e, r, n); if ("normal" === p.type) { if (o = n.done ? s : l, p.arg === y) continue; return { value: p.arg, done: n.done }; } "throw" === p.type && (o = s, n.method = "throw", n.arg = p.arg); } }; } function maybeInvokeDelegate(e, r) { var n = r.method, o = e.iterator[n]; if (o === t) return r.delegate = null, "throw" === n && e.iterator["return"] && (r.method = "return", r.arg = t, maybeInvokeDelegate(e, r), "throw" === r.method) || "return" !== n && (r.method = "throw", r.arg = new TypeError("The iterator does not provide a '" + n + "' method")), y; var i = tryCatch(o, e.iterator, r.arg); if ("throw" === i.type) return r.method = "throw", r.arg = i.arg, r.delegate = null, y; var a = i.arg; return a ? a.done ? (r[e.resultName] = a.value, r.next = e.nextLoc, "return" !== r.method && (r.method = "next", r.arg = t), r.delegate = null, y) : a : (r.method = "throw", r.arg = new TypeError("iterator result is not an object"), r.delegate = null, y); } function pushTryEntry(t) { var e = { tryLoc: t[0] }; 1 in t && (e.catchLoc = t[1]), 2 in t && (e.finallyLoc = t[2], e.afterLoc = t[3]), this.tryEntries.push(e); } function resetTryEntry(t) { var e = t.completion || {}; e.type = "normal", delete e.arg, t.completion = e; } function Context(t) { this.tryEntries = [{ tryLoc: "root" }], t.forEach(pushTryEntry, this), this.reset(!0); } function values(e) { if (e || "" === e) { var r = e[a]; if (r) return r.call(e); if ("function" == typeof e.next) return e; if (!isNaN(e.length)) { var o = -1, i = function next() { for (; ++o < e.length;) if (n.call(e, o)) return next.value = e[o], next.done = !1, next; return next.value = t, next.done = !0, next; }; return i.next = i; } } throw new TypeError(_typeof(e) + " is not iterable"); } return GeneratorFunction.prototype = GeneratorFunctionPrototype, o(g, "constructor", { value: GeneratorFunctionPrototype, configurable: !0 }), o(GeneratorFunctionPrototype, "constructor", { value: GeneratorFunction, configurable: !0 }), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, u, "GeneratorFunction"), e.isGeneratorFunction = function (t) { var e = "function" == typeof t && t.constructor; return !!e && (e === GeneratorFunction || "GeneratorFunction" === (e.displayName || e.name)); }, e.mark = function (t) { return Object.setPrototypeOf ? Object.setPrototypeOf(t, GeneratorFunctionPrototype) : (t.__proto__ = GeneratorFunctionPrototype, define(t, u, "GeneratorFunction")), t.prototype = Object.create(g), t; }, e.awrap = function (t) { return { __await: t }; }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, c, function () { return this; }), e.AsyncIterator = AsyncIterator, e.async = function (t, r, n, o, i) { void 0 === i && (i = Promise); var a = new AsyncIterator(wrap(t, r, n, o), i); return e.isGeneratorFunction(r) ? a : a.next().then(function (t) { return t.done ? t.value : a.next(); }); }, defineIteratorMethods(g), define(g, u, "Generator"), define(g, a, function () { return this; }), define(g, "toString", function () { return "[object Generator]"; }), e.keys = function (t) { var e = Object(t), r = []; for (var n in e) r.push(n); return r.reverse(), function next() { for (; r.length;) { var t = r.pop(); if (t in e) return next.value = t, next.done = !1, next; } return next.done = !0, next; }; }, e.values = values, Context.prototype = { constructor: Context, reset: function reset(e) { if (this.prev = 0, this.next = 0, this.sent = this._sent = t, this.done = !1, this.delegate = null, this.method = "next", this.arg = t, this.tryEntries.forEach(resetTryEntry), !e) for (var r in this) "t" === r.charAt(0) && n.call(this, r) && !isNaN(+r.slice(1)) && (this[r] = t); }, stop: function stop() { this.done = !0; var t = this.tryEntries[0].completion; if ("throw" === t.type) throw t.arg; return this.rval; }, dispatchException: function dispatchException(e) { if (this.done) throw e; var r = this; function handle(n, o) { return a.type = "throw", a.arg = e, r.next = n, o && (r.method = "next", r.arg = t), !!o; } for (var o = this.tryEntries.length - 1; o >= 0; --o) { var i = this.tryEntries[o], a = i.completion; if ("root" === i.tryLoc) return handle("end"); if (i.tryLoc <= this.prev) { var c = n.call(i, "catchLoc"), u = n.call(i, "finallyLoc"); if (c && u) { if (this.prev < i.catchLoc) return handle(i.catchLoc, !0); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } else if (c) { if (this.prev < i.catchLoc) return handle(i.catchLoc, !0); } else { if (!u) throw new Error("try statement without catch or finally"); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } } } }, abrupt: function abrupt(t, e) { for (var r = this.tryEntries.length - 1; r >= 0; --r) { var o = this.tryEntries[r]; if (o.tryLoc <= this.prev && n.call(o, "finallyLoc") && this.prev < o.finallyLoc) { var i = o; break; } } i && ("break" === t || "continue" === t) && i.tryLoc <= e && e <= i.finallyLoc && (i = null); var a = i ? i.completion : {}; return a.type = t, a.arg = e, i ? (this.method = "next", this.next = i.finallyLoc, y) : this.complete(a); }, complete: function complete(t, e) { if ("throw" === t.type) throw t.arg; return "break" === t.type || "continue" === t.type ? this.next = t.arg : "return" === t.type ? (this.rval = this.arg = t.arg, this.method = "return", this.next = "end") : "normal" === t.type && e && (this.next = e), y; }, finish: function finish(t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.finallyLoc === t) return this.complete(r.completion, r.afterLoc), resetTryEntry(r), y; } }, "catch": function _catch(t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.tryLoc === t) { var n = r.completion; if ("throw" === n.type) { var o = n.arg; resetTryEntry(r); } return o; } } throw new Error("illegal catch attempt"); }, delegateYield: function delegateYield(e, r, n) { return this.delegate = { iterator: values(e), resultName: r, nextLoc: n }, "next" === this.method && (this.arg = t), y; } }, e; }
 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); }); }; }
+function _get() { if (typeof Reflect !== "undefined" && Reflect.get) { _get = Reflect.get.bind(); } else { _get = function _get(target, property, receiver) { var base = _superPropBase(target, property); if (!base) return; var desc = Object.getOwnPropertyDescriptor(base, property); if (desc.get) { return desc.get.call(arguments.length < 3 ? target : receiver); } return desc.value; }; } return _get.apply(this, arguments); }
+function _superPropBase(object, property) { while (!Object.prototype.hasOwnProperty.call(object, property)) { object = _getPrototypeOf(object); if (object === null) break; } return object; }
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
 function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
@@ -130,9 +135,11 @@ function findImageBySrc(tree, src) {
     var material = _ref5.material;
     if (!result && material) {
       for (var _i2 = 0, _Object$values = Object.values(material); _i2 < _Object$values.length; _i2++) {
+        var _value$image, _value$userData;
         var value = _Object$values[_i2];
-        if (value && value.isTexture && value.image && value.image.src === src) {
-          result = value.image;
+        if (value && value.isTexture && (((_value$image = value.image) === null || _value$image === void 0 ? void 0 : _value$image.src) === src || ((_value$userData = value.userData) === null || _value$userData === void 0 ? void 0 : _value$userData.src) === src)) {
+          result = value.source;
+          return result;
         }
       }
     }
@@ -282,7 +289,7 @@ var Three3DScene = exports.Three3DScene = /*#__PURE__*/function (_Three3D) {
     _defineProperty(_assertThisInitialized(_this), "defaultCamera", null);
     _defineProperty(_assertThisInitialized(_this), "dirLightPosition", new _three.Vector3(1, 1, 1).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), "defaultScreenshotPosition", new _three.Vector3(0, 1, 2).normalize());
     _defineProperty(_assertThisInitialized(_this), "relativeCameraViews", {});
     _defineProperty(_assertThisInitialized(_this), "relativeScreenshotViews", {});
     _defineProperty(_assertThisInitialized(_this), "groundObjectNames", [/ground/i]);
@@ -303,7 +310,13 @@ var Three3DScene = exports.Three3DScene = /*#__PURE__*/function (_Three3D) {
         shadowTextureScaling: 0.96,
         blurRadius: 6,
         shadowOpacity: 0.8
-      }
+      },
+      textureImageCacheSize: 20
+    });
+    _defineProperty(_assertThisInitialized(_this), "onLoadError", function (url) {
+      var errorMessage = "Could not load file: ".concat(url);
+      // eslint-disable-next-line no-console
+      console.error(errorMessage);
     });
     _defineProperty(_assertThisInitialized(_this), "animate", function () {
       var time = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
@@ -377,12 +390,53 @@ var Three3DScene = exports.Three3DScene = /*#__PURE__*/function (_Three3D) {
     value: function createLoader() {
       var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
       var loadingManager = this.createLoadingManager(options);
-      var dracoLoader = new _DRACOLoader.DRACOLoader();
-      dracoLoader.setDecoderPath("libs/draco/gltf/");
+      if (!this.dracoLoader) {
+        var dracoLoader = new ( /*#__PURE__*/function (_DRACOLoader) {
+          _inherits(PatchedDRACOLoader, _DRACOLoader);
+          var _super2 = _createSuper(PatchedDRACOLoader);
+          function PatchedDRACOLoader() {
+            _classCallCheck(this, PatchedDRACOLoader);
+            return _super2.apply(this, arguments);
+          }
+          _createClass(PatchedDRACOLoader, [{
+            key: "decodeGeometry",
+            value: function decodeGeometry(buffer, taskConfig) {
+              return _get(_getPrototypeOf(PatchedDRACOLoader.prototype), "decodeGeometry", this).call(this, buffer, taskConfig)["catch"](function (e) {
+                // eslint-disable-next-line no-console
+                console.error(e.message || e.error);
+                // make sure an empty geometry is returned to not break the app
+                return {
+                  attributes: {}
+                };
+              });
+            }
+          }]);
+          return PatchedDRACOLoader;
+        }(_DRACOLoader2.DRACOLoader))();
+        dracoLoader.setDecoderPath("libs/draco/gltf/");
+        this.dracoLoader = dracoLoader;
+      }
       var loader = new _GLTFLoader.GLTFLoader(loadingManager);
-      loader.setDRACOLoader(dracoLoader);
+      loader.setDRACOLoader(this.dracoLoader);
       return loader;
     }
+  }, {
+    key: "getImageCache",
+    value: function getImageCache() {
+      if (!this._imageCache) {
+        this._imageCache = (0, _createCache.createCache)(this.config.textureImageCacheSize);
+      }
+      return this._imageCache;
+    }
+  }, {
+    key: "useImageRepository",
+    value: function useImageRepository(imageLoader) {
+      return (0, _createImageRepository.createImageRepository)(this.getImageCache(), function (src) {
+        return new Promise(function (resolve, reject) {
+          return imageLoader.load(src, resolve, undefined, reject);
+        });
+      });
+    }
   }, {
     key: "createImageLoader",
     value: function createImageLoader() {
@@ -398,7 +452,6 @@ var Three3DScene = exports.Three3DScene = /*#__PURE__*/function (_Three3D) {
         alpha: true,
         antialias: true
       });
-      renderer.outputEncoding = _three.sRGBEncoding;
       renderer.shadowMap.enabled = true;
       renderer.shadowMap.type = _three.PCFSoftShadowMap;
       renderer.toneMapping = _three.ACESFilmicToneMapping;
@@ -426,7 +479,7 @@ var Three3DScene = exports.Three3DScene = /*#__PURE__*/function (_Three3D) {
         var pmremGenerator = new _three.PMREMGenerator(renderer);
         pmremGenerator.compileEquirectangularShader();
         this.envMapPromise = new Promise(function (resolve, reject) {
-          new _RGBELoader.RGBELoader().setDataType(_three.UnsignedByteType).load(envMapURL, function (texture) {
+          new _RGBELoader.RGBELoader().load(envMapURL, function (texture) {
             _this2.envMap = pmremGenerator.fromEquirectangular(texture).texture;
             _this2.scene.environment = _this2.envMap;
             texture.dispose();
@@ -477,7 +530,7 @@ var Three3DScene = exports.Three3DScene = /*#__PURE__*/function (_Three3D) {
           color: 0x202020
         });
       }
-      var mesh = new _three.Mesh(new _three.PlaneBufferGeometry(1, 1), shadowMaterial);
+      var mesh = new _three.Mesh(new _three.PlaneGeometry(1, 1), shadowMaterial);
       mesh.name = "ground";
       mesh.rotation.x = -Math.PI / 2;
       mesh.receiveShadow = true;
@@ -537,21 +590,22 @@ var Three3DScene = exports.Three3DScene = /*#__PURE__*/function (_Three3D) {
     value: function () {
       var _applyMaterialParams = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3(model, materialOptions, imageLoader) {
         var _this4 = this;
-        var params;
+        var imageRepository, params;
         return _regeneratorRuntime().wrap(function _callee3$(_context3) {
           while (1) switch (_context3.prev = _context3.next) {
             case 0:
+              imageRepository = this.useImageRepository(imageLoader);
               if (!materialOptions) {
-                _context3.next = 6;
+                _context3.next = 7;
                 break;
               }
               params = materialOptions.params;
               _context3.t0 = params;
               if (!_context3.t0) {
-                _context3.next = 6;
+                _context3.next = 7;
                 break;
               }
-              _context3.next = 6;
+              _context3.next = 7;
               return Promise.all(getAllMaterials(model).map( /*#__PURE__*/function () {
                 var _ref6 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(material) {
                   var materialName, materialNames;
@@ -574,7 +628,7 @@ var Three3DScene = exports.Three3DScene = /*#__PURE__*/function (_Three3D) {
                         _context2.next = 7;
                         return Promise.all(Object.keys(params).map( /*#__PURE__*/function () {
                           var _ref7 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(p) {
-                            var texture, value;
+                            var _material$p, _material$map, texture, src, textureSource, value;
                             return _regeneratorRuntime().wrap(function _callee$(_context) {
                               while (1) switch (_context.prev = _context.next) {
                                 case 0:
@@ -585,36 +639,40 @@ var Three3DScene = exports.Three3DScene = /*#__PURE__*/function (_Three3D) {
                                   return _context.abrupt("return");
                                 case 2:
                                   _context.t0 = p;
-                                  _context.next = _context.t0 === "alphaMap" ? 5 : _context.t0 === "aoMap" ? 5 : _context.t0 === "emissiveMap" ? 5 : _context.t0 === "lightMap" ? 5 : _context.t0 === "map" ? 5 : _context.t0 === "metalnessMap" ? 5 : _context.t0 === "normalMap" ? 5 : _context.t0 === "roughnessMap" ? 5 : _context.t0 === "clearcoatMap" ? 5 : _context.t0 === "clearcoatNormalMap" ? 5 : _context.t0 === "clearcoatRoughnessMap" ? 5 : _context.t0 === "sheenRoughnessMap" ? 5 : _context.t0 === "sheenColorMap" ? 5 : _context.t0 === "specularIntensityMap" ? 5 : _context.t0 === "specularColorMap" ? 5 : _context.t0 === "thicknessMap" ? 5 : _context.t0 === "transmissionMap" ? 5 : _context.t0 === "aoMapIntensity" ? 15 : _context.t0 === "emissiveIntensity" ? 15 : _context.t0 === "envMapIntensity" ? 15 : _context.t0 === "lightMapIntensity" ? 15 : _context.t0 === "metalness" ? 15 : _context.t0 === "opacity" ? 15 : _context.t0 === "refractionRatio" ? 15 : _context.t0 === "roughness" ? 15 : _context.t0 === "attenuationDistance" ? 15 : _context.t0 === "clearcoat" ? 15 : _context.t0 === "clearcoatRoughness" ? 15 : _context.t0 === "ior" ? 15 : _context.t0 === "reflectivity" ? 15 : _context.t0 === "sheen" ? 15 : _context.t0 === "sheenRoughness" ? 15 : _context.t0 === "specularIntensity" ? 15 : _context.t0 === "thickness" ? 15 : _context.t0 === "transmission" ? 15 : _context.t0 === "color" ? 18 : _context.t0 === "emissive" ? 18 : _context.t0 === "attenuationColor" ? 18 : _context.t0 === "sheenColor" ? 18 : _context.t0 === "specularColor" ? 18 : 20;
+                                  _context.next = _context.t0 === "alphaMap" ? 5 : _context.t0 === "aoMap" ? 5 : _context.t0 === "emissiveMap" ? 5 : _context.t0 === "lightMap" ? 5 : _context.t0 === "map" ? 5 : _context.t0 === "metalnessMap" ? 5 : _context.t0 === "normalMap" ? 5 : _context.t0 === "roughnessMap" ? 5 : _context.t0 === "clearcoatMap" ? 5 : _context.t0 === "clearcoatNormalMap" ? 5 : _context.t0 === "clearcoatRoughnessMap" ? 5 : _context.t0 === "sheenRoughnessMap" ? 5 : _context.t0 === "sheenColorMap" ? 5 : _context.t0 === "specularIntensityMap" ? 5 : _context.t0 === "specularColorMap" ? 5 : _context.t0 === "thicknessMap" ? 5 : _context.t0 === "transmissionMap" ? 5 : _context.t0 === "aoMapIntensity" ? 20 : _context.t0 === "emissiveIntensity" ? 20 : _context.t0 === "envMapIntensity" ? 20 : _context.t0 === "lightMapIntensity" ? 20 : _context.t0 === "metalness" ? 20 : _context.t0 === "opacity" ? 20 : _context.t0 === "refractionRatio" ? 20 : _context.t0 === "roughness" ? 20 : _context.t0 === "attenuationDistance" ? 20 : _context.t0 === "clearcoat" ? 20 : _context.t0 === "clearcoatRoughness" ? 20 : _context.t0 === "ior" ? 20 : _context.t0 === "reflectivity" ? 20 : _context.t0 === "sheen" ? 20 : _context.t0 === "sheenRoughness" ? 20 : _context.t0 === "specularIntensity" ? 20 : _context.t0 === "thickness" ? 20 : _context.t0 === "transmission" ? 20 : _context.t0 === "color" ? 23 : _context.t0 === "emissive" ? 23 : _context.t0 === "attenuationColor" ? 23 : _context.t0 === "sheenColor" ? 23 : _context.t0 === "specularColor" ? 23 : 25;
                                   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]));
-                                  if (_context.t1) {
-                                    _context.next = 11;
+                                  texture = ((_material$p = material[p]) === null || _material$p === void 0 ? void 0 : _material$p.clone()) || new _three.Texture();
+                                  texture.flipY = ((_material$map = material.map) === null || _material$map === void 0 ? void 0 : _material$map.flipY) || false;
+                                  src = imageLoader.manager.resolveURL(params[p]);
+                                  textureSource = findImageBySrc(_this4.sceneContainer, src);
+                                  if (!textureSource) {
+                                    _context.next = 13;
                                     break;
                                   }
-                                  _context.next = 10;
-                                  return new Promise(function (resolve, reject) {
-                                    return imageLoader.load(params[p], resolve, undefined, reject);
-                                  });
-                                case 10:
-                                  _context.t1 = _context.sent;
-                                case 11:
-                                  texture.image = _context.t1;
+                                  texture.source = textureSource;
+                                  _context.next = 16;
+                                  break;
+                                case 13:
+                                  _context.next = 15;
+                                  return imageRepository.loadImage(params[p]);
+                                case 15:
+                                  texture.image = _context.sent;
+                                case 16:
+                                  texture.userData.src = src;
                                   texture.needsUpdate = true;
                                   material[p] = texture;
-                                  return _context.abrupt("break", 20);
-                                case 15:
+                                  return _context.abrupt("break", 25);
+                                case 20:
                                   value = parseFloat(params[p]);
                                   if (!isNaN(value)) {
                                     material[p] = value;
                                   }
-                                  return _context.abrupt("break", 20);
-                                case 18:
+                                  return _context.abrupt("break", 25);
+                                case 23:
                                   material[p] = new _three.Color(params[p]);
-                                  return _context.abrupt("break", 20);
-                                case 20:
+                                  return _context.abrupt("break", 25);
+                                case 25:
                                 case "end":
                                   return _context.stop();
                               }
@@ -625,7 +683,10 @@ var Three3DScene = exports.Three3DScene = /*#__PURE__*/function (_Three3D) {
                           };
                         }()));
                       case 7:
-                        material.transparent = !!material.alphaMap;
+                        if (material.alphaMap) {
+                          material.transparent = true;
+                          material.side = _three.DoubleSide;
+                        }
                         material.needsUpdate = true;
                       case 9:
                       case "end":
@@ -637,11 +698,11 @@ var Three3DScene = exports.Three3DScene = /*#__PURE__*/function (_Three3D) {
                   return _ref6.apply(this, arguments);
                 };
               }()));
-            case 6:
+            case 7:
             case "end":
               return _context3.stop();
           }
-        }, _callee3);
+        }, _callee3, this);
       }));
       function applyMaterialParams(_x, _x2, _x3) {
         return _applyMaterialParams.apply(this, arguments);
@@ -723,7 +784,7 @@ var Three3DScene = exports.Three3DScene = /*#__PURE__*/function (_Three3D) {
                 if (!mat.original) {
                   mat.original = mat.clone();
                   Object.values(mat).filter(function (value) {
-                    return value && value.isTexture;
+                    return value && value.clone;
                   }).forEach(function (texture) {
                     if (!texture.original) {
                       texture.original = texture.clone();
@@ -733,7 +794,7 @@ var Three3DScene = exports.Three3DScene = /*#__PURE__*/function (_Three3D) {
                   mat.copy(mat.original);
                   Object.keys(mat).forEach(function (key) {
                     var value = mat[key];
-                    if (value && value.original) {
+                    if (_typeof(value) === "object" && value !== null && value !== void 0 && value.copy && value.original) {
                       value.copy(value.original);
                     }
                   });
@@ -892,6 +953,13 @@ var Three3DScene = exports.Three3DScene = /*#__PURE__*/function (_Three3D) {
         modelFileName: modelFileName
       };
     }
+  }, {
+    key: "checkEmptyScene",
+    value: function checkEmptyScene() {
+      if (!this.sceneContainer.children.length) {
+        this.observable.dispatch(_Constants.EventTypes.EmptySceneError);
+      }
+    }
   }, {
     key: "loadSceneSync",
     value: function () {
@@ -982,14 +1050,21 @@ var Three3DScene = exports.Three3DScene = /*#__PURE__*/function (_Three3D) {
               triggerLoadEvent = !!(toBeAdded.length || toBeUpdated.length || toBeApplied.length);
               triggerLoadEvent && this.onLoadStart();
               _context8.next = 13;
-              return Promise.all(toBeAdded.map(function (item) {
+              return Promise.allSettled(toBeAdded.map(function (item) {
                 return _this7.loadSceneContainer(item);
               }));
             case 13:
               sceneParts = _context8.sent;
-              sceneParts.forEach(function (_ref10) {
-                var scene = _ref10.scene,
-                  animations = _ref10.animations;
+              sceneParts.forEach(function (_ref10, index) {
+                var value = _ref10.value,
+                  reason = _ref10.reason;
+                if (reason) {
+                  // eslint-disable-next-line no-console
+                  console.error("Failed to load 3D model: ".concat(toBeAdded[index].model));
+                  return;
+                }
+                var scene = value.scene,
+                  animations = value.animations;
                 sceneContainer.add(scene);
 
                 // collect animations
@@ -1004,8 +1079,9 @@ var Three3DScene = exports.Three3DScene = /*#__PURE__*/function (_Three3D) {
                   })));
                 }
               });
+              this.checkEmptyScene();
               sceneContainer.updateWorldMatrix(true, true);
-              _context8.next = 18;
+              _context8.next = 19;
               return Promise.all(toBeUpdated.map(function (item) {
                 var itemSrc = getSrc(item);
                 var object = findObjectWith(sceneContainer, function (_ref13) {
@@ -1022,12 +1098,12 @@ var Three3DScene = exports.Three3DScene = /*#__PURE__*/function (_Three3D) {
                 var imageLoader = _this7.createImageLoader(loaderOptions);
                 return object && _this7.applyCustomizations(object, item, imageLoader);
               }));
-            case 18:
+            case 19:
               // apply global or targeted param values
               imageLoader = this.createImageLoader({
                 basePath: this._modelBasePath
               });
-              _context8.next = 21;
+              _context8.next = 22;
               return Promise.all(toBeApplied.map(function (_ref14) {
                 var optionParams = _ref14.params,
                   files = _ref14.files;
@@ -1060,10 +1136,10 @@ var Three3DScene = exports.Three3DScene = /*#__PURE__*/function (_Three3D) {
                   });
                 }));
               }));
-            case 21:
-              _context8.next = 23;
+            case 22:
+              _context8.next = 24;
               return this.initCustomizableMaterialsIfNeeded();
-            case 23:
+            case 24:
               this.setupGround();
               this.addLightsIfNeeded(sceneContainer);
               this.fitSceneToCamera();
@@ -1078,7 +1154,7 @@ var Three3DScene = exports.Three3DScene = /*#__PURE__*/function (_Three3D) {
                 mixer.clipAction(animations[0]).play();
                 this.startAnimation("builtin");
               }
-            case 29:
+            case 30:
             case "end":
               return _context8.stop();
           }
@@ -1114,9 +1190,7 @@ var Three3DScene = exports.Three3DScene = /*#__PURE__*/function (_Three3D) {
           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();
+          var orientation = _three.Object3D.DEFAULT_UP;
           var fov = camera.fov || 45;
           var cameraView = {
             position: position,
@@ -1432,7 +1506,7 @@ var Three3DScene = exports.Three3DScene = /*#__PURE__*/function (_Three3D) {
           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);
+              sceneData = (0, _get2["default"])(configuration, "visualizationData.sceneData", false) || (0, _get2["default"])(configuration, "visualizationData.designViews[0].models.".concat(this._materialVariantPath), false);
               _context9.t0 = sceneData;
               if (!_context9.t0) {
                 _context9.next = 6;
@@ -1459,7 +1533,7 @@ var Three3DScene = exports.Three3DScene = /*#__PURE__*/function (_Three3D) {
         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;
+              sceneData = (0, _get2["default"])(this._designAreaList, "[0].designView.models.".concat(this._materialVariantPath)) || (0, _get2["default"])(this._configuration, "visualizationData.designViews[0].models.".concat(this._materialVariantPath)) || false;
               _context10.t0 = sceneData;
               if (!_context10.t0) {
                 _context10.next = 5;
@@ -1487,7 +1561,7 @@ var Three3DScene = exports.Three3DScene = /*#__PURE__*/function (_Three3D) {
           while (1) switch (_context11.prev = _context11.next) {
             case 0:
               this._designAreaList = designAreaList;
-              sceneData = (0, _get["default"])(designAreaList, "[0].designView.models.".concat(this._materialVariantPath));
+              sceneData = (0, _get2["default"])(designAreaList, "[0].designView.models.".concat(this._materialVariantPath));
               _context11.t0 = sceneData;
               if (!_context11.t0) {
                 _context11.next = 6;

package/Utils/createBakedShadow.js

@@ -51,7 +51,7 @@ function createBakedShadow(scene, options) {
   var box = new _three.Box3().expandByObject(scene);
   var sphere = box.getBoundingSphere(new _three.Sphere());
   var radius = sphere.radius;
-  var shadowGeometry = new _three.PlaneBufferGeometry(1, 1);
+  var shadowGeometry = new _three.PlaneGeometry(1, 1);
   shadowGeometry.rotateX(-Math.PI * 0.5);
   shadowGeometry.rotateY(Math.PI);
   var shadowGround = new _three.Mesh(shadowGeometry, new _three.ShadowMaterial({
@@ -84,7 +84,6 @@ function createBakedShadow(scene, options) {
     alpha: true,
     antialias: true
   });
-  renderer.outputEncoding = _three.sRGBEncoding;
   renderer.shadowMap.enabled = true;
   renderer.shadowMap.type = _three.PCFSoftShadowMap;
   renderer.setRenderTarget(renderTarget);

package/Utils/initTextureCanvas.js

@@ -25,9 +25,11 @@ function initTextureCanvas(texture) {
     console.warn("There is no image for the given texture.", texture);
   }
   if (!texture.originalImage || texture.image.nodeName !== "CANVAS") {
+    var _texture$image, _texture$userData;
     var originalImage = (0, _optimizeTextureImage.optimizeTextureImage)(texture.image);
     // eslint-disable-next-line no-console
-    console.log("Creating canvas from texture: ".concat(originalImage.src));
+    texture.userData.src = ((_texture$image = texture.image) === null || _texture$image === void 0 ? void 0 : _texture$image.src) || ((_texture$userData = texture.userData) === null || _texture$userData === void 0 ? void 0 : _texture$userData.src);
+    console.log("Creating canvas from texture: ".concat(texture.userData.src));
     texture.image = createCanvasFromImage(originalImage);
     texture.originalImage = originalImage;
   } else {

package/Utils/optimizeTextureImage.js

@@ -21,7 +21,7 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
  * @return {HTMLImageElement|HTMLCanvasElement}
  */
 var optimizeTextureImage = exports.optimizeTextureImage = function optimizeTextureImage(image) {
-  var maxTextureSize = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 2048;
+  var maxTextureSize = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 4096;
   var minTextureSize = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 2048;
   var textureSize = Math.max(image.width, image.height);
   if (textureSize <= maxTextureSize && textureSize >= minTextureSize) {

package/Utils/rememberCameraViewOffset.js

@@ -5,13 +5,18 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.rememberCameraViewOffset = void 0;
 var rememberCameraViewOffset = exports.rememberCameraViewOffset = function rememberCameraViewOffset(camera) {
-  var _camera$view = camera.view,
-    fullWidth = _camera$view.fullWidth,
-    fullHeight = _camera$view.fullHeight,
-    offsetX = _camera$view.offsetX,
-    offsetY = _camera$view.offsetY,
-    width = _camera$view.width,
-    height = _camera$view.height;
+  var view = camera.view;
+  if (!view) {
+    return function () {
+      return null;
+    };
+  }
+  var fullWidth = view.fullWidth,
+    fullHeight = view.fullHeight,
+    offsetX = view.offsetX,
+    offsetY = view.offsetY,
+    width = view.width,
+    height = view.height;
   return function () {
     return camera.setViewOffset(fullWidth, fullHeight, offsetX, offsetY, width, height);
   };

package/Utils/restrictCameraMovement.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.restrictOrbitControls = void 0;
 var _pick = _interopRequireDefault(require("lodash/pick"));
-var _OrbitControls = _interopRequireDefault(require("../Three/Controls/OrbitControls"));
+var _OrbitControls = require("three/examples/jsm/controls/OrbitControls");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 var stateMemo = function stateMemo(obj, props) {
   var state = (0, _pick["default"])(obj, props);
@@ -14,7 +14,7 @@ var stateMemo = function stateMemo(obj, props) {
   };
 };
 var restrictOrbitControls = exports.restrictOrbitControls = function restrictOrbitControls(orbitControls) {
-  if (!(orbitControls instanceof _OrbitControls["default"])) {
+  if (!(orbitControls instanceof _OrbitControls.OrbitControls)) {
     throw new Error("restrictOrbitControls can handle only the OrbitControls object type");
   }
   var restoreInitialState = stateMemo(orbitControls, ["minPolarAngle", "maxPolarAngle", "minAzimuthAngle", "maxAzimuthAngle"]);

package/VisualizationContainer.js

@@ -112,12 +112,35 @@ var VisualizationContainer = exports.VisualizationContainer = /*#__PURE__*/funct
       this.resizeSensor = new _cssElementQueries.ResizeSensor(container, this.onSizeChange);
     }
   }, {
-    key: "updateVisualization",
-    value: function updateVisualization() {
-      var prevProps = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    key: "initMutationObserver",
+    value: function initMutationObserver() {
+      if (this.mutationObserver) {
+        this.mutationObserver.disconnect();
+      }
       var _this$props2 = this.props,
         visualization = _this$props2.visualization,
         alignTargetElement = _this$props2.alignTargetElement;
+      if (!alignTargetElement) {
+        return;
+      }
+      this.mutationObserver = new MutationObserver(function () {
+        (0, _updateFitSizeToElement.updateFitSizeToElement)(visualization, alignTargetElement).updateCameraPosition({
+          animate: true
+        });
+        visualization.render();
+      });
+      // do the update only when attributes have changed (e.g. style)
+      this.mutationObserver.observe(alignTargetElement, {
+        attributes: true
+      });
+    }
+  }, {
+    key: "updateVisualization",
+    value: function updateVisualization() {
+      var prevProps = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+      var _this$props3 = this.props,
+        visualization = _this$props3.visualization,
+        alignTargetElement = _this$props3.alignTargetElement;
       var container = this.containerRef.current;
       if (visualization !== prevProps.visualization) {
         if (prevProps.visualization) {
@@ -139,13 +162,14 @@ var VisualizationContainer = exports.VisualizationContainer = /*#__PURE__*/funct
         });
         visualization.render();
       }
+      this.initMutationObserver();
     }
   }, {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
-      var _this$props3 = this.props,
-        autoDispose = _this$props3.autoDispose,
-        visualization = _this$props3.visualization;
+      var _this$props4 = this.props,
+        autoDispose = _this$props4.autoDispose,
+        visualization = _this$props4.visualization;
       autoDispose && visualization.dispose();
       this.resizeSensor && this.resizeSensor.detach();
       this.offObservers && this.offObservers();
@@ -177,10 +201,10 @@ var VisualizationContainer = exports.VisualizationContainer = /*#__PURE__*/funct
   }, {
     key: "render",
     value: function render() {
-      var _this$props4 = this.props,
-        className = _this$props4.className,
-        ProgressComponent = _this$props4.ProgressComponent,
-        BrokenComponent = _this$props4.BrokenComponent;
+      var _this$props5 = this.props,
+        className = _this$props5.className,
+        ProgressComponent = _this$props5.ProgressComponent,
+        BrokenComponent = _this$props5.BrokenComponent;
       var broken = this.state.broken;
       var style = _objectSpread(_objectSpread({}, className ? {} : defaultContainerStyle), broken && BrokenComponent && {
         display: "none"

package/package.json

@@ -1,18 +1,18 @@
 {
   "name": "redhotmagma-visualization",
-  "version": "1.44.10",
+  "version": "1.45.1",
   "license": "UNLICENSED",
   "private": false,
   "main": "./index.js",
   "dependencies": {
     "@babel/polyfill": "^7.12.1",
-    "@configuratorware/scripts": "1.44.10",
+    "@configuratorware/scripts": "1.45.1",
     "@tweenjs/tween.js": "^17.6.0",
     "console-polyfill": "^0.3.0",
     "css-element-queries": "^1.2.3",
     "lodash": "^4.17.21",
     "prop-types": "^15.7.2",
-    "three": "^0.127.0",
+    "three": "^0.164.1",
     "uuid": "^3.4.0"
   },
   "peerDependencies": {

package/public/libs/draco/README.md

@@ -17,10 +17,10 @@ Each file is provided in two variations:
 * **Default:** Latest stable builds, tracking the project's [master branch](https://github.com/google/draco).
 * **glTF:** Builds targeted by the [glTF mesh compression extension](https://github.com/KhronosGroup/glTF/tree/master/extensions/2.0/Khronos/KHR_draco_mesh_compression), tracking the [corresponding Draco branch](https://github.com/google/draco/tree/gltf_2.0_draco_extension).
 
-Either variation may be used with `THREE.DRACOLoader`:
+Either variation may be used with `DRACOLoader`:
 
 ```js
-var dracoLoader = new THREE.DRACOLoader();
+var dracoLoader = new DRACOLoader();
 dracoLoader.setDecoderPath('path/to/decoders/');
 dracoLoader.setDecoderConfig({type: 'js'}); // (Optional) Override detection of WASM support.
 ```