[{"data":1,"prerenderedAt":2822},["ShallowReactive",2],{"navigation":3,"/cookbook/tweakpane":239,"/cookbook/tweakpane-surround":2817},[4,29,78,173,205,215,219,223,227,231,235],{"title":5,"path":6,"stem":7,"children":8,"icon":27,"titleTemplate":28},"Getting Started","/getting-started","1.getting-started/1.index",[9,12,17,22],{"title":10,"path":6,"stem":7,"icon":11},"Introduction","i-lucide-house",{"title":13,"path":14,"stem":15,"icon":16},"Installation","/getting-started/installation","1.getting-started/2.installation","i-lucide-download",{"title":18,"path":19,"stem":20,"icon":21},"Your First Scene","/getting-started/your-first-scene","1.getting-started/3.your-first-scene","i-lucide-donut",{"title":23,"path":24,"stem":25,"icon":26},"Upgrade Guide","/getting-started/upgrade-guide","1.getting-started/4.upgrade-guide","i-lucide-circle-arrow-up","i-lucide-rocket","%s · Get Started with TresJS",{"title":30,"path":31,"stem":32,"children":33},"Essentials","/essentials","2.essentials",[34,36,48],{"title":30,"path":31,"stem":35},"2.essentials/index",{"title":37,"icon":38,"open":39,"path":40,"stem":41,"children":42,"page":47},"Core Architecture","i-lucide-cpu",true,"/essentials/core-architecture","2.essentials/1.core-architecture",[43],{"title":44,"path":45,"stem":46},"Custom Vue Renderer","/essentials/core-architecture/custom-vue-renderer","2.essentials/1.core-architecture/2.custom-vue-renderer",false,{"title":49,"icon":50,"open":39,"path":51,"stem":52,"children":53,"page":47},"Key Concepts","i-lucide-medal","/essentials/concepts","2.essentials/2.concepts",[54,58,62,66,70,74],{"title":55,"path":56,"stem":57},"Declarative vs Imperative","/essentials/concepts/declarative-vs-imperative","2.essentials/2.concepts/1.declarative-vs-imperative",{"title":59,"path":60,"stem":61},"Reactivity","/essentials/concepts/reactivity","2.essentials/2.concepts/2.reactivity",{"title":63,"path":64,"stem":65},"Constructor Arguments","/essentials/concepts/constructor-arguments","2.essentials/2.concepts/3.constructor-arguments",{"title":67,"path":68,"stem":69},"Declarative Properties","/essentials/concepts/declarative-properties","2.essentials/2.concepts/4.declarative-properties",{"title":71,"path":72,"stem":73},"Extending the Catalogue","/essentials/concepts/extending-catalogue","2.essentials/2.concepts/5.extending-catalogue",{"title":75,"path":76,"stem":77},"Child Attachments","/essentials/concepts/child-attachments","2.essentials/2.concepts/6.child-attachments",{"title":79,"path":80,"stem":81,"children":82},"API","/api","3.api",[83,86,104,131,141,155],{"title":84,"path":80,"stem":85},"TresJS API Reference","3.api/1.index",{"title":87,"icon":88,"open":39,"path":89,"stem":90,"children":91,"page":47},"Components","i-lucide-box","/api/components","3.api/1.components",[92,96,100],{"title":93,"path":94,"stem":95},"\u003CTresCanvas />","/api/components/tres-canvas","3.api/1.components/tres-canvas",{"title":97,"path":98,"stem":99},"\u003CTresCanvasContext />","/api/components/tres-context","3.api/1.components/tres-context",{"title":101,"path":102,"stem":103},"Tres Components","/api/components/tres-objects","3.api/1.components/tres-objects",{"title":105,"titleTemplate":106,"icon":107,"path":108,"stem":109,"children":110,"page":47},"Composables","%s · TresJS Composables","i-lucide-arrow-right-left","/api/composables","3.api/2.composables",[111,115,119,123,127],{"title":112,"path":113,"stem":114},"useTres","/api/composables/use-tres","3.api/2.composables/1.use-tres",{"title":116,"path":117,"stem":118},"useTresContext","/api/composables/use-tres-context","3.api/2.composables/2.use-tres-context",{"title":120,"path":121,"stem":122},"useLoop","/api/composables/use-loop","3.api/2.composables/3.use-loop",{"title":124,"path":125,"stem":126},"useGraph","/api/composables/use-graph","3.api/2.composables/4.use-graph",{"title":128,"path":129,"stem":130},"useLoader","/api/composables/use-loader","3.api/2.composables/5.use-loader",{"title":132,"icon":133,"path":134,"stem":135,"children":136,"page":47},"Event handling","i-lucide-mouse-pointer-2","/api/events","3.api/3.events",[137],{"title":138,"path":139,"stem":140},"Pointer Events","/api/events/pointer-events","3.api/3.events/1.pointer-events",{"title":142,"icon":143,"path":144,"stem":145,"children":146,"page":47},"Utils","i-lucide-wrench","/api/utils","3.api/4.utils",[147,151],{"title":148,"path":149,"stem":150},"Type Guards","/api/utils/type-guards","3.api/4.utils/1.type-guards",{"title":152,"path":153,"stem":154},"Directives","/api/utils/directives","3.api/4.utils/2.directives",{"title":156,"icon":157,"path":158,"stem":159,"children":160,"page":47},"Advanced","i-lucide-brain-circuit","/api/advanced","3.api/5.advanced",[161,165,169],{"title":162,"path":163,"stem":164},"Scaling Performance 🚀","/api/advanced/performance","3.api/5.advanced/performance",{"title":166,"path":167,"stem":168},"Primitives","/api/advanced/primitives","3.api/5.advanced/primitives",{"title":170,"path":171,"stem":172},"WebGPU","/api/advanced/web-gpu","3.api/5.advanced/web-gpu",{"title":174,"path":175,"stem":176,"children":177},"Cookbook","/cookbook","4.cookbook",[178,181,185,189,193,197,201],{"title":179,"path":175,"stem":180},"Cookbook 🍳🧑‍🍳","4.cookbook/index",{"title":182,"path":183,"stem":184},"OrbitControls","/cookbook/orbit-controls","4.cookbook/1.orbit-controls",{"title":186,"path":187,"stem":188},"Basic Animations","/cookbook/basic-animations","4.cookbook/2.basic-animations",{"title":190,"path":191,"stem":192},"Model Animation","/cookbook/model-animation","4.cookbook/3.model-animation",{"title":194,"path":195,"stem":196},"Advanced GSAP Animations","/cookbook/advanced-gsap-animations","4.cookbook/4.advanced-gsap-animations",{"title":198,"path":199,"stem":200},"Tweakpane","/cookbook/tweakpane","4.cookbook/5.tweakpane",{"title":202,"path":203,"stem":204},"Dynamic components","/cookbook/transition-dynamic","4.cookbook/6.transition-dynamic",{"title":206,"path":207,"stem":208,"children":209},"Community","/community","5.community/1.index",[210,211],{"title":206,"path":207,"stem":208},{"title":212,"path":213,"stem":214},"Awesome Resources","/community/awesome-resources","5.community/awesome-resources",{"title":216,"path":217,"stem":218},"German Translation","/de","de",{"title":220,"path":221,"stem":222},"Spanish Translation","/es","es",{"title":224,"path":225,"stem":226},"French Translation","/fr","fr",{"title":228,"path":229,"stem":230},"Italian Translation","/it","it",{"title":232,"path":233,"stem":234},"Japanese Translation","/jp","jp",{"title":236,"path":237,"stem":238},"Chinese Translation","/zh","zh",{"id":240,"title":198,"body":241,"description":2810,"extension":2811,"links":2812,"meta":2813,"navigation":39,"path":199,"seo":2815,"stem":200,"__hash__":2816},"docs/4.cookbook/5.tweakpane.md",{"type":242,"value":243,"toc":2803},"minimark",[244,254,257,261,264,322,325,374,380,384,387,2562,2567,2570,2728,2732,2735,2794,2799],[245,246,247,253],"p",{},[248,249,198],"a",{"href":250,"rel":251},"https://tweakpane.github.io/docs/",[252],"nofollow"," is a compact GUI library that provides an excellent way to create interactive controls for your 3D scenes. This recipe shows you how to integrate Tweakpane with TresJS to create dynamic, real-time controls for your 3D objects and scenes.",[255,256],"examples-tweakpane",{},[258,259,13],"h2",{"id":260},"installation",[245,262,263],{},"First, install Tweakpane v4 in your project:",[265,266,267,293,308],"code-group",{},[268,269,275],"pre",{"className":270,"code":271,"filename":272,"language":273,"meta":274,"style":274},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","npm install tweakpane@^4.0.0\n","npm","bash","",[276,277,278],"code",{"__ignoreMap":274},[279,280,283,286,290],"span",{"class":281,"line":282},"line",1,[279,284,272],{"class":285},"sBMFI",[279,287,289],{"class":288},"sfazB"," install",[279,291,292],{"class":288}," tweakpane@^4.0.0\n",[268,294,297],{"className":270,"code":295,"filename":296,"language":273,"meta":274,"style":274},"yarn add tweakpane@^4.0.0\n","yarn",[276,298,299],{"__ignoreMap":274},[279,300,301,303,306],{"class":281,"line":282},[279,302,296],{"class":285},[279,304,305],{"class":288}," add",[279,307,292],{"class":288},[268,309,312],{"className":270,"code":310,"filename":311,"language":273,"meta":274,"style":274},"pnpm add tweakpane@^4.0.0\n","pnpm",[276,313,314],{"__ignoreMap":274},[279,315,316,318,320],{"class":281,"line":282},[279,317,311],{"class":285},[279,319,305],{"class":288},[279,321,292],{"class":288},[245,323,324],{},"Additionally, if you are working with TypeScript:",[265,326,327,344,359],{},[268,328,330],{"className":270,"code":329,"filename":272,"language":273,"meta":274,"style":274},"npm install --save-dev @tweakpane/core\n",[276,331,332],{"__ignoreMap":274},[279,333,334,336,338,341],{"class":281,"line":282},[279,335,272],{"class":285},[279,337,289],{"class":288},[279,339,340],{"class":288}," --save-dev",[279,342,343],{"class":288}," @tweakpane/core\n",[268,345,347],{"className":270,"code":346,"filename":296,"language":273,"meta":274,"style":274},"yarn add --save-dev @tweakpane/core\n",[276,348,349],{"__ignoreMap":274},[279,350,351,353,355,357],{"class":281,"line":282},[279,352,296],{"class":285},[279,354,305],{"class":288},[279,356,340],{"class":288},[279,358,343],{"class":288},[268,360,362],{"className":270,"code":361,"filename":311,"language":273,"meta":274,"style":274},"pnpm add --save-dev @tweakpane/core\n",[276,363,364],{"__ignoreMap":274},[279,365,366,368,370,372],{"class":281,"line":282},[279,367,311],{"class":285},[279,369,305],{"class":288},[279,371,340],{"class":288},[279,373,343],{"class":288},[375,376,377],"tip",{},[245,378,379],{},"Make sure to use Tweakpane v4 or higher, as this recipe uses the latest API which has breaking changes from v3.",[258,381,383],{"id":382},"basic-setup","Basic Setup",[245,385,386],{},"Here's how to set up Tweakpane with a basic TresJS scene:",[268,388,392],{"className":389,"code":390,"language":391,"meta":274,"style":274},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { ref, onMounted, onUnmounted } from 'vue'\nimport { Pane } from 'tweakpane'\nimport { OrbitControls } from '@tresjs/cientos'\n\nconst meshRef = ref()\nconst pane = ref\u003CPane>()\nconst paneContainer = ref\u003CHTMLElement>()\n\n// Reactive properties that will be controlled by Tweakpane\nconst controls = ref({\n  positionX: 0,\n  positionY: 0,\n  positionZ: 0,\n  rotationX: 0,\n  rotationY: 0,\n  rotationZ: 0,\n  scale: 1,\n  color: '#ff6b6b',\n  wireframe: false,\n  material: 'basic',\n})\n\nonMounted(() => {\n  if (!paneContainer.value) return\n\n  // Create Tweakpane instance with container\n  pane.value = new Pane({\n    title: 'Scene Controls',\n    container: paneContainer.value\n  })\n\n  // Add position controls\n  const positionFolder = pane.value.addFolder({ title: 'Position' })\n  positionFolder.addBinding(controls.value, 'positionX', { min: -3, max: 3, step: 0.1 })\n  positionFolder.addBinding(controls.value, 'positionY', { min: -3, max: 3, step: 0.1 })\n  positionFolder.addBinding(controls.value, 'positionZ', { min: -3, max: 3, step: 0.1 })\n\n  // Add rotation controls\n  const rotationFolder = pane.value.addFolder({ title: 'Rotation' })\n  rotationFolder.addBinding(controls.value, 'rotationX', { min: -Math.PI, max: Math.PI, step: 0.01 })\n  rotationFolder.addBinding(controls.value, 'rotationY', { min: -Math.PI, max: Math.PI, step: 0.01 })\n  rotationFolder.addBinding(controls.value, 'rotationZ', { min: -Math.PI, max: Math.PI, step: 0.01 })\n\n  // Add material controls\n  const materialFolder = pane.value.addFolder({ title: 'Material' })\n  materialFolder.addBinding(controls.value, 'scale', { min: 0.1, max: 3, step: 0.1 })\n  materialFolder.addBinding(controls.value, 'color')\n  materialFolder.addBinding(controls.value, 'wireframe')\n  materialFolder.addBinding(controls.value, 'material', {\n    options: {\n      Basic: 'basic',\n      Normal: 'normal',\n      Standard: 'standard',\n    },\n  })\n\n  // Add reset button\n  pane.value.addButton({ title: 'Reset All' }).on('click', () => {\n    Object.assign(controls.value, {\n      positionX: 0, positionY: 0, positionZ: 0,\n      rotationX: 0, rotationY: 0, rotationZ: 0,\n      scale: 1, color: '#ff6b6b', wireframe: false, material: 'basic'\n    })\n  })\n})\n\n// Clean up on unmount\nonUnmounted(() => {\n  pane.value?.dispose()\n})\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cdiv class=\"relative w-full h-full\">\n    \u003C!-- Tweakpane container positioned outside canvas -->\n    \u003Cdiv ref=\"paneContainer\" class=\"absolute top-4 right-4 z-10\" />\n\n    \u003CTresCanvas clear-color=\"#82DBC5\">\n      \u003CTresPerspectiveCamera :position=\"[3, 3, 3]\" />\n      \u003COrbitControls />\n\n      \u003CTresMesh\n        ref=\"meshRef\"\n        :position=\"[controls.positionX, controls.positionY, controls.positionZ]\"\n        :rotation=\"[controls.rotationX, controls.rotationY, controls.rotationZ]\"\n        :scale=\"controls.scale\"\n      >\n        \u003CTresBoxGeometry />\n        \u003CTresMeshBasicMaterial\n          v-if=\"controls.material === 'basic'\"\n          :color=\"controls.color\"\n          :wireframe=\"controls.wireframe\"\n        />\n        \u003CTresMeshNormalMaterial\n          v-else-if=\"controls.material === 'normal'\"\n          :wireframe=\"controls.wireframe\"\n        />\n        \u003CTresMeshStandardMaterial\n          v-else-if=\"controls.material === 'standard'\"\n          :color=\"controls.color\"\n          :wireframe=\"controls.wireframe\"\n        />\n      \u003C/TresMesh>\n\n      \u003CTresGridHelper :args=\"[10, 10]\" />\n      \u003CTresAmbientLight :intensity=\"0.5\" />\n      \u003CTresDirectionalLight :position=\"[0, 0, 5]\" :intensity=\"0.5\" />\n    \u003C/TresCanvas>\n  \u003C/div>\n\u003C/template>\n","vue",[276,393,394,425,464,485,506,512,529,551,572,577,584,602,618,630,642,654,666,678,691,709,723,740,749,754,771,798,803,809,831,848,864,872,877,883,927,995,1053,1111,1116,1122,1161,1232,1298,1364,1369,1375,1414,1471,1499,1527,1557,1567,1583,1600,1617,1623,1630,1635,1641,1698,1721,1751,1781,1826,1834,1841,1848,1853,1859,1873,1890,1897,1907,1912,1922,1945,1951,1983,1988,2010,2050,2059,2064,2072,2088,2128,2168,2187,2193,2204,2212,2238,2258,2277,2283,2291,2315,2334,2339,2347,2370,2389,2408,2413,2424,2429,2461,2485,2533,2543,2553],{"__ignoreMap":274},[279,395,396,400,404,408,411,414,417,420,422],{"class":281,"line":282},[279,397,399],{"class":398},"sMK4o","\u003C",[279,401,403],{"class":402},"swJcz","script",[279,405,407],{"class":406},"spNyl"," setup",[279,409,410],{"class":406}," lang",[279,412,413],{"class":398},"=",[279,415,416],{"class":398},"\"",[279,418,419],{"class":288},"ts",[279,421,416],{"class":398},[279,423,424],{"class":398},">\n",[279,426,428,432,435,439,442,445,447,450,453,456,459,461],{"class":281,"line":427},2,[279,429,431],{"class":430},"s7zQu","import",[279,433,434],{"class":398}," {",[279,436,438],{"class":437},"sTEyZ"," ref",[279,440,441],{"class":398},",",[279,443,444],{"class":437}," onMounted",[279,446,441],{"class":398},[279,448,449],{"class":437}," onUnmounted",[279,451,452],{"class":398}," }",[279,454,455],{"class":430}," from",[279,457,458],{"class":398}," '",[279,460,391],{"class":288},[279,462,463],{"class":398},"'\n",[279,465,467,469,471,474,476,478,480,483],{"class":281,"line":466},3,[279,468,431],{"class":430},[279,470,434],{"class":398},[279,472,473],{"class":437}," Pane",[279,475,452],{"class":398},[279,477,455],{"class":430},[279,479,458],{"class":398},[279,481,482],{"class":288},"tweakpane",[279,484,463],{"class":398},[279,486,488,490,492,495,497,499,501,504],{"class":281,"line":487},4,[279,489,431],{"class":430},[279,491,434],{"class":398},[279,493,494],{"class":437}," OrbitControls",[279,496,452],{"class":398},[279,498,455],{"class":430},[279,500,458],{"class":398},[279,502,503],{"class":288},"@tresjs/cientos",[279,505,463],{"class":398},[279,507,509],{"class":281,"line":508},5,[279,510,511],{"emptyLinePlaceholder":39},"\n",[279,513,515,518,521,523,526],{"class":281,"line":514},6,[279,516,517],{"class":406},"const",[279,519,520],{"class":437}," meshRef ",[279,522,413],{"class":398},[279,524,438],{"class":525},"s2Zo4",[279,527,528],{"class":437},"()\n",[279,530,532,534,537,539,541,543,546,549],{"class":281,"line":531},7,[279,533,517],{"class":406},[279,535,536],{"class":437}," pane ",[279,538,413],{"class":398},[279,540,438],{"class":525},[279,542,399],{"class":398},[279,544,545],{"class":285},"Pane",[279,547,548],{"class":398},">",[279,550,528],{"class":437},[279,552,554,556,559,561,563,565,568,570],{"class":281,"line":553},8,[279,555,517],{"class":406},[279,557,558],{"class":437}," paneContainer ",[279,560,413],{"class":398},[279,562,438],{"class":525},[279,564,399],{"class":398},[279,566,567],{"class":285},"HTMLElement",[279,569,548],{"class":398},[279,571,528],{"class":437},[279,573,575],{"class":281,"line":574},9,[279,576,511],{"emptyLinePlaceholder":39},[279,578,580],{"class":281,"line":579},10,[279,581,583],{"class":582},"sHwdD","// Reactive properties that will be controlled by Tweakpane\n",[279,585,587,589,592,594,596,599],{"class":281,"line":586},11,[279,588,517],{"class":406},[279,590,591],{"class":437}," controls ",[279,593,413],{"class":398},[279,595,438],{"class":525},[279,597,598],{"class":437},"(",[279,600,601],{"class":398},"{\n",[279,603,605,608,611,615],{"class":281,"line":604},12,[279,606,607],{"class":402},"  positionX",[279,609,610],{"class":398},":",[279,612,614],{"class":613},"sbssI"," 0",[279,616,617],{"class":398},",\n",[279,619,621,624,626,628],{"class":281,"line":620},13,[279,622,623],{"class":402},"  positionY",[279,625,610],{"class":398},[279,627,614],{"class":613},[279,629,617],{"class":398},[279,631,633,636,638,640],{"class":281,"line":632},14,[279,634,635],{"class":402},"  positionZ",[279,637,610],{"class":398},[279,639,614],{"class":613},[279,641,617],{"class":398},[279,643,645,648,650,652],{"class":281,"line":644},15,[279,646,647],{"class":402},"  rotationX",[279,649,610],{"class":398},[279,651,614],{"class":613},[279,653,617],{"class":398},[279,655,657,660,662,664],{"class":281,"line":656},16,[279,658,659],{"class":402},"  rotationY",[279,661,610],{"class":398},[279,663,614],{"class":613},[279,665,617],{"class":398},[279,667,669,672,674,676],{"class":281,"line":668},17,[279,670,671],{"class":402},"  rotationZ",[279,673,610],{"class":398},[279,675,614],{"class":613},[279,677,617],{"class":398},[279,679,681,684,686,689],{"class":281,"line":680},18,[279,682,683],{"class":402},"  scale",[279,685,610],{"class":398},[279,687,688],{"class":613}," 1",[279,690,617],{"class":398},[279,692,694,697,699,701,704,707],{"class":281,"line":693},19,[279,695,696],{"class":402},"  color",[279,698,610],{"class":398},[279,700,458],{"class":398},[279,702,703],{"class":288},"#ff6b6b",[279,705,706],{"class":398},"'",[279,708,617],{"class":398},[279,710,712,715,717,721],{"class":281,"line":711},20,[279,713,714],{"class":402},"  wireframe",[279,716,610],{"class":398},[279,718,720],{"class":719},"sfNiH"," false",[279,722,617],{"class":398},[279,724,726,729,731,733,736,738],{"class":281,"line":725},21,[279,727,728],{"class":402},"  material",[279,730,610],{"class":398},[279,732,458],{"class":398},[279,734,735],{"class":288},"basic",[279,737,706],{"class":398},[279,739,617],{"class":398},[279,741,743,746],{"class":281,"line":742},22,[279,744,745],{"class":398},"}",[279,747,748],{"class":437},")\n",[279,750,752],{"class":281,"line":751},23,[279,753,511],{"emptyLinePlaceholder":39},[279,755,757,760,762,765,768],{"class":281,"line":756},24,[279,758,759],{"class":525},"onMounted",[279,761,598],{"class":437},[279,763,764],{"class":398},"()",[279,766,767],{"class":406}," =>",[279,769,770],{"class":398}," {\n",[279,772,774,777,780,783,786,789,792,795],{"class":281,"line":773},25,[279,775,776],{"class":430},"  if",[279,778,779],{"class":402}," (",[279,781,782],{"class":398},"!",[279,784,785],{"class":437},"paneContainer",[279,787,788],{"class":398},".",[279,790,791],{"class":437},"value",[279,793,794],{"class":402},") ",[279,796,797],{"class":430},"return\n",[279,799,801],{"class":281,"line":800},26,[279,802,511],{"emptyLinePlaceholder":39},[279,804,806],{"class":281,"line":805},27,[279,807,808],{"class":582},"  // Create Tweakpane instance with container\n",[279,810,812,815,817,819,822,825,827,829],{"class":281,"line":811},28,[279,813,814],{"class":437},"  pane",[279,816,788],{"class":398},[279,818,791],{"class":437},[279,820,821],{"class":398}," =",[279,823,824],{"class":398}," new",[279,826,473],{"class":525},[279,828,598],{"class":402},[279,830,601],{"class":398},[279,832,834,837,839,841,844,846],{"class":281,"line":833},29,[279,835,836],{"class":402},"    title",[279,838,610],{"class":398},[279,840,458],{"class":398},[279,842,843],{"class":288},"Scene Controls",[279,845,706],{"class":398},[279,847,617],{"class":398},[279,849,851,854,856,859,861],{"class":281,"line":850},30,[279,852,853],{"class":402},"    container",[279,855,610],{"class":398},[279,857,858],{"class":437}," paneContainer",[279,860,788],{"class":398},[279,862,863],{"class":437},"value\n",[279,865,867,870],{"class":281,"line":866},31,[279,868,869],{"class":398},"  }",[279,871,748],{"class":402},[279,873,875],{"class":281,"line":874},32,[279,876,511],{"emptyLinePlaceholder":39},[279,878,880],{"class":281,"line":879},33,[279,881,882],{"class":582},"  // Add position controls\n",[279,884,886,889,892,894,897,899,901,903,906,908,911,914,916,918,921,923,925],{"class":281,"line":885},34,[279,887,888],{"class":406},"  const",[279,890,891],{"class":437}," positionFolder",[279,893,821],{"class":398},[279,895,896],{"class":437}," pane",[279,898,788],{"class":398},[279,900,791],{"class":437},[279,902,788],{"class":398},[279,904,905],{"class":525},"addFolder",[279,907,598],{"class":402},[279,909,910],{"class":398},"{",[279,912,913],{"class":402}," title",[279,915,610],{"class":398},[279,917,458],{"class":398},[279,919,920],{"class":288},"Position",[279,922,706],{"class":398},[279,924,452],{"class":398},[279,926,748],{"class":402},[279,928,930,933,935,938,940,943,945,947,949,951,954,956,958,960,963,965,968,971,973,976,978,981,983,986,988,991,993],{"class":281,"line":929},35,[279,931,932],{"class":437},"  positionFolder",[279,934,788],{"class":398},[279,936,937],{"class":525},"addBinding",[279,939,598],{"class":402},[279,941,942],{"class":437},"controls",[279,944,788],{"class":398},[279,946,791],{"class":437},[279,948,441],{"class":398},[279,950,458],{"class":398},[279,952,953],{"class":288},"positionX",[279,955,706],{"class":398},[279,957,441],{"class":398},[279,959,434],{"class":398},[279,961,962],{"class":402}," min",[279,964,610],{"class":398},[279,966,967],{"class":398}," -",[279,969,970],{"class":613},"3",[279,972,441],{"class":398},[279,974,975],{"class":402}," max",[279,977,610],{"class":398},[279,979,980],{"class":613}," 3",[279,982,441],{"class":398},[279,984,985],{"class":402}," step",[279,987,610],{"class":398},[279,989,990],{"class":613}," 0.1",[279,992,452],{"class":398},[279,994,748],{"class":402},[279,996,998,1000,1002,1004,1006,1008,1010,1012,1014,1016,1019,1021,1023,1025,1027,1029,1031,1033,1035,1037,1039,1041,1043,1045,1047,1049,1051],{"class":281,"line":997},36,[279,999,932],{"class":437},[279,1001,788],{"class":398},[279,1003,937],{"class":525},[279,1005,598],{"class":402},[279,1007,942],{"class":437},[279,1009,788],{"class":398},[279,1011,791],{"class":437},[279,1013,441],{"class":398},[279,1015,458],{"class":398},[279,1017,1018],{"class":288},"positionY",[279,1020,706],{"class":398},[279,1022,441],{"class":398},[279,1024,434],{"class":398},[279,1026,962],{"class":402},[279,1028,610],{"class":398},[279,1030,967],{"class":398},[279,1032,970],{"class":613},[279,1034,441],{"class":398},[279,1036,975],{"class":402},[279,1038,610],{"class":398},[279,1040,980],{"class":613},[279,1042,441],{"class":398},[279,1044,985],{"class":402},[279,1046,610],{"class":398},[279,1048,990],{"class":613},[279,1050,452],{"class":398},[279,1052,748],{"class":402},[279,1054,1056,1058,1060,1062,1064,1066,1068,1070,1072,1074,1077,1079,1081,1083,1085,1087,1089,1091,1093,1095,1097,1099,1101,1103,1105,1107,1109],{"class":281,"line":1055},37,[279,1057,932],{"class":437},[279,1059,788],{"class":398},[279,1061,937],{"class":525},[279,1063,598],{"class":402},[279,1065,942],{"class":437},[279,1067,788],{"class":398},[279,1069,791],{"class":437},[279,1071,441],{"class":398},[279,1073,458],{"class":398},[279,1075,1076],{"class":288},"positionZ",[279,1078,706],{"class":398},[279,1080,441],{"class":398},[279,1082,434],{"class":398},[279,1084,962],{"class":402},[279,1086,610],{"class":398},[279,1088,967],{"class":398},[279,1090,970],{"class":613},[279,1092,441],{"class":398},[279,1094,975],{"class":402},[279,1096,610],{"class":398},[279,1098,980],{"class":613},[279,1100,441],{"class":398},[279,1102,985],{"class":402},[279,1104,610],{"class":398},[279,1106,990],{"class":613},[279,1108,452],{"class":398},[279,1110,748],{"class":402},[279,1112,1114],{"class":281,"line":1113},38,[279,1115,511],{"emptyLinePlaceholder":39},[279,1117,1119],{"class":281,"line":1118},39,[279,1120,1121],{"class":582},"  // Add rotation controls\n",[279,1123,1125,1127,1130,1132,1134,1136,1138,1140,1142,1144,1146,1148,1150,1152,1155,1157,1159],{"class":281,"line":1124},40,[279,1126,888],{"class":406},[279,1128,1129],{"class":437}," rotationFolder",[279,1131,821],{"class":398},[279,1133,896],{"class":437},[279,1135,788],{"class":398},[279,1137,791],{"class":437},[279,1139,788],{"class":398},[279,1141,905],{"class":525},[279,1143,598],{"class":402},[279,1145,910],{"class":398},[279,1147,913],{"class":402},[279,1149,610],{"class":398},[279,1151,458],{"class":398},[279,1153,1154],{"class":288},"Rotation",[279,1156,706],{"class":398},[279,1158,452],{"class":398},[279,1160,748],{"class":402},[279,1162,1164,1167,1169,1171,1173,1175,1177,1179,1181,1183,1186,1188,1190,1192,1194,1196,1198,1201,1203,1206,1208,1210,1212,1215,1217,1219,1221,1223,1225,1228,1230],{"class":281,"line":1163},41,[279,1165,1166],{"class":437},"  rotationFolder",[279,1168,788],{"class":398},[279,1170,937],{"class":525},[279,1172,598],{"class":402},[279,1174,942],{"class":437},[279,1176,788],{"class":398},[279,1178,791],{"class":437},[279,1180,441],{"class":398},[279,1182,458],{"class":398},[279,1184,1185],{"class":288},"rotationX",[279,1187,706],{"class":398},[279,1189,441],{"class":398},[279,1191,434],{"class":398},[279,1193,962],{"class":402},[279,1195,610],{"class":398},[279,1197,967],{"class":398},[279,1199,1200],{"class":437},"Math",[279,1202,788],{"class":398},[279,1204,1205],{"class":437},"PI",[279,1207,441],{"class":398},[279,1209,975],{"class":402},[279,1211,610],{"class":398},[279,1213,1214],{"class":437}," Math",[279,1216,788],{"class":398},[279,1218,1205],{"class":437},[279,1220,441],{"class":398},[279,1222,985],{"class":402},[279,1224,610],{"class":398},[279,1226,1227],{"class":613}," 0.01",[279,1229,452],{"class":398},[279,1231,748],{"class":402},[279,1233,1235,1237,1239,1241,1243,1245,1247,1249,1251,1253,1256,1258,1260,1262,1264,1266,1268,1270,1272,1274,1276,1278,1280,1282,1284,1286,1288,1290,1292,1294,1296],{"class":281,"line":1234},42,[279,1236,1166],{"class":437},[279,1238,788],{"class":398},[279,1240,937],{"class":525},[279,1242,598],{"class":402},[279,1244,942],{"class":437},[279,1246,788],{"class":398},[279,1248,791],{"class":437},[279,1250,441],{"class":398},[279,1252,458],{"class":398},[279,1254,1255],{"class":288},"rotationY",[279,1257,706],{"class":398},[279,1259,441],{"class":398},[279,1261,434],{"class":398},[279,1263,962],{"class":402},[279,1265,610],{"class":398},[279,1267,967],{"class":398},[279,1269,1200],{"class":437},[279,1271,788],{"class":398},[279,1273,1205],{"class":437},[279,1275,441],{"class":398},[279,1277,975],{"class":402},[279,1279,610],{"class":398},[279,1281,1214],{"class":437},[279,1283,788],{"class":398},[279,1285,1205],{"class":437},[279,1287,441],{"class":398},[279,1289,985],{"class":402},[279,1291,610],{"class":398},[279,1293,1227],{"class":613},[279,1295,452],{"class":398},[279,1297,748],{"class":402},[279,1299,1301,1303,1305,1307,1309,1311,1313,1315,1317,1319,1322,1324,1326,1328,1330,1332,1334,1336,1338,1340,1342,1344,1346,1348,1350,1352,1354,1356,1358,1360,1362],{"class":281,"line":1300},43,[279,1302,1166],{"class":437},[279,1304,788],{"class":398},[279,1306,937],{"class":525},[279,1308,598],{"class":402},[279,1310,942],{"class":437},[279,1312,788],{"class":398},[279,1314,791],{"class":437},[279,1316,441],{"class":398},[279,1318,458],{"class":398},[279,1320,1321],{"class":288},"rotationZ",[279,1323,706],{"class":398},[279,1325,441],{"class":398},[279,1327,434],{"class":398},[279,1329,962],{"class":402},[279,1331,610],{"class":398},[279,1333,967],{"class":398},[279,1335,1200],{"class":437},[279,1337,788],{"class":398},[279,1339,1205],{"class":437},[279,1341,441],{"class":398},[279,1343,975],{"class":402},[279,1345,610],{"class":398},[279,1347,1214],{"class":437},[279,1349,788],{"class":398},[279,1351,1205],{"class":437},[279,1353,441],{"class":398},[279,1355,985],{"class":402},[279,1357,610],{"class":398},[279,1359,1227],{"class":613},[279,1361,452],{"class":398},[279,1363,748],{"class":402},[279,1365,1367],{"class":281,"line":1366},44,[279,1368,511],{"emptyLinePlaceholder":39},[279,1370,1372],{"class":281,"line":1371},45,[279,1373,1374],{"class":582},"  // Add material controls\n",[279,1376,1378,1380,1383,1385,1387,1389,1391,1393,1395,1397,1399,1401,1403,1405,1408,1410,1412],{"class":281,"line":1377},46,[279,1379,888],{"class":406},[279,1381,1382],{"class":437}," materialFolder",[279,1384,821],{"class":398},[279,1386,896],{"class":437},[279,1388,788],{"class":398},[279,1390,791],{"class":437},[279,1392,788],{"class":398},[279,1394,905],{"class":525},[279,1396,598],{"class":402},[279,1398,910],{"class":398},[279,1400,913],{"class":402},[279,1402,610],{"class":398},[279,1404,458],{"class":398},[279,1406,1407],{"class":288},"Material",[279,1409,706],{"class":398},[279,1411,452],{"class":398},[279,1413,748],{"class":402},[279,1415,1417,1420,1422,1424,1426,1428,1430,1432,1434,1436,1439,1441,1443,1445,1447,1449,1451,1453,1455,1457,1459,1461,1463,1465,1467,1469],{"class":281,"line":1416},47,[279,1418,1419],{"class":437},"  materialFolder",[279,1421,788],{"class":398},[279,1423,937],{"class":525},[279,1425,598],{"class":402},[279,1427,942],{"class":437},[279,1429,788],{"class":398},[279,1431,791],{"class":437},[279,1433,441],{"class":398},[279,1435,458],{"class":398},[279,1437,1438],{"class":288},"scale",[279,1440,706],{"class":398},[279,1442,441],{"class":398},[279,1444,434],{"class":398},[279,1446,962],{"class":402},[279,1448,610],{"class":398},[279,1450,990],{"class":613},[279,1452,441],{"class":398},[279,1454,975],{"class":402},[279,1456,610],{"class":398},[279,1458,980],{"class":613},[279,1460,441],{"class":398},[279,1462,985],{"class":402},[279,1464,610],{"class":398},[279,1466,990],{"class":613},[279,1468,452],{"class":398},[279,1470,748],{"class":402},[279,1472,1474,1476,1478,1480,1482,1484,1486,1488,1490,1492,1495,1497],{"class":281,"line":1473},48,[279,1475,1419],{"class":437},[279,1477,788],{"class":398},[279,1479,937],{"class":525},[279,1481,598],{"class":402},[279,1483,942],{"class":437},[279,1485,788],{"class":398},[279,1487,791],{"class":437},[279,1489,441],{"class":398},[279,1491,458],{"class":398},[279,1493,1494],{"class":288},"color",[279,1496,706],{"class":398},[279,1498,748],{"class":402},[279,1500,1502,1504,1506,1508,1510,1512,1514,1516,1518,1520,1523,1525],{"class":281,"line":1501},49,[279,1503,1419],{"class":437},[279,1505,788],{"class":398},[279,1507,937],{"class":525},[279,1509,598],{"class":402},[279,1511,942],{"class":437},[279,1513,788],{"class":398},[279,1515,791],{"class":437},[279,1517,441],{"class":398},[279,1519,458],{"class":398},[279,1521,1522],{"class":288},"wireframe",[279,1524,706],{"class":398},[279,1526,748],{"class":402},[279,1528,1530,1532,1534,1536,1538,1540,1542,1544,1546,1548,1551,1553,1555],{"class":281,"line":1529},50,[279,1531,1419],{"class":437},[279,1533,788],{"class":398},[279,1535,937],{"class":525},[279,1537,598],{"class":402},[279,1539,942],{"class":437},[279,1541,788],{"class":398},[279,1543,791],{"class":437},[279,1545,441],{"class":398},[279,1547,458],{"class":398},[279,1549,1550],{"class":288},"material",[279,1552,706],{"class":398},[279,1554,441],{"class":398},[279,1556,770],{"class":398},[279,1558,1560,1563,1565],{"class":281,"line":1559},51,[279,1561,1562],{"class":402},"    options",[279,1564,610],{"class":398},[279,1566,770],{"class":398},[279,1568,1570,1573,1575,1577,1579,1581],{"class":281,"line":1569},52,[279,1571,1572],{"class":402},"      Basic",[279,1574,610],{"class":398},[279,1576,458],{"class":398},[279,1578,735],{"class":288},[279,1580,706],{"class":398},[279,1582,617],{"class":398},[279,1584,1586,1589,1591,1593,1596,1598],{"class":281,"line":1585},53,[279,1587,1588],{"class":402},"      Normal",[279,1590,610],{"class":398},[279,1592,458],{"class":398},[279,1594,1595],{"class":288},"normal",[279,1597,706],{"class":398},[279,1599,617],{"class":398},[279,1601,1603,1606,1608,1610,1613,1615],{"class":281,"line":1602},54,[279,1604,1605],{"class":402},"      Standard",[279,1607,610],{"class":398},[279,1609,458],{"class":398},[279,1611,1612],{"class":288},"standard",[279,1614,706],{"class":398},[279,1616,617],{"class":398},[279,1618,1620],{"class":281,"line":1619},55,[279,1621,1622],{"class":398},"    },\n",[279,1624,1626,1628],{"class":281,"line":1625},56,[279,1627,869],{"class":398},[279,1629,748],{"class":402},[279,1631,1633],{"class":281,"line":1632},57,[279,1634,511],{"emptyLinePlaceholder":39},[279,1636,1638],{"class":281,"line":1637},58,[279,1639,1640],{"class":582},"  // Add reset button\n",[279,1642,1644,1646,1648,1650,1652,1655,1657,1659,1661,1663,1665,1668,1670,1672,1675,1677,1680,1682,1684,1687,1689,1691,1694,1696],{"class":281,"line":1643},59,[279,1645,814],{"class":437},[279,1647,788],{"class":398},[279,1649,791],{"class":437},[279,1651,788],{"class":398},[279,1653,1654],{"class":525},"addButton",[279,1656,598],{"class":402},[279,1658,910],{"class":398},[279,1660,913],{"class":402},[279,1662,610],{"class":398},[279,1664,458],{"class":398},[279,1666,1667],{"class":288},"Reset All",[279,1669,706],{"class":398},[279,1671,452],{"class":398},[279,1673,1674],{"class":402},")",[279,1676,788],{"class":398},[279,1678,1679],{"class":525},"on",[279,1681,598],{"class":402},[279,1683,706],{"class":398},[279,1685,1686],{"class":288},"click",[279,1688,706],{"class":398},[279,1690,441],{"class":398},[279,1692,1693],{"class":398}," ()",[279,1695,767],{"class":406},[279,1697,770],{"class":398},[279,1699,1701,1704,1706,1709,1711,1713,1715,1717,1719],{"class":281,"line":1700},60,[279,1702,1703],{"class":437},"    Object",[279,1705,788],{"class":398},[279,1707,1708],{"class":525},"assign",[279,1710,598],{"class":402},[279,1712,942],{"class":437},[279,1714,788],{"class":398},[279,1716,791],{"class":437},[279,1718,441],{"class":398},[279,1720,770],{"class":398},[279,1722,1724,1727,1729,1731,1733,1736,1738,1740,1742,1745,1747,1749],{"class":281,"line":1723},61,[279,1725,1726],{"class":402},"      positionX",[279,1728,610],{"class":398},[279,1730,614],{"class":613},[279,1732,441],{"class":398},[279,1734,1735],{"class":402}," positionY",[279,1737,610],{"class":398},[279,1739,614],{"class":613},[279,1741,441],{"class":398},[279,1743,1744],{"class":402}," positionZ",[279,1746,610],{"class":398},[279,1748,614],{"class":613},[279,1750,617],{"class":398},[279,1752,1754,1757,1759,1761,1763,1766,1768,1770,1772,1775,1777,1779],{"class":281,"line":1753},62,[279,1755,1756],{"class":402},"      rotationX",[279,1758,610],{"class":398},[279,1760,614],{"class":613},[279,1762,441],{"class":398},[279,1764,1765],{"class":402}," rotationY",[279,1767,610],{"class":398},[279,1769,614],{"class":613},[279,1771,441],{"class":398},[279,1773,1774],{"class":402}," rotationZ",[279,1776,610],{"class":398},[279,1778,614],{"class":613},[279,1780,617],{"class":398},[279,1782,1784,1787,1789,1791,1793,1796,1798,1800,1802,1804,1806,1809,1811,1813,1815,1818,1820,1822,1824],{"class":281,"line":1783},63,[279,1785,1786],{"class":402},"      scale",[279,1788,610],{"class":398},[279,1790,688],{"class":613},[279,1792,441],{"class":398},[279,1794,1795],{"class":402}," color",[279,1797,610],{"class":398},[279,1799,458],{"class":398},[279,1801,703],{"class":288},[279,1803,706],{"class":398},[279,1805,441],{"class":398},[279,1807,1808],{"class":402}," wireframe",[279,1810,610],{"class":398},[279,1812,720],{"class":719},[279,1814,441],{"class":398},[279,1816,1817],{"class":402}," material",[279,1819,610],{"class":398},[279,1821,458],{"class":398},[279,1823,735],{"class":288},[279,1825,463],{"class":398},[279,1827,1829,1832],{"class":281,"line":1828},64,[279,1830,1831],{"class":398},"    }",[279,1833,748],{"class":402},[279,1835,1837,1839],{"class":281,"line":1836},65,[279,1838,869],{"class":398},[279,1840,748],{"class":402},[279,1842,1844,1846],{"class":281,"line":1843},66,[279,1845,745],{"class":398},[279,1847,748],{"class":437},[279,1849,1851],{"class":281,"line":1850},67,[279,1852,511],{"emptyLinePlaceholder":39},[279,1854,1856],{"class":281,"line":1855},68,[279,1857,1858],{"class":582},"// Clean up on unmount\n",[279,1860,1862,1865,1867,1869,1871],{"class":281,"line":1861},69,[279,1863,1864],{"class":525},"onUnmounted",[279,1866,598],{"class":437},[279,1868,764],{"class":398},[279,1870,767],{"class":406},[279,1872,770],{"class":398},[279,1874,1876,1878,1880,1882,1885,1888],{"class":281,"line":1875},70,[279,1877,814],{"class":437},[279,1879,788],{"class":398},[279,1881,791],{"class":437},[279,1883,1884],{"class":398},"?.",[279,1886,1887],{"class":525},"dispose",[279,1889,528],{"class":402},[279,1891,1893,1895],{"class":281,"line":1892},71,[279,1894,745],{"class":398},[279,1896,748],{"class":437},[279,1898,1900,1903,1905],{"class":281,"line":1899},72,[279,1901,1902],{"class":398},"\u003C/",[279,1904,403],{"class":402},[279,1906,424],{"class":398},[279,1908,1910],{"class":281,"line":1909},73,[279,1911,511],{"emptyLinePlaceholder":39},[279,1913,1915,1917,1920],{"class":281,"line":1914},74,[279,1916,399],{"class":398},[279,1918,1919],{"class":402},"template",[279,1921,424],{"class":398},[279,1923,1925,1928,1931,1934,1936,1938,1941,1943],{"class":281,"line":1924},75,[279,1926,1927],{"class":398},"  \u003C",[279,1929,1930],{"class":402},"div",[279,1932,1933],{"class":406}," class",[279,1935,413],{"class":398},[279,1937,416],{"class":398},[279,1939,1940],{"class":288},"relative w-full h-full",[279,1942,416],{"class":398},[279,1944,424],{"class":398},[279,1946,1948],{"class":281,"line":1947},76,[279,1949,1950],{"class":582},"    \u003C!-- Tweakpane container positioned outside canvas -->\n",[279,1952,1954,1957,1959,1961,1963,1965,1967,1969,1971,1973,1975,1978,1980],{"class":281,"line":1953},77,[279,1955,1956],{"class":398},"    \u003C",[279,1958,1930],{"class":402},[279,1960,438],{"class":406},[279,1962,413],{"class":398},[279,1964,416],{"class":398},[279,1966,785],{"class":288},[279,1968,416],{"class":398},[279,1970,1933],{"class":406},[279,1972,413],{"class":398},[279,1974,416],{"class":398},[279,1976,1977],{"class":288},"absolute top-4 right-4 z-10",[279,1979,416],{"class":398},[279,1981,1982],{"class":398}," />\n",[279,1984,1986],{"class":281,"line":1985},78,[279,1987,511],{"emptyLinePlaceholder":39},[279,1989,1991,1993,1996,1999,2001,2003,2006,2008],{"class":281,"line":1990},79,[279,1992,1956],{"class":398},[279,1994,1995],{"class":402},"TresCanvas",[279,1997,1998],{"class":406}," clear-color",[279,2000,413],{"class":398},[279,2002,416],{"class":398},[279,2004,2005],{"class":288},"#82DBC5",[279,2007,416],{"class":398},[279,2009,424],{"class":398},[279,2011,2013,2016,2019,2022,2025,2027,2029,2032,2034,2037,2039,2041,2043,2046,2048],{"class":281,"line":2012},80,[279,2014,2015],{"class":398},"      \u003C",[279,2017,2018],{"class":402},"TresPerspectiveCamera",[279,2020,2021],{"class":398}," :",[279,2023,2024],{"class":406},"position",[279,2026,413],{"class":398},[279,2028,416],{"class":398},[279,2030,2031],{"class":398},"[",[279,2033,970],{"class":613},[279,2035,2036],{"class":398},", ",[279,2038,970],{"class":613},[279,2040,2036],{"class":398},[279,2042,970],{"class":613},[279,2044,2045],{"class":398},"]",[279,2047,416],{"class":398},[279,2049,1982],{"class":398},[279,2051,2053,2055,2057],{"class":281,"line":2052},81,[279,2054,2015],{"class":398},[279,2056,182],{"class":402},[279,2058,1982],{"class":398},[279,2060,2062],{"class":281,"line":2061},82,[279,2063,511],{"emptyLinePlaceholder":39},[279,2065,2067,2069],{"class":281,"line":2066},83,[279,2068,2015],{"class":398},[279,2070,2071],{"class":402},"TresMesh\n",[279,2073,2075,2078,2080,2082,2085],{"class":281,"line":2074},84,[279,2076,2077],{"class":406},"        ref",[279,2079,413],{"class":398},[279,2081,416],{"class":398},[279,2083,2084],{"class":288},"meshRef",[279,2086,2087],{"class":398},"\"\n",[279,2089,2091,2094,2096,2098,2100,2102,2104,2106,2108,2110,2112,2114,2116,2118,2120,2122,2124,2126],{"class":281,"line":2090},85,[279,2092,2093],{"class":398},"        :",[279,2095,2024],{"class":406},[279,2097,413],{"class":398},[279,2099,416],{"class":398},[279,2101,2031],{"class":398},[279,2103,942],{"class":437},[279,2105,788],{"class":398},[279,2107,953],{"class":437},[279,2109,2036],{"class":398},[279,2111,942],{"class":437},[279,2113,788],{"class":398},[279,2115,1018],{"class":437},[279,2117,2036],{"class":398},[279,2119,942],{"class":437},[279,2121,788],{"class":398},[279,2123,1076],{"class":437},[279,2125,2045],{"class":398},[279,2127,2087],{"class":398},[279,2129,2131,2133,2136,2138,2140,2142,2144,2146,2148,2150,2152,2154,2156,2158,2160,2162,2164,2166],{"class":281,"line":2130},86,[279,2132,2093],{"class":398},[279,2134,2135],{"class":406},"rotation",[279,2137,413],{"class":398},[279,2139,416],{"class":398},[279,2141,2031],{"class":398},[279,2143,942],{"class":437},[279,2145,788],{"class":398},[279,2147,1185],{"class":437},[279,2149,2036],{"class":398},[279,2151,942],{"class":437},[279,2153,788],{"class":398},[279,2155,1255],{"class":437},[279,2157,2036],{"class":398},[279,2159,942],{"class":437},[279,2161,788],{"class":398},[279,2163,1321],{"class":437},[279,2165,2045],{"class":398},[279,2167,2087],{"class":398},[279,2169,2171,2173,2175,2177,2179,2181,2183,2185],{"class":281,"line":2170},87,[279,2172,2093],{"class":398},[279,2174,1438],{"class":406},[279,2176,413],{"class":398},[279,2178,416],{"class":398},[279,2180,942],{"class":437},[279,2182,788],{"class":398},[279,2184,1438],{"class":437},[279,2186,2087],{"class":398},[279,2188,2190],{"class":281,"line":2189},88,[279,2191,2192],{"class":398},"      >\n",[279,2194,2196,2199,2202],{"class":281,"line":2195},89,[279,2197,2198],{"class":398},"        \u003C",[279,2200,2201],{"class":402},"TresBoxGeometry",[279,2203,1982],{"class":398},[279,2205,2207,2209],{"class":281,"line":2206},90,[279,2208,2198],{"class":398},[279,2210,2211],{"class":402},"TresMeshBasicMaterial\n",[279,2213,2215,2218,2220,2222,2224,2226,2228,2231,2233,2235],{"class":281,"line":2214},91,[279,2216,2217],{"class":430},"          v-if",[279,2219,413],{"class":398},[279,2221,416],{"class":398},[279,2223,942],{"class":437},[279,2225,788],{"class":398},[279,2227,1550],{"class":437},[279,2229,2230],{"class":398}," === ",[279,2232,706],{"class":398},[279,2234,735],{"class":288},[279,2236,2237],{"class":398},"'\"\n",[279,2239,2241,2244,2246,2248,2250,2252,2254,2256],{"class":281,"line":2240},92,[279,2242,2243],{"class":398},"          :",[279,2245,1494],{"class":406},[279,2247,413],{"class":398},[279,2249,416],{"class":398},[279,2251,942],{"class":437},[279,2253,788],{"class":398},[279,2255,1494],{"class":437},[279,2257,2087],{"class":398},[279,2259,2261,2263,2265,2267,2269,2271,2273,2275],{"class":281,"line":2260},93,[279,2262,2243],{"class":398},[279,2264,1522],{"class":406},[279,2266,413],{"class":398},[279,2268,416],{"class":398},[279,2270,942],{"class":437},[279,2272,788],{"class":398},[279,2274,1522],{"class":437},[279,2276,2087],{"class":398},[279,2278,2280],{"class":281,"line":2279},94,[279,2281,2282],{"class":398},"        />\n",[279,2284,2286,2288],{"class":281,"line":2285},95,[279,2287,2198],{"class":398},[279,2289,2290],{"class":402},"TresMeshNormalMaterial\n",[279,2292,2294,2297,2299,2301,2303,2305,2307,2309,2311,2313],{"class":281,"line":2293},96,[279,2295,2296],{"class":430},"          v-else-if",[279,2298,413],{"class":398},[279,2300,416],{"class":398},[279,2302,942],{"class":437},[279,2304,788],{"class":398},[279,2306,1550],{"class":437},[279,2308,2230],{"class":398},[279,2310,706],{"class":398},[279,2312,1595],{"class":288},[279,2314,2237],{"class":398},[279,2316,2318,2320,2322,2324,2326,2328,2330,2332],{"class":281,"line":2317},97,[279,2319,2243],{"class":398},[279,2321,1522],{"class":406},[279,2323,413],{"class":398},[279,2325,416],{"class":398},[279,2327,942],{"class":437},[279,2329,788],{"class":398},[279,2331,1522],{"class":437},[279,2333,2087],{"class":398},[279,2335,2337],{"class":281,"line":2336},98,[279,2338,2282],{"class":398},[279,2340,2342,2344],{"class":281,"line":2341},99,[279,2343,2198],{"class":398},[279,2345,2346],{"class":402},"TresMeshStandardMaterial\n",[279,2348,2350,2352,2354,2356,2358,2360,2362,2364,2366,2368],{"class":281,"line":2349},100,[279,2351,2296],{"class":430},[279,2353,413],{"class":398},[279,2355,416],{"class":398},[279,2357,942],{"class":437},[279,2359,788],{"class":398},[279,2361,1550],{"class":437},[279,2363,2230],{"class":398},[279,2365,706],{"class":398},[279,2367,1612],{"class":288},[279,2369,2237],{"class":398},[279,2371,2373,2375,2377,2379,2381,2383,2385,2387],{"class":281,"line":2372},101,[279,2374,2243],{"class":398},[279,2376,1494],{"class":406},[279,2378,413],{"class":398},[279,2380,416],{"class":398},[279,2382,942],{"class":437},[279,2384,788],{"class":398},[279,2386,1494],{"class":437},[279,2388,2087],{"class":398},[279,2390,2392,2394,2396,2398,2400,2402,2404,2406],{"class":281,"line":2391},102,[279,2393,2243],{"class":398},[279,2395,1522],{"class":406},[279,2397,413],{"class":398},[279,2399,416],{"class":398},[279,2401,942],{"class":437},[279,2403,788],{"class":398},[279,2405,1522],{"class":437},[279,2407,2087],{"class":398},[279,2409,2411],{"class":281,"line":2410},103,[279,2412,2282],{"class":398},[279,2414,2416,2419,2422],{"class":281,"line":2415},104,[279,2417,2418],{"class":398},"      \u003C/",[279,2420,2421],{"class":402},"TresMesh",[279,2423,424],{"class":398},[279,2425,2427],{"class":281,"line":2426},105,[279,2428,511],{"emptyLinePlaceholder":39},[279,2430,2432,2434,2437,2439,2442,2444,2446,2448,2451,2453,2455,2457,2459],{"class":281,"line":2431},106,[279,2433,2015],{"class":398},[279,2435,2436],{"class":402},"TresGridHelper",[279,2438,2021],{"class":398},[279,2440,2441],{"class":406},"args",[279,2443,413],{"class":398},[279,2445,416],{"class":398},[279,2447,2031],{"class":398},[279,2449,2450],{"class":613},"10",[279,2452,2036],{"class":398},[279,2454,2450],{"class":613},[279,2456,2045],{"class":398},[279,2458,416],{"class":398},[279,2460,1982],{"class":398},[279,2462,2464,2466,2469,2471,2474,2476,2478,2481,2483],{"class":281,"line":2463},107,[279,2465,2015],{"class":398},[279,2467,2468],{"class":402},"TresAmbientLight",[279,2470,2021],{"class":398},[279,2472,2473],{"class":406},"intensity",[279,2475,413],{"class":398},[279,2477,416],{"class":398},[279,2479,2480],{"class":613},"0.5",[279,2482,416],{"class":398},[279,2484,1982],{"class":398},[279,2486,2488,2490,2493,2495,2497,2499,2501,2503,2506,2508,2510,2512,2515,2517,2519,2521,2523,2525,2527,2529,2531],{"class":281,"line":2487},108,[279,2489,2015],{"class":398},[279,2491,2492],{"class":402},"TresDirectionalLight",[279,2494,2021],{"class":398},[279,2496,2024],{"class":406},[279,2498,413],{"class":398},[279,2500,416],{"class":398},[279,2502,2031],{"class":398},[279,2504,2505],{"class":613},"0",[279,2507,2036],{"class":398},[279,2509,2505],{"class":613},[279,2511,2036],{"class":398},[279,2513,2514],{"class":613},"5",[279,2516,2045],{"class":398},[279,2518,416],{"class":398},[279,2520,2021],{"class":398},[279,2522,2473],{"class":406},[279,2524,413],{"class":398},[279,2526,416],{"class":398},[279,2528,2480],{"class":613},[279,2530,416],{"class":398},[279,2532,1982],{"class":398},[279,2534,2536,2539,2541],{"class":281,"line":2535},109,[279,2537,2538],{"class":398},"    \u003C/",[279,2540,1995],{"class":402},[279,2542,424],{"class":398},[279,2544,2546,2549,2551],{"class":281,"line":2545},110,[279,2547,2548],{"class":398},"  \u003C/",[279,2550,1930],{"class":402},[279,2552,424],{"class":398},[279,2554,2556,2558,2560],{"class":281,"line":2555},111,[279,2557,1902],{"class":398},[279,2559,1919],{"class":402},[279,2561,424],{"class":398},[2563,2564,2566],"h3",{"id":2565},"monitoring-values","Monitoring Values",[245,2568,2569],{},"You can also monitor values without making them editable:",[268,2571,2574],{"className":2572,"code":2573,"language":419,"meta":274,"style":274},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","const stats = ref({\n  triangles: 0,\n  fps: 0,\n})\n\nconst statsFolder = pane.value.addFolder({ title: 'Statistics' })\nstatsFolder.addMonitor(stats.value, 'triangles')\nstatsFolder.addMonitor(stats.value, 'fps', { interval: 100 })\n",[276,2575,2576,2591,2602,2613,2619,2623,2661,2689],{"__ignoreMap":274},[279,2577,2578,2580,2583,2585,2587,2589],{"class":281,"line":282},[279,2579,517],{"class":406},[279,2581,2582],{"class":437}," stats ",[279,2584,413],{"class":398},[279,2586,438],{"class":525},[279,2588,598],{"class":437},[279,2590,601],{"class":398},[279,2592,2593,2596,2598,2600],{"class":281,"line":427},[279,2594,2595],{"class":402},"  triangles",[279,2597,610],{"class":398},[279,2599,614],{"class":613},[279,2601,617],{"class":398},[279,2603,2604,2607,2609,2611],{"class":281,"line":466},[279,2605,2606],{"class":402},"  fps",[279,2608,610],{"class":398},[279,2610,614],{"class":613},[279,2612,617],{"class":398},[279,2614,2615,2617],{"class":281,"line":487},[279,2616,745],{"class":398},[279,2618,748],{"class":437},[279,2620,2621],{"class":281,"line":508},[279,2622,511],{"emptyLinePlaceholder":39},[279,2624,2625,2627,2630,2632,2634,2636,2638,2640,2642,2644,2646,2648,2650,2652,2655,2657,2659],{"class":281,"line":514},[279,2626,517],{"class":406},[279,2628,2629],{"class":437}," statsFolder ",[279,2631,413],{"class":398},[279,2633,896],{"class":437},[279,2635,788],{"class":398},[279,2637,791],{"class":437},[279,2639,788],{"class":398},[279,2641,905],{"class":525},[279,2643,598],{"class":437},[279,2645,910],{"class":398},[279,2647,913],{"class":402},[279,2649,610],{"class":398},[279,2651,458],{"class":398},[279,2653,2654],{"class":288},"Statistics",[279,2656,706],{"class":398},[279,2658,452],{"class":398},[279,2660,748],{"class":437},[279,2662,2663,2666,2668,2671,2674,2676,2678,2680,2682,2685,2687],{"class":281,"line":531},[279,2664,2665],{"class":437},"statsFolder",[279,2667,788],{"class":398},[279,2669,2670],{"class":525},"addMonitor",[279,2672,2673],{"class":437},"(stats",[279,2675,788],{"class":398},[279,2677,791],{"class":437},[279,2679,441],{"class":398},[279,2681,458],{"class":398},[279,2683,2684],{"class":288},"triangles",[279,2686,706],{"class":398},[279,2688,748],{"class":437},[279,2690,2691,2693,2695,2697,2699,2701,2703,2705,2707,2710,2712,2714,2716,2719,2721,2724,2726],{"class":281,"line":553},[279,2692,2665],{"class":437},[279,2694,788],{"class":398},[279,2696,2670],{"class":525},[279,2698,2673],{"class":437},[279,2700,788],{"class":398},[279,2702,791],{"class":437},[279,2704,441],{"class":398},[279,2706,458],{"class":398},[279,2708,2709],{"class":288},"fps",[279,2711,706],{"class":398},[279,2713,441],{"class":398},[279,2715,434],{"class":398},[279,2717,2718],{"class":402}," interval",[279,2720,610],{"class":398},[279,2722,2723],{"class":613}," 100",[279,2725,452],{"class":398},[279,2727,748],{"class":437},[258,2729,2731],{"id":2730},"cleanup","Cleanup",[245,2733,2734],{},"Don't forget to dispose of the pane when the component unmounts:",[268,2736,2738],{"className":2572,"code":2737,"language":419,"meta":274,"style":274},"import { onUnmounted } from 'vue'\n\nonUnmounted(() => {\n  pane.value?.dispose()\n})\n",[276,2739,2740,2758,2762,2774,2788],{"__ignoreMap":274},[279,2741,2742,2744,2746,2748,2750,2752,2754,2756],{"class":281,"line":282},[279,2743,431],{"class":430},[279,2745,434],{"class":398},[279,2747,449],{"class":437},[279,2749,452],{"class":398},[279,2751,455],{"class":430},[279,2753,458],{"class":398},[279,2755,391],{"class":288},[279,2757,463],{"class":398},[279,2759,2760],{"class":281,"line":427},[279,2761,511],{"emptyLinePlaceholder":39},[279,2763,2764,2766,2768,2770,2772],{"class":281,"line":466},[279,2765,1864],{"class":525},[279,2767,598],{"class":437},[279,2769,764],{"class":398},[279,2771,767],{"class":406},[279,2773,770],{"class":398},[279,2775,2776,2778,2780,2782,2784,2786],{"class":281,"line":487},[279,2777,814],{"class":437},[279,2779,788],{"class":398},[279,2781,791],{"class":437},[279,2783,1884],{"class":398},[279,2785,1887],{"class":525},[279,2787,528],{"class":402},[279,2789,2790,2792],{"class":281,"line":508},[279,2791,745],{"class":398},[279,2793,748],{"class":437},[375,2795,2796],{},[245,2797,2798],{},"Always dispose of the pane instance to prevent memory leaks, especially in SPAs where components are frequently mounted/unmounted.",[2800,2801,2802],"style",{},"html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}",{"title":274,"searchDepth":282,"depth":427,"links":2804},[2805,2806,2809],{"id":260,"depth":427,"text":13},{"id":382,"depth":427,"text":383,"children":2807},[2808],{"id":2565,"depth":466,"text":2566},{"id":2730,"depth":427,"text":2731},"Learn how to integrate Tweakpane with TresJS for interactive 3D controls","md",null,{"thumbnail":2814},"/recipes/tweakpane.png",{"title":198,"description":2810},"suCCHSWMshvjVAPUx0r5Xcx_akl-XuzHczWZNutNSWs",[2818,2820],{"title":194,"path":195,"stem":196,"description":2819,"children":-1},"Learn how to create complex animations using GSAP with TresJS",{"title":202,"path":203,"stem":204,"description":2821,"children":-1},"Learn how to use Vue's Transition and dynamic components in TresJS",1774953663971]