@xviewer.js/debug 1.0.3 → 1.0.4-alpha.1

package/dist/module.js

@@ -1,9 +1,11 @@
-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';
+import { Object3D, Texture, Vector4, Material, MeshBasicMaterial, MeshStandardMaterial, MeshPhysicalMaterial, Mesh, PlaneGeometry, ShaderMaterial, DoubleSide, Camera } from 'three';
+import { GLTFExporter } from 'three/examples/jsm/Addons';
+import * as TextureUtils from 'three/examples/jsm/utils/WebGLTextureUtils';
+import { property, ObjectInstance, Component, PropertyManager } 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 e=[],t=[];function n(n,r){if(n&&"undefined"!=typeof document){var a,s=true===r.prepend?"prepend":"append",d=true===r.singleTag,i="string"==typeof r.container?document.querySelector(r.container):document.getElementsByTagName("head")[0];if(d){var u=e.indexOf(i);-1===u&&(u=e.push(i)-1,t[u]={}),a=t[u]&&t[u][s]?t[u][s]:t[u][s]=c();}else a=c();65279===n.charCodeAt(0)&&(n=n.substring(1)),a.styleSheet?a.styleSheet.cssText+=n:a.appendChild(document.createTextNode(n));}function c(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),r.attributes)for(var t=Object.keys(r.attributes),n=0;n<t.length;n++)e.setAttribute(t[n],r.attributes[t[n]]);var a="prepend"===s?"afterbegin":"beforeend";return i.insertAdjacentElement(a,e),e}}
 
