redhotmagma-visualization 1.22.4 → 1.22.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "redhotmagma-visualization",
-  "version": "1.22.4",
+  "version": "1.22.8",
   "license": "UNLICENSED",
   "private": false,
   "main": "./lib/index.js",

package/src/DevApp.js

@@ -187,6 +187,119 @@ const modelData = {
         },
       },
     },
+    FlexibleOptionsLocalParams: {
+      designAreaList: [],
+      configuration: {
+        visualizationData: {
+          sceneData: [
+            { src: "models/3d/GroundVehicle/SceneBase.gltf" },
+            {
+              src: "models/3d/GroundVehicle/WheelsFront.gltf",
+              params: {
+                material: { params: { map: "FunnyWheel.jpg" } },
+              },
+            },
+            {
+              src: "models/3d/GroundVehicle/WheelsFront.gltf",
+              params: {
+                material: {
+                  params: {
+                    map: "FunnyWheel.jpg",
+                    color: "#FF00FF",
+                  },
+                },
+                position: {
+                  z: -3,
+                },
+              },
+            },
+            {
+              src: "models/3d/GroundVehicle/WheelsFront.gltf",
+              params: {
+                material: {
+                  params: {
+                    map: "FunnyWheel.jpg",
+                    color: "#00FF00",
+                  },
+                },
+                position: {
+                  z: 3,
+                },
+              },
+            },
+          ],
+        },
+      },
+    },
+    FlexibleOptionsGlobalParams: {
+      designAreaList: [],
+      configuration: {
+        visualizationData: {
+          sceneData: [
+            { src: "models/3d/GroundVehicle/SceneBase.gltf" },
+            { src: "models/3d/GroundVehicle/Body.gltf" },
+            {
+              model: "models/3d/GroundVehicle/WheelsFront.gltf",
+              params: {
+                position: {
+                  z: 0,
+                },
+              },
+            },
+            {
+              model: "models/3d/GroundVehicle/WheelsFront.gltf",
+              params: {
+                position: {
+                  z: -3.75,
+                },
+              },
+            },
+            {
+              model: "models/3d/GroundVehicle/WheelsFront.gltf",
+              params: {
+                position: {
+                  z: -5.05,
+                },
+              },
+            },
+            {
+              params: {
+                objectName: "Wheels",
+                material: {
+                  params: {
+                    map: "FunnyWheel.jpg",
+                    color: "#FF00FF",
+                  },
+                },
+              },
+              files: {
+                "FunnyWheel.jpg": "models/3d/GroundVehicle/FunnyWheel.jpg",
+              },
+            },
+            {
+              params: {
+                objectName: "GroundVehicleMesh_0",
+                material: {
+                  params: {
+                    color: "#00FFFF",
+                  },
+                },
+              },
+            },
+            {
+              params: {
+                material: {
+                  params: {
+                    materialName: "CustomizableMaterial",
+                    color: "#FFFF00",
+                  },
+                },
+              },
+            },
+          ],
+        },
+      },
+    },
   },
 };
 

package/src/Three/Three3DScene.js

