@xviewer.js/debug 1.0.0-beta.1 → 1.0.0

package/dist/module.js

@@ -1,9 +1,9 @@
-import { MeshBasicMaterial, MeshStandardMaterial, ShaderMaterial, Material } from 'three';
-import { property, Plugin, PropertyManager, Component, ObjectInstance } from '@xviewer.js/core';
+import { Viewer, property, ObjectInstance, Mount, PropertyManager, Component, BoxProjection } from '@xviewer.js/core';
+import { MeshBasicMaterial, WebGLRenderer, Material, MeshStandardMaterial, MeshPhysicalMaterial, Scene, OrthographicCamera, Sprite, Vector3, ShaderMaterial, Box3, Box3Helper } from 'three';
 
 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, BlinkMacSystemFont, \"Segoe UI\", Roboto, Arial, sans-serif;\n  --font-family-mono: Menlo, Monaco, Consolas, \"Droid Sans Mono\", 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.image img {\n  max-width: 100%;\n}\n.lil-gui .controller.image canvas {\n  max-width: 100%;\n  min-height: 1px;\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}";
+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.image img {\n  max-width: 100%;\n}\n.lil-gui .controller.image canvas {\n  max-width: 100%;\n  min-height: 1px;\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 {
@@ -420,6 +420,18 @@ function getPrecision(value) {
 function hasDecimal(value) {
     return value % 1 !== 0;
 }
+let renderer;
+let material = new MeshBasicMaterial();
+function renderToCanvas(texture) {
+    if (renderer === undefined) {
+        renderer = new WebGLRenderer();
+    }
+    const image = texture.image;
+    material.map = texture;
+    renderer.setSize(image.width, image.height, false);
+    Viewer.Blit(renderer, null, material);
+    return renderer.domElement;
+}
 
 class NumberController extends Controller {
     min(min) {
@@ -449,14 +461,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;
     }
@@ -861,8 +873,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() {
@@ -929,82 +940,6 @@ 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;
-                    }
-                }
-                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++){
@@ -1092,8 +1027,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) {
@@ -1767,57 +1702,46 @@ 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;
-    }
     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;
+                let scale = canvas.width / image.width;
+                if (texture.isDataTexture || texture.isCompressedTexture) {
+                    context.drawImage(renderToCanvas(texture), 0, 0, image.width * scale, image.height * scale);
+                } else if (image.depth) ; else {
+                    context.drawImage(image, 0, 0, image.width * scale, image.height * scale);
+                }
             } 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");
+        const group = this.$widget.appendChild(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);
-        }
+        this.$canvas = group.appendChild(document.createElement("canvas"));
+        const label = document.createElement("div");
+        label.style.position = "absolute";
+        label.style.display = "flex";
+        label.style.backgroundColor = "black";
+        this.$label = group.appendChild(label);
+        group.onpointerover = (e)=>this.onpointerover && this.onpointerover(e);
+        group.onpointerout = (e)=>this.onpointerout && this.onpointerout(e);
     }
 }
 
@@ -1878,14 +1802,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);
     }
@@ -2229,7 +2145,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();
@@ -2301,38 +2219,214 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
   return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
-class InspectorPlugin extends Plugin {
-    static _getTargetName(target) {
-        return target.name || target.constructor.name || target.type;
+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;
     }
-    onUpdate(dt) {
+    set environmentIntensity(v) {
+        this._scene.environmentIntensity = v;
+    }
+    get environmentRotation() {
+        return this._scene.environmentRotation;
+    }
+    set environmentRotation(v) {
+        this._scene.environmentRotation.copy(v);
+    }
+    get backgroundRotation() {
+        return this._scene.backgroundRotation;
+    }
+    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
+], 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({
+        step: 0.01
+    })
+], ViewerHelper.prototype, "backgroundRotation", null);
+__decorate([
+    property({
+        min: 1,
+        max: 120,
+        step: 1
+    })
+], ViewerHelper.prototype, "targetFrameRate", null);
+
+class Inspector extends Mount {
+    onLoad() {
+        this._scene = new Scene();
+        this._camera = new OrthographicCamera(0, window.innerWidth, window.innerHeight, 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._rect = this._gui.domElement.getBoundingClientRect();
+        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();
-    }
-    _initViewer() {
-        this.inspect(new ViewerExtension(this.viewer));
+    resize(width, height) {
+        this._camera.left = 0;
+        this._camera.right = width;
+        this._camera.top = height;
+        this._camera.bottom = 0;
+        this._camera.updateProjectionMatrix();
+        this._rect = this._gui.domElement.getBoundingClientRect();
+    }
+    render(dt) {
+        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;
+    }
+    _addSprite() {
+        const viewer = this.viewer;
+        this._tween = viewer.tween();
+        this._background = viewer.add(Sprite, {
+            parent: this._scene,
+            scale: new Vector3(258, 258, 1),
+            position: new Vector3(viewer.width / 2, viewer.height / 2)
+        });
+        this._background.material.opacity = 0;
+        this._sprite = viewer.add(Sprite, {
+            parent: this._scene,
+            scale: new Vector3(256, 256, 1),
+            position: new Vector3(viewer.width / 2, viewer.height / 2)
+        });
+        this._sprite.material.opacity = 0;
     }
     _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);
             }
         });
