@colijnit/configurator 12.0.12 → 12.0.13

package/fesm2015/colijnit-configurator.js

@@ -396,7 +396,7 @@ class Material {
 
 // @dynamic
 class ImageUtils {
-    static CreateTextureFromBase64(id, base64, material) {
+    static CreateTextureFromBase64(id, base64, material, defaultFlip = false) {
         return new Promise((resolve) => {
             if (ImageUtils.textures.has(id)) {
                 resolve(ImageUtils.textures.get(id));
@@ -412,6 +412,7 @@ class ImageUtils {
                         texture.wrapS = THREE.RepeatWrapping;
                         texture.wrapT = THREE.RepeatWrapping;
                         texture.repeat = new THREE.Vector2(material ? material.repeatX : 1, material ? material.repeatY : 1);
+                        texture.flipY = defaultFlip;
                         texture.needsUpdate = true;
                         ImageUtils.textures.set(id, texture);
                         resolve(texture);
@@ -471,9 +472,6 @@ class AssetUtils {
             if (asset.normal) {
                 material.normal = yield ImageUtils.CreateTextureFromBase64(asset.id + '_normal', asset.normal, material);
                 material.normalFilename = asset.normalFilename;
-                // material.normal.anisotropy = 1;
-                // material.normal.repeat.set(1, 1);
-                // material.normal.flipY = false;
             }
             if (asset.orm) {
                 material.ao = yield ImageUtils.CreateTextureFromBase64(asset.id + '_orm', asset.orm, material);
@@ -502,13 +500,42 @@ class AssetUtils {
                 material.displacementFilename = asset.displacementFilename;
             }
             if (asset.envMap) {
-                material.envMap = yield ImageUtils.CreateTextureFromBase64(asset.id + '_env', asset.envMap, material);
+                material.envMap = yield ImageUtils.CreateTextureFromBase64(asset.id + '_env', asset.envMap, material, true);
                 material.envMapFilename = asset.envMapFilename;
             }
+            if (asset.sheenColorMap) {
+                material.sheenColorMap = yield ImageUtils.CreateTextureFromBase64(asset.id + '_sheen_color', asset.sheenColorMap, material);
+                material.sheenColorMapFileName = asset.sheenColorMapFilename;
+            }
+            if (asset.sheenRoughnessMap) {
+                material.sheenRoughnessMap = yield ImageUtils.CreateTextureFromBase64(asset.id + '_sheen_roughness', asset.sheenRoughnessMap, material);
+                material.sheenRoughnessMapFileName = asset.sheenRoughnessMapFilename;
+            }
             if (asset.emissive) {
                 material.emissive = yield ImageUtils.CreateTextureFromBase64(asset.id + '_emissive', asset.emissive, material);
                 material.emissiveFileName = asset.emissiveFilename;
             }
+            const metalness = parseFloat(asset['metalness']);
+            if (!isNaN(metalness)) {
+                material.metalnessValue = Math.min(1, metalness);
+            }
+            const roughness = parseFloat(asset['roughness']);
+            if (!isNaN(roughness)) {
+                material.roughnessValue = Math.min(1, roughness);
+            }
+            material.sheen = asset.sheen;
+            material.emissiveIntensityValue = asset.emissiveIntensity;
+            material.emissiveValue = asset.emissiveValue;
+            material.side = asset.side;
+            material.sheenColor = asset.sheenColor;
+            material.sheenRoughness = asset.sheenRoughness;
+            material.opacity = asset.opacity;
+            material.transparent = asset.transparent;
+            material.envMapIntensity = asset.envMapIntensity;
+            material.reflectivity = asset.reflectivity;
+            material.displacementValue = asset.displacementValue;
+            material.transparency = asset.transparency;
+            material.transmission = asset.transmission;
             return material;
         });
     }
@@ -531,44 +558,6 @@ class AssetUtils {
         if (!isNaN(repeaty)) {
             material.repeatY = repeaty;
         }
-        const metalness = parseFloat(settings['metalness']);
-        if (!isNaN(metalness)) {
-            material.metalnessValue = Math.min(1, metalness);
-        }
-        const roughness = parseFloat(settings['roughness']);
-        if (!isNaN(roughness)) {
-            material.roughnessValue = Math.min(1, roughness);
-        }
-        if (settings.hasOwnProperty('side')) {
-            material.side = settings.side;
-        }
-        if (settings.hasOwnProperty('sheenColor')) {
-            material.sheenColor = settings.sheenColor;
-        }
-        if (settings.hasOwnProperty('opacity')) {
-            material.opacity = settings.opacity;
-        }
-        if (settings.hasOwnProperty('transparent')) {
-            material.transparent = settings.transparent;
-        }
-        if (settings.hasOwnProperty('envMap')) {
-            material.envMap = settings.envMap;
-        }
-        if (settings.hasOwnProperty('envMapIntensity')) {
-            material.envMapIntensity = settings.envMapIntensity;
-        }
-        if (settings.hasOwnProperty('reflectivity')) {
-            material.reflectivity = settings.reflectivity;
-        }
-        if (settings.hasOwnProperty('displacementValue')) {
-            material.displacementValue = settings.displacementValue;
-        }
-        if (settings.hasOwnProperty('transparency')) {
-            material.transparency = settings.transparency;
-        }
-        if (settings.hasOwnProperty('transmission')) {
-            material.transmission = settings.transmission;
-        }
     }
 }
 
@@ -717,27 +706,41 @@ class VariationUtils {
                 variationSettings.envMap = yield VariationUtils.LoadFileContentFromZip(zipContent.files[index.envMapFile], index.envMapFile);
                 variationSettings.envMapFilename = index.envMapFile;
             }
-            variationSettings.settings =
-                (yield 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;
+            if (index.sheenColorMapFile) {
+                variationSettings.sheenColorMap = yield VariationUtils.LoadFileContentFromZip(zipContent.files[index.sheenColorMapFile], index.sheenColorMapFile);
+                variationSettings.sheenColorMapFilename = index.sheenColorMapFile;
+            }
+            if (index.sheenRoughnessMapFile) {
+                variationSettings.sheenRoughnessMap = yield VariationUtils.LoadFileContentFromZip(zipContent.files[index.sheenRoughnessMapFile], index.sheenRoughnessMapFile);
+                variationSettings.sheenRoughnessMapFilename = index.sheenColorMapFile;
+            }
+            if (index.repeat) {
+                variationSettings.settings = {
+                    repeatx: index.repeat.repeatx,
+                    repeaty: index.repeat.repeaty
+                };
+            }
+            // variationSettings.settings =
+            //     await VariationUtils.LoadFileContentFromZip(zipContent.files['repeat.json'], 'repeat.json', false) || {};
+            variationSettings.metalness = index.metalness;
+            variationSettings.roughness = index.roughness;
+            variationSettings.sheen = index.sheen;
             if (index.sheenColor) {
-                variationSettings.settings.sheenColor = new THREE.Color(index.sheenColor.r, index.sheenColor.g, index.sheenColor.b);
+                variationSettings.sheenColor = new THREE.Color(index.sheenColor.r, index.sheenColor.g, index.sheenColor.b);
             }
-            variationSettings.settings.envMap = index.envMap;
-            variationSettings.settings.envMapIntensity = index.envMapIntensity;
-            variationSettings.settings.transparent = index.transparent;
-            variationSettings.settings.opacity = index.opacity;
+            variationSettings.sheenRoughness = index.sheenRoughness;
+            variationSettings.envMapIntensity = index.envMapIntensity;
+            variationSettings.transparent = index.transparent;
+            variationSettings.opacity = index.opacity;
             if (index.emissiveValue) {
-                variationSettings.settings.emissiveValue = new THREE.Color(index.emissiveValue.r, index.emissiveValue.g, index.emissiveValue.b);
-            }
-            variationSettings.settings.emissiveIntensity = index.emissiveIntensity;
-            variationSettings.settings.reflectivity = index.reflectivity;
-            variationSettings.settings.displacementValue = index.displacementValue;
-            variationSettings.settings.side = index.side;
-            variationSettings.settings.transparency = index.transparency;
-            variationSettings.settings.transmission = index.transmission;
+                variationSettings.emissiveValue = new THREE.Color(index.emissiveValue.r, index.emissiveValue.g, index.emissiveValue.b);
+            }
+            variationSettings.emissiveIntensity = index.emissiveIntensity;
+            variationSettings.reflectivity = index.reflectivity;
+            variationSettings.displacementValue = index.displacementValue;
+            variationSettings.side = index.side;
+            variationSettings.transparency = index.transparency;
+            variationSettings.transmission = index.transmission;
         });
     }
     static CreateSettingsBasedOnFileName(variationSettings, zipContent) {
@@ -794,6 +797,18 @@ class VariationUtils {
                             variationSettings.envMapFilename = fileName;
                         }));
                     }
+                    else if (file.name.toLowerCase().indexOf('sheenColorMap') > -1 && this.FileIsImage(file.name)) {
+                        allLoaded.push(zipContent.files[fileName].async('base64').then((sheenColorMapFile) => {
+                            variationSettings.sheenColorMap = `data:image/${this.GetBase64FileType(file.name)};base64,${sheenColorMapFile}`;
+                            variationSettings.sheenColorMapFilename = fileName;
+                        }));
+                    }
+                    else if (file.name.toLowerCase().indexOf('sheenRoughnessMap') > -1 && this.FileIsImage(file.name)) {
+                        allLoaded.push(zipContent.files[fileName].async('base64').then((sheenRoughnessMapFile) => {
+                            variationSettings.sheenRoughnessMap = `data:image/${this.GetBase64FileType(file.name)};base64,${sheenRoughnessMapFile}`;
+                            variationSettings.sheenRoughnessMapFilename = fileName;
+                        }));
+                    }
                     else if (file.name.indexOf('.jp') > -1) {
                         allLoaded.push(zipContent.files[fileName].async('base64').then((textureFile) => {
                             variationSettings.texture = 'data:image/jpeg;base64,' + textureFile;
@@ -1131,171 +1146,198 @@ class VariationHelper {
         }
     }
     _setMeshMaterialFromVariation(name, variation, usePbr = false) {
-        if (variation.material.texture) {
-            variation.material.texture.needsUpdate = true;
-            variation.material.texture.mapping = THREE.EquirectangularReflectionMapping;
+        const material = variation.material;
+        if (material.texture) {
+            material.texture.needsUpdate = true;
+            material.texture.mapping = THREE.EquirectangularReflectionMapping;
         }
         if (!usePbr) {
             const newMaterial = new THREE.MeshPhongMaterial({
                 name: name,
-                shininess: variation.material.shininess,
-                specular: variation.material.specular,
-                map: variation.material.texture,
-                normalMap: variation.material.normal
+                shininess: material.shininess,
+                specular: material.specular,
+                map: material.texture,
+                normalMap: material.normal
             });
             newMaterial.color.setRGB(0.8, 0.8, 0.8);
             newMaterial.needsUpdate = true;
             return newMaterial;
         }
-        if (variation.material.sheenColor || variation.material.reflectivity) {
+        if (material.sheen || material.sheenColor || material.reflectivity) { // TODO: Proper check for all unique physical material properties
             const params = {
                 // side: material.side ? material.side : FrontSide,
                 name: name,
-                roughness: variation.material.roughnessValue ? variation.material.roughnessValue : 1,
-                metalness: variation.material.metalnessValue ? variation.material.metalnessValue : 0,
-                envMapIntensity: variation.material.envMapIntensity ? variation.material.envMapIntensity : 0.01,
-                clearcoatMap: variation.material.clearcoatMap ? variation.material.clearcoatMap : null,
-                clearcoatRoughnessMap: variation.material.clearcoatRoughnessMap ? variation.material.clearcoatRoughnessMap : null,
+                roughness: material.roughnessValue ? material.roughnessValue : 1,
+                metalness: material.metalnessValue ? material.metalnessValue : 0,
+                envMapIntensity: material.envMapIntensity ? material.envMapIntensity : 0.01,
+                clearcoatMap: material.clearcoatMap ? material.clearcoatMap : null,
+                clearcoatRoughnessMap: material.clearcoatRoughnessMap ? material.clearcoatRoughnessMap : null,
                 // wireframe: true,
                 // opacity: 0.3,
                 // transparent: true,
             };
-            if (variation.material.displacementValue) {
-                params.displacementScale = variation.material.displacementValue;
+            if (material.displacementValue) {
+                params.displacementScale = material.displacementValue;
             }
-            if (variation.material.sheenColor) {
-                params.sheen = variation.material.sheenColor;
+            if (material.opacity) {
+                params.opacity = material.opacity;
             }
-            if (variation.material.opacity) {
-                params.opacity = variation.material.opacity;
+            if (material.transparency) {
+                params.transmission = material.transparency;
             }
-            if (variation.material.transparent) {
-                params.transparent = variation.material.transparent;
+            if (material.transmission) {
+                params.transmission = material.transmission;
             }
-            if (variation.material.emissiveValue) {
-                params.emissive = variation.material.emissiveValue;
+            if (material.transparent) {
+                params.transparent = material.transparent;
             }
-            if (variation.material.emissiveIntensityValue) {
-                params.emissiveIntensity = variation.material.emissiveIntensityValue;
+            if (material.emissiveValue) {
+                params.emissive = material.emissiveValue;
             }
-            if (variation.material.texture) {
-                params.map = variation.material.texture;
+            if (material.emissiveIntensityValue) {
+                params.emissiveIntensity = material.emissiveIntensityValue;
+            }
+            if (material.texture) {
+                params.map = material.texture;
                 params.map.needsUpdate = true;
             }
-            if (variation.material.ao) {
-                params.aoMap = variation.material.ao;
+            if (material.ao) {
+                params.aoMap = material.ao;
                 params.aoMap.needsUpdate = true;
             }
-            if (variation.material.roughness) {
-                params.roughnessMap = variation.material.roughness;
+            if (material.roughness) {
+                params.roughnessMap = material.roughness;
                 params.roughnessMap.needsUpdate = true;
-                // variation.material.roughness.magFilter = NearestFilter;
+                // material.roughness.magFilter = NearestFilter;
             }
-            if (variation.material.metalness) {
-                params.metalnessMap = variation.material.metalness;
+            if (material.metalness) {
+                params.metalnessMap = material.metalness;
                 params.metalnessMap.needsUpdate = true;
             }
-            if (variation.material.normal) {
-                params.normalMap = variation.material.normal;
+            if (material.normal) {
+                params.normalMap = material.normal;
                 params.normalMap.needsUpdate = true;
             }
-            if (variation.material.displacement) {
-                params.displacementMap = variation.material.displacement;
+            if (material.displacement) {
+                params.displacementMap = material.displacement;
                 params.displacementMap.needsUpdate = true;
             }
-            if (variation.material.emissive) {
-                params.emissiveMap = variation.material.emissive;
+            if (material.emissive) {
+                params.emissiveMap = material.emissive;
                 params.emissiveMap.needsUpdate = true;
             }
-            if (variation.material.envMap) {
-                if (variation.material.envMapIntensity != null || 0) {
-                    params.envMap = variation.material.envMap;
+            if (material.envMap) {
+                if (material.envMapIntensity != null || 0) {
+                    params.envMap = material.envMap;
                     params.envMap.needsUpdate = true;
-                    variation.material.envMap.mapping = THREE.EquirectangularReflectionMapping;
-                    variation.material.envMap.minFilter = THREE.NearestFilter;
-                    variation.material.envMap.magFilter = THREE.NearestFilter;
+                    material.envMap.mapping = THREE.EquirectangularReflectionMapping;
+                    material.envMap.minFilter = THREE.NearestFilter;
+                    material.envMap.magFilter = THREE.NearestFilter;
                 }
             }
-            if (variation.material.reflectivity) {
-                params.reflectivity = variation.material.reflectivity;
+            if (material.reflectivity) {
+                params.reflectivity = material.reflectivity;
             }
-            if (variation.material.side) {
-                params.side = variation.material.side;
+            if (material.side) {
+                params.side = material.side;
             }
             const newMaterial = new THREE.MeshPhysicalMaterial(params);
             newMaterial.color.setRGB(1, 1, 1);
-            newMaterial.needsUpdate = true;
-            if (variation.material.transmission) {
-                newMaterial.transmission = variation.material.transmission;
+            if (material.sheen) {
+                newMaterial.sheen = material.sheen;
+            }
+            if (material.sheenColor) {
+                newMaterial.sheenColor = material.sheenColor;
             }
+            if (material.sheenRoughness) {
+                newMaterial.sheenRoughness = material.sheenRoughness;
+            }
+            if (material.sheenColorMap) {
+                newMaterial.sheenColorMap = material.sheenColorMap;
+                newMaterial.sheenColorMap.needsUpdate = true;
+            }
+            if (material.sheenRoughnessMap) {
+                newMaterial.sheenRoughnessMap = material.sheenRoughnessMap;
+                newMaterial.sheenRoughnessMap.needsUpdate = true;
+            }
+            if (material.transmission) {
+                newMaterial.transmission = material.transmission;
+            }
+            newMaterial.needsUpdate = true;
             return newMaterial;
         }
         else {
             const params = {
                 // side: material.side ? material.side : FrontSide,
                 name: name,
-                roughness: variation.material.roughnessValue ? variation.material.roughnessValue : 1,
-                metalness: variation.material.metalnessValue ? variation.material.metalnessValue : 0,
-                envMapIntensity: variation.material.envMapIntensity ? variation.material.envMapIntensity : 0.01
+                roughness: material.roughnessValue ? material.roughnessValue : 1,
+                metalness: material.metalnessValue ? material.metalnessValue : 0,
+                envMapIntensity: material.envMapIntensity ? material.envMapIntensity : 0.01
                 // wireframe: true,
                 // opacity: 0.3,
                 // transparent: true,
             };
-            if (variation.material.displacementValue) {
-                params.displacementScale = variation.material.displacementValue;
+            if (material.displacementValue) {
+                params.displacementScale = material.displacementValue;
+            }
+            if (material.opacity) {
+                params.opacity = material.opacity;
+            }
+            if (material.transparency) {
+                params.opacity = material.transparency;
             }
-            if (variation.material.opacity) {
-                params.opacity = variation.material.opacity;
+            if (material.transmission) {
+                params.opacity = material.transmission;
             }
-            if (variation.material.transparent) {
-                params.transparent = variation.material.transparent;
+            if (material.transparent) {
+                params.transparent = material.transparent;
             }
-            if (variation.material.emissiveValue) {
-                params.emissive = variation.material.emissiveValue;
+            if (material.emissiveValue) {
+                params.emissive = material.emissiveValue;
             }
-            if (variation.material.emissiveIntensityValue) {
-                params.emissiveIntensity = variation.material.emissiveIntensityValue;
+            if (material.emissiveIntensityValue) {
+                params.emissiveIntensity = material.emissiveIntensityValue;
             }
-            if (variation.material.texture) {
-                params.map = variation.material.texture;
+            if (material.texture) {
+                params.map = material.texture;
                 params.map.needsUpdate = true;
             }
-            if (variation.material.ao) {
-                params.aoMap = variation.material.ao;
+            if (material.ao) {
+                params.aoMap = material.ao;
                 params.aoMap.needsUpdate = true;
             }
-            if (variation.material.roughness) {
-                params.roughnessMap = variation.material.roughness;
+            if (material.roughness) {
+                params.roughnessMap = material.roughness;
                 params.roughnessMap.needsUpdate = true;
-                // variation.material.roughness.magFilter = NearestFilter;
+                // material.roughness.magFilter = NearestFilter;
             }
-            if (variation.material.metalness) {
-                params.metalnessMap = variation.material.metalness;
+            if (material.metalness) {
+                params.metalnessMap = material.metalness;
                 params.metalnessMap.needsUpdate = true;
             }
-            if (variation.material.normal) {
-                params.normalMap = variation.material.normal;
+            if (material.normal) {
+                params.normalMap = material.normal;
                 params.normalMap.needsUpdate = true;
             }
-            if (variation.material.displacement) {
-                params.displacementMap = variation.material.displacement;
+            if (material.displacement) {
+                params.displacementMap = material.displacement;
                 params.displacementMap.needsUpdate = true;
             }
-            if (variation.material.emissive) {
-                params.emissiveMap = variation.material.emissive;
+            if (material.emissive) {
+                params.emissiveMap = material.emissive;
                 params.emissiveMap.needsUpdate = true;
             }
-            if (variation.material.envMap) {
-                if (variation.material.envMapIntensity != null || 0) {
-                    params.envMap = variation.material.envMap;
+            if (material.envMap) {
+                if (material.envMapIntensity != null || 0) {
+                    params.envMap = material.envMap;
                     params.envMap.needsUpdate = true;
-                    variation.material.envMap.mapping = THREE.EquirectangularReflectionMapping;
-                    variation.material.envMap.minFilter = THREE.NearestFilter;
-                    variation.material.envMap.magFilter = THREE.NearestFilter;
+                    material.envMap.mapping = THREE.EquirectangularReflectionMapping;
+                    material.envMap.minFilter = THREE.NearestFilter;
+                    material.envMap.magFilter = THREE.NearestFilter;
                 }
             }
-            if (variation.material.side) {
-                params.side = variation.material.side;
+            if (material.side) {
+                params.side = material.side;
             }
             const newMaterial = new THREE.MeshStandardMaterial(params);
             newMaterial.color.setRGB(1, 1, 1);