@xviewer.js/debug 1.0.0-beta.2 → 1.0.1

package/dist/module.js

@@ -1,5 +1,10 @@
-import { MeshBasicMaterial, MeshStandardMaterial, ShaderMaterial, Material } from 'three';
-import { property, Plugin, PropertyManager, Component, ObjectInstance } from '@xviewer.js/core';
+import { Texture, Material, MeshBasicMaterial, MeshStandardMaterial, MeshPhysicalMaterial, Scene, OrthographicCamera, Sprite, Vector3, ShaderMaterial, Box3, Box3Helper } from 'three';
+import { property, ObjectInstance, Mount, PropertyManager, Component, BoxProjection } 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}}
+
+var css = "@charset \"UTF-8\";\n.lil-gui {\n  font-family: var(--font-family);\n  font-size: var(--font-size);\n  line-height: 1;\n  font-weight: normal;\n  font-style: normal;\n  text-align: left;\n  background-color: var(--background-color);\n  color: var(--text-color);\n  user-select: none;\n  -webkit-user-select: none;\n  touch-action: manipulation;\n  --background-color: #1f1f1f;\n  --text-color: #ebebeb;\n  --title-background-color: #111111;\n  --title-text-color: #ebebeb;\n  --widget-color: #424242;\n  --hover-color: #4f4f4f;\n  --focus-color: #595959;\n  --number-color: #2cc9ff;\n  --string-color: #a2db3c;\n  --font-size: 11px;\n  --input-font-size: 11px;\n  --font-family: -apple-system,\n  BlinkMacSystemFont,\n  \"Segoe UI\",\n  Roboto,\n  Arial,\n  sans-serif;\n  --font-family-mono: Menlo,\n  Monaco,\n  Consolas,\n  \"Droid Sans Mono\",\n  monospace;\n  --padding: 4px;\n  --spacing: 4px;\n  --widget-height: 20px;\n  --title-height: calc(var(--widget-height) + var(--spacing) * 1.25);\n  --name-width: 40%;\n  --slider-knob-width: 2px;\n  --slider-input-width: 27%;\n  --color-input-width: 27%;\n  --slider-input-min-width: 45px;\n  --color-input-min-width: 45px;\n  --folder-indent: 7px;\n  --widget-padding: 0 0 0 3px;\n  --widget-border-radius: 2px;\n  --checkbox-size: calc(0.75 * var(--widget-height));\n  --scrollbar-width: 5px;\n}\n.lil-gui, .lil-gui * {\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n}\n.lil-gui.root {\n  width: var(--width, 245px);\n  display: flex;\n  flex-direction: column;\n}\n.lil-gui.root > .title {\n  background: var(--title-background-color);\n  color: var(--title-text-color);\n}\n.lil-gui.root > .children {\n  overflow-x: hidden;\n  overflow-y: auto;\n}\n.lil-gui.root > .children::-webkit-scrollbar {\n  width: var(--scrollbar-width);\n  height: var(--scrollbar-width);\n  background: var(--background-color);\n}\n.lil-gui.root > .children::-webkit-scrollbar-thumb {\n  border-radius: var(--scrollbar-width);\n  background: var(--focus-color);\n}\n@media (pointer: coarse) {\n  .lil-gui.allow-touch-styles, .lil-gui.allow-touch-styles .lil-gui {\n    --widget-height: 28px;\n    --padding: 6px;\n    --spacing: 6px;\n    --font-size: 13px;\n    --input-font-size: 16px;\n    --folder-indent: 10px;\n    --scrollbar-width: 7px;\n    --slider-input-min-width: 50px;\n    --color-input-min-width: 65px;\n  }\n}\n.lil-gui.force-touch-styles, .lil-gui.force-touch-styles .lil-gui {\n  --widget-height: 28px;\n  --padding: 6px;\n  --spacing: 6px;\n  --font-size: 13px;\n  --input-font-size: 16px;\n  --folder-indent: 10px;\n  --scrollbar-width: 7px;\n  --slider-input-min-width: 50px;\n  --color-input-min-width: 65px;\n}\n.lil-gui.autoPlace {\n  max-height: 100%;\n  position: fixed;\n  top: 0;\n  right: 15px;\n  z-index: 1001;\n}\n\n.lil-gui .controller {\n  display: flex;\n  align-items: center;\n  padding: 0 var(--padding);\n  margin: var(--spacing) 0;\n}\n.lil-gui .controller.disabled {\n  opacity: 0.5;\n}\n.lil-gui .controller.disabled, .lil-gui .controller.disabled * {\n  pointer-events: none !important;\n}\n.lil-gui .controller > .name {\n  min-width: var(--name-width);\n  flex-shrink: 0;\n  white-space: pre;\n  padding-right: var(--spacing);\n  line-height: var(--widget-height);\n}\n.lil-gui .controller .widget {\n  position: relative;\n  display: flex;\n  align-items: center;\n  width: 100%;\n  min-height: var(--widget-height);\n}\n.lil-gui .controller.string input {\n  color: var(--string-color);\n}\n.lil-gui .controller.boolean .widget {\n  cursor: pointer;\n}\n.lil-gui .controller.color .display {\n  width: 100%;\n  height: var(--widget-height);\n  border-radius: var(--widget-border-radius);\n  position: relative;\n}\n@media (hover: hover) {\n  .lil-gui .controller.color .display:hover:before {\n    content: \" \";\n    display: block;\n    position: absolute;\n    border-radius: var(--widget-border-radius);\n    border: 1px solid rgba(255, 255, 255, 0.6);\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n  }\n}\n.lil-gui .controller.color input[type=color] {\n  opacity: 0;\n  width: 100%;\n  height: 100%;\n  cursor: pointer;\n}\n.lil-gui .controller.color input[type=text] {\n  margin-left: var(--spacing);\n  font-family: var(--font-family-mono);\n  min-width: var(--color-input-min-width);\n  width: var(--color-input-width);\n  flex-shrink: 0;\n}\n.lil-gui .controller.option select {\n  opacity: 0;\n  position: absolute;\n  width: 100%;\n  max-width: 100%;\n}\n.lil-gui .controller.option .display {\n  position: relative;\n  pointer-events: none;\n  border-radius: var(--widget-border-radius);\n  height: var(--widget-height);\n  line-height: var(--widget-height);\n  max-width: 100%;\n  overflow: hidden;\n  word-break: break-all;\n  padding-left: 0.55em;\n  padding-right: 1.75em;\n  background: var(--widget-color);\n}\n@media (hover: hover) {\n  .lil-gui .controller.option .display.focus {\n    background: var(--focus-color);\n  }\n}\n.lil-gui .controller.option .display.active {\n  background: var(--focus-color);\n}\n.lil-gui .controller.option .display:after {\n  font-family: \"lil-gui\";\n  content: \"↕\";\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  padding-right: 0.375em;\n}\n.lil-gui .controller.option .widget,\n.lil-gui .controller.option select {\n  cursor: pointer;\n}\n@media (hover: hover) {\n  .lil-gui .controller.option .widget:hover .display {\n    background: var(--hover-color);\n  }\n}\n.lil-gui .controller.number input {\n  color: var(--number-color);\n}\n.lil-gui .controller.number.hasSlider input {\n  margin-left: var(--spacing);\n  width: var(--slider-input-width);\n  min-width: var(--slider-input-min-width);\n  flex-shrink: 0;\n}\n.lil-gui .controller.number .slider {\n  width: 100%;\n  height: var(--widget-height);\n  background-color: var(--widget-color);\n  border-radius: var(--widget-border-radius);\n  padding-right: var(--slider-knob-width);\n  overflow: hidden;\n  cursor: ew-resize;\n  touch-action: pan-y;\n}\n@media (hover: hover) {\n  .lil-gui .controller.number .slider:hover {\n    background-color: var(--hover-color);\n  }\n}\n.lil-gui .controller.number .slider.active {\n  background-color: var(--focus-color);\n}\n.lil-gui .controller.number .slider.active .fill {\n  opacity: 0.95;\n}\n.lil-gui .controller.number .fill {\n  height: 100%;\n  border-right: var(--slider-knob-width) solid var(--number-color);\n  box-sizing: content-box;\n}\n.lil-gui .controller.texture canvas {\n  width: 100%;\n  border-radius: var(--widget-border-radius);\n}\n.lil-gui .controller.texture .group {\n  display: flex;\n  position: relative;\n  width: 100%;\n}\n.lil-gui .controller.texture .info {\n  position: absolute;\n  display: flex;\n  gap: 11px;\n}\n.lil-gui .controller.texture .label {\n  position: absolute;\n  background-color: rgba(0, 0, 0, 0.6745098039);\n  display: \"flex\";\n  padding: 2px;\n  border-radius: var(--widget-border-radius);\n}\n.lil-gui .controller.texture .block {\n  position: absolute;\n  left: 50%;\n  transform: translateX(-50%);\n  margin-top: 2px;\n  width: var(--font-size);\n  height: var(--font-size);\n  border-radius: var(--font-size);\n  background-color: white;\n  cursor: pointer;\n}\n.lil-gui .controller.texture .block.select {\n  background-color: var(--string-color);\n}\n.lil-gui .controller.image img {\n  width: 100%;\n}\n.lil-gui .controller.image canvas {\n  width: 100%;\n}\n.lil-gui .controller.vector input {\n  color: var(--number-color);\n}\n.lil-gui .controller.vector .fill {\n  height: 100%;\n  margin-left: var(--spacing);\n  box-sizing: content-box;\n}\n\n.lil-gui-dragging .lil-gui {\n  --hover-color: var(--widget-color);\n}\n.lil-gui-dragging * {\n  cursor: ew-resize !important;\n}\n\n.lil-gui-dragging.lil-gui-vertical * {\n  cursor: ns-resize !important;\n}\n\n.lil-gui .title {\n  height: var(--title-height);\n  line-height: calc(var(--title-height) - 4px);\n  font-weight: 600;\n  padding: 0 var(--padding);\n  -webkit-tap-highlight-color: transparent;\n  cursor: pointer;\n  outline: none;\n  text-decoration-skip: objects;\n}\n.lil-gui .title:before {\n  font-family: \"lil-gui\";\n  content: \"▾\";\n  padding-right: 2px;\n  display: inline-block;\n}\n.lil-gui .title:active {\n  background: var(--title-background-color);\n  opacity: 0.75;\n}\n@media (hover: hover) {\n  body:not(.lil-gui-dragging) .lil-gui .title:hover {\n    background: var(--title-background-color);\n    opacity: 0.85;\n  }\n  .lil-gui .title:focus {\n    text-decoration: underline var(--focus-color);\n  }\n}\n.lil-gui.root > .title:focus {\n  text-decoration: none !important;\n}\n.lil-gui.closed > .title:before {\n  content: \"▸\";\n}\n.lil-gui.closed > .children {\n  transform: translateY(-7px);\n  opacity: 0;\n}\n.lil-gui.closed:not(.transition) > .children {\n  display: none;\n}\n.lil-gui.transition > .children {\n  transition-duration: 300ms;\n  transition-property: height, opacity, transform;\n  transition-timing-function: cubic-bezier(0.2, 0.6, 0.35, 1);\n  overflow: hidden;\n  pointer-events: none;\n}\n.lil-gui .children:empty:before {\n  content: \"Empty\";\n  padding: 0 var(--padding);\n  margin: var(--spacing) 0;\n  display: block;\n  height: var(--widget-height);\n  font-style: italic;\n  line-height: var(--widget-height);\n  opacity: 0.5;\n}\n.lil-gui.root > .children > .lil-gui > .title {\n  border: 0 solid var(--widget-color);\n  border-width: 1px 0;\n  transition: border-color 300ms;\n}\n.lil-gui.root > .children > .lil-gui.closed > .title {\n  border-bottom-color: transparent;\n}\n.lil-gui + .controller {\n  border-top: 1px solid var(--widget-color);\n  margin-top: 0;\n  padding-top: var(--spacing);\n}\n.lil-gui .lil-gui .lil-gui > .title {\n  border: none;\n}\n.lil-gui .lil-gui .lil-gui > .children {\n  border: none;\n  margin-left: var(--folder-indent);\n  border-left: 2px solid var(--widget-color);\n}\n.lil-gui .lil-gui .controller {\n  border: none;\n}\n\n.lil-gui input {\n  -webkit-tap-highlight-color: transparent;\n  border: 0;\n  outline: none;\n  font-family: var(--font-family);\n  font-size: var(--input-font-size);\n  border-radius: var(--widget-border-radius);\n  height: var(--widget-height);\n  background: var(--widget-color);\n  color: var(--text-color);\n  width: 100%;\n}\n@media (hover: hover) {\n  .lil-gui input:hover {\n    background: var(--hover-color);\n  }\n  .lil-gui input:active {\n    background: var(--focus-color);\n  }\n}\n.lil-gui input:disabled {\n  opacity: 1;\n}\n.lil-gui input[type=text],\n.lil-gui input[type=number] {\n  padding: var(--widget-padding);\n}\n.lil-gui input[type=text]:focus,\n.lil-gui input[type=number]:focus {\n  background: var(--focus-color);\n}\n.lil-gui input::-webkit-outer-spin-button,\n.lil-gui input::-webkit-inner-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\n.lil-gui input[type=number] {\n  -moz-appearance: textfield;\n}\n.lil-gui input[type=checkbox] {\n  appearance: none;\n  -webkit-appearance: none;\n  height: var(--checkbox-size);\n  width: var(--checkbox-size);\n  border-radius: var(--widget-border-radius);\n  text-align: center;\n  cursor: pointer;\n}\n.lil-gui input[type=checkbox]:checked:before {\n  font-family: \"lil-gui\";\n  content: \"✓\";\n  font-size: var(--checkbox-size);\n  line-height: var(--checkbox-size);\n}\n@media (hover: hover) {\n  .lil-gui input[type=checkbox]:focus {\n    box-shadow: inset 0 0 0 1px var(--focus-color);\n  }\n}\n.lil-gui button {\n  -webkit-tap-highlight-color: transparent;\n  outline: none;\n  cursor: pointer;\n  font-family: var(--font-family);\n  font-size: var(--font-size);\n  color: var(--text-color);\n  width: 100%;\n  height: var(--widget-height);\n  text-transform: none;\n  background: var(--widget-color);\n  border-radius: var(--widget-border-radius);\n  border: 1px solid var(--widget-color);\n  text-align: center;\n  line-height: calc(var(--widget-height) - 4px);\n}\n@media (hover: hover) {\n  .lil-gui button:hover {\n    background: var(--hover-color);\n    border-color: var(--hover-color);\n  }\n  .lil-gui button:focus {\n    border-color: var(--focus-color);\n  }\n}\n.lil-gui button:active {\n  background: var(--focus-color);\n}\n\n@font-face {\n  font-family: \"lil-gui\";\n  src: url(\"data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAAUsAAsAAAAACJwAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAAH4AAADAImwmYE9TLzIAAAGIAAAAPwAAAGBKqH5SY21hcAAAAcgAAAD0AAACrukyyJBnbHlmAAACvAAAAF8AAACEIZpWH2hlYWQAAAMcAAAAJwAAADZfcj2zaGhlYQAAA0QAAAAYAAAAJAC5AHhobXR4AAADXAAAABAAAABMAZAAAGxvY2EAAANsAAAAFAAAACgCEgIybWF4cAAAA4AAAAAeAAAAIAEfABJuYW1lAAADoAAAASIAAAIK9SUU/XBvc3QAAATEAAAAZgAAAJCTcMc2eJxVjbEOgjAURU+hFRBK1dGRL+ALnAiToyMLEzFpnPz/eAshwSa97517c/MwwJmeB9kwPl+0cf5+uGPZXsqPu4nvZabcSZldZ6kfyWnomFY/eScKqZNWupKJO6kXN3K9uCVoL7iInPr1X5baXs3tjuMqCtzEuagm/AAlzQgPAAB4nGNgYRBlnMDAysDAYM/gBiT5oLQBAwuDJAMDEwMrMwNWEJDmmsJwgCFeXZghBcjlZMgFCzOiKOIFAB71Bb8AeJy1kjFuwkAQRZ+DwRAwBtNQRUGKQ8OdKCAWUhAgKLhIuAsVSpWz5Bbkj3dEgYiUIszqWdpZe+Z7/wB1oCYmIoboiwiLT2WjKl/jscrHfGg/pKdMkyklC5Zs2LEfHYpjcRoPzme9MWWmk3dWbK9ObkWkikOetJ554fWyoEsmdSlt+uR0pCJR34b6t/TVg1SY3sYvdf8vuiKrpyaDXDISiegp17p7579Gp3p++y7HPAiY9pmTibljrr85qSidtlg4+l25GLCaS8e6rRxNBmsnERunKbaOObRz7N72ju5vdAjYpBXHgJylOAVsMseDAPEP8LYoUHicY2BiAAEfhiAGJgZWBgZ7RnFRdnVJELCQlBSRlATJMoLV2DK4glSYs6ubq5vbKrJLSbGrgEmovDuDJVhe3VzcXFwNLCOILB/C4IuQ1xTn5FPilBTj5FPmBAB4WwoqAHicY2BkYGAA4sk1sR/j+W2+MnAzpDBgAyEMQUCSg4EJxAEAwUgFHgB4nGNgZGBgSGFggJMhDIwMqEAYAByHATJ4nGNgAIIUNEwmAABl3AGReJxjYAACIQYlBiMGJ3wQAEcQBEV4nGNgZGBgEGZgY2BiAAEQyQWEDAz/wXwGAAsPATIAAHicXdBNSsNAHAXwl35iA0UQXYnMShfS9GPZA7T7LgIu03SSpkwzYTIt1BN4Ak/gKTyAeCxfw39jZkjymzcvAwmAW/wgwHUEGDb36+jQQ3GXGot79L24jxCP4gHzF/EIr4jEIe7wxhOC3g2TMYy4Q7+Lu/SHuEd/ivt4wJd4wPxbPEKMX3GI5+DJFGaSn4qNzk8mcbKSR6xdXdhSzaOZJGtdapd4vVPbi6rP+cL7TGXOHtXKll4bY1Xl7EGnPtp7Xy2n00zyKLVHfkHBa4IcJ2oD3cgggWvt/V/FbDrUlEUJhTn/0azVWbNTNr0Ens8de1tceK9xZmfB1CPjOmPH4kitmvOubcNpmVTN3oFJyjzCvnmrwhJTzqzVj9jiSX911FjeAAB4nG3HMRKCMBBA0f0giiKi4DU8k0V2GWbIZDOh4PoWWvq6J5V8If9NVNQcaDhyouXMhY4rPTcG7jwYmXhKq8Wz+p762aNaeYXom2n3m2dLTVgsrCgFJ7OTmIkYbwIbC6vIB7WmFfAAAA==\") format(\"woff\");\n}\n.curve-editor {\n  display: flex;\n  flex-direction: column;\n  gap: 5px;\n  background-color: #303030;\n  outline: 1px solid #000000;\n  padding: 5px;\n  width: 100%;\n}\n.curve-editor .button-medium {\n  background-color: #545454;\n  min-width: var(--widget-height);\n  min-height: var(--widget-height);\n  height: 100%;\n  outline: 1px solid #3c3c3c;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  color: #fff;\n  font-size: var(--input-font-size, 11px);\n}\n.curve-editor .button-medium.selected {\n  background-color: #4772b3;\n  pointer-events: none;\n}\n.curve-editor .button-medium:hover {\n  background-color: #656565;\n  cursor: default;\n}\n.curve-editor .curve-top {\n  display: flex;\n  width: 100%;\n}\n.curve-editor .curve-panel {\n  width: 100%;\n  height: 90px;\n  outline: 1px solid #646464;\n}\n.curve-editor .curve-point-panel {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  height: var(--widget-height);\n}\n.curve-editor .curve-point-panel input {\n  background-color: #545454;\n  height: 100%;\n  width: 100%;\n  color: #fff;\n  border: 0;\n  outline: 1px solid #3c3c3c;\n  text-align: center;\n  font-size: var(--input-font-size, 11px);\n}";
+n(css,{});
 
 class Controller {
     /**
@@ -173,7 +178,7 @@ class Controller {
         }
         return this;
     }
-    needsUpdateDisplay() {
+    checkDisplay() {
         if (this.parent._closed) {
             return false;
         }
@@ -189,7 +194,7 @@ class Controller {
         // To prevent framerate loss, make sure the value has changed before updating the display.
         // Note: save() is used here instead of getValue() only because of ColorController. The !== operator
         // won't work for color objects or arrays, but ColorController.save() always returns a string.
-        if (this.needsUpdateDisplay()) {
+        if (this.checkDisplay()) {
             this.updateDisplay();
         }
     }
@@ -211,7 +216,7 @@ class Controller {
         return this;
     }
     update() {
-        if (this.needsUpdateDisplay()) {
+        if (this.checkDisplay()) {
             this.updateDisplay();
         }
     }
@@ -444,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;
     }
@@ -856,8 +861,7 @@ class ColorController extends Controller {
             this.setValue(newValue);
         } else {
             this._format.fromHexString(value, this.getValue(), this._rgbScale);
-            this._callOnChange();
-            this.updateDisplay();
+            this.setValue(this.getValue());
         }
     }
     save() {
@@ -924,49 +928,6 @@ class ColorController extends Controller {
     }
 }
 
-class ImageController extends Controller {
-    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 "";
-        }
-    }
-    updateDisplay() {
-        ImageController.toDataURL(this.getValue()).then((url)=>this.$img.src = url);
-        return this;
-    }
-    constructor(parent, object, property){
-        super(parent, object, property, "image");
-        this.$img = document.createElement("img");
-        this.$widget.appendChild(this.$img);
-        this.updateDisplay();
-    }
-}
-ImageController._context = null;
-ImageController._imageMap = new WeakMap();
-
 class UIElement {
     add(...args) {
         for(let i = 0; i < args.length; i++){
@@ -1054,8 +1015,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) {
@@ -1230,7 +1191,7 @@ class VectorController extends Controller {
         this._callOnChange();
         return this;
     }
-    needsUpdateDisplay() {
+    checkDisplay() {
         return !this.parent._closed;
     }
     updateDisplay() {
@@ -1729,56 +1690,48 @@ class CurveController extends Controller {
 }
 
 class TextureController extends Controller {
-    needsUpdateDisplay() {
-        if (this.parent._closed) {
-            return false;
-        }
-        let texture = this.getValue();
-        if (texture && this._version !== texture.version) {
-            this._version = texture.version;
-            return true;
-        }
-        return false;
+    checkDisplay() {
+        return this._autoRefresh || super.checkDisplay();
     }
     updateDisplay() {
         const canvas = this.$canvas;
         const context = canvas.getContext("2d");
-        const texture = this.getValue();
-        const image = texture.image;
-        // Seems like context can be null if the canvas is not visible
-        if (context) {
-            // Always clear the context before set new texture, because new texture may has transparency
-            context.clearRect(0, 0, canvas.width, canvas.height);
-        }
-        if (image && image.width > 0) {
-            const scale = canvas.width / image.width;
-            canvas.height = Math.max(2, image.height / image.width * canvas.width);
-            const width = Math.max(image.width * scale, 2);
-            const height = Math.max(image.height * scale, 2);
-            if (texture.__getImage) {
-                context.drawImage(texture.__getImage(), 0, 0, width, height);
+        let texture = this.getValue();
+        if (texture) {
+            let image = texture.image;
+            if (image && image.width > 0) {
+                this.$label.textContent = `${image.width}x${image.height}`;
+                canvas.title = texture.sourceFile || "";
+                canvas.height = canvas.width / image.width * image.height;
+                if (this.getImage) {
+                    const w = 256, h = 256 / image.width * image.height;
+                    context.drawImage(this.getImage(texture, w, h), 0, 0, w * 1.5, h * 1.5, 0, 0, canvas.width, canvas.height); //why 1.5 ？
+                }
             } else {
-                context.drawImage(image, 0, 0, width, height);
+                canvas.title = texture.sourceFile + ' (error)';
             }
+        } else {
+            canvas.title = 'empty';
         }
         return this;
     }
     constructor(parent, object, property){
-        super(parent, object, property, "image");
-        this._version = 0;
-        let group = document.createElement("div");
-        group.style.display = "flex";
-        group.style.flexDirection = "column";
-        group.style.width = "100%";
-        this.$widget.appendChild(group);
-        this.$canvas = document.createElement("canvas");
-        group.appendChild(this.$canvas);
-        const texture = this.getValue();
-        if (texture.isRenderTargetTexture) {
-            let button = document.createElement("button");
-            button.textContent = "capture";
-            button.onclick = ()=>this.updateDisplay();
-            group.appendChild(button);
+        super(parent, object, property, "texture");
+        this._autoRefresh = false;
+        const group = this.$widget.appendChild(document.createElement("div"));
+        group.classList.add("group");
+        this.$canvas = group.appendChild(document.createElement("canvas"));
+        const label = this.$label = group.appendChild(document.createElement("div"));
+        label.classList.add("label");
+        let texture = this.getValue();
+        if (texture && texture.image && texture.image.depth) {
+            const block = group.appendChild(document.createElement("div"));
+            block.classList.add("block");
+            block.onclick = ()=>{
+                this._autoRefresh = !this._autoRefresh;
+                if (this._autoRefresh) block.classList.add("select");
+                else block.classList.remove("select");
+            };
         }
     }
 }
@@ -1840,14 +1793,6 @@ class GUI {
      */ addColor(object, property, rgbScale = 1) {
         return new ColorController(this, object, property, rgbScale);
     }
-    /**
-     *
-     * @param {object} object
-     * @param {string} property Name of the property to control.
-     * @returns {Controller}
-     */ addImage(object, property) {
-        return new ImageController(this, object, property);
-    }
     addTexture(object, property) {
         return new TextureController(this, object, property);
     }
@@ -2191,7 +2136,9 @@ class GUI {
         this.$title.setAttribute('role', 'button');
         this.$title.setAttribute('aria-expanded', "true");
         this.$title.setAttribute('tabindex', "0");
-        this.$title.addEventListener('click', ()=>this.openAnimated(this._closed));
+        this.$title.addEventListener('click', ()=>{
+            this.openAnimated(this._closed);
+        });
         this.$title.addEventListener('keydown', (e)=>{
             if (e.code === 'Enter' || e.code === 'Space') {
                 e.preventDefault();
@@ -2234,61 +2181,269 @@ class GUI {
     }
 }
 
-function _ts_decorate(decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for(var i = decorators.length - 1; i >= 0; i--)if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+/* global Reflect, Promise, SuppressedError, Symbol */
+
+
+function __decorate(decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
 }
-class InspectorPlugin extends Plugin {
-    static _getTargetName(target) {
-        return target.name || target.constructor.name || target.type;
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+  var e = new Error(message);
+  return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
+class ViewerHelper extends ObjectInstance {
+    get outputColorSpace() {
+        return this._renderer.outputColorSpace;
+    }
+    set outputColorSpace(v) {
+        this._renderer.outputColorSpace = v;
+    }
+    get toneMapping() {
+        return this._renderer.toneMapping;
+    }
+    set toneMapping(v) {
+        this._renderer.toneMapping = v;
+    }
+    get toneMappingExposure() {
+        return this._renderer.toneMappingExposure;
+    }
+    set toneMappingExposure(v) {
+        this._renderer.toneMappingExposure = v;
+    }
+    get shadows() {
+        return this._renderer.shadowMap.enabled;
+    }
+    set shadows(v) {
+        this._renderer.shadowMap.enabled = v;
+    }
+    get backgroundBlurriness() {
+        return this._scene.backgroundBlurriness;
+    }
+    set backgroundBlurriness(v) {
+        this._scene.backgroundBlurriness = v;
+    }
+    get environment() {
+        return this._scene.environment;
+    }
+    set environment(v) {
+        this._scene.environment = v;
+    }
+    get environmentIntensity() {
+        return this._scene.environmentIntensity;
+    }
+    set environmentIntensity(v) {
+        this._scene.environmentIntensity = v;
+    }
+    get environmentRotation() {
+        return this._scene.environmentRotation;
+    }
+    set environmentRotation(v) {
+        this._scene.environmentRotation.copy(v);
+    }
+    get background() {
+        return this._scene.background;
+    }
+    set background(v) {
+        this._scene.background = v;
+    }
+    get backgroundRotation() {
+        return this._scene.backgroundRotation;
     }
-    onUpdate(dt) {
+    set backgroundRotation(v) {
+        this._scene.backgroundRotation.copy(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;
+    }
+}
+__decorate([
+    property({
+        value: {
+            SRGBColorSpace: "srgb",
+            LinearSRGBColorSpace: "srgb-linear",
+            DisplayP3ColorSpace: "display-p3",
+            LinearDisplayP3ColorSpace: "display-p3-linear"
+        }
+    })
+], ViewerHelper.prototype, "outputColorSpace", null);
+__decorate([
+    property({
+        value: {
+            NoToneMapping: 0,
+            LinearToneMapping: 1,
+            ReinhardToneMapping: 2,
+            CineonToneMapping: 3,
+            ACESFilmicToneMapping: 4
+        }
+    })
+], ViewerHelper.prototype, "toneMapping", null);
+__decorate([
+    property({
+        min: 0,
+        max: 10,
+        step: 0.01
+    })
+], ViewerHelper.prototype, "toneMappingExposure", null);
+__decorate([
+    property
+], ViewerHelper.prototype, "shadows", null);
+__decorate([
+    property({
+        min: 0,
+        max: 1,
+        step: 0.01
+    })
+], ViewerHelper.prototype, "backgroundBlurriness", null);
+__decorate([
+    property({
+        value: new Texture()
+    })
+], ViewerHelper.prototype, "environment", null);
+__decorate([
+    property({
+        min: 0,
+        max: 1,
+        step: 0.01
+    })
+], ViewerHelper.prototype, "environmentIntensity", null);
+__decorate([
+    property({
+        step: 0.01
+    })
+], ViewerHelper.prototype, "environmentRotation", null);
+__decorate([
+    property
+], ViewerHelper.prototype, "background", null);
+__decorate([
+    property({
+        step: 0.01
+    })
+], ViewerHelper.prototype, "backgroundRotation", null);
+__decorate([
+    property
+], ViewerHelper.prototype, "targetFrameRate", null);
+
+class Inspector extends Mount {
+    onLoad() {
+        const { width, height } = this.viewer;
+        this._scene = new Scene();
+        this._camera = new OrthographicCamera(0, width, height, 0, -1, 1);
+        this._gui = new GUI({
+            width: 310,
+            title: "Inspector"
+        }).close();
+        this._gui.addFolder("Viewer").close().hide();
+        this._gui.addFolder("Component").close().hide();
+        this._gui.addFolder("Material").close().hide();
+        this._gui.addFolder("Other").close().hide();
+        this._inspect(new ViewerHelper(this.viewer));
+        this._addSprite();
+    }
+    onDestroy() {
+        this._gui.destroy();
+        this._refCntMap.clear();
+        this._targetMap.clear();
+    }
+    update(dt) {
         this._gui.update();
         this._updateFolders();
     }
-    _initFolders() {
-        const gui = this._gui;
-        gui.addFolder("Viewer").close().hide();
-        gui.addFolder("Plugin").close().hide();
-        gui.addFolder("Component").close().hide();
-        gui.addFolder("Material").close().hide();
-        gui.addFolder("Other").close().hide();
+    resize(width, height) {
+        this._camera.left = 0;
+        this._camera.right = width;
+        this._camera.top = height;
+        this._camera.bottom = 0;
+        this._camera.updateProjectionMatrix();
+    }
+    _addSprite() {
+        const viewer = this.viewer;
+        this._sprite = viewer.add(Sprite, {
+            parent: this._scene,
+            scale: new Vector3(256, 256, 1),
+            position: new Vector3(viewer.width / 2, viewer.height / 2),
+            visible: false
+        });
     }
-    _initViewer() {
-        this.inspect(new ViewerExtension(this.viewer));
+    _renderScene() {
+        const { renderer } = this.viewer;
+        const autoClearDepth = renderer.autoClearDepth;
+        const autoClearColor = renderer.autoClearColor;
+        renderer.autoClearDepth = true;
+        renderer.autoClearColor = false;
+        renderer.render(this._scene, this._camera);
+        renderer.autoClearDepth = autoClearDepth;
+        renderer.autoClearColor = autoClearColor;
+        return renderer.domElement;
+    }
+    _renderSprite(texture, w, h) {
+        this._sprite.visible = true;
+        this._sprite.scale.set(w, h, 1);
+        this._sprite.position.set(w / 2, this._camera.top - h / 2, 0);
+        this._sprite.material.map = texture;
+        this._sprite.material.needsUpdate = true;
+        const dom = this._renderScene();
+        this._sprite.visible = false;
+        return dom;
     }
     _updateFolders() {
-        const statesMap = this._statesMap;
-        const setState = (v)=>statesMap.set(v, statesMap.has(v) ? 0 : 1);
-        statesMap.forEach((_, k, map)=>map.set(k, -1));
-        this.viewer.traversePlugins(setState);
+        const refCntMap = this._refCntMap;
+        const setState = (v)=>{
+            if (refCntMap.get(v) === -1) refCntMap.set(v, 0);
+            if (refCntMap.get(v) === undefined) refCntMap.set(v, 1);
+        };
+        refCntMap.forEach((_, k, map)=>map.set(k, -1));
         this.viewer.traverseComponents(setState);
         this.viewer.traverseMaterials(setState);
-        statesMap.forEach((v, k, map)=>{
+        refCntMap.forEach((v, k, map)=>{
             if (v === 1) {
-                this.inspect(k);
+                this._inspect(k);
             }
             if (v === -1) {
-                this.uninspect(k);
+                this._uninspect(k);
                 map.delete(k);
             }
         });
     }
     _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);
+            const values = propsSort(props);
+            this._targetMap.set(values, target);
+            list.push(values);
         }
         if (target instanceof ShaderMaterial) {
             props = Object.create(null);
             const uniforms = Object.create(null);
-            this._targetMap.set(props, uniforms);
-            const entries = Object.entries(target.uniforms);
-            entries.forEach(([name])=>{
+            Object.keys(target.uniforms).forEach((name)=>{
                 Object.defineProperty(uniforms, name, {
                     get: ()=>target.uniforms[name].value,
                     set: (v)=>target.uniforms[name].value = v
@@ -2297,18 +2452,18 @@ class InspectorPlugin extends Plugin {
                     dir: "uniforms"
                 };
             });
-            list.push(props);
+            const values = propsSort(props);
+            this._targetMap.set(values, uniforms);
+            list.push(values);
         }
         return list;
     }
-    inspect(target) {
+    _inspect(target) {
         let propsList = this._getPropertiesList(target);
         if (propsList.length === 0) return;
         let gui = this._gui;
-        if (target instanceof ViewerExtension) {
+        if (target instanceof ViewerHelper) {
             gui = gui.getFolder("Viewer").show();
-        } else if (target instanceof Plugin) {
-            gui = gui.getFolder("Plugin").show();
         } else if (target instanceof Component) {
             gui = gui.getFolder("Component").show();
         } else if (target instanceof Material) {
@@ -2317,51 +2472,62 @@ class InspectorPlugin extends Plugin {
             gui = gui.getFolder("Other").show();
         }
         if (gui._title !== "Viewer") {
-            gui = gui.getFolder(target.uuid) || gui.addFolder(InspectorPlugin._getTargetName(target), target.uuid).close();
+            gui = gui.getFolder(target.uuid) || gui.addFolder(targetName(target), target.uuid).close();
         }
-        this._addPropsListGUI(gui, propsList, target);
+        this._addGUI(gui, propsList, target);
         return target;
     }
-    _addPropsListGUI(gui, list, target, dir = "") {
-        let source = target;
-        for (let props of list){
-            if (dir) {
-                gui = gui.getFolder(dir) || gui.addFolder(dir).close();
-            }
+    _addGUI(gui, list, target, dir = "") {
+        if (dir) {
+            gui = gui.getFolder(dir) || gui.addFolder(dir).close();
+        }
+        const source = target;
+        for (const props of list){
             target = this._targetMap.get(props) || source;
-            for(let k in props){
-                let value = target[k];
-                if (value == null) continue;
-                const prop = props[k];
+            for (const [k, prop] of props){
+                let value = target[k] == null ? prop.value : target[k];
+                if (value == null || prop.parent && target[prop.parent] == null) {
+                    continue;
+                }
                 let folder = gui;
                 if (prop.dir) {
                     folder = folder.getFolder(prop.dir) || folder.addFolder(prop.dir).close();
                 }
-                if (PropertyManager._hasProperties(value)) {
-                    this._addPropsListGUI(folder, this._getPropertiesList(value), target, k);
+                if (PropertyManager._hasProperties(value.constructor)) {
+                    this._addGUI(folder, this._getPropertiesList(value), target, k);
                 }
-                const type = typeof value;
-                let ins = null;
-                if (value.isColor) {
-                    ins = folder.addColor(target, k);
-                } else if (value.isAnimationCurve) {
-                    ins = folder.addCurve(target, k);
-                } else if (value.isVector2 || value.isVector3 || value.isVector4 || value.isEuler) {
-                    ins = folder.addVector(target, k, prop.min, prop.max, prop.step);
-                } else if (value.isTexture) ; else if (type === "number" || type === "boolean" || type === "string" || type === "function") {
-                    ins = folder.add(target, k, prop.value || prop.min, prop.max, prop.step);
-                } else ;
-                if (ins && prop.name) {
-                    ins.name(prop.name);
+                if (Array.isArray(value)) {
+                    this._addGUI(folder, [
+                        value.map((_, i)=>[
+                                i.toString(),
+                                {}
+                            ])
+                    ], value, k);
+                } else {
+                    const type = typeof value;
+                    let ins = null;
+                    if (value.isColor) {
+                        ins = folder.addColor(target, k);
+                    } else if (value.isAnimationCurve) {
+                        ins = folder.addCurve(target, k);
+                    } else if (value.isVector2 || value.isVector3 || value.isVector4 || value.isEuler) {
+                        ins = folder.addVector(target, k, prop.min, prop.max, prop.step);
+                    } else if (value.isTexture) {
+                        ins = folder.addTexture(target, k);
+                        ins.getImage = (texture, w, h)=>this._renderSprite(texture, w, h);
+                    } else if (type === "number" || type === "boolean" || type === "string" || type === "function") {
+                        ins = folder.add(target, k, prop.value || prop.min, prop.max, prop.step);
+                    } else ;
+                    if (ins && prop.name) {
+                        ins.name(prop.name);
+                    }
                 }
             }
         }
     }
-    uninspect(target) {
+    _uninspect(target) {
         let gui = this._gui;
-        if (target instanceof Plugin) {
-            gui = gui.getFolder("Plugin");
-        } else if (target instanceof Component) {
+        if (target instanceof Component) {
             gui = gui.getFolder("Component");
         } else if (target instanceof Material) {
             gui = gui.getFolder("Material");
@@ -2373,100 +2539,52 @@ class InspectorPlugin extends Plugin {
             gui.hide();
         }
     }
-    constructor(){
-        super();
-        this._statesMap = new Map();
+    constructor(...args){
+        super(...args);
+        this._refCntMap = new Map();
         this._targetMap = new Map();
-        this.install = ()=>{
-            this._gui = new GUI({
-                width: 310,
-                title: "Inspector"
-            }).close();
-            this._initFolders();
-            this._initViewer();
-        };
-        this.uninstall = ()=>{
-            this._gui.destroy();
-            this._statesMap.clear();
-            this._targetMap.clear();
-        };
     }
 }
-class ViewerExtension extends ObjectInstance {
-    get outputColorSpace() {
-        return this._renderer.outputColorSpace;
-    }
-    set outputColorSpace(v) {
-        this._renderer.outputColorSpace = v;
-    }
-    get toneMapping() {
-        return this._renderer.toneMapping;
-    }
-    set toneMapping(v) {
-        this._renderer.toneMapping = v;
-    }
-    get toneMappingExposure() {
-        return this._renderer.toneMappingExposure;
-    }
-    set toneMappingExposure(v) {
-        this._renderer.toneMappingExposure = v;
-    }
-    get shadows() {
-        return this._renderer.shadowMap.enabled;
-    }
-    set shadows(v) {
-        this._renderer.shadowMap.enabled = v;
-    }
-    get backgroundBlurriness() {
-        return this._scene.backgroundBlurriness;
-    }
-    set backgroundBlurriness(v) {
-        this._scene.backgroundBlurriness = v;
-    }
-    constructor(viewer){
-        super();
-        this._scene = viewer.scene;
-        this._renderer = viewer.renderer;
-    }
+function targetName(target) {
+    return target.name || target.constructor.name || target.type;
 }
-_ts_decorate([
-    property({
-        value: {
-            SRGBColorSpace: "srgb",
-            LinearSRGBColorSpace: "srgb-linear",
-            DisplayP3ColorSpace: "display-p3",
-            LinearDisplayP3ColorSpace: "display-p3-linear"
-        }
-    })
-], ViewerExtension.prototype, "outputColorSpace", null);
-_ts_decorate([
-    property({
+function propsSort(props) {
+    const order = (v)=>v.order || 10000;
+    const values = Object.entries(props);
+    const array0 = values.filter((v)=>!v[1].dir).sort((a, b)=>order(a[1]) - order(b[1]));
+    const array1 = values.filter((v)=>v[1].dir).sort((a, b)=>order(a[1]) - order(b[1]));
+    return array0.concat(array1);
+}
+const materialProperties = {
+    visible: {
+        order: 1
+    },
+    transparent: {
+        order: 2
+    },
+    side: {
+        order: 3,
         value: {
-            NoToneMapping: 0,
-            LinearToneMapping: 1,
-            ReinhardToneMapping: 2,
-            CineonToneMapping: 3,
-            ACESFilmicToneMapping: 4
+            FrontSide: 0,
+            BackSide: 1,
+            DoubleSide: 2
         }
-    })
-], ViewerExtension.prototype, "toneMapping", null);
-_ts_decorate([
-    property({
-        min: 0,
-        max: 10,
-        step: 0.01
-    })
-], ViewerExtension.prototype, "toneMappingExposure", null);
-_ts_decorate([
-    property
-], ViewerExtension.prototype, "shadows", null);
-_ts_decorate([
-    property({
+    },
+    color: {
+        order: 4,
+        dir: "diffuse"
+    },
+    opacity: {
+        order: 5,
+        dir: "diffuse",
         min: 0,
         max: 1,
         step: 0.01
-    })
-], ViewerExtension.prototype, "backgroundBlurriness", null);
+    }
+};
+for(let k in materialProperties){
+    property(materialProperties[k])(Material.prototype, k);
+}
 const meshBasicMaterislProperties = {
     map: {
         dir: "diffuse"
@@ -2499,24 +2617,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,
-        max: 1,
-        step: 0.01
-    },
     map: {
         dir: "diffuse"
     },
@@ -2566,7 +2666,8 @@ const meshStandardMaterialProperties = {
     },
     normalScale: {
         dir: "normal",
-        parent: "normalMap"
+        step: 0.01,
+        parent: "normalMap "
     },
     displacementScale: {
         dir: "displacement",
@@ -2586,7 +2687,8 @@ const meshStandardMaterialProperties = {
         dir: "envMap",
         min: 0,
         max: 1,
-        step: 0.01
+        step: 0.01,
+        parent: "envMap"
     },
     lightMap: {
         dir: "lightMap"
@@ -2602,6 +2704,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/
@@ -2651,7 +2863,7 @@ var Panel = function(name, fg, bg) {
         }
     };
 };
-var Stats = function() {
+var Stats$1 = function() {
     var mode = 0;
     var container = document.createElement('div');
     container.style.cssText = 'position:fixed;top:0;left:0;cursor:pointer;opacity:0.9;z-index:10000';
@@ -2710,8 +2922,19 @@ var Stats = function() {
     };
 };
 
-class StatsPlugin extends Plugin {
-    onUpdate(dt) {
+class Stats extends Mount {
+    onLoad() {
+        this._stats.addPanel(this._dcPanel);
+        this._stats.addPanel(this._texPanel);
+        this._stats.addPanel(this._triPanel);
+        this._stats.addPanel(this._prgPanel);
+        this._stats.showPanel(0);
+        document.body.appendChild(this._stats.dom);
+    }
+    onDestroy() {
+        document.body.removeChild(this._stats.dom);
+    }
+    update(dt) {
         const info = this.viewer.renderer.info;
         this._dcPanel.update(info.render.calls, 300);
         this._triPanel.update(info.render.triangles, 500000);
@@ -2719,26 +2942,35 @@ class StatsPlugin extends Plugin {
         this._prgPanel.update(info.programs.length, 50);
         this._stats.update();
     }
-    constructor(){
-        super();
-        this._stats = new Stats();
+    constructor(...args){
+        super(...args);
+        this._stats = new Stats$1();
         this._dcPanel = new Panel('DC', '#ff8', '#221');
         this._triPanel = new Panel("TRI", '#ff8', '#221');
         this._texPanel = new Panel('TEX', '#ff8', '#221');
         this._prgPanel = new Panel('PRG', '#ff8', '#221');
-        this.install = ()=>{
-            this._stats.addPanel(this._dcPanel);
-            this._stats.addPanel(this._texPanel);
-            this._stats.addPanel(this._triPanel);
-            this._stats.addPanel(this._prgPanel);
-            this._stats.showPanel(0);
-            document.body.appendChild(this._stats.dom);
-        };
-        this.uninstall = ()=>{
-            document.body.removeChild(this._stats.dom);
-        };
     }
 }
 
-export { GUI, InspectorPlugin, StatsPlugin };
+class BoxProjectionHelper extends Mount {
+    onLoad() {
+        this._box3 = new Box3();
+        this._target = this.viewer.mount(BoxProjection);
+        this._helper = this.viewer.add(new Box3Helper(this._box3));
+    }
+    onEnable() {
+        this._helper.visible = true;
+    }
+    onDisable() {
+        this._helper.visible = false;
+    }
+    update(dt) {
+        const { center, boxMin, boxMax } = this._target;
+        this._box3.min.copy(center).add(boxMin);
+        this._box3.max.copy(center).add(boxMax);
+        this._helper.updateMatrixWorld();
+    }
+}
+
+export { BoxProjectionHelper, GUI, Inspector, Stats };
 //# sourceMappingURL=module.js.map