@@ -2341,15 +2435,14 @@ class InspectorPlugin extends Plugin {
         const list = [];
         let props = PropertyManager._getMergedProperties(target.constructor);
         if (props) {
-            list.push(props);
-            this._targetMap.set(props, target);
+            const values = propsSort(props);
+            list.push(values);
+            this._targetMap.set(values, target);
         }
         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
@@ -2358,18 +2451,18 @@ class InspectorPlugin extends Plugin {
                     dir: "uniforms"
                 };
             });
-            list.push(props);
+            const values = propsSort(props);
+            list.push(values);
+            this._targetMap.set(values, uniforms);
         }
         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) {
@@ -2378,28 +2471,29 @@ 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){
+            for (const [k, prop] of props){
                 let value = target[k];
-                if (value == null) continue;
-                const prop = props[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.constructor)) {
-                    this._addPropsListGUI(folder, this._getPropertiesList(value), target, k);
+                    this._addGUI(folder, this._getPropertiesList(value), target, k);
                 }
                 const type = typeof value;
                 let ins = null;
@@ -2409,7 +2503,34 @@ class InspectorPlugin extends Plugin {
                     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") {
+                } else if (value.isTexture) {
+                    ins = folder.addTexture(target, k);
+                    ins.onpointerover = ()=>{
+                        const image = value.image;
+                        const w = image.width * 256 / image.height, h = 256;
+                        const x = this._rect.x - w / 2 - 10;
+                        this._background.scale.set(w + 2, h + 2, 1);
+                        this._background.position.x = x;
+                        this._sprite.scale.set(w, h, 1);
+                        this._sprite.position.x = x;
+                        this._sprite.material.map = value;
+                        this._sprite.material.needsUpdate = true;
+                        this._tween.timeline(this._sprite.material).to({
+                            opacity: 1
+                        }, 0.3).start();
+                        this._tween.timeline(this._background.material).to({
+                            opacity: 1
+                        }, 0.3).start();
+                    };
+                    ins.onpointerout = ()=>{
+                        this._tween.timeline(this._background.material).to({
+                            opacity: 0
+                        }, 0.3).start();
+                        this._tween.timeline(this._sprite.material).to({
+                            opacity: 0
+                        }, 0.3).start();
+                    };
+                } 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) {
@@ -2418,11 +2539,9 @@ class InspectorPlugin extends Plugin {
             }
         }
     }
-    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");
@@ -2434,100 +2553,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;
 }
-__decorate([
-    property({
-        value: {
-            SRGBColorSpace: "srgb",
-            LinearSRGBColorSpace: "srgb-linear",
-            DisplayP3ColorSpace: "display-p3",
-            LinearDisplayP3ColorSpace: "display-p3-linear"
-        }
-    })
-], ViewerExtension.prototype, "outputColorSpace", null);
-__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);
-__decorate([
-    property({
-        min: 0,
-        max: 10,
-        step: 0.01
-    })
-], ViewerExtension.prototype, "toneMappingExposure", null);
-__decorate([
-    property
-], ViewerExtension.prototype, "shadows", null);
-__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"
@@ -2560,24 +2631,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"
     },
@@ -2627,7 +2680,8 @@ const meshStandardMaterialProperties = {
     },
     normalScale: {
         dir: "normal",
-        parent: "normalMap"
+        step: 0.01,
+        parent: "normalMap "
     },
     displacementScale: {
         dir: "displacement",
@@ -2647,7 +2701,8 @@ const meshStandardMaterialProperties = {
         dir: "envMap",
         min: 0,
         max: 1,
-        step: 0.01
+        step: 0.01,
+        parent: "envMap"
     },
     lightMap: {
         dir: "lightMap"
@@ -2663,6 +2718,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/
@@ -2712,7 +2877,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';
@@ -2771,8 +2936,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);
@@ -2780,26 +2956,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