@xviewer.js/debug 1.0.0-alpha.5 → 1.0.0-alpha.50

package/dist/module.js

@@ -1,4 +1,4 @@
-import { MeshBasicMaterial, MeshStandardMaterial, ShaderMaterial, Material } from 'three';
+import { Material, MeshBasicMaterial, MeshStandardMaterial, MeshPhysicalMaterial, ShaderMaterial } from 'three';
 import { property, Plugin, PropertyManager, Component, ObjectInstance } from '@xviewer.js/core';
 
 var e=[],t=[];function n(n,r){if(n&&"undefined"!=typeof document){var a,s=!0===r.prepend?"prepend":"append",d=!0===r.singleTag,i="string"==typeof r.container?document.querySelector(r.container):document.getElementsByTagName("head")[0];if(d){var u=e.indexOf(i);-1===u&&(u=e.push(i)-1,t[u]={}),a=t[u]&&t[u][s]?t[u][s]:t[u][s]=c();}else a=c();65279===n.charCodeAt(0)&&(n=n.substring(1)),a.styleSheet?a.styleSheet.cssText+=n:a.appendChild(document.createTextNode(n));}function c(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),r.attributes)for(var t=Object.keys(r.attributes),n=0;n<t.length;n++)e.setAttribute(t[n],r.attributes[t[n]]);var a="prepend"===s?"afterbegin":"beforeend";return i.insertAdjacentElement(a,e),e}}
@@ -449,14 +449,14 @@ class NumberController extends Controller {
         return false;
     }
     updateDisplay() {
-        const value = this.getValue();
+        const value = this._snap(this.getValue());
         if (this._hasSlider) {
             let percent = (value - this._min) / (this._max - this._min);
             percent = Math.max(0, Math.min(percent, 1));
             this.$fill.style.width = percent * 100 + '%';
         }
         if (!this._inputFocused) {
-            this.$input.value = value;
+            this.$input.value = "" + value;
         }
         return this;
     }
@@ -929,67 +929,34 @@ class ColorController extends Controller {
     }
 }
 