-var css = "@charset \"UTF-8\";\n.lil-gui {\n  font-family: var(--font-family);\n  font-size: var(--font-size);\n  line-height: 1;\n  font-weight: normal;\n  font-style: normal;\n  text-align: left;\n  background-color: var(--background-color);\n  color: var(--text-color);\n  user-select: none;\n  -webkit-user-select: none;\n  touch-action: manipulation;\n  --background-color: #1f1f1f;\n  --text-color: #ebebeb;\n  --title-background-color: #111111;\n  --title-text-color: #ebebeb;\n  --widget-color: #424242;\n  --hover-color: #4f4f4f;\n  --focus-color: #595959;\n  --number-color: #2cc9ff;\n  --string-color: #a2db3c;\n  --font-size: 11px;\n  --input-font-size: 11px;\n  --font-family: -apple-system,\n  BlinkMacSystemFont,\n  \"Segoe UI\",\n  Roboto,\n  Arial,\n  sans-serif;\n  --font-family-mono: Menlo,\n  Monaco,\n  Consolas,\n  \"Droid Sans Mono\",\n  monospace;\n  --padding: 4px;\n  --spacing: 4px;\n  --widget-height: 20px;\n  --title-height: calc(var(--widget-height) + var(--spacing) * 1.25);\n  --name-width: 40%;\n  --slider-knob-width: 2px;\n  --slider-input-width: 27%;\n  --color-input-width: 27%;\n  --slider-input-min-width: 45px;\n  --color-input-min-width: 45px;\n  --folder-indent: 7px;\n  --widget-padding: 0 0 0 3px;\n  --widget-border-radius: 2px;\n  --checkbox-size: calc(0.75 * var(--widget-height));\n  --scrollbar-width: 5px;\n}\n.lil-gui, .lil-gui * {\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n}\n.lil-gui.root {\n  width: var(--width, 245px);\n  display: flex;\n  flex-direction: column;\n}\n.lil-gui.root > .title {\n  background: var(--title-background-color);\n  color: var(--title-text-color);\n}\n.lil-gui.root > .children {\n  overflow-x: hidden;\n  overflow-y: auto;\n}\n.lil-gui.root > .children::-webkit-scrollbar {\n  width: var(--scrollbar-width);\n  height: var(--scrollbar-width);\n  background: var(--background-color);\n}\n.lil-gui.root > .children::-webkit-scrollbar-thumb {\n  border-radius: var(--scrollbar-width);\n  background: var(--focus-color);\n}\n@media (pointer: coarse) {\n  .lil-gui.allow-touch-styles, .lil-gui.allow-touch-styles .lil-gui {\n    --widget-height: 28px;\n    --padding: 6px;\n    --spacing: 6px;\n    --font-size: 13px;\n    --input-font-size: 16px;\n    --folder-indent: 10px;\n    --scrollbar-width: 7px;\n    --slider-input-min-width: 50px;\n    --color-input-min-width: 65px;\n  }\n}\n.lil-gui.force-touch-styles, .lil-gui.force-touch-styles .lil-gui {\n  --widget-height: 28px;\n  --padding: 6px;\n  --spacing: 6px;\n  --font-size: 13px;\n  --input-font-size: 16px;\n  --folder-indent: 10px;\n  --scrollbar-width: 7px;\n  --slider-input-min-width: 50px;\n  --color-input-min-width: 65px;\n}\n.lil-gui.autoPlace {\n  max-height: 100%;\n  position: fixed;\n  top: 0;\n  right: 15px;\n  z-index: 1001;\n}\n\n.lil-gui .controller {\n  display: flex;\n  align-items: center;\n  padding: 0 var(--padding);\n  margin: var(--spacing) 0;\n}\n.lil-gui .controller.disabled {\n  opacity: 0.5;\n}\n.lil-gui .controller.disabled, .lil-gui .controller.disabled * {\n  pointer-events: none !important;\n}\n.lil-gui .controller > .name {\n  min-width: var(--name-width);\n  flex-shrink: 0;\n  white-space: pre;\n  padding-right: var(--spacing);\n  line-height: var(--widget-height);\n}\n.lil-gui .controller .widget {\n  position: relative;\n  display: flex;\n  align-items: center;\n  width: 100%;\n  min-height: var(--widget-height);\n}\n.lil-gui .controller.string input {\n  color: var(--string-color);\n}\n.lil-gui .controller.boolean .widget {\n  cursor: pointer;\n}\n.lil-gui .controller.color .display {\n  width: 100%;\n  height: var(--widget-height);\n  border-radius: var(--widget-border-radius);\n  position: relative;\n}\n@media (hover: hover) {\n  .lil-gui .controller.color .display:hover:before {\n    content: \" \";\n    display: block;\n    position: absolute;\n    border-radius: var(--widget-border-radius);\n    border: 1px solid rgba(255, 255, 255, 0.6);\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n  }\n}\n.lil-gui .controller.color input[type=color] {\n  opacity: 0;\n  width: 100%;\n  height: 100%;\n  cursor: pointer;\n}\n.lil-gui .controller.color input[type=text] {\n  margin-left: var(--spacing);\n  font-family: var(--font-family-mono);\n  min-width: var(--color-input-min-width);\n  width: var(--color-input-width);\n  flex-shrink: 0;\n}\n.lil-gui .controller.option select {\n  opacity: 0;\n  position: absolute;\n  width: 100%;\n  max-width: 100%;\n}\n.lil-gui .controller.option .display {\n  position: relative;\n  pointer-events: none;\n  border-radius: var(--widget-border-radius);\n  height: var(--widget-height);\n  line-height: var(--widget-height);\n  max-width: 100%;\n  overflow: hidden;\n  word-break: break-all;\n  padding-left: 0.55em;\n  padding-right: 1.75em;\n  background: var(--widget-color);\n}\n@media (hover: hover) {\n  .lil-gui .controller.option .display.focus {\n    background: var(--focus-color);\n  }\n}\n.lil-gui .controller.option .display.active {\n  background: var(--focus-color);\n}\n.lil-gui .controller.option .display:after {\n  font-family: \"lil-gui\";\n  content: \"↕\";\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  padding-right: 0.375em;\n}\n.lil-gui .controller.option .widget,\n.lil-gui .controller.option select {\n  cursor: pointer;\n}\n@media (hover: hover) {\n  .lil-gui .controller.option .widget:hover .display {\n    background: var(--hover-color);\n  }\n}\n.lil-gui .controller.number input {\n  color: var(--number-color);\n}\n.lil-gui .controller.number.hasSlider input {\n  margin-left: var(--spacing);\n  width: var(--slider-input-width);\n  min-width: var(--slider-input-min-width);\n  flex-shrink: 0;\n}\n.lil-gui .controller.number .slider {\n  width: 100%;\n  height: var(--widget-height);\n  background-color: var(--widget-color);\n  border-radius: var(--widget-border-radius);\n  padding-right: var(--slider-knob-width);\n  overflow: hidden;\n  cursor: ew-resize;\n  touch-action: pan-y;\n}\n@media (hover: hover) {\n  .lil-gui .controller.number .slider:hover {\n    background-color: var(--hover-color);\n  }\n}\n.lil-gui .controller.number .slider.active {\n  background-color: var(--focus-color);\n}\n.lil-gui .controller.number .slider.active .fill {\n  opacity: 0.95;\n}\n.lil-gui .controller.number .fill {\n  height: 100%;\n  border-right: var(--slider-knob-width) solid var(--number-color);\n  box-sizing: content-box;\n}\n.lil-gui .controller.texture canvas {\n  width: 100%;\n  border-radius: var(--widget-border-radius);\n}\n.lil-gui .controller.texture .group {\n  display: flex;\n  position: relative;\n  width: 100%;\n}\n.lil-gui .controller.texture .info {\n  position: absolute;\n  display: flex;\n  gap: 11px;\n}\n.lil-gui .controller.texture .label {\n  position: absolute;\n  background-color: rgba(0, 0, 0, 0.6745098039);\n  display: \"flex\";\n  padding: 2px;\n  border-radius: var(--widget-border-radius);\n}\n.lil-gui .controller.texture .block {\n  position: absolute;\n  left: 50%;\n  transform: translateX(-50%);\n  margin-top: 2px;\n  width: var(--font-size);\n  height: var(--font-size);\n  border-radius: var(--font-size);\n  background-color: white;\n  cursor: pointer;\n}\n.lil-gui .controller.texture .block.select {\n  background-color: var(--string-color);\n}\n.lil-gui .controller.image img {\n  width: 100%;\n}\n.lil-gui .controller.image canvas {\n  width: 100%;\n}\n.lil-gui .controller.vector input {\n  color: var(--number-color);\n}\n.lil-gui .controller.vector .fill {\n  height: 100%;\n  margin-left: var(--spacing);\n  box-sizing: content-box;\n}\n\n.lil-gui-dragging .lil-gui {\n  --hover-color: var(--widget-color);\n}\n.lil-gui-dragging * {\n  cursor: ew-resize !important;\n}\n\n.lil-gui-dragging.lil-gui-vertical * {\n  cursor: ns-resize !important;\n}\n\n.lil-gui .title {\n  height: var(--title-height);\n  line-height: calc(var(--title-height) - 4px);\n  font-weight: 600;\n  padding: 0 var(--padding);\n  -webkit-tap-highlight-color: transparent;\n  cursor: pointer;\n  outline: none;\n  text-decoration-skip: objects;\n}\n.lil-gui .title:before {\n  font-family: \"lil-gui\";\n  content: \"▾\";\n  padding-right: 2px;\n  display: inline-block;\n}\n.lil-gui .title:active {\n  background: var(--title-background-color);\n  opacity: 0.75;\n}\n@media (hover: hover) {\n  body:not(.lil-gui-dragging) .lil-gui .title:hover {\n    background: var(--title-background-color);\n    opacity: 0.85;\n  }\n  .lil-gui .title:focus {\n    text-decoration: underline var(--focus-color);\n  }\n}\n.lil-gui.root > .title:focus {\n  text-decoration: none !important;\n}\n.lil-gui.closed > .title:before {\n  content: \"▸\";\n}\n.lil-gui.closed > .children {\n  transform: translateY(-7px);\n  opacity: 0;\n}\n.lil-gui.closed:not(.transition) > .children {\n  display: none;\n}\n.lil-gui.transition > .children {\n  transition-duration: 300ms;\n  transition-property: height, opacity, transform;\n  transition-timing-function: cubic-bezier(0.2, 0.6, 0.35, 1);\n  overflow: hidden;\n  pointer-events: none;\n}\n.lil-gui .children:empty:before {\n  content: \"Empty\";\n  padding: 0 var(--padding);\n  margin: var(--spacing) 0;\n  display: block;\n  height: var(--widget-height);\n  font-style: italic;\n  line-height: var(--widget-height);\n  opacity: 0.5;\n}\n.lil-gui.root > .children > .lil-gui > .title {\n  border: 0 solid var(--widget-color);\n  border-width: 1px 0;\n  transition: border-color 300ms;\n}\n.lil-gui.root > .children > .lil-gui.closed > .title {\n  border-bottom-color: transparent;\n}\n.lil-gui + .controller {\n  border-top: 1px solid var(--widget-color);\n  margin-top: 0;\n  padding-top: var(--spacing);\n}\n.lil-gui .lil-gui .lil-gui > .title {\n  border: none;\n}\n.lil-gui .lil-gui .lil-gui > .children {\n  border: none;\n  margin-left: var(--folder-indent);\n  border-left: 2px solid var(--widget-color);\n}\n.lil-gui .lil-gui .controller {\n  border: none;\n}\n\n.lil-gui input {\n  -webkit-tap-highlight-color: transparent;\n  border: 0;\n  outline: none;\n  font-family: var(--font-family);\n  font-size: var(--input-font-size);\n  border-radius: var(--widget-border-radius);\n  height: var(--widget-height);\n  background: var(--widget-color);\n  color: var(--text-color);\n  width: 100%;\n}\n@media (hover: hover) {\n  .lil-gui input:hover {\n    background: var(--hover-color);\n  }\n  .lil-gui input:active {\n    background: var(--focus-color);\n  }\n}\n.lil-gui input:disabled {\n  opacity: 1;\n}\n.lil-gui input[type=text],\n.lil-gui input[type=number] {\n  padding: var(--widget-padding);\n}\n.lil-gui input[type=text]:focus,\n.lil-gui input[type=number]:focus {\n  background: var(--focus-color);\n}\n.lil-gui input::-webkit-outer-spin-button,\n.lil-gui input::-webkit-inner-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\n.lil-gui input[type=number] {\n  -moz-appearance: textfield;\n}\n.lil-gui input[type=checkbox] {\n  appearance: none;\n  -webkit-appearance: none;\n  height: var(--checkbox-size);\n  width: var(--checkbox-size);\n  border-radius: var(--widget-border-radius);\n  text-align: center;\n  cursor: pointer;\n}\n.lil-gui input[type=checkbox]:checked:before {\n  font-family: \"lil-gui\";\n  content: \"✓\";\n  font-size: var(--checkbox-size);\n  line-height: var(--checkbox-size);\n}\n@media (hover: hover) {\n  .lil-gui input[type=checkbox]:focus {\n    box-shadow: inset 0 0 0 1px var(--focus-color);\n  }\n}\n.lil-gui button {\n  -webkit-tap-highlight-color: transparent;\n  outline: none;\n  cursor: pointer;\n  font-family: var(--font-family);\n  font-size: var(--font-size);\n  color: var(--text-color);\n  width: 100%;\n  height: var(--widget-height);\n  text-transform: none;\n  background: var(--widget-color);\n  border-radius: var(--widget-border-radius);\n  border: 1px solid var(--widget-color);\n  text-align: center;\n  line-height: calc(var(--widget-height) - 4px);\n}\n@media (hover: hover) {\n  .lil-gui button:hover {\n    background: var(--hover-color);\n    border-color: var(--hover-color);\n  }\n  .lil-gui button:focus {\n    border-color: var(--focus-color);\n  }\n}\n.lil-gui button:active {\n  background: var(--focus-color);\n}\n\n@font-face {\n  font-family: \"lil-gui\";\n  src: url(\"data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAAUsAAsAAAAACJwAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAAH4AAADAImwmYE9TLzIAAAGIAAAAPwAAAGBKqH5SY21hcAAAAcgAAAD0AAACrukyyJBnbHlmAAACvAAAAF8AAACEIZpWH2hlYWQAAAMcAAAAJwAAADZfcj2zaGhlYQAAA0QAAAAYAAAAJAC5AHhobXR4AAADXAAAABAAAABMAZAAAGxvY2EAAANsAAAAFAAAACgCEgIybWF4cAAAA4AAAAAeAAAAIAEfABJuYW1lAAADoAAAASIAAAIK9SUU/XBvc3QAAATEAAAAZgAAAJCTcMc2eJxVjbEOgjAURU+hFRBK1dGRL+ALnAiToyMLEzFpnPz/eAshwSa97517c/MwwJmeB9kwPl+0cf5+uGPZXsqPu4nvZabcSZldZ6kfyWnomFY/eScKqZNWupKJO6kXN3K9uCVoL7iInPr1X5baXs3tjuMqCtzEuagm/AAlzQgPAAB4nGNgYRBlnMDAysDAYM/gBiT5oLQBAwuDJAMDEwMrMwNWEJDmmsJwgCFeXZghBcjlZMgFCzOiKOIFAB71Bb8AeJy1kjFuwkAQRZ+DwRAwBtNQRUGKQ8OdKCAWUhAgKLhIuAsVSpWz5Bbkj3dEgYiUIszqWdpZe+Z7/wB1oCYmIoboiwiLT2WjKl/jscrHfGg/pKdMkyklC5Zs2LEfHYpjcRoPzme9MWWmk3dWbK9ObkWkikOetJ554fWyoEsmdSlt+uR0pCJR34b6t/TVg1SY3sYvdf8vuiKrpyaDXDISiegp17p7579Gp3p++y7HPAiY9pmTibljrr85qSidtlg4+l25GLCaS8e6rRxNBmsnERunKbaOObRz7N72ju5vdAjYpBXHgJylOAVsMseDAPEP8LYoUHicY2BiAAEfhiAGJgZWBgZ7RnFRdnVJELCQlBSRlATJMoLV2DK4glSYs6ubq5vbKrJLSbGrgEmovDuDJVhe3VzcXFwNLCOILB/C4IuQ1xTn5FPilBTj5FPmBAB4WwoqAHicY2BkYGAA4sk1sR/j+W2+MnAzpDBgAyEMQUCSg4EJxAEAwUgFHgB4nGNgZGBgSGFggJMhDIwMqEAYAByHATJ4nGNgAIIUNEwmAABl3AGReJxjYAACIQYlBiMGJ3wQAEcQBEV4nGNgZGBgEGZgY2BiAAEQyQWEDAz/wXwGAAsPATIAAHicXdBNSsNAHAXwl35iA0UQXYnMShfS9GPZA7T7LgIu03SSpkwzYTIt1BN4Ak/gKTyAeCxfw39jZkjymzcvAwmAW/wgwHUEGDb36+jQQ3GXGot79L24jxCP4gHzF/EIr4jEIe7wxhOC3g2TMYy4Q7+Lu/SHuEd/ivt4wJd4wPxbPEKMX3GI5+DJFGaSn4qNzk8mcbKSR6xdXdhSzaOZJGtdapd4vVPbi6rP+cL7TGXOHtXKll4bY1Xl7EGnPtp7Xy2n00zyKLVHfkHBa4IcJ2oD3cgggWvt/V/FbDrUlEUJhTn/0azVWbNTNr0Ens8de1tceK9xZmfB1CPjOmPH4kitmvOubcNpmVTN3oFJyjzCvnmrwhJTzqzVj9jiSX911FjeAAB4nG3HMRKCMBBA0f0giiKi4DU8k0V2GWbIZDOh4PoWWvq6J5V8If9NVNQcaDhyouXMhY4rPTcG7jwYmXhKq8Wz+p762aNaeYXom2n3m2dLTVgsrCgFJ7OTmIkYbwIbC6vIB7WmFfAAAA==\") format(\"woff\");\n}\n.curve-editor {\n  display: flex;\n  flex-direction: column;\n  gap: 5px;\n  background-color: #303030;\n  outline: 1px solid #000000;\n  padding: 5px;\n  width: 100%;\n}\n.curve-editor .button-medium {\n  background-color: #545454;\n  min-width: var(--widget-height);\n  min-height: var(--widget-height);\n  height: 100%;\n  outline: 1px solid #3c3c3c;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  color: #fff;\n  font-size: var(--input-font-size, 11px);\n}\n.curve-editor .button-medium.selected {\n  background-color: #4772b3;\n  pointer-events: none;\n}\n.curve-editor .button-medium:hover {\n  background-color: #656565;\n  cursor: default;\n}\n.curve-editor .curve-top {\n  display: flex;\n  width: 100%;\n}\n.curve-editor .curve-panel {\n  width: 100%;\n  height: 90px;\n  outline: 1px solid #646464;\n}\n.curve-editor .curve-point-panel {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  height: var(--widget-height);\n}\n.curve-editor .curve-point-panel input {\n  background-color: #545454;\n  height: 100%;\n  width: 100%;\n  color: #fff;\n  border: 0;\n  outline: 1px solid #3c3c3c;\n  text-align: center;\n  font-size: var(--input-font-size, 11px);\n}";
+var css = "/* lil-gui CSS - Main entry point */\n\n/* Import all CSS modules */\n/* Base styles and CSS variables for lil-gui */\n/* Font face for icons */\n@font-face {\n\tfont-family: 'lil-gui';\n\tsrc: 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/* CSS Variables - Unified Theme */\n:root {\n\t/* Colors */\n\t--bg-primary: #2a2a2a;\n\t--bg-secondary: #1e1e1e;\n\t--bg-tertiary: #323232;\n\t--bg-widget: #3c3c3c;\n\t--bg-hover: #4a4a4a;\n\t--bg-focus: #4d90fe;\n\t--bg-active: #4d90fe;\n\t--bg-selected: #185fbd;\n\n\t--text-primary: #d9d9d9;\n\t--text-muted: #a0a0a0;\n\t--text-number: #d9d9d9;\n\t--text-string: #a2db3c;\n\t--text-warning: #ff8c00;\n\t--text-error: #ff6b6b;\n\t--text-success: #4caf50;\n\n\t/* Typography */\n\t--font-size: 12px;\n\t--font-size-input: 12px;\n\t--font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;\n\t--font-family-mono: Menlo, Monaco, Consolas, 'Droid Sans Mono', monospace;\n\n\t/* Layout */\n\t--padding: 4px;\n\t--spacing: 4px;\n\t--widget-height: 20px;\n\t--title-height: 25px;\n\t--name-width: 40%;\n\t--border-radius: 2px;\n\n\t/* Components */\n\t--slider-knob-width: 2px;\n\t--slider-input-width: 27%;\n\t--color-input-width: 27%;\n\t--slider-input-min-width: 45px;\n\t--color-input-min-width: 65px;\n\t--folder-indent: 7px;\n\t--checkbox-size: 15px;\n\t--scrollbar-width: 5px;\n\n\t/* Effects */\n\t--text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);\n\t--text-shadow-light: 0 1px 1px rgba(0, 0, 0, 0.6);\n}\n/* Touch device overrides */\n@media (pointer: coarse) {\n\t:root {\n\t\t--widget-height: 28px;\n\t\t--padding: 6px;\n\t\t--spacing: 6px;\n\t\t--font-size: 13px;\n\t\t--font-size-input: 16px;\n\t\t--folder-indent: 10px;\n\t\t--scrollbar-width: 7px;\n\t\t--slider-input-min-width: 50px;\n\t\t--color-input-min-width: 65px;\n\t}\n}\n/* Base styles */\n.lil-gui {\n\tfont-family: var(--font-family);\n\tfont-size: var(--font-size);\n\tline-height: 1;\n\tfont-weight: normal;\n\tfont-style: normal;\n\ttext-align: left;\n\tbackground-color: var(--bg-primary);\n\tcolor: var(--text-primary);\n\tuser-select: none;\n\t-webkit-user-select: none;\n\ttouch-action: manipulation;\n\ttext-shadow: var(--text-shadow);\n}\n.lil-gui,\n.lil-gui * {\n\tbox-sizing: border-box;\n\tmargin: 0;\n\tborder-radius: var(--border-radius);\n\tpadding: 1px 0;\n}\n/* Root container */\n.lil-gui.root {\n\twidth: var(--width, 245px);\n\tdisplay: flex;\n\tflex-direction: column;\n}\n.lil-gui.root>.title {\n\tbackground: var(--bg-secondary);\n\tcolor: var(--text-primary);\n\tmargin: 1px 2px;\n}\n.lil-gui.root>.children {\n\toverflow-x: hidden;\n\toverflow-y: auto;\n\tpadding: 0 2px 0;\n\tmargin: 0;\n}\n/* Scrollbar styles */\n.lil-gui.root>.children::-webkit-scrollbar,\n.scene-tree-container::-webkit-scrollbar {\n\twidth: var(--scrollbar-width);\n\theight: var(--scrollbar-width);\n\tbackground: var(--bg-primary);\n}\n.lil-gui.root>.children::-webkit-scrollbar-thumb,\n.scene-tree-container::-webkit-scrollbar-thumb {\n\tborder-radius: var(--scrollbar-width);\n\tbackground: var(--bg-focus);\n}\n.scene-tree-container::-webkit-scrollbar-thumb:hover {\n\tbackground: var(--text-primary);\n}\n/* Auto placement */\n.lil-gui.autoPlace {\n\tmax-height: 100%;\n\tposition: fixed;\n\ttop: 0;\n\tright: 15px;\n\tz-index: 1001;\n}\n/* Title styles */\n.lil-gui .title {\n\theight: var(--title-height);\n\tline-height: calc(var(--title-height) - 4px);\n\tfont-weight: normal;\n\tfont-size: var(--font-size);\n\tpadding: 0 var(--padding);\n\t-webkit-tap-highlight-color: transparent;\n\tcursor: pointer;\n\toutline: none;\n\ttext-decoration-skip: objects;\n\ttext-shadow: var(--text-shadow);\n}\n.lil-gui .title:before {\n\tfont-family: 'lil-gui';\n\tcontent: '▾';\n\tpadding-right: 2px;\n\tdisplay: inline-block;\n}\n/* Title states */\n.lil-gui .title:hover,\n.lil-gui .title:focus,\n.lil-gui .title:active {\n\tbackground: var(--bg-hover);\n\ttext-decoration: none;\n}\n.lil-gui .title:active {\n\topacity: 0.75;\n}\n/* Closed state */\n.lil-gui.closed>.title:before {\n\tcontent: '▸';\n}\n.lil-gui.closed>.children {\n\ttransform: translateY(-7px);\n\topacity: 0;\n}\n.lil-gui.closed:not(.transition)>.children {\n\tdisplay: none;\n}\n/* Transition state */\n.lil-gui.transition>.children {\n\ttransition: height 300ms, opacity 300ms, transform 300ms;\n\ttransition-timing-function: cubic-bezier(0.2, 0.6, 0.35, 1);\n\toverflow: hidden;\n\tpointer-events: none;\n}\n/* Empty children */\n.lil-gui .children:empty:before {\n\tcontent: 'Empty';\n\tpadding: 0 var(--padding);\n\tmargin: var(--spacing) 0;\n\tdisplay: block;\n\theight: var(--widget-height);\n\tfont-style: italic;\n\tline-height: var(--widget-height);\n\topacity: 0.5;\n}\n/* Dragging state */\n.lil-gui-dragging .lil-gui {\n\t--bg-hover: var(--bg-widget);\n}\n.lil-gui-dragging * {\n\tcursor: ew-resize !important;\n}\n.lil-gui-dragging.lil-gui-vertical * {\n\tcursor: ns-resize !important;\n}\n/* Controller styles for lil-gui */\n/* Base controller */\n.lil-gui .controller {\n\tdisplay: flex;\n\talign-items: center;\n\tpadding: 0 var(--padding);\n\tmargin: 0;\n}\n.lil-gui .controller.disabled {\n\topacity: 0.5;\n\tpointer-events: none !important;\n}\n.lil-gui .controller > .name {\n\tmin-width: var(--name-width);\n\tflex-shrink: 0;\n\twhite-space: pre;\n\tpadding-right: var(--spacing);\n\tline-height: var(--widget-height);\n\ttext-shadow: var(--text-shadow-light);\n}\n.lil-gui .controller .widget {\n\tposition: relative;\n\tdisplay: flex;\n\talign-items: center;\n\twidth: 100%;\n\tmin-height: var(--widget-height);\n}\n/* String controller */\n.lil-gui .controller.string input {\n\tcolor: var(--text-string);\n}\n/* Boolean controller */\n.lil-gui .controller.boolean .widget {\n\tcursor: pointer;\n}\n/* Color controller */\n.lil-gui .controller.color .display {\n\twidth: 100%;\n\theight: var(--widget-height);\n\tborder-radius: var(--border-radius);\n\tposition: relative;\n}\n.lil-gui .controller.color .display:hover:before {\n\tcontent: ' ';\n\tdisplay: block;\n\tposition: absolute;\n\tborder-radius: var(--border-radius);\n\tborder: 1px solid #fff9;\n\ttop: 0;\n\tright: 0;\n\tbottom: 0;\n\tleft: 0;\n}\n.lil-gui .controller.color input[type='color'] {\n\topacity: 0;\n\twidth: 100%;\n\theight: 100%;\n\tcursor: pointer;\n}\n.lil-gui .controller.color input[type='text'] {\n\tmargin-left: var(--spacing);\n\tfont-family: var(--font-family-mono);\n\tmin-width: var(--color-input-min-width);\n\twidth: var(--color-input-width);\n\tflex-shrink: 0;\n}\n/* Option controller */\n.lil-gui .controller.option select {\n\topacity: 0;\n\tposition: absolute;\n\twidth: 100%;\n\tmax-width: 100%;\n}\n.lil-gui .controller.option .display {\n\tposition: relative;\n\tpointer-events: none;\n\tborder-radius: var(--border-radius);\n\theight: var(--widget-height);\n\tline-height: var(--widget-height);\n\tmax-width: 100%;\n\toverflow: hidden;\n\tword-break: break-all;\n\tpadding-left: 0.55em;\n\tpadding-right: 1.75em;\n\tbackground: var(--bg-widget);\n\ttext-shadow: var(--text-shadow);\n}\n.lil-gui .controller.option .display.focus,\n.lil-gui .controller.option .display.active {\n\tbackground: var(--bg-focus);\n}\n.lil-gui .controller.option .display:after {\n\tfont-family: 'lil-gui';\n\tcontent: '↕';\n\tposition: absolute;\n\ttop: 0;\n\tright: 0;\n\tbottom: 0;\n\tpadding-right: 0.375em;\n}\n.lil-gui .controller.option .widget,\n.lil-gui .controller.option select {\n\tcursor: pointer;\n}\n.lil-gui .controller.option .widget:hover .display {\n\tbackground: var(--bg-hover);\n}\n/* Number controller */\n.lil-gui .controller.number input {\n\tcolor: var(--text-number);\n}\n.lil-gui .controller.number.hasSlider input {\n\tmargin-left: var(--spacing);\n\twidth: var(--slider-input-width);\n\tmin-width: var(--slider-input-min-width);\n\tflex-shrink: 0;\n}\n.lil-gui .controller.number .slider {\n\twidth: 100%;\n\theight: var(--widget-height);\n\tbackground-color: var(--bg-widget);\n\tborder-radius: var(--border-radius);\n\tpadding-right: var(--slider-knob-width);\n\toverflow: hidden;\n\tcursor: ew-resize;\n\ttouch-action: pan-y;\n}\n.lil-gui .controller.number .slider:hover {\n\tbackground-color: var(--bg-hover);\n}\n.lil-gui .controller.number .slider.active {\n\tbackground-color: var(--bg-active);\n}\n.lil-gui .controller.number .slider.active .fill {\n\topacity: 0.95;\n}\n.lil-gui .controller.number .fill {\n\theight: 100%;\n\tborder-right: var(--slider-knob-width) solid var(--text-number);\n\tbox-sizing: content-box;\n}\n/* Texture controller */\n.lil-gui .controller.texture canvas {\n\twidth: 100%;\n\tborder-radius: var(--border-radius);\n}\n.lil-gui .controller.texture .group {\n\tdisplay: flex;\n\tposition: relative;\n\twidth: 100%;\n}\n.lil-gui .controller.texture .info {\n\tposition: absolute;\n\tdisplay: flex;\n\tgap: 11px;\n}\n.lil-gui .controller.texture .label {\n\tposition: absolute;\n\tbackground-color: #000000ac;\n\tdisplay: flex;\n\tpadding: 2px;\n\tborder-radius: var(--border-radius);\n}\n.lil-gui .controller.texture .block {\n\tposition: absolute;\n\tleft: 50%;\n\ttransform: translateX(-50%);\n\tmargin-top: 2px;\n\twidth: var(--font-size);\n\theight: var(--font-size);\n\tborder-radius: var(--font-size);\n\tbackground-color: white;\n\tcursor: pointer;\n}\n.lil-gui .controller.texture .block.select {\n\tbackground-color: var(--text-string);\n}\n/* Image controller */\n.lil-gui .controller.image img,\n.lil-gui .controller.image canvas {\n\twidth: 100%;\n}\n/* Vector controller */\n.lil-gui .controller.vector input {\n\tcolor: var(--text-number);\n}\n.lil-gui .controller.vector .fill {\n\theight: 100%;\n\tmargin-left: var(--spacing);\n\tbox-sizing: content-box;\n}\n/* Input and form control styles for lil-gui */\n/* Base input styles */\n.lil-gui input {\n\t-webkit-tap-highlight-color: transparent;\n\tborder: 0;\n\toutline: none;\n\tfont-family: var(--font-family);\n\tfont-size: var(--font-size-input);\n\tborder-radius: var(--border-radius);\n\theight: var(--widget-height);\n\tbackground: var(--bg-widget);\n\tcolor: var(--text-primary);\n\twidth: 100%;\n\ttext-shadow: var(--text-shadow-light);\n}\n.lil-gui input:hover {\n\tbackground: var(--bg-hover);\n}\n.lil-gui input:focus {\n\tbackground: var(--bg-focus);\n}\n.lil-gui input:disabled {\n\topacity: 1;\n}\n/* Text and number inputs */\n.lil-gui input[type='text'],\n.lil-gui input[type='number'] {\n\tpadding: 0 0 0 3px;\n}\n/* Hide number spinners */\n.lil-gui input::-webkit-outer-spin-button,\n.lil-gui input::-webkit-inner-spin-button {\n\t-webkit-appearance: none;\n\tmargin: 0;\n}\n.lil-gui input[type='number'] {\n\t-moz-appearance: textfield;\n}\n/* Checkbox */\n.lil-gui input[type='checkbox'] {\n\tappearance: none;\n\t-webkit-appearance: none;\n\theight: var(--checkbox-size);\n\twidth: var(--checkbox-size);\n\tborder-radius: var(--border-radius);\n\ttext-align: center;\n\tcursor: pointer;\n}\n.lil-gui input[type='checkbox']:checked:before {\n\tfont-family: 'lil-gui';\n\tcontent: '✓';\n\tfont-size: var(--checkbox-size);\n\tline-height: var(--checkbox-size);\n}\n.lil-gui input[type='checkbox']:focus {\n\tbox-shadow: inset 0 0 0 1px var(--bg-active);\n}\n/* Button */\n.lil-gui button {\n\t-webkit-tap-highlight-color: transparent;\n\toutline: none;\n\tcursor: pointer;\n\tfont-family: var(--font-family);\n\tfont-size: var(--font-size);\n\tcolor: var(--text-primary);\n\twidth: 100%;\n\theight: var(--widget-height);\n\ttext-transform: none;\n\tbackground: var(--bg-widget);\n\tborder-radius: var(--border-radius);\n\tborder: 1px solid var(--bg-widget);\n\ttext-align: center;\n\tline-height: calc(var(--widget-height) - 4px);\n\ttext-shadow: var(--text-shadow);\n}\n.lil-gui button:hover {\n\tbackground: var(--bg-hover);\n\tborder-color: var(--bg-hover);\n}\n.lil-gui button:focus {\n\tborder-color: var(--bg-active);\n}\n.lil-gui button:active {\n\tbackground: var(--bg-active);\n}\n/* Curve editor styles for lil-gui */\n.curve-editor {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 5px;\n\tbackground-color: var(--bg-tertiary);\n\toutline: 1px solid #000000;\n\tpadding: 5px;\n\twidth: 100%;\n}\n.curve-editor .button-medium {\n\tbackground-color: #545454;\n\tmin-width: var(--widget-height);\n\tmin-height: var(--widget-height);\n\theight: 100%;\n\toutline: 1px solid var(--bg-widget);\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tcolor: #fff;\n\tfont-size: var(--font-size-input);\n}\n.curve-editor .button-medium.selected {\n\tbackground-color: var(--bg-active);\n\tpointer-events: none;\n}\n.curve-editor .button-medium:hover {\n\tbackground-color: #656565;\n\tcursor: default;\n}\n.curve-editor .curve-top {\n\tdisplay: flex;\n\twidth: 100%;\n}\n.curve-editor .curve-panel {\n\twidth: 100%;\n\theight: 90px;\n\toutline: 1px solid #646464;\n}\n.curve-editor .curve-point-panel {\n\tdisplay: flex;\n\talign-items: center;\n\twidth: 100%;\n\theight: var(--widget-height);\n}\n.curve-editor .curve-point-panel input {\n\tbackground-color: #545454;\n\theight: 100%;\n\twidth: 100%;\n\tcolor: #fff;\n\tborder: 0;\n\toutline: 1px solid var(--bg-widget);\n\ttext-align: center;\n\tfont-size: var(--font-size-input);\n}\n/* Scene Tree Controller Styles */\n/* Base styles for scene tree */\n.scene-tree-container,\n.scene-tree-controller {\n\twidth: 100%;\n}\n.scene-tree-container {\n\theight: 100%;\n\toverflow-y: auto;\n\toverflow-x: hidden;\n\tposition: relative;\n\tpadding: 0;\n}\n.scene-tree-controller {\n\tfont-family: var(--font-family);\n\tfont-size: var(--font-size);\n\tmax-height: 300px;\n\toverflow-y: auto;\n\tborder: none;\n\tpadding: 0 !important;\n}\n/* Scene tree node */\n.scene-tree-controller .scene-tree-node {\n\ttransition: background-color 200ms ease;\n\tborder-radius: 0;\n\tpadding: 2px var(--padding);\n\tmargin: 0;\n\tdisplay: flex;\n\talign-items: center;\n\tcursor: pointer;\n\tuser-select: none;\n\tmin-height: 24px;\n\twidth: 100%;\n\tbox-sizing: border-box;\n\tposition: relative;\n\theight: var(--title-height);\n\tline-height: calc(var(--title-height) - 4px);\n}\n/* Alternating background colors */\n.scene-tree-controller .scene-tree-node.even-row {\n\tbackground-color: var(--bg-primary);\n}\n.scene-tree-controller .scene-tree-node.odd-row {\n\tbackground-color: var(--bg-tertiary);\n}\n.scene-tree-controller .scene-tree-node:hover {\n\tbackground-color: var(--bg-hover);\n}\n.scene-tree-controller .scene-tree-node.selected {\n\tbackground-color: var(--bg-active);\n\tcolor: #ffffff;\n}\n/* Expand button */\n.scene-tree-controller .scene-tree-node .expand-btn {\n\tcursor: pointer;\n\tuser-select: none;\n\ttransition: all 300ms;\n\tdisplay: inline-block;\n\theight: 16px;\n\tflex-shrink: 0;\n\tfont-family: 'lil-gui';\n\tfont-size: var(--font-size);\n\tline-height: 1;\n\tcolor: var(--text-primary);\n\ttext-align: center;\n\topacity: 0.8;\n}\n.scene-tree-controller .scene-tree-node .expand-btn:hover {\n\topacity: 1;\n}\n/* Visibility button */\n.scene-tree-controller .scene-tree-node .visibility-btn {\n\tcursor: pointer;\n\tuser-select: none;\n\ttransition: all 300ms;\n\tdisplay: inline-flex;\n\talign-items: center;\n\tjustify-content: center;\n\twidth: 16px;\n\theight: 16px;\n\tborder-radius: var(--border-radius);\n\tmargin-left: auto;\n\tflex-shrink: 0;\n\topacity: 0.8;\n}\n.scene-tree-controller .scene-tree-node .visibility-btn:hover {\n\tbackground-color: var(--bg-secondary);\n\topacity: 0.8;\n}\n.scene-tree-controller .scene-tree-node .visibility-btn svg {\n\twidth: 16px;\n\theight: 16px;\n\tfill: var(--text-primary);\n}\n.scene-tree-controller .scene-tree-node .visibility-btn.hidden svg {\n\topacity: 0.6;\n}\n.scene-tree-controller .scene-tree-node .visibility-btn:hover {\n\topacity: 1;\n}\n/* Node info */\n.scene-tree-controller .scene-tree-node .node-info {\n\tflex: 1;\n\toverflow: hidden;\n\ttext-overflow: ellipsis;\n\twhite-space: nowrap;\n\tcolor: var(--text-primary);\n\tfont-size: var(--font-size);\n\tmargin-right: var(--spacing);\n\tmin-width: 0;\n\tpadding-left: 0;\n\ttext-shadow: var(--text-shadow);\n}\n/* Context Menu Styles - Blender-inspired */\n.scene-tree-context-menu {\n\tposition: fixed;\n\tbackground: #202020;\n\tborder-radius: 2px;\n\tbox-shadow: 0 4px 20px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.05);\n\tz-index: 10000;\n\tmin-width: 100px;\n\tpadding: 4px;\n\tfont-family: var(--font-family);\n\tfont-size: var(--font-size);\n\tcolor: #e0e0e0;\n}\n.scene-tree-context-menu .context-menu-item {\n\theight: 20px;\n\tline-height: 20px;\n\tpadding: 0 16px;\n\tcursor: pointer;\n\tdisplay: flex;\n\talign-items: center;\n\tcolor: #e0e0e0;\n\ttransition: all 0.1s ease;\n\tuser-select: none;\n\t-webkit-tap-highlight-color: transparent;\n\toutline: none;\n\ttext-decoration-skip: objects;\n\tfont-weight: 400;\n\tborder-radius: 2px;\n}\n.scene-tree-context-menu .context-menu-item:hover {\n\tbackground: #3a3a3a;\n\tcolor: #ffffff;\n}\n.scene-tree-context-menu .context-menu-item:active {\n\tbackground: #4a4a4a;\n\tcolor: #ffffff;\n}\n/* Context menu separator */\n.scene-tree-context-menu .context-menu-separator {\n\theight: 1px;\n\tbackground-color: #404040;\n\tmargin: 4px 0;\n}\n/* Disabled state for paste when clipboard is empty */\n.scene-tree-context-menu .context-menu-item.disabled {\n\topacity: 0.4;\n\tcursor: not-allowed;\n\tcolor: #808080;\n}\n.scene-tree-context-menu .context-menu-item.disabled:hover,\n.scene-tree-context-menu .context-menu-item.disabled:focus,\n.scene-tree-context-menu .context-menu-item.disabled:active {\n\tbackground: transparent;\n\tcolor: #808080;\n}\n\n\n";
 n(css,{});
 
 class Controller {
@@ -317,13 +319,7 @@ class OptionController extends Controller {
         this.$select.setAttribute('aria-labelledby', this.$name.id);
         this.$display = document.createElement('div');
         this.$display.classList.add('display');
-        this._values = Array.isArray(options) ? options : Object.values(options);
-        this._names = Array.isArray(options) ? options : Object.keys(options);
-        this._names.forEach((name)=>{
-            const $option = document.createElement('option');
-            $option.innerHTML = name;
-            this.$select.appendChild($option);
-        });
+        this.options(options);
         this.$select.addEventListener('change', ()=>{
             this.setValue(this._values[this.$select.selectedIndex]);
             this._callOnFinishChange();
@@ -881,10 +877,7 @@ class ColorController extends Controller {
         return this;
     }
     constructor(parent, object, property, rgbScale){
-        super(parent, object, property, 'color');
-        this._textFocused = false;
-        this._initialValueHexString = "";
-        this._rgbScale = 1;
+        super(parent, object, property, 'color'), this._textFocused = false, this._initialValueHexString = "", this._rgbScale = 1;
         this.$input = document.createElement('input');
         this.$input.setAttribute('type', 'color');
         this.$input.setAttribute('tabindex', "-1");
@@ -1040,13 +1033,7 @@ class UINumber extends UIElement {
         return this;
     }
     constructor(value, min, max, step){
-        super(document.createElement('input'));
-        this.value = 0;
-        this.min = -Infinity;
-        this.max = Infinity;
-        this.step = 1;
-        this.nudge = 1;
-        this.unit = "";
+        super(document.createElement('input')), this.value = 0, this.min = -Infinity, this.max = Infinity, this.step = 1, this.nudge = 1, this.unit = "";
         this.dom.style.cursor = 'ns-resize';
         this.dom.value = '0.00';
         this.min = min != null ? min : this.min;
@@ -1704,7 +1691,7 @@ class TextureController extends Controller {
                 canvas.title = texture.sourceFile || "";
                 canvas.height = canvas.width / image.width * image.height;
                 if (this.getImage) {
-                    const w = 256, h = 256 / image.width * image.height;
+                    const w = 256, h = Math.floor(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 {
@@ -1716,8 +1703,7 @@ class TextureController extends Controller {
         return this;
     }
     constructor(parent, object, property){
-        super(parent, object, property, "texture");
-        this._autoRefresh = false;
+        super(parent, object, property, "texture"), this._autoRefresh = false;
         const group = this.$widget.appendChild(document.createElement("div"));
         group.classList.add("group");
         this.$canvas = group.appendChild(document.createElement("canvas"));
@@ -1736,6 +1722,486 @@ class TextureController extends Controller {
     }
 }
 
+class SceneTreeController extends Controller {
+    _setupDOM() {
+        // Hide the name element since we don't need it for scene tree
+        this.$name.style.display = 'none';
+        this.$treeContainer = document.createElement('div');
+        this.$treeContainer.classList.add('scene-tree-container');
+        this.$widget.appendChild(this.$treeContainer);
+    }
+    _createContextMenu() {
+        this._contextMenu = document.createElement('div');
+        this._contextMenu.classList.add('scene-tree-context-menu');
+        this._contextMenu.style.display = 'none';
+        const menuItems = [
+            {
+                label: 'Export',
+                action: 'export'
+            },
+            {
+                label: 'Copy',
+                action: 'copy'
+            },
+            {
+                label: 'Paste',
+                action: 'paste'
+            }
+        ];
+        menuItems.forEach((item)=>{
+            const menuItem = document.createElement('div');
+            menuItem.classList.add('context-menu-item');
+            menuItem.dataset.action = item.action;
+            menuItem.textContent = item.label;
+            menuItem.addEventListener('click', ()=>this._handleContextMenuAction(item.action));
+            this._contextMenu.appendChild(menuItem);
+        });
+        document.body.appendChild(this._contextMenu);
+    }
+    _setupGlobalEventListeners() {
+        // Hide context menu when clicking outside
+        document.addEventListener('click', (e)=>{
+            if (this._contextMenu && !this._contextMenu.contains(e.target)) {
+                this._hideContextMenu();
+            }
+        });
+        // Hide context menu on escape key
+        document.addEventListener('keydown', (e)=>{
+            if (e.key === 'Escape') {
+                this._hideContextMenu();
+            }
+        });
+    }
+    _showContextMenu(x, y, target) {
+        if (!this._contextMenu) return;
+        this._contextMenuTarget = target;
+        this._contextMenu.style.display = 'block';
+        // Update paste menu item state based on clipboard
+        this._updateContextMenuState();
+        // Position the menu
+        const rect = this._contextMenu.getBoundingClientRect();
+        const viewportWidth = window.innerWidth;
+        const viewportHeight = window.innerHeight;
+        // Adjust position if menu would go off-screen
+        let adjustedX = x;
+        let adjustedY = y;
+        if (x + rect.width > viewportWidth) {
+            adjustedX = x - rect.width;
+        }
+        if (y + rect.height > viewportHeight) {
+            adjustedY = y - rect.height;
+        }
+        this._contextMenu.style.left = `${adjustedX}px`;
+        this._contextMenu.style.top = `${adjustedY}px`;
+    }
+    _updateContextMenuState() {
+        if (!this._contextMenu) return;
+        const pasteItem = this._contextMenu.querySelector('[data-action="paste"]');
+        if (pasteItem) {
+            if (this._clipboardData) {
+                pasteItem.classList.remove('disabled');
+                pasteItem.style.cursor = 'pointer';
+            } else {
+                pasteItem.classList.add('disabled');
+                pasteItem.style.cursor = 'not-allowed';
+            }
+        }
+    }
+    _hideContextMenu() {
+        if (this._contextMenu) {
+            this._contextMenu.style.display = 'none';
+        }
+        this._contextMenuTarget = null;
+    }
+    _handleContextMenuAction(action) {
+        if (!this._contextMenuTarget) return;
+        switch(action){
+            case 'export':
+                this._exportObject(this._contextMenuTarget);
+                break;
+            case 'copy':
+                this._copyObject(this._contextMenuTarget);
+                break;
+            case 'paste':
+                if (this._clipboardData) {
+                    this._pasteObject(this._contextMenuTarget);
+                }
+                break;
+        }
+        this._hideContextMenu();
+    }
+    _exportObject(node) {
+        try {
+            new GLTFExporter().setTextureUtils(TextureUtils).parse(node.object, (result)=>{
+                if (result instanceof ArrayBuffer) {
+                    const blob = new Blob([
+                        result
+                    ], {
+                        type: 'application/octet-stream'
+                    });
+                    const url = URL.createObjectURL(blob);
+                    const link = document.createElement('a');
+                    link.href = url;
+                    link.download = `${node.name || node.type}.glb`;
+                    link.click();
+                }
+            }, (err)=>{
+                console.log('An error happened during parsing', err);
+            }, {
+                trs: false,
+                binary: true,
+                maxTextureSize: 4096
+            });
+            console.log(`Exported object: ${node.name || node.type}`);
+        } catch (error) {
+            console.error('Failed to export object:', error);
+        }
+    }
+    _copyObject(node) {
+        try {
+            const copyData = this._serializeObject(node.object);
+            this._clipboardData = copyData;
+            // Also copy to system clipboard if possible
+            if (navigator.clipboard && navigator.clipboard.writeText) {
+                navigator.clipboard.writeText(JSON.stringify(copyData, null, 2));
+            }
+            console.log(`Copied object: ${node.name || node.type}`);
+        } catch (error) {
+            console.error('Failed to copy object:', error);
+        }
+    }
+    _pasteObject(targetNode) {
+        if (!this._clipboardData) {
+            console.warn('No object data in clipboard');
+            return;
+        }
+        try {
+            // Create a new object based on clipboard data
+            const newObject = this._deserializeObject(this._clipboardData);
+            if (newObject) {
+                // Add to the target node's parent
+                const parent = this._findParentNode(targetNode);
+                if (parent) {
+                    parent.object.add(newObject);
+                    this.refresh();
+                    console.log(`Pasted object to: ${parent.name || parent.type}`);
+                }
+            }
+        } catch (error) {
+            console.error('Failed to paste object:', error);
+        }
+    }
+    _serializeObject(obj) {
+        const serialized = {
+            type: obj.type,
+            name: obj.name,
+            uuid: obj.uuid,
+            visible: obj.visible,
+            position: obj.position.toArray(),
+            rotation: obj.rotation.toArray(),
+            scale: obj.scale.toArray(),
+            userData: obj.userData
+        };
+        // Add children if any
+        if (obj.children.length > 0) {
+            serialized.children = obj.children.map((child)=>this._serializeObject(child));
+        }
+        return serialized;
+    }
+    _deserializeObject(data) {
+        try {
+            // This is a simplified deserialization
+            // In a real implementation, you'd want to handle different object types properly
+            const obj = new Object3D();
+            obj.name = data.name || data.type;
+            obj.visible = data.visible !== undefined ? data.visible : true;
+            if (data.position) {
+                obj.position.set(data.position[0], data.position[1], data.position[2]);
+            }
+            if (data.rotation) {
+                obj.rotation.set(data.rotation[0], data.rotation[1], data.rotation[2]);
+            }
+            if (data.scale) {
+                obj.scale.set(data.scale[0], data.scale[1], data.scale[2]);
+            }
+            if (data.userData) {
+                obj.userData = {
+                    ...data.userData
+                };
+            }
+            return obj;
+        } catch (error) {
+            console.error('Failed to deserialize object:', error);
+            return null;
+        }
+    }
+    _findParentNode(node) {
+        const findParent = (current, target)=>{
+            if (current.children.includes(target)) {
+                return current;
+            }
+            for (const child of current.children){
+                const result = findParent(child, target);
+                if (result) return result;
+            }
+            return null;
+        };
+        return findParent(this._rootNode, node);
+    }
+    _buildSceneTree(scene) {
+        const buildNode = (obj)=>{
+            const children = [];
+            for(let i = 0; i < obj.children.length; i++){
+                children.push(buildNode(obj.children[i]));
+            }
+            return {
+                object: obj,
+                name: obj.name || obj.type,
+                type: obj.type,
+                visible: obj.visible,
+                children: children,
+                expanded: false
+            };
+        };
+        return buildNode(scene);
+    }
+    _renderTree() {
+        this.$treeContainer.innerHTML = '';
+        this._visibleNodeCount = 0; // Reset counter for each render
+        this._renderNode(this._rootNode, 0);
+    }
+    _renderNode(node, depth) {
+        const nodeElement = document.createElement('div');
+        nodeElement.classList.add('scene-tree-node');
+        // Remove marginLeft from the node itself to keep background full width
+        // Add alternating background colors using theme colors
+        // Use a simple counter that increments for each visible node
+        const isEvenRow = this._visibleNodeCount % 2 === 0;
+        nodeElement.classList.add(isEvenRow ? 'even-row' : 'odd-row');
+        this._visibleNodeCount++;
+        // Create a content wrapper for indentation
+        const contentWrapper = document.createElement('div');
+        contentWrapper.style.marginLeft = `${depth * 7}px`;
+        contentWrapper.style.display = 'flex';
+        contentWrapper.style.alignItems = 'center';
+        contentWrapper.style.width = '100%';
+        // Expand/collapse button
+        if (node.children.length > 0) {
+            const expandBtn = document.createElement('span');
+            expandBtn.classList.add('expand-btn');
+            expandBtn.classList.add(node.expanded ? 'expanded' : 'collapsed');
+            expandBtn.textContent = node.expanded ? '▾' : '▸';
+            expandBtn.addEventListener('click', (e)=>{
+                e.stopPropagation();
+                node.expanded = !node.expanded;
+                this._renderTree();
+            });
+            contentWrapper.appendChild(expandBtn);
+        }
+        // Node name and type
+        const nodeInfo = document.createElement('span');
+        nodeInfo.textContent = `${node.name} (${node.type})`;
+        nodeInfo.classList.add('node-info');
+        contentWrapper.appendChild(nodeInfo);
+        // Visibility toggle (moved after node name)
+        const visibilityBtn = document.createElement('span');
+        visibilityBtn.classList.add('visibility-btn');
+        visibilityBtn.classList.add(node.visible ? 'visible' : 'hidden');
+        visibilityBtn.innerHTML = node.visible ? '<svg viewBox="0 0 24 24" width="16" height="16"><path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"/></svg>' : '<svg viewBox="0 0 24 24" width="16" height="16"><path d="M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46C3.08 8.3 1.78 10.02 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78l3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z"/></svg>';
+        visibilityBtn.addEventListener('click', (e)=>{
+            e.stopPropagation();
+            node.object.visible = !node.object.visible;
+            node.visible = node.object.visible;
+            this._renderTree();
+        });
+        contentWrapper.appendChild(visibilityBtn);
+        // Add content wrapper to node
+        nodeElement.appendChild(contentWrapper);
+        // Selection indicator
+        if (this._selectedObject === node.object) {
+            nodeElement.classList.add('selected');
+        }
+        // Click to select
+        nodeElement.addEventListener('click', ()=>{
+            this._selectObject(node.object);
+        });
+        // Right-click for context menu
+        nodeElement.addEventListener('contextmenu', (e)=>{
+            e.preventDefault();
+            e.stopPropagation();
+            this._showContextMenu(e.clientX, e.clientY, node);
+        });
+        this.$treeContainer.appendChild(nodeElement);
+        // Render children if expanded
+        if (node.expanded) {
+            node.children.forEach((child)=>{
+                this._renderNode(child, depth + 1);
+            });
+        }
+    }
+    _selectObject(object) {
+        this._selectedObject = object;
+        this._renderTree();
+        if (this._onObjectSelect) {
+            this._onObjectSelect(object);
+        }
+    }
+    onObjectSelect(callback) {
+        this._onObjectSelect = callback;
+        return this;
+    }
+    refresh() {
+        this._rootNode = this._buildSceneTree(this._scene);
+        this._renderTree();
+    }
+    getSelectedObject() {
+        return this._selectedObject;
+    }
+    expandAll() {
+        const expandNode = (node)=>{
+            node.expanded = true;
+            node.children.forEach(expandNode);
+        };
+        expandNode(this._rootNode);
+        this._renderTree();
+    }
+    collapseAll() {
+        const collapseNode = (node)=>{
+            node.expanded = false;
+            node.children.forEach(collapseNode);
+        };
+        collapseNode(this._rootNode);
+        this._renderTree();
+    }
+    update() {
+        // Always update visibility states (lightweight operation)
+        this._updateVisibilityStates(this._rootNode);
+        // Only check for structural changes periodically to avoid performance issues
+        if (this._autoUpdate && this._shouldCheckForChanges()) {
+            this._checkForStructuralChanges();
+        }
+    }
+    _shouldCheckForChanges() {
+        const now = performance.now();
+        if (now - this._lastUpdateTime > this._updateInterval) {
+            this._lastUpdateTime = now;
+            return true;
+        }
+        return false;
+    }
+    setAutoUpdate(enabled) {
+        this._autoUpdate = enabled;
+    }
+    setUpdateInterval(intervalMs) {
+        this._updateInterval = intervalMs;
+    }
+    getUpdateInterval() {
+        return this._updateInterval;
+    }
+    getAutoUpdate() {
+        return this._autoUpdate;
+    }
+    forceUpdate() {
+        this._rootNode = this._buildSceneTree(this._scene);
+        this._renderTree();
+    }
+    _checkForStructuralChanges() {
+        // Use lightweight change detection instead of rebuilding the entire tree
+        if (this._hasSceneStructureChanged()) {
+            this._rebuildSceneTree();
+        }
+    }
+    _hasSceneStructureChanged() {
+        // Quick check for common changes without rebuilding the tree
+        return this._checkObjectCount() || this._checkObjectReferences();
+    }
+    _checkObjectCount() {
+        // Check if the total number of objects has changed
+        const currentCount = this._countObjects(this._scene);
+        if (currentCount !== this._cachedObjectCount) {
+            this._cachedObjectCount = currentCount;
+            return true;
+        }
+        return false;
+    }
+    _checkObjectReferences() {
+        // Check if any object references have changed (objects added/removed)
+        return this._scene.children.length !== this._rootNode.children.length || this._hasChildrenChanged(this._scene, this._rootNode);
+    }
+    _hasChildrenChanged(sceneObj, treeNode) {
+        if (sceneObj.children.length !== treeNode.children.length) return true;
+        for(let i = 0; i < sceneObj.children.length; i++){
+            const sceneChild = sceneObj.children[i];
+            const treeChild = treeNode.children[i];
+            if (sceneChild !== treeChild.object) return true;
+            if (this._hasChildrenChanged(sceneChild, treeChild)) return true;
+        }
+        return false;
+    }
+    _countObjects(obj) {
+        let count = 1;
+        for(let i = 0; i < obj.children.length; i++){
+            count += this._countObjects(obj.children[i]);
+        }
+        return count;
+    }
+    _rebuildSceneTree() {
+        // Only rebuild when necessary
+        const currentStructure = this._buildSceneTree(this._scene);
+        this._preserveExpandedStates(this._rootNode, currentStructure);
+        this._rootNode = currentStructure;
+        this._cachedObjectCount = this._countObjects(this._scene);
+        this._renderTree();
+    }
+    _hasStructureChanged(oldNode, newNode) {
+        if (oldNode.children.length !== newNode.children.length) return true;
+        if (oldNode.object !== newNode.object) return true;
+        for(let i = 0; i < oldNode.children.length; i++){
+            if (this._hasStructureChanged(oldNode.children[i], newNode.children[i])) {
+                return true;
+            }
+        }
+        return false;
+    }
+    _preserveExpandedStates(oldNode, newNode) {
+        // Try to preserve expanded states by matching object references
+        if (oldNode.object === newNode.object) {
+            newNode.expanded = oldNode.expanded;
+        }
+        for(let i = 0; i < Math.min(oldNode.children.length, newNode.children.length); i++){
+            this._preserveExpandedStates(oldNode.children[i], newNode.children[i]);
+        }
+    }
+    _updateVisibilityStates(node) {
+        node.visible = node.object.visible;
+        node.children.forEach((child)=>this._updateVisibilityStates(child));
+    }
+    destroy() {
+        super.destroy();
+        this._onObjectSelect = null;
+        // Clean up context menu
+        if (this._contextMenu && this._contextMenu.parentNode) {
+            this._contextMenu.parentNode.removeChild(this._contextMenu);
+        }
+        this._contextMenu = null;
+        this._contextMenuTarget = null;
+        this._clipboardData = null;
+    }
+    constructor(parent, scene){
+        super(parent, scene, 'sceneTree', 'scene-tree-controller', 'div'), this._selectedObject = null, this._onObjectSelect = null, this._autoUpdate = true, this._cachedObjectCount = 0, this._lastUpdateTime = 0, this._updateInterval = 1000 // Only check for changes every 1 second
+        , this._visibleNodeCount = 0 // Counter for alternating background colors
+        , // Context menu properties
+        this._contextMenu = null, this._contextMenuTarget = null, this._clipboardData = null;
+        this._scene = scene;
+        this._rootNode = this._buildSceneTree(scene);
+        this._cachedObjectCount = this._countObjects(scene);
+        this._setupDOM();
+        this._createContextMenu();
+        this._renderTree();
+        this._setupGlobalEventListeners();
+    }
+}
+
 class GUI {
     /**
      * Adds a controller to the GUI, inferring controller type using the `typeof` operator.
@@ -1810,6 +2276,13 @@ class GUI {
     addCurve(object, property) {
         return new CurveController(this, object, property);
     }
+    /**
+     * Adds a scene tree controller to display Three.js scene hierarchy.
+     * @param {Scene} scene The Three.js scene to display
+     * @returns {SceneTreeController}
+     */ addSceneTree(scene) {
+        return new SceneTreeController(this, scene);
+    }
     /**
      * Adds a folder to the GUI, which is just another GUI. This method returns
      * the nested GUI so you can add controllers to it.
@@ -1819,8 +2292,6 @@ class GUI {
      * folder.add( position, 'y' );
      * folder.add( position, 'z' );
      *
-     * @param {string} title Name to display in the folder's title bar.
-     * @param {string} id Id
      * @returns {GUI}
      */ addFolder(title, id = title) {
         const folder = new GUI({
@@ -2116,6 +2587,25 @@ class GUI {
             child.update();
         }
     }
+    /**
+     * Sets this folder as active and deactivates all other folders
+     */ setActive() {
+        // Only root GUI can manage active states
+        if (!this.parent) return;
+        // Remove active class from ALL folders in the entire GUI tree using DOM query
+        const allActiveFolders = document.querySelectorAll('.lil-gui.active');
+        allActiveFolders.forEach((folder)=>{
+            folder.classList.remove('active');
+        });
+        // Add active class to this folder
+        this.domElement.classList.add('active');
+    }
+    /**
+     * Gets the currently active folder
+     */ getActiveFolder() {
+        if (!this.parent) return null;
+        return this.parent.folders.find((folder)=>folder.domElement.classList.contains('active')) || null;
+    }
     constructor({ parent, container, width, autoPlace = parent === undefined, title = 'Controls', id = title, closeFolders = false, touchStyles = true } = {}){
         this.children = [];
         this.controllers = [];
@@ -2137,6 +2627,8 @@ class GUI {
         this.$title.setAttribute('aria-expanded', "true");
         this.$title.setAttribute('tabindex', "0");
         this.$title.addEventListener('click', ()=>{
+            // Set this folder as active and deactivate others
+            this.setActive();
             this.openAnimated(this._closed);
         });
         this.$title.addEventListener('keydown', (e)=>{
@@ -2195,7 +2687,7 @@ LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
 OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
 PERFORMANCE OF THIS SOFTWARE.
 ***************************************************************************** */
-/* global Reflect, Promise, SuppressedError, Symbol */
+/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
 
 
 function __decorate(decorators, target, key, desc) {
@@ -2351,67 +2843,74 @@ __decorate([
     property
 ], ViewerHelper.prototype, "targetFrameRate", null);
 
-class Inspector extends Mount {
+const vert_Sprite = `
+uniform vec4 u_transform;
+uniform vec4 u_resolution;
+varying vec2 v_uv;
+
+void main() {
+    vec2 pos = u_transform.xy + u_transform.zw * 0.5 + position.xy * u_transform.zw;
+    vec2 ndc = pos * u_resolution.zw * 2. - 1.;
+    gl_Position = vec4(ndc, 0., 1.);
+    v_uv = uv;
+}
+`;
+const frag_Sprite = `
+uniform sampler2D u_texture;
+varying vec2 v_uv;
+
+void main() {
+    gl_FragColor = texture2D(u_texture, v_uv);
+}
+`;
+class Inspector extends Component {
     onLoad() {
         const { width, height } = this.viewer;
-        this._scene = new Scene();
-        this._camera = new OrthographicCamera(0, width, height, 0, -1, 1);
+        this._spriteUniforms.u_resolution.value.set(width, height, 1 / width, 1 / height);
+        this._sprite = new Mesh(new PlaneGeometry(1, 1, 1, 1), new ShaderMaterial({
+            side: DoubleSide,
+            vertexShader: vert_Sprite,
+            fragmentShader: frag_Sprite,
+            uniforms: this._spriteUniforms
+        }));
+        this._sprite.frustumCulled = false;
+        this._camera.viewport = new Vector4(0, 0, 256, 256);
         this._gui = new GUI({
             width: 310,
             title: "Inspector"
         }).close();
+        this._tree = this._gui.addSceneTree(this.viewer.scene);
         this._gui.addFolder("Viewer").close().hide();
         this._gui.addFolder("Component").close().hide();
         this._gui.addFolder("Material").close().hide();
         this._gui.addFolder("Other").close().hide();
         this._inspect(new ViewerHelper(this.viewer));
-        this._addSprite();
     }
     onDestroy() {
+        if (this._tree) {
+            this._tree.destroy();
+        }
         this._gui.destroy();
         this._refCntMap.clear();
         this._targetMap.clear();
     }
     update(dt) {
         this._gui.update();
+        if (this._tree) {
+            this._tree.update();
+        }
         this._updateFolders();
     }
     resize(width, height) {
-        this._camera.left = 0;
-        this._camera.right = width;
-        this._camera.top = height;
-        this._camera.bottom = 0;
-        this._camera.updateProjectionMatrix();
-    }
-    _addSprite() {
-        const viewer = this.viewer;
-        this._sprite = viewer.add(Sprite, {
-            parent: this._scene,
-            scale: new Vector3(256, 256, 1),
-            position: new Vector3(viewer.width / 2, viewer.height / 2),
-            visible: false
-        });
-    }
-    _renderScene() {
-        const { renderer } = this.viewer;
-        const autoClearDepth = renderer.autoClearDepth;
-        const autoClearColor = renderer.autoClearColor;
-        renderer.autoClearDepth = true;
-        renderer.autoClearColor = false;
-        renderer.render(this._scene, this._camera);
-        renderer.autoClearDepth = autoClearDepth;
-        renderer.autoClearColor = autoClearColor;
-        return renderer.domElement;
+        this._spriteUniforms.u_resolution.value.set(width, height, 1 / width, 1 / height);
     }
     _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;
+        const resolution = this._spriteUniforms.u_resolution.value;
+        this._camera.viewport.set(0, resolution.y - h, w, h);
+        this._spriteUniforms.u_transform.value.set(0, resolution.y - h, w, h);
+        this._spriteUniforms.u_texture.value = texture;
+        this.viewer.render(null, this._sprite, this._camera, 0, 0);
+        return this.viewer.canvas;
     }
     _updateFolders() {
         const refCntMap = this._refCntMap;
@@ -2420,8 +2919,14 @@ class Inspector extends Mount {
             if (refCntMap.get(v) === undefined) refCntMap.set(v, 1);
         };
         refCntMap.forEach((_, k, map)=>map.set(k, -1));
-        this.viewer.traverseMaterials(setState);
-        this.viewer.traverseComponents(setState);
+        const { scene, componentManager } = this.viewer;
+        scene.traverse((item)=>{
+            if (item.material) {
+                if (Array.isArray(item.material)) item.material.forEach(setState);
+                else setState(item.material);
+            }
+        });
+        componentManager.traverseComponents(setState);
         refCntMap.forEach((v, k, map)=>{
             if (v === 1) {
                 this._inspect(k);
@@ -2497,12 +3002,16 @@ class Inspector extends Mount {
                     this._addGUI(folder, this._getPropertiesList(value), target, k);
                 }
                 if (Array.isArray(value)) {
-                    this._addGUI(folder, [
-                        value.map((_, i)=>[
-                                i.toString(),
-                                {}
-                            ])
-                    ], value, k);
+                    if (prop.flat) {
+                        value.forEach((v)=>this._addGUI(folder, this._getPropertiesList(v), v, v.constructor.name));
+                    } else {
+                        this._addGUI(folder, [
+                            value.map((_, i)=>[
+                                    i.toString(),
+                                    {}
+                                ])
+                        ], value, k);
+                    }
                 } else {
                     const type = typeof value;
                     let ins = null;
@@ -2540,11 +3049,20 @@ class Inspector extends Mount {
         }
     }
     constructor(...args){
-        super(...args);
-        this._refCntMap = new Map();
-        this._targetMap = new Map();
+        super(...args), this._camera = new Camera(), this._sprite = null, this._spriteUniforms = {
+            u_texture: {
+                value: null
+            },
+            u_transform: {
+                value: new Vector4()
+            },
+            u_resolution: {
+                value: new Vector4()
+            }
+        }, this._refCntMap = new Map(), this._targetMap = new Map();
     }
 }
+Inspector.viewport = new Vector4();
 function targetName(target) {
     return target.name || target.constructor.name || target.type;
 }
@@ -2922,7 +3440,7 @@ var Stats$1 = function() {
     };
 };
 
-class Stats extends Mount {
+class Stats extends Component {
     onLoad() {
         this._stats.addPanel(this._dcPanel);
         this._stats.addPanel(this._texPanel);
@@ -2943,34 +3461,9 @@ class Stats extends Mount {
         this._stats.update();
     }
     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');
-    }
-}
-
-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();
+        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');
     }
 }
 
-export { BoxProjectionHelper, GUI, Inspector, Stats };
+export { GUI, Inspector, Stats };
 //# sourceMappingURL=module.js.map