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