-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 _async_to_generator(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);
-        });
-    };
-}
-
 class ImageController extends Controller {
-    static toDataURL(img) {
-        return _async_to_generator(function*() {
-            if (img instanceof HTMLImageElement) {
-                return img.src;
-            } else {
-                if (img) {
-                    let url = ImageController._imageMap.get(img);
-                    if (url) return url;
-                    const w = Math.min(img.width, 256);
-                    const h = Math.min(img.height, 256);
-                    if (ImageController._context == null) {
-                        ImageController._context = document.createElement('canvas').getContext("2d");
-                    }
-                    ImageController._context.canvas.width = w;
-                    ImageController._context.canvas.height = h;
-                    if (img.data) {
-                        let imageData = ImageController._context.createImageData(img.width, img.height);
-                        imageData.data.set(img.data);
-                        img = yield createImageBitmap(imageData);
-                    }
-                    if (img instanceof ImageBitmap) {
-                        ImageController._context.drawImage(img, 0, 0, img.width, img.height, 0, 0, w, h);
-                        ImageController._imageMap.set(img, url = ImageController._context.canvas.toDataURL());
-                        return url;
-                    }
+    static async toDataURL(img) {
+        if (img instanceof HTMLImageElement) {
+            return img.src;
+        } else {
+            if (img) {
+                let url = ImageController._imageMap.get(img);
+                if (url) return url;
+                const w = Math.min(img.width, 256);
+                const h = Math.min(img.height, 256);
+                if (ImageController._context == null) {
+                    ImageController._context = document.createElement('canvas').getContext("2d");
+                }
+                ImageController._context.canvas.width = w;
+                ImageController._context.canvas.height = h;
+                if (img.data) {
+                    let imageData = ImageController._context.createImageData(img.width, img.height);
+                    imageData.data.set(img.data);
+                    img = await createImageBitmap(imageData);
+                }
+                if (img instanceof ImageBitmap) {
+                    ImageController._context.drawImage(img, 0, 0, img.width, img.height, 0, 0, w, h);
+                    ImageController._imageMap.set(img, url = ImageController._context.canvas.toDataURL());
+                    return url;
                 }
-                return "";
             }
-        })();
+            return "";
+        }
     }
     updateDisplay() {
         ImageController.toDataURL(this.getValue()).then((url)=>this.$img.src = url);
@@ -1092,8 +1059,8 @@ class UINumber extends UIElement {
         return this;
     }
     updateDisplay() {
-        let value = this.getValue();
-        this.dom.value = "" + this._snap(value);
+        let value = this._snap(this.getValue());
+        this.dom.value = "" + value;
         if (this.unit !== '') this.dom.value += ' ' + this.unit;
     }
     _getImplicitStep(value) {
@@ -2322,7 +2289,10 @@ class InspectorPlugin extends Plugin {
     }
     _updateFolders() {
         const statesMap = this._statesMap;
-        const setState = (v)=>statesMap.set(v, statesMap.has(v) ? 0 : 1);
+        const setState = (v)=>{
+            if (statesMap.get(v) === -1) statesMap.set(v, 0);
+            if (statesMap.get(v) === undefined) statesMap.set(v, 1);
+        };
         statesMap.forEach((_, k, map)=>map.set(k, -1));
         this.viewer.traversePlugins(setState);
         this.viewer.traverseComponents(setState);
@@ -2339,7 +2309,7 @@ class InspectorPlugin extends Plugin {
     }
     _getPropertiesList(target) {
         const list = [];
-        let props = PropertyManager._getMergedProperties(target);
+        let props = PropertyManager._getMergedProperties(target.constructor);
         if (props) {
             list.push(props);
             this._targetMap.set(props, target);
@@ -2398,7 +2368,7 @@ class InspectorPlugin extends Plugin {
                 if (prop.dir) {
                     folder = folder.getFolder(prop.dir) || folder.addFolder(prop.dir).close();
                 }
-                if (PropertyManager._hasProperties(value)) {
+                if (PropertyManager._hasProperties(value.constructor)) {
                     this._addPropsListGUI(folder, this._getPropertiesList(value), target, k);
                 }
                 const type = typeof value;
@@ -2484,8 +2454,15 @@ class ViewerExtension extends ObjectInstance {
     set backgroundBlurriness(v) {
         this._scene.backgroundBlurriness = v;
     }
+    get targetFrameRate() {
+        return this._viewer.targetFrameRate;
+    }
+    set targetFrameRate(v) {
+        this._viewer.targetFrameRate = v;
+    }
     constructor(viewer){
         super();
+        this._viewer = viewer;
         this._scene = viewer.scene;
         this._renderer = viewer.renderer;
     }
@@ -2528,6 +2505,36 @@ __decorate([
         step: 0.01
     })
 ], ViewerExtension.prototype, "backgroundBlurriness", null);
+__decorate([
+    property({
+        min: 1,
+        max: 120,
+        step: 1
+    })
+], ViewerExtension.prototype, "targetFrameRate", null);
+const materialProperties = {
+    visible: {},
+    transparent: {},
+    side: {
+        value: {
+            FrontSide: 0,
+            BackSide: 1,
+            DoubleSide: 2
+        }
+    },
+    color: {
+        dir: "diffuse"
+    },
+    opacity: {
+        dir: "diffuse",
+        min: 0,
+        max: 1,
+        step: 0.01
+    }
+};
+for(let k in materialProperties){
+    property(materialProperties[k])(Material.prototype, k);
+}
 const meshBasicMaterislProperties = {
     map: {
         dir: "diffuse"
@@ -2560,18 +2567,6 @@ for(let k in meshBasicMaterislProperties){
     property(meshBasicMaterislProperties[k])(MeshBasicMaterial.prototype, k);
 }
 const meshStandardMaterialProperties = {
-    visible: {},
-    transparent: {},
-    side: {
-        value: {
-            FrontSide: 0,
-            BackSide: 1,
-            DoubleSide: 2
-        }
-    },
-    color: {
-        dir: "diffuse"
-    },
     opacity: {
         dir: "diffuse",
         min: 0,
@@ -2627,7 +2622,8 @@ const meshStandardMaterialProperties = {
     },
     normalScale: {
         dir: "normal",
-        parent: "normalMap"
+        parent: "normalMap",
+        step: 0.01
     },
     displacementScale: {
         dir: "displacement",
@@ -2663,6 +2659,116 @@ const meshStandardMaterialProperties = {
 for(let k in meshStandardMaterialProperties){
     property(meshStandardMaterialProperties[k])(MeshStandardMaterial.prototype, k);
 }
+const meshPhysicalMaterialProperties = {
+    ior: {
+        min: 0,
+        max: 10,
+        step: 0.01
+    },
+    anisotropy: {
+        min: 0,
+        max: 10,
+        step: 0.01
+    },
+    clearcoat: {
+        dir: "clearcoat"
+    },
+    clearcoatMap: {
+        dir: "clearcoat",
+        min: 0,
+        max: 1,
+        step: 0.01
+    },
+    clearcoatRoughness: {
+        dir: "clearcoat",
+        min: 0,
+        max: 1,
+        step: 0.01
+    },
+    clearcoatNormalScale: {
+        dir: "clearcoat",
+        step: 0.01
+    },
+    clearcoatNormalMap: {
+        dir: "clearcoat"
+    },
+    iridescence: {
+        dir: "iridescence",
+        min: 0,
+        max: 1,
+        step: 0.01
+    },
+    iridescenceMap: {
+        dir: "iridescence"
+    },
+    iridescenceIOR: {
+        dir: "iridescence",
+        step: 0.01
+    },
+    iridescenceThicknessRange: {
+        dir: "iridescence"
+    },
+    iridescenceThicknessMap: {
+        dir: "iridescence"
+    },
+    sheen: {
+        dir: "sheen"
+    },
+    sheenColor: {
+        dir: "sheen"
+    },
+    sheenColorMap: {
+        dir: "sheen"
+    },
+    sheenRoughness: {
+        dir: "sheen",
+        min: 0,
+        max: 1,
+        step: 0.01
+    },
+    sheenRoughnessMap: {
+        dir: "sheen"
+    },
+    transmission: {
+        dir: "transmission"
+    },
+    transmissionMap: {
+        dir: "transmission"
+    },
+    thickness: {
+        dir: "thickness",
+        min: 0,
+        max: 1,
+        step: 0.01
+    },
+    thicknessMap: {
+        dir: "thickness"
+    },
+    attenuationDistance: {
+        dir: "attenuation"
+    },
+    attenuationColor: {
+        dir: "attenuation"
+    },
+    specularIntensity: {
+        dir: "specular",
+        min: 0,
+        max: 1,
+        step: 0.01
+    },
+    specularIntensityMap: {
+        dir: "specular"
+    },
+    specularColor: {
+        dir: "specular"
+    },
+    specularColorMap: {
+        dir: "specular"
+    }
+};
+for(let k in meshPhysicalMaterialProperties){
+    property(meshPhysicalMaterialProperties[k])(MeshPhysicalMaterial.prototype, k);
+}
 
 /**
  * @author mrdoob / http://mrdoob.com/