@colijnit/configurator 1.0.19 → 1.0.21

package/src/utils/scene-utils.ts

@@ -0,0 +1,119 @@
+import * as THREE from 'three';
+
+export class SceneUtils {
+
+    public static TrySelectorConnection(scene: THREE.Scene, parent: THREE.Object3D,
+        part1: any, part2: any, createAddableFn?: Function): boolean {
+        let addable: any;
+        if (createAddableFn) {
+            addable = part2;
+            part2 = createAddableFn(addable);
+        }
+        for (let i = 0; i < part1.children.length; i++) {
+            for (let ii = 0; ii < part2.children.length; ii++) {
+                const con1: THREE.Object3D = part1.children[i];
+                const con2: THREE.Object3D = part2.children[ii];
+                // if these connectors can connect connect them
+                if (!con1['connected'] && !con2['connected'] && this.CanSelectorConnect(con1, con2)) {
+                    // if addable, continue this loop with a new addable
+                    if (addable) {
+                        const newPart2: THREE.Object3D = createAddableFn(addable, part2, part1);
+                        // reference of part2 changed, so refresh con2
+                        this.SelectorConnect(scene, parent, con1, newPart2.children[ii]);
+                    } else {
+                        return this.SelectorConnect(scene, parent, con1, con2);
+                    }
+                }
+            }
+        }
+        return false;
+    }
+
+    public static Convert3DPointToScreenPoint(point: THREE.Vector3, camera: THREE.Camera, width: number, height: number): THREE.Vector2 {
+        if (!point) {
+            return new THREE.Vector2();
+        }
+        const vector: THREE.Vector3 = point.clone().project(camera);
+        vector.x = (vector.x + 1) / 2 * width;
+        vector.y = -(vector.y - 1) / 2 * height;
+        return new THREE.Vector2(vector.x, vector.y);
+    }
+
+    public static CanSelectorConnect(con1: THREE.Object3D | any, con2: THREE.Object3D | any): boolean {
+        const con1Name: string = con1 instanceof THREE.Object3D ? con1.name : con1.connector;
+        const con2Name: string = con2 instanceof THREE.Object3D ? con2.name : con2.connector;
+        const sameParent: boolean = con1 instanceof THREE.Object3D && con2 instanceof THREE.Object3D ? con1.parent === con2.parent : false;
+        const parts1: string[] = con1Name.toUpperCase().split('_'),
+            parts2: string[] = con2Name.toUpperCase().split('_');
+        if (parts1.length >= 3 && parts2.length >= 3 && !sameParent) {
+            const connectable: boolean = parts1[0] === 'C' && parts2[0] === 'C' &&
+                parts1[1] === parts2[1] && parts1[2] !== parts2[2];
+            return connectable;
+        }
+        return false;
+    }
+
+    private static SelectorConnect(scene: THREE.Scene, parent: THREE.Object3D, con1: THREE.Object3D, con2: THREE.Object3D): boolean {
+        if (!scene || !parent) {
+            return false;
+        }
+        con1['connectedTo'] = con2.parent.name;
+        con2['connectedTo'] = con1.parent.name;
+
+        const motherRotation: THREE.Euler = new THREE.Euler(0, 0, 0);
+        const motherPosition: THREE.Vector3 = new THREE.Vector3(0, 0, 0);
+
+        scene.updateMatrixWorld(true);
+        motherRotation.copy(parent.rotation);
+        parent.getWorldPosition(motherPosition);
+
+        parent.rotation.set(0, 0, 0);
+        parent.position.set(0, 0, 0);
+
+        const con1Quat: THREE.Quaternion = new THREE.Quaternion();
+        con1.getWorldQuaternion(con1Quat);
+        const con2Quat: THREE.Quaternion = new THREE.Quaternion();
+        con2.getWorldQuaternion(con2Quat);
+        const con1QuatParent: THREE.Quaternion = new THREE.Quaternion();
+        con1.parent.getWorldQuaternion(con1QuatParent);
+        const con2QuatParent: THREE.Quaternion = new THREE.Quaternion();
+        con2.parent.getWorldQuaternion(con2QuatParent);
+
+        const rotation: THREE.Quaternion = new THREE.Quaternion().multiplyQuaternions(
+            con1Quat.invert(),
+            con2Quat
+        ).multiply(
+            new THREE.Quaternion().multiplyQuaternions(
+                con1QuatParent,
+                con1QuatParent
+            )
+        );
+
+        con2.parent.quaternion.copy(rotation);
+        // Update because the matrix has been tempered with
+        scene.updateMatrixWorld(true);
+
+        // Move the connectors towards eachother
+        const con1Pos: THREE.Vector3 = new THREE.Vector3();
+        con1.getWorldPosition(con1Pos);
+        const con2Pos: THREE.Vector3 = new THREE.Vector3();
+        con2.getWorldPosition(con2Pos);
+
+        const move: THREE.Vector3 = con1Pos.sub(con2Pos);
+        con2.parent.position.x += move.x;
+        con2.parent.position.y += move.y;
+        con2.parent.position.z += move.z;
+
+        // reset parent's objects rotation and position
+        parent.rotation.copy(motherRotation);
+        parent.position.copy(motherPosition);
+
+        scene.updateMatrixWorld(true);
+
+        // Set the connected flag
+        con1['connected'] = true;
+        con2['connected'] = true;
+        return true;
+    }
+
+}

