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