@xviewer.js/debug 1.0.0 → 1.0.2

package/dist/module.js

@@ -1,9 +1,9 @@
-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';
+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.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.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 {
@@ -178,7 +178,7 @@ class Controller {
         }
         return this;
     }
-    needsUpdateDisplay() {
+    checkDisplay() {
         if (this.parent._closed) {
             return false;
         }
@@ -194,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();
         }
     }
@@ -216,7 +216,7 @@ class Controller {
         return this;
     }
     update() {
-        if (this.needsUpdateDisplay()) {
+        if (this.checkDisplay()) {
             this.updateDisplay();
         }
     }
@@ -420,18 +420,6 @@ 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) {
@@ -1203,7 +1191,7 @@ class VectorController extends Controller {
         this._callOnChange();
         return this;
     }
-    needsUpdateDisplay() {
+    checkDisplay() {
         return !this.parent._closed;
     }
     updateDisplay() {
@@ -1702,23 +1690,22 @@ class CurveController extends Controller {
 }
 
 class TextureController extends Controller {
+    checkDisplay() {
+        return this._autoRefresh || super.checkDisplay();
+    }
     updateDisplay() {
         const canvas = this.$canvas;
         const context = canvas.getContext("2d");
-        if (context) {
-            context.clearRect(0, 0, canvas.width, canvas.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);
+                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 {
                 canvas.title = texture.sourceFile + ' (error)';
@@ -1729,19 +1716,23 @@ class TextureController extends Controller {
         return this;
     }
     constructor(parent, object, property){
-        super(parent, object, property, "image");
+        super(parent, object, property, "texture");
+        this._autoRefresh = false;
         const group = this.$widget.appendChild(document.createElement("div"));
-        group.style.display = "flex";
-        group.style.flexDirection = "column";
-        group.style.width = "100%";
+        group.classList.add("group");
         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);
+        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");
+            };
+        }
     }
 }
 
@@ -2268,6 +2259,12 @@ class ViewerHelper extends ObjectInstance {
     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;
     }
@@ -2326,7 +2323,9 @@ __decorate([
     })
 ], ViewerHelper.prototype, "backgroundBlurriness", null);
 __decorate([
-    property
+    property({
+        value: new Texture()
+    })
 ], ViewerHelper.prototype, "environment", null);
 __decorate([
     property({
@@ -2340,23 +2339,23 @@ __decorate([
         step: 0.01
     })
 ], ViewerHelper.prototype, "environmentRotation", null);
+__decorate([
+    property
+], ViewerHelper.prototype, "background", null);
 __decorate([
     property({
         step: 0.01
     })
 ], ViewerHelper.prototype, "backgroundRotation", null);
 __decorate([
-    property({
-        min: 1,
-        max: 120,
-        step: 1
-    })
+    property
 ], ViewerHelper.prototype, "targetFrameRate", null);
 
 class Inspector extends Mount {
     onLoad() {
+        const { width, height } = this.viewer;
         this._scene = new Scene();
-        this._camera = new OrthographicCamera(0, window.innerWidth, window.innerHeight, 0, -1, 1);
+        this._camera = new OrthographicCamera(0, width, height, 0, -1, 1);
         this._gui = new GUI({
             width: 310,
             title: "Inspector"
@@ -2365,7 +2364,6 @@ class Inspector extends Mount {
         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();
     }
@@ -2384,9 +2382,17 @@ class Inspector extends Mount {
         this._camera.top = height;
         this._camera.bottom = 0;
         this._camera.updateProjectionMatrix();
-        this._rect = this._gui.domElement.getBoundingClientRect();
     }
-    render(dt) {
+    _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
+        });
+    }
+    _renderScene() {
         const { renderer } = this.viewer;
         const autoClearDepth = renderer.autoClearDepth;
         const autoClearColor = renderer.autoClearColor;
@@ -2395,22 +2401,17 @@ class Inspector extends Mount {
         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;
+        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 refCntMap = this._refCntMap;
@@ -2419,8 +2420,8 @@ class Inspector extends Mount {
             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);
+        this.viewer.traverseComponents(setState);
         refCntMap.forEach((v, k, map)=>{
             if (v === 1) {
                 this._inspect(k);
@@ -2436,8 +2437,8 @@ class Inspector extends Mount {
         let props = PropertyManager._getMergedProperties(target.constructor);
         if (props) {
             const values = propsSort(props);
-            list.push(values);
             this._targetMap.set(values, target);
+            list.push(values);
         }
         if (target instanceof ShaderMaterial) {
             props = Object.create(null);
@@ -2452,8 +2453,8 @@ class Inspector extends Mount {
                 };
             });
             const values = propsSort(props);
-            list.push(values);
             this._targetMap.set(values, uniforms);
+            list.push(values);
         }
         return list;
     }
@@ -2484,7 +2485,7 @@ class Inspector extends Mount {
         for (const props of list){
             target = this._targetMap.get(props) || source;
             for (const [k, prop] of props){
-                let value = target[k];
+                let value = target[k] == null ? prop.value : target[k];
                 if (value == null || prop.parent && target[prop.parent] == null) {
                     continue;
                 }
@@ -2495,46 +2496,31 @@ class Inspector extends Mount {
                 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) {
-                    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) {
-                    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);
+                    }
                 }
             }
         }