package/src/utils/threed.utils.ts

@@ -0,0 +1,219 @@
+import * as THREE from "three";
+import {ObjectUtils} from "./object.utils";
+import {FileUtils} from "./file.utils";
+
+export class ThreedUtils {
+
+  private _objectCache: Map<string, THREE.Object3D> = new Map();
+
+  public clearCache(): void {
+    const objs: THREE.Object3D[] = Array.from(this._objectCache.values());
+    objs.forEach(o => ObjectUtils.DisposeObject(o));
+    this._objectCache.clear();
+  }
+
+  public download3DSource(fileName: string): Promise<THREE.Object3D> {
+    return new Promise(async (resolve: Function, reject: Function) => {
+      fileName = fileName.replace('.unity3d', '');
+      let lookupFileName: string = fileName + (fileName.indexOf('.glb') < 0 ? '.glb' : '');
+      if (this._objectCache.has(lookupFileName)) {
+        resolve(this._objectCache.get(lookupFileName));
+        return;
+      }
+      if (await FileUtils.FileExists(lookupFileName, 'https://cdn1.colijn-it.nl/content43/')) {
+        this.loadGlbSource(lookupFileName).then((obj: THREE.Object3D) => {
+          this._objectCache.set(lookupFileName, obj);
+          resolve(obj);
+        });
+      } else {
+        reject(`GLB source not found! (${lookupFileName})`);
+      }
+    });
+  }
+
+  public readFileAsText(file: File): Promise<string> {
+    const fileReader = new FileReader();
+    return new Promise((resolve, reject) => {
+      fileReader.onload = (e: any) => resolve(e.target.result);
+      fileReader.onerror = error => reject(error);
+      fileReader.readAsText(file);
+    });
+  }
+
+  public async loadJsonModel(filePath: string): Promise<any> {
+    if (this._objectCache.has(filePath)) {
+      return Promise.resolve(this._objectCache.get(filePath));
+    }
+    const json: string = await this._readJsonFile(filePath);
+    const loader = new THREE.ObjectLoader();
+    loader.crossOrigin = 'Anonymous';
+    return new Promise((resolve, reject) => {
+      try {
+        const obj = loader.parse(json);
+        this._objectCache.set(filePath, obj);
+        resolve(obj);
+      } catch (e) {
+        reject(null);
+      }
+    });
+  }
+
+  public async loadJsonObjectModel(filePath: string): Promise<any> {
+    if (this._objectCache.has(filePath)) {
+      return Promise.resolve(this._objectCache.get(filePath));
+    }
+    const loader = new THREE.ObjectLoader();
+    loader.setCrossOrigin('Anonymous');
+    loader.setResourcePath('');
+    return new Promise((resolve, reject) => {
+      loader.load(filePath,
+        (object: any) => {
+          const obj: THREE.Object3D = (object.type === 'Scene' && object.children[0].type === 'Object3D') ? object.children[0] : object;
+          this._objectCache.set(filePath, obj);
+          resolve(obj as THREE.Object3D);
+        },
+        xhr => null,
+        error => reject(error)
+      );
+    });
+  }
+
+  public async loadGlbModel(file: string, cleanUp: boolean = true): Promise<THREE.Object3D> {
+    if (this._objectCache.has(file)) {
+      return Promise.resolve(this._objectCache.get(file));
+    }
+    if (!window.hasOwnProperty('loadGLTF')) {
+      console.error('loadGLTF not defined in window global');
+      return null;
+    }
+      // const loader = new GLTFLoader();
+    const obj: THREE.Object3D = await (window as any).loadGLTF(file);
+    if (obj) {
+      this._cleanedUpObjects(obj, cleanUp);
+      this._objectCache.set(file, obj);
+      return obj;
+    } else {
+      return null;
+    }
+  }
+
+  public async loadGlbSource(file: string): Promise<THREE.Object3D> {
+    const obj = await this.loadGlbModel(file, false);
+    if (obj) {
+      obj.children = obj.children.filter(c => !(c instanceof THREE.Camera));
+      obj.children.sort((a, b) => a['name'] < b['name'] ? 1 : -1);
+      obj.children.forEach((c: THREE.Object3D) => {
+        c.traverse((t: THREE.Object3D) => {
+          t.visible = !t.name.toLowerCase().startsWith('c_');
+        });
+        c.visible = false;
+      });
+      if (obj.children.length === 1 && obj.children[0] instanceof THREE.Group) { // flatten children
+        const children: any = obj.children[0].children.slice();
+        obj.children.length = 0;
+        obj.children = children;
+      }
+    }
+    return obj;
+  }
+
+  public async textureFromUrl(url: string): Promise<any> {
+    // url = this._includeBaseUrl(url);
+    return new Promise((resolve, reject) => {
+      const textureLoader = new THREE.TextureLoader();
+      // textureLoader.setBaseU(this._settingsService.settings.assetPath);
+      textureLoader.load(url,
+        (texture: THREE.Texture) => {
+          texture.wrapT = THREE.RepeatWrapping;
+          texture.wrapS = THREE.RepeatWrapping;
+          texture.repeat.set(1, 1);
+          texture.needsUpdate = true;
+          return resolve(texture);
+        },
+        null,
+        reject
+      );
+    });
+  }
+
+  private _cleanedUpObjects(object: THREE.Object3D, cleanUp: boolean = true): THREE.Object3D {
+    let obj: THREE.Object3D = new THREE.Object3D();
+    object.children.forEach((c: THREE.Object3D) => {
+      if (!(c instanceof THREE.Camera)) {
+        if (cleanUp && c instanceof THREE.Group || (c.children.length === 1 && c.children[0] instanceof THREE.Group)) {
+          this._addGroupChildrenToObject(c, obj);
+        } else if ((cleanUp && !(c instanceof THREE.Mesh)) || (!(c instanceof THREE.Mesh) && !c.name && c.children.length > 0)) {
+          c.children.forEach((child) => {
+            child.translateY(c.position.y);
+          });
+          c.translateY(-c.position.y);
+          if (obj.children.length > 0) {
+            obj.add(c.clone());
+          } else {
+            obj = c.clone();
+          }
+        } else {
+          // if (c.position.y > 0 || c.position.y < 0) {
+          //   c.children.forEach((child) => {
+          //     child.translateY(c.position.y);
+          //   });
+          //   c.translateY(-c.position.y);
+          // }
+          obj.add(c.clone());
+        }
+      }
+    });
+    const boundingBox = new THREE.Box3().setFromObject(obj);
+    const bbCenterPivot = new THREE.Vector3();
+    boundingBox.getCenter(bbCenterPivot);
+    const delta: THREE.Vector3 = new THREE.Vector3().add(bbCenterPivot).negate();
+    obj.children.forEach((cc) => {
+      cc.position.add(delta);
+    });
+    return obj;
+  }
+
+  private _addGroupChildrenToObject(group: THREE.Object3D, obj: THREE.Object3D, cleanUp: boolean = true): void {
+    group.children.forEach((gc: THREE.Object3D) => {
+      if (cleanUp && gc instanceof THREE.Group) {
+        this._addGroupChildrenToObject(gc, obj);
+      } else {
+        // gc.translateX(-group.position.x);
+        gc.translateY(group.position.y);
+        // gc.translateZ(-group.position.z);
+        obj.add(gc.clone());
+      }
+    });
+  }
+
+  private _iterateChildren(children: THREE.Object3D[], callback: (child: THREE.Mesh) => {}): void {
+    for (let i = 0; i < children.length; i++) {
+      const child: THREE.Object3D = children[i];
+      if (child instanceof THREE.Mesh) {
+        callback(child);
+      } else {
+        this._iterateChildren(child.children, callback);
+      }
+    }
+  }
+
+  private async _readJsonFile(filePath: string): Promise<any> {
+    try {
+      const response = await fetch(filePath);
+      if (!response.ok) {
+        return '';
+      } else {
+        let empty = false;
+        await response.clone().text().then((value) => {
+          if (value === '') {
+            empty = true;
+          }
+        });
+        return empty ? {} : response.json();
+      }
+    } catch (e) {
+      return '';
+    }
+  }
+
+}