@@ -8,6 +8,7 @@ import {
   Group,
   HemisphereLight,
   ImageLoader,
+  LoadingManager,
   Mesh,
   MeshBasicMaterial,
   MeshPhongMaterial,
@@ -30,29 +31,31 @@ import { isMobileDevice } from "../Utils/isMobileDevice";
 import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
 import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader";
 import get from "lodash/get";
-import find from "lodash/find";
 import size from "lodash/size";
 import isPlainObject from "lodash/isPlainObject";
 import { exportGLTF } from "./Exporters/glTFExporter";
+import findIndex from "lodash/findIndex";
 
 const UNSET = Symbol("unset");
 
+const allowedObjectProps = ["position", "rotation", "scale"];
+
 function getSrc(item) {
-  return (item && item.src) || item;
+  return item && (item.model || item.src);
 }
 
 function getPatch(oldObj, newObj) {
   const patch = {};
   newObj &&
     Object.keys(newObj).forEach(prop => {
-        if (isPlainObject(newObj[prop])) {
-          const objPatch = getPatch(oldObj && oldObj[prop], newObj[prop]);
-          if (Object.keys(objPatch).length) {
-            patch[prop] = objPatch;
-          }
-        } else {
-          patch[prop] = newObj[prop];
+      if (isPlainObject(newObj[prop])) {
+        const objPatch = getPatch(oldObj && oldObj[prop], newObj[prop]);
+        if (Object.keys(objPatch).length) {
+          patch[prop] = objPatch;
         }
+      } else {
+        patch[prop] = newObj[prop];
+      }
     });
   oldObj &&
     Object.keys(oldObj).forEach(prop => {
@@ -88,7 +91,6 @@ function disposeNonUsedObjects(root, disposeTarget) {
   for (const object of disposableObjects) {
     if (referencedObjects.indexOf(object) === -1) {
       object.dispose();
-      console.log("disposed object:", object.constructor.name, object.uuid);
     }
   }
 }
@@ -103,6 +105,16 @@ function getMaterials(tree) {
   return materials;
 }
 
+function getAllMaterials(tree) {
+  const materials = [];
+  tree.traverse(({ material }) => {
+    if (material && materials.indexOf(material) === -1) {
+      materials.push(material);
+    }
+  });
+  return materials;
+}
+
 function findImageBySrc(tree, src) {
   let result = null;
   tree.traverse(({ material }) => {
@@ -133,35 +145,80 @@ function setLightShadow(light, d = 50) {
   }
 }
 
+function createIndexCounter() {
+  let counters = {};
+  const add = index => {
+    if (undefined === counters[index]) {
+      counters[index] = 0;
+    } else {
+      counters[index]++;
+    }
+    return counters[index];
+  };
+  const reset = () => {
+    counters = {};
+  };
+  return {
+    add,
+    reset,
+  };
+}
+
 function diffResourceLists(oldList, newList) {
   const toBeRemoved = [];
   const toBeAdded = [];
   const toBeUpdated = [];
+  const toBeApplied = [];
+  const indexCounter = createIndexCounter();
+
   for (const item of oldList) {
     const src = getSrc(item);
-    const newItem = newList.find(newItem => getSrc(newItem) === src);
+    if (!src) {
+      continue;
+    }
+    const index = indexCounter.add(src);
+
+    const newItem = newList.filter(newItem => getSrc(newItem) === src)[index];
     if (!newItem) {
-      toBeRemoved.push(item);
+      toBeRemoved.push({
+        ...item,
+        index,
+      });
     } else {
       const patch = getPatch(item, newItem);
       if (Object.keys(patch).length) {
         toBeUpdated.push({
-          src,
           ...patch,
+          model: src,
+          index,
         });
       }
     }
   }
+
+  indexCounter.reset();
+
   for (const item of newList) {
     const src = getSrc(item);
-    if (!oldList.find(oldItem => getSrc(oldItem) === src)) {
-      toBeAdded.push(item);
+    if (!src) {
+      item.params && toBeApplied.push(item);
+      continue;
+    }
+
+    const index = indexCounter.add(src);
+
+    if (!oldList.filter(oldItem => getSrc(oldItem) === src)[index]) {
+      toBeAdded.push({
+        ...item,
+        index,
+      });
     }
   }
   return {
     toBeRemoved,
     toBeAdded,
     toBeUpdated,
+    toBeApplied,
   };
 }
 
@@ -175,23 +232,30 @@ function findObjectWith(root, testFn) {
   return result;
 }
 
+function findAllObjectsWith(root, testFn) {
+  const result = [];
+  root.traverse(object => testFn(object) && result.push(object));
+  return result;
+}
+
+function mapObjectValues(object, valueMap) {
+  return Object.keys(object).reduce(
+    (res, key) => ({ ...res, [key]: (valueMap && valueMap[object[key]]) || object[key] }),
+    {}
+  );
+}
+
 function setCameraAspectFromRendererSize(camera, renderer) {
   const { width, height } = renderer.domElement;
   camera.aspect = width / height;
   camera.updateProjectionMatrix();
 }
 
-// todo: fix draco loader
-
 export class Three3DScene extends Three3D {
   DefaultCustomizableMaterialKey = "CustomizableMaterial";
 
   clock = new Clock();
 
-  loader = this.createLoader();
-
-  imageLoader = this.createImageLoader();
-
   animations = [];
 
   currentResourceList = [];
@@ -214,24 +278,37 @@ export class Three3DScene extends Three3D {
     cfg.modelBasePath ? (this._modelBasePath = cfg.modelBasePath) : (this._modelBasePath = "");
   }
 
-  createLoader() {
-    const dracoLoader = new DRACOLoader();
-    dracoLoader.setDecoderPath("libs/draco/gltf/");
-    const loader = new GLTFLoader(this._loadingManager);
-    this._loadingManager.setURLModifier(url => {
+  createLoadingManager(options = {}) {
+    const { basePath = "", resourcePath = "/" } = options;
+
+    const { onLoad, onProgress, onError } = this._loadingManager;
+    const loadingManager = new LoadingManager(onLoad, onProgress, onError);
+    loadingManager.setURLModifier(url => {
       if (/^(data|blob):/.test(url)) {
         return url;
       }
+      const fixedBasePath = basePath.replace(/\/$/, "");
       return url.indexOf("/") === 0
-        ? `${this._modelBasePath}${url}`
-        : `${this._modelBasePath}${this._resourcePath}${url}`;
+        ? `${fixedBasePath}${url}`
+        : `${fixedBasePath}${resourcePath}${url.replace("./", "")}`;
     });
+    return loadingManager;
+  }
+
+  createLoader(options = {}) {
+    const loadingManager = this.createLoadingManager(options);
+
+    const dracoLoader = new DRACOLoader();
+    dracoLoader.setDecoderPath("libs/draco/gltf/");
+
+    const loader = new GLTFLoader(loadingManager);
     loader.setDRACOLoader(dracoLoader);
     return loader;
   }
 
-  createImageLoader() {
-    const imageLoader = new ImageLoader(this._loadingManager);
+  createImageLoader(options = {}) {
+    const loadingManager = this.createLoadingManager(options);
+    const imageLoader = new ImageLoader(loadingManager);
     return imageLoader;
   }
 
@@ -260,6 +337,7 @@ export class Three3DScene extends Three3D {
   }
 
   setupDefaultLightning() {}
+
   loadModel() {}
 
   createScene() {
@@ -323,10 +401,31 @@ export class Three3DScene extends Three3D {
     });
   }
 
-  async applyCustomizations(model, item) {
-    const { params, material } = item;
+  async applyCustomizations(model, item, imageLoader, options = {}) {
+    const { saveAndRestore = true } = options;
+
+    const { params } = item;
     if (params) {
       Object.keys(params).forEach(p => {
+        // skip not allowed props
+        if (allowedObjectProps.indexOf(p) === -1) {
+          return;
+        }
+        // restore original value first
+        if (params[p] === UNSET) {
+          if (model.originalValues && model.originalValues[p]) {
+            model[p].copy(model.originalValues[p]);
+          }
+          return;
+        }
+        // store original value for later restoration
+        if (!model.originalValues) {
+          model.originalValues = {};
+        }
+        if (!model.originalValues[p]) {
+          model.originalValues[p] = model[p] ? model[p].clone() : model[p];
+        }
+        // apply the param values
         switch (p) {
           case "scale": {
             const { x = 1, y = 1, z = 1 } = params[p];
@@ -343,39 +442,46 @@ export class Three3DScene extends Three3D {
       });
     }
 
-    // store & restore originals
-    Object.values(getMaterials(model)).map(mat => {
-      if (!mat.original) {
-        mat.original = mat.clone();
-        Object.values(mat)
-          .filter(value => value && value.isTexture)
-          .forEach(texture => {
-            if (!texture.original) {
-              texture.original = texture.clone();
+    // store & restore original material and textures before applying new param values
+    saveAndRestore &&
+      Object.values(getMaterials(model)).map(mat => {
+        if (!mat.original) {
+          mat.original = mat.clone();
+          Object.values(mat)
+            .filter(value => value && value.isTexture)
+            .forEach(texture => {
+              if (!texture.original) {
+                texture.original = texture.clone();
+              }
+            });
+        } else {
+          mat.copy(mat.original);
+          Object.keys(mat).forEach(key => {
+            const value = mat[key];
+            if (value && value.original) {
+              value.copy(value.original);
             }
           });
-      } else {
-        // todo: dispose materials that are no longer present in the params
-        mat.copy(mat.original);
-        Object.keys(mat).forEach(key => {
-          const value = mat[key];
-          if (value && value.original) {
-            value.copy(value.original);
-          }
-        });
-        mat.needsUpdate = true;
-      }
-    });
+          mat.needsUpdate = true;
+        }
+      });
 
-    // set new params if provided
+    // set new material params if provided
+    // the material object should be located under item.params.material
+    // item.material is only for backward compatibility
+    const material = (params && params.material) || item.material;
     if (material) {
       const { params } = material;
       params &&
         (await Promise.all(
-          Object.values(getMaterials(model)).map(async material => {
-            const { materialNames } = params;
+          getAllMaterials(model).map(async material => {
+            const { materialName, materialNames } = params;
             // check materialNames list if provided
-            if ((materialNames instanceof Array) && materialNames.indexOf(material.name) === -1) {
+            if (materialNames instanceof Array && materialNames.indexOf(material.name) === -1) {
+              return;
+            }
+            // check materialName match if provided
+            if (materialName && material.name !== materialName) {
               return;
             }
             await Promise.all(
@@ -397,7 +503,7 @@ export class Three3DScene extends Three3D {
                     texture.image =
                       findImageBySrc(this.sceneContainer, `${this._modelBasePath}${params[p]}`) ||
                       (await new Promise((resolve, reject) =>
-                        this.imageLoader.load(params[p], resolve, undefined, reject)
+                        imageLoader.load(params[p], resolve, undefined, reject)
                       ));
                     texture.needsUpdate = true;
                     material[p] = texture;
@@ -438,20 +544,30 @@ export class Three3DScene extends Three3D {
     if ("string" === itemType) {
       path = item;
     } else if ("object" === itemType) {
-      path = item.src;
+      path = getSrc(item);
     }
-    const matches = path.match(/(.+\/)([^\/]+)/);
-    this._resourcePath = matches[1];
+    const { resourcePath, modelFileName } = this.parseModelPath(path);
+
+    const loaderOptions = {
+      basePath: this._modelBasePath,
+      resourcePath,
+    };
+
+    const modelLoader = this.createLoader(loaderOptions);
+    const imageLoader = this.createImageLoader(loaderOptions);
 
     return new Promise((resolve, reject) => {
-      this.loader.load(
-        matches[2],
+      modelLoader.load(
+        modelFileName,
         async gltf => {
           const model = gltf.scene;
           model.userData.path = path;
+          if (undefined !== item.index) {
+            model.userData.index = item.index;
+          }
           this.fixImportedScene(model);
           if ("object" === itemType) {
-            await this.applyCustomizations(model, item);
+            await this.applyCustomizations(model, item, imageLoader);
           }
           resolve(gltf);
         },
@@ -461,7 +577,25 @@ export class Three3DScene extends Three3D {
     });
   }
 
+  findCustomizableMaterials(materialsObj) {
+    for (let key of this._customizableMaterialKeys) {
+      const mat = materialsObj[key];
+      if (mat) {
+        this.prepareCustomCanvasForMaterial(mat);
+        const index = findIndex(this._customizableMaterials, { name: key });
+        if (index === -1) {
+          this._customizableMaterials.push(mat);
+        } else if (this._customizableMaterials[index] !== mat) {
+          this._customizableMaterials[index] = mat;
+        }
+      }
+    }
+  }
+
   async initCustomizableMaterialsIfNeeded() {
+    // reset customizable materials to always find the right one in the loaded scene
+    this._customizableMaterialKeys.length = 0;
+    this._customizableMaterials.length = 0;
     const materials = getMaterials(this.sceneContainer);
     if (size(materials)) {
       this.guessCustomizableMaterialNameIfNotSet(materials);
@@ -470,12 +604,25 @@ export class Three3DScene extends Three3D {
     await this.dispatchMaterialUpdateEvent();
   }
 
+  parseModelPath(path) {
+    const matches = path.match(/([^/].+\/)([^/]+)/);
+    if (!matches.length) {
+      throw new Error("Model path cannot be parsed: " + path);
+    }
+    const resourcePath = "/" + matches[1];
+    const modelFileName = matches[2];
+    return {
+      resourcePath,
+      modelFileName,
+    };
+  }
+
   async loadScene(resourceList) {
     const { sceneContainer } = this;
 
     this.stopAnimation();
 
-    const { toBeRemoved, toBeAdded, toBeUpdated } = diffResourceLists(
+    const { toBeRemoved, toBeAdded, toBeUpdated, toBeApplied } = diffResourceLists(
       this.currentResourceList || [],
       resourceList || []
     );
@@ -488,7 +635,10 @@ export class Three3DScene extends Three3D {
     const toBeDisposed = [];
     toBeRemoved.forEach(item => {
       const itemSrc = getSrc(item);
-      const object = findObjectWith(sceneContainer, ({ userData: { path } }) => path === itemSrc);
+      const object = findObjectWith(
+        sceneContainer,
+        ({ userData }) => userData.path === itemSrc && userData.index === item.index
+      );
       if (object) {
         object.parent.remove(object);
         toBeDisposed.push(object);
@@ -496,7 +646,7 @@ export class Three3DScene extends Three3D {
     });
     toBeDisposed.forEach(object => disposeNonUsedObjects(sceneContainer, object));
 
-    const triggerLoadEvent = !!(toBeAdded.length || toBeUpdated.length);
+    const triggerLoadEvent = !!(toBeAdded.length || toBeUpdated.length || toBeApplied.length);
 
     triggerLoadEvent && this.onLoadStart();
 
@@ -504,6 +654,8 @@ export class Three3DScene extends Three3D {
 
     sceneParts.forEach(({ scene, animations }) => {
       sceneContainer.add(scene);
+
+      // collect animations
       if (animations.length) {
         this.animations.push(
           ...animations.filter(
@@ -518,8 +670,49 @@ export class Three3DScene extends Three3D {
     await Promise.all(
       toBeUpdated.map(item => {
         const itemSrc = getSrc(item);
-        const object = findObjectWith(sceneContainer, ({ userData: { path } }) => path === itemSrc);
-        return object && this.applyCustomizations(object, item);
+        const object = findObjectWith(
+          sceneContainer,
+          ({ userData }) => userData.path === itemSrc && userData.index === item.index
+        );
+
+        const path = getSrc(item);
+        const { resourcePath } = this.parseModelPath(path);
+        const loaderOptions = {
+          basePath: this._modelBasePath,
+          resourcePath,
+        };
+        const imageLoader = this.createImageLoader(loaderOptions);
+
+        return object && this.applyCustomizations(object, item, imageLoader);
+      })
+    );
+
+    // apply global or targeted param values
+    const imageLoader = this.createImageLoader({
+      basePath: this._modelBasePath,
+    });
+    await Promise.all(
+      toBeApplied.map(({ params: optionParams, files }) => {
+        // find model based on objectName
+        const { objectName, material = {} } = optionParams;
+        const objects = objectName
+          ? findAllObjectsWith(sceneContainer, ({ name }) => name === objectName)
+          : sceneContainer.children;
+        const { params } = material;
+        const item = {
+          params: {
+            ...optionParams,
+            material: {
+              ...material,
+              params: params && mapObjectValues(params, files),
+            },
+          },
+        };
+        return Promise.all(
+          objects.map(object =>
+            this.applyCustomizations(object, item, imageLoader, { saveAndRestore: false })
+          )
+        );
       })
     );
 
@@ -562,6 +755,8 @@ export class Three3DScene extends Three3D {
     const center = new Vector3();
     box.getCenter(center);
 
+    this.cameraViews.default = null;
+
     this.cameraViews = cameras.reduce((views, camera) => {
       const position = new Vector3();
       camera.getWorldPosition(position);