redhotmagma-visualization 1.47.10 → 1.48.0

package/DevApp.js

@@ -802,6 +802,11 @@ var App = function App() {
     }[mode] || mode;
     var _visualization = (0, _visualizationAdapterCreator.createVisualizationAdapter)(adapterConfig, mappedMode);
     setVisualization(_visualization);
+    _visualization.setOptions3D && _visualization.setOptions3D({
+      // uncomment lines to test different settings
+      //useDirectionalLight: true,
+      //useSoftShadow: true,
+    });
     setEffect("");
     setModel("");
   }, [mode]);

package/Three/Three3DScene.js

@@ -295,6 +295,7 @@ var Three3DScene = exports.Three3DScene = /*#__PURE__*/function (_Three3D) {
     _defineProperty(_assertThisInitialized(_this), "groundObjectNames", [/ground/i]);
     _defineProperty(_assertThisInitialized(_this), "config", {
       useShadowGround: true,
+      shadowGroundShadowColor: 0x808080,
       removeGroundForScreenshot: true,
       useEnvironmentMap: true,
       useDirectionalLight: false,
@@ -311,6 +312,14 @@ var Three3DScene = exports.Three3DScene = /*#__PURE__*/function (_Three3D) {
         blurRadius: 6,
         shadowOpacity: 0.8
       },
+      useSoftShadow: false,
+      softShadow: {
+        bias: -0.0001,
+        // for smaller models with closer shadow 0.001 can be more suitable
+        normalBias: 0.01,
+        shadowMapSize: 2048,
+        selfShadow: false
+      },
       textureImageCacheSize: 20
     });
     _defineProperty(_assertThisInitialized(_this), "onLoadError", function (url) {
@@ -527,7 +536,7 @@ var Three3DScene = exports.Three3DScene = /*#__PURE__*/function (_Three3D) {
         });
       } else {
         shadowMaterial = new _three.ShadowMaterial({
-          color: 0x202020
+          color: this.config.shadowGroundShadowColor
         });
       }
       var mesh = new _three.Mesh(new _three.PlaneGeometry(1, 1), shadowMaterial);
@@ -542,12 +551,39 @@ var Three3DScene = exports.Three3DScene = /*#__PURE__*/function (_Three3D) {
     value: function setLightShadow(light) {
       var d = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 50;
       var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-      (0, _setLightShadow2["default"])(light, d, (0, _merge["default"])({}, {
-        shadowMapSize: 1024,
-        cameraProps: {
-          far: 10000
-        }
-      }, options));
+      if (this.config.useSoftShadow) {
+        (0, _setLightShadow2["default"])(light, d * 2, (0, _merge["default"])(this.calculateShadowProps(light), options));
+      }
+    }
+  }, {
+    key: "calculateShadowProps",
+    value: function calculateShadowProps(dirLight) {
+      var box = this.getSceneContainerBox();
+      var sphere = box.getBoundingSphere(new _three.Sphere());
+      var radius = sphere.radius;
+      var center = box.getCenter(new _three.Vector3());
+      var lightDistance = dirLight.getWorldPosition(new _three.Vector3()).sub(center).length();
+      var cameraProps = {
+        near: lightDistance - radius,
+        far: lightDistance * 2
+      };
+      return _objectSpread({
+        cameraProps: cameraProps
+      }, this.config.softShadow);
+    }
+  }, {
+    key: "fixSceneScaling",
+    value: function fixSceneScaling() {
+      this.sceneContainer.scale.set(1, 1, 1);
+      this.sceneContainer.updateWorldMatrix(true, true);
+      var box = this.getSceneContainerBox();
+      var size = box.getSize(new _three.Vector3()).length();
+      var sizeLog = Math.log10(size);
+      if (sizeLog >= 2) {
+        var scaling = 1 / Math.pow(10, Math.ceil(sizeLog));
+        this.sceneContainer.scale.set(scaling, scaling, scaling);
+        this.sceneContainer.updateWorldMatrix(true, true);
+      }
     }
   }, {
     key: "createDirLight",
@@ -578,6 +614,9 @@ var Three3DScene = exports.Three3DScene = /*#__PURE__*/function (_Three3D) {
       scene.traverse(function (object) {
         if (object.isMesh) {
           object.castShadow = true;
+          if (_this3.config.softShadow.selfShadow) {
+            object.receiveShadow = true;
+          }
         }
         if (object.isLight && object.target && _this3.ground) {
           object.target = _this3.ground;
@@ -1140,6 +1179,7 @@ var Three3DScene = exports.Three3DScene = /*#__PURE__*/function (_Three3D) {
               _context8.next = 24;
               return this.initCustomizableMaterialsIfNeeded();
             case 24:
+              this.fixSceneScaling();
               this.setupGround();
               this.addLightsIfNeeded(sceneContainer);
               this.fitSceneToCamera();
@@ -1154,7 +1194,7 @@ var Three3DScene = exports.Three3DScene = /*#__PURE__*/function (_Three3D) {
                 mixer.clipAction(animations[0]).play();
                 this.startAnimation("builtin");
               }
-            case 30:
+            case 31:
             case "end":
               return _context8.stop();
           }

package/Utils/setLightShadow.js

@@ -4,6 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = setLightShadow;
+var _excluded = ["shadowMapSize", "cameraProps"];
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 function setLightShadow(light) {
   var d = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 50;
   var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
@@ -11,7 +14,8 @@ function setLightShadow(light) {
     var _options$shadowMapSiz = options.shadowMapSize,
       shadowMapSize = _options$shadowMapSiz === void 0 ? 512 : _options$shadowMapSiz,
       _options$cameraProps = options.cameraProps,
-      cameraProps = _options$cameraProps === void 0 ? {} : _options$cameraProps;
+      cameraProps = _options$cameraProps === void 0 ? {} : _options$cameraProps,
+      shadowProps = _objectWithoutProperties(options, _excluded);
     light.castShadow = true;
     light.shadow.mapSize.width = shadowMapSize;
     light.shadow.mapSize.height = shadowMapSize;
@@ -22,6 +26,7 @@ function setLightShadow(light) {
     light.shadow.camera.near = 0.0001;
     light.shadow.camera.far = 2 * d + 0.0001;
     Object.assign(light.shadow.camera, cameraProps);
+    Object.assign(light.shadow, shadowProps);
     light.shadow.camera.updateProjectionMatrix();
   }
 }

package/package.json

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

package/src/DevApp.js

@@ -666,6 +666,12 @@ const App = () => {
       }[mode] || mode;
     const _visualization = createVisualizationAdapter(adapterConfig, mappedMode);
     setVisualization(_visualization);
+    _visualization.setOptions3D &&
+      _visualization.setOptions3D({
+        // uncomment lines to test different settings
+        //useDirectionalLight: true,
+        //useSoftShadow: true,
+      });
     setEffect("");
     setModel("");
   }, [mode]);

package/src/Three/Three3DScene.js

@@ -274,6 +274,7 @@ export class Three3DScene extends Three3D {
 
   config = {
     useShadowGround: true,
+    shadowGroundShadowColor: 0x808080,
     removeGroundForScreenshot: true,
     useEnvironmentMap: true,
     useDirectionalLight: false,
@@ -286,6 +287,13 @@ export class Three3DScene extends Three3D {
       blurRadius: 6,
       shadowOpacity: 0.8,
     },
+    useSoftShadow: false,
+    softShadow: {
+      bias: -0.0001, // for smaller models with closer shadow 0.001 can be more suitable
+      normalBias: 0.01,
+      shadowMapSize: 2048,
+      selfShadow: false,
+    },
     textureImageCacheSize: 20,
   };
 
@@ -440,7 +448,7 @@ export class Three3DScene extends Three3D {
         config: this.config.bakedShadow,
       });
     } else {
-      shadowMaterial = new ShadowMaterial({ color: 0x202020 });
+      shadowMaterial = new ShadowMaterial({ color: this.config.shadowGroundShadowColor });
     }
 
     const mesh = new Mesh(new PlaneGeometry(1, 1), shadowMaterial);
@@ -452,20 +460,41 @@ export class Three3DScene extends Three3D {
   }
 
   setLightShadow(light, d = 50, options = {}) {
-    setLightShadow(
-      light,
-      d,
-      merge(
-        {},
-        {
-          shadowMapSize: 1024,
-          cameraProps: {
-            far: 10000,
-          },
-        },
-        options
-      )
-    );
+    if (this.config.useSoftShadow) {
+      setLightShadow(light, d * 2, merge(this.calculateShadowProps(light), options));
+    }
+  }
+
+  calculateShadowProps(dirLight) {
+    const box = this.getSceneContainerBox();
+    const sphere = box.getBoundingSphere(new Sphere());
+    const radius = sphere.radius;
+    const center = box.getCenter(new Vector3());
+    const lightDistance = dirLight
+      .getWorldPosition(new Vector3())
+      .sub(center)
+      .length();
+    const cameraProps = {
+      near: lightDistance - radius,
+      far: lightDistance * 2,
+    };
+    return {
+      cameraProps,
+      ...this.config.softShadow,
+    };
+  }
+
+  fixSceneScaling() {
+    this.sceneContainer.scale.set(1, 1, 1);
+    this.sceneContainer.updateWorldMatrix(true, true);
+    const box = this.getSceneContainerBox();
+    const size = box.getSize(new Vector3()).length();
+    const sizeLog = Math.log10(size);
+    if (sizeLog >= 2) {
+      const scaling = 1 / Math.pow(10, Math.ceil(sizeLog));
+      this.sceneContainer.scale.set(scaling, scaling, scaling);
+      this.sceneContainer.updateWorldMatrix(true, true);
+    }
   }
 
   createDirLight() {
@@ -496,6 +525,9 @@ export class Three3DScene extends Three3D {
     scene.traverse(object => {
       if (object.isMesh) {
         object.castShadow = true;
+        if (this.config.softShadow.selfShadow) {
+          object.receiveShadow = true;
+        }
       }
       if (object.isLight && object.target && this.ground) {
         object.target = this.ground;
@@ -918,6 +950,8 @@ export class Three3DScene extends Three3D {
 
     await this.initCustomizableMaterialsIfNeeded();
 
+    this.fixSceneScaling();
+
     this.setupGround();
 
     this.addLightsIfNeeded(sceneContainer);

package/src/Utils/setLightShadow.js

@@ -1,6 +1,6 @@
 export default function setLightShadow(light, d = 50, options = {}) {
   if (light.isDirectionalLight) {
-    const { shadowMapSize = 512, cameraProps = {} } = options;
+    const { shadowMapSize = 512, cameraProps = {}, ...shadowProps } = options;
 
     light.castShadow = true;
     light.shadow.mapSize.width = shadowMapSize;
@@ -12,6 +12,7 @@ export default function setLightShadow(light, d = 50, options = {}) {
     light.shadow.camera.near = 0.0001;
     light.shadow.camera.far = 2 * d + 0.0001;
     Object.assign(light.shadow.camera, cameraProps);
+    Object.assign(light.shadow, shadowProps);
     light.shadow.camera.updateProjectionMatrix();
   }
 }