package/src/utils/variation-utils.ts

@@ -0,0 +1,216 @@
+import * as JSZip from 'jszip';
+import * as THREE from 'three';
+import {FileUtils} from "./file.utils";
+import {VariationSettings} from "../model/variation-settings";
+import axios from "axios";
+
+// @dynamic
+export class VariationUtils {
+  private static MaterialCache: Map<string, THREE.MeshStandardMaterial> = new Map();
+
+  public static async LoadVariation(assetPath: string, fileName: string): Promise<VariationSettings> {
+    if (!fileName) {
+      return null;
+    }
+    if (fileName.indexOf('ione3d') < 0) {
+      fileName = fileName.concat('.ione3d');
+    }
+    const id: string = fileName.substr(0, fileName.lastIndexOf('.ione3d'));
+    try {
+      if (!assetPath.endsWith('/')) {
+        assetPath += '/';
+      }
+      if (!window.hasOwnProperty('downloadVariation')) {
+        console.error('downloadVariation not defined in window global');
+        return null;
+      }
+      const file: any = await (window as any).downloadVariation(`${assetPath.replace('https://cdn1.colijn-it.nl/', '')}variation/${fileName}`);
+      return await VariationUtils.GetVariationSettingsFromFile(id, file);
+    } catch (err) {
+      const mute = err;
+      return null;
+    }
+  }
+
+  // public static GetMaterialFromName(variationFolder: string, material: any): Promise<MeshStandardMaterial> {
+  //   return new Promise((resolve: Function) => {
+  //     if (!material) {
+  //       resolve(null);
+  //     }
+  //     if (this.MaterialCache.has(material.name)) {
+  //       resolve(this.MaterialCache.get(material.name).clone());
+  //     } else {
+  //       VariationUtils.LoadVariation(variationFolder, material.name, false).then((settings: VariationSettings) => {
+  //         if (settings) {
+  //           AssetUtils.CreateMaterialFromAsset(settings).then((materialObj: Material) => {
+  //             const materialParams: MeshStandardMaterialParameters = {};
+  //             materialParams.name = material.name;
+  //             materialParams.map = materialObj.texture;
+  //             materialParams.normalMap = materialObj.normal;
+  //             materialParams.aoMap = materialObj.ao;
+  //             materialParams.roughnessMap = materialObj.roughness;
+  //             materialParams.metalnessMap = materialObj.metalness;
+  //             materialParams.roughness = 1;
+  //             materialParams.metalness = 1;
+  //             const pbrMat: MeshStandardMaterial = new MeshStandardMaterial(materialParams);
+  //             this.MaterialCache.set(material.name, pbrMat);
+  //             resolve(pbrMat.clone());
+  //           });
+  //         } else {
+  //           resolve(material);
+  //         }
+  //       });
+  //     }
+  //   });
+  // }
+
+  private static async GetVariationSettingsFromFile(id: string, compressedFile: any): Promise<VariationSettings> {
+    if (!compressedFile) {
+      return null;
+    }
+    const zipContent = await VariationUtils.GetZipContent(compressedFile);
+    const variationSettings: VariationSettings = new VariationSettings();
+    let index;
+    variationSettings.id = id;
+
+    if (zipContent.files['index.json']) {
+      const indexFile: string = await zipContent.files['index.json'].async('string');
+      index = JSON.parse(indexFile);
+    }
+    if (index) {
+      await VariationUtils.CreateSettingsBasedOnIndex(index, variationSettings, zipContent);
+    } else {
+      await VariationUtils.CreateSettingsBasedOnFileName(variationSettings, zipContent);
+    }
+    return variationSettings;
+  }
+
+  private static async CreateSettingsBasedOnIndex(index: any, variationSettings: VariationSettings, zipContent: any): Promise<void> {
+    if (index.normalFile) {
+      variationSettings.normal = await VariationUtils.LoadFileContentFromZip(zipContent.files[index.normalFile], index.normalFile);
+      variationSettings.normalFilename = index.normalFile;
+    }
+    if (index.aoFile) {
+      variationSettings.ao = await VariationUtils.LoadFileContentFromZip(zipContent.files[index.aoFile], index.aoFile);
+      variationSettings.aoFilename = index.aoFile;
+    }
+    if (index.metalnessFile) {
+      variationSettings.metalness = await VariationUtils.LoadFileContentFromZip(zipContent.files[index.metalnessFile], index.metalnessFile);
+      variationSettings.metalnessFilename = index.metalnessFile;
+    }
+    if (index.roughnessFile) {
+      variationSettings.roughness = await VariationUtils.LoadFileContentFromZip(zipContent.files[index.roughnessFile], index.roughnessFile);
+      variationSettings.roughnessFilename = index.roughnessFile;
+    }
+    if (index.diffuseFile) {
+      variationSettings.texture = await VariationUtils.LoadFileContentFromZip(zipContent.files[index.diffuseFile], index.diffuseFile);
+      variationSettings.textureFilename = index.diffuseFile;
+    }
+    variationSettings.settings =
+      await VariationUtils.LoadFileContentFromZip(zipContent.files['repeat.json'], 'repeat.json', false) || {};
+    Object.assign(variationSettings.settings, index.repeat);
+    variationSettings.settings.metalness = index.metalness;
+    variationSettings.settings.roughness = index.roughness;
+  }
+
+  private static async CreateSettingsBasedOnFileName(variationSettings: VariationSettings, zipContent: any): Promise<void> {
+    const allLoaded: Promise<VariationSettings>[] = [];
+    for (const fileName in zipContent.files) {
+      if (zipContent.files[fileName]) {
+        const file: any = await zipContent.files[fileName];
+        if (file.name.toLowerCase().indexOf('normal') > -1 && this.FileIsImage(file.name)) {
+          allLoaded.push(zipContent.files[fileName].async('base64').then((normalFile: any) => {
+            variationSettings.normal = `data:image/${this.GetBase64FileType(file.name)};base64,${normalFile}`;
+            variationSettings.normalFilename = fileName;
+          }));
+        } else if (file.name.toLowerCase().indexOf('ao') > -1 && this.FileIsImage(file.name)) {
+          allLoaded.push(zipContent.files[fileName].async('base64').then((aoFile: any) => {
+            variationSettings.ao = `data:image/${this.GetBase64FileType(file.name)};base64,${aoFile}`;
+            variationSettings.aoFilename = fileName;
+          }));
+        } else if (file.name.toLowerCase().indexOf('metalness') > -1 && this.FileIsImage(file.name)) {
+          allLoaded.push(zipContent.files[fileName].async('base64').then((metalnessFile: any) => {
+            variationSettings.metalness = `data:image/${this.GetBase64FileType(file.name)};base64,${metalnessFile}`;
+            variationSettings.metalnessFilename = fileName;
+          }));
+        } else if (file.name.toLowerCase().indexOf('roughness') > -1 && this.FileIsImage(file.name)) {
+          allLoaded.push(zipContent.files[fileName].async('base64').then((roughnessFile: any) => {
+            variationSettings.roughness = `data:image/${this.GetBase64FileType(file.name)};base64,${roughnessFile}`;
+            variationSettings.roughnessFilename = fileName;
+          }));
+        } else if (file.name.toLowerCase().indexOf('diffuse') > -1 && this.FileIsImage(file.name)) {
+          allLoaded.push(zipContent.files[fileName].async('base64').then((diffuseFile: any) => {
+            variationSettings.texture = `data:image/${this.GetBase64FileType(file.name)};base64,${diffuseFile}`;
+            variationSettings.textureFilename = fileName;
+          }));
+        } else if (file.name.indexOf('.jp') > -1) {
+          allLoaded.push(zipContent.files[fileName].async('base64').then((textureFile: any) => {
+            variationSettings.texture = 'data:image/jpeg;base64,' + textureFile;
+            variationSettings.textureFilename = fileName;
+          }));
+        } else if (file.name.indexOf('.json') > -1) {
+          allLoaded.push(zipContent.files[fileName].async('string').then((settingsFile: any) => {
+            const settingsFileObj = JSON.parse(settingsFile);
+            for (const key in settingsFileObj) {
+              if (settingsFileObj[key]) {
+                variationSettings.settings[key] = settingsFileObj[key];
+              }
+            }
+          }));
+        }
+      }
+    }
+    await Promise.all(allLoaded);
+  }
+
+  private static LoadFileContentFromZip(zip: any, fileName: string, base64: boolean = true): Promise<string> {
+    return new Promise((resolve: Function) => {
+      if (zip && fileName) {
+        zip.async(base64 ? 'base64' : 'string').then((fileContent: any) => {
+          if (base64) {
+            resolve(`data:image/${this.GetBase64FileType(fileName)};base64,${fileContent}`);
+          } else {
+            resolve(fileContent);
+          }
+        });
+      } else {
+        resolve(undefined);
+      }
+    });
+  }
+
+  private static FileIsImage(fileName: string): boolean {
+    const ext: string = fileName.substring(fileName.lastIndexOf('.') + 1, fileName.length).toLowerCase();
+    switch (ext) {
+      case 'jpg':
+      case 'jpeg':
+      case 'png':
+      case 'bmp':
+        return true;
+      default:
+        return false;
+    }
+  }
+
+  private static GetBase64FileType(fileName: string): string {
+    const ext: string = fileName.substring(fileName.lastIndexOf('.') + 1, fileName.length).toLowerCase();
+    switch (ext) {
+      case 'jpg':
+      case 'jpeg':
+        return 'jpeg';
+      case 'png':
+        return 'png';
+      case 'bmp':
+        return 'bmp';
+      default:
+        return 'jpeg';
+    }
+  }
+
+  // Get the content
+  private static async GetZipContent(file): Promise<any> {
+    const jszip = new JSZip();
+    const content = await jszip.loadAsync(file);
+    return content;
+  }
+}

package/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "baseUrl": ".",
+    "outDir": "./dist/out-tsc",
+    "sourceMap": false,
+    "declaration": false,
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "importHelpers": true,
+    "target": "es6",
+    "typeRoots": [
+      "node_modules/@types"
+    ],
+    "allowJs": true,
+    "lib": [
+      "es2017",
+      "dom"
+    ]
+  }
+}