[{"data":1,"prerenderedAt":7633},["ShallowReactive",2],{"navigation":3,"/cookbook":211,"/cookbook-surround":236,"$Rv2XlAkWKb":241},[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":155,"body":213,"description":230,"extension":231,"links":232,"meta":233,"navigation":39,"path":151,"seo":234,"stem":156,"__hash__":235},"docs/4.cookbook/index.md",{"type":214,"value":215,"toc":224},"minimark",[216,221],[217,218,220],"h2",{"id":219},"recipes","Recipes",[222,223],"recipes-list",{},{"title":225,"searchDepth":226,"depth":227,"links":228},"",1,2,[229],{"id":219,"depth":227,"text":220},"Discover guided recipes to help you get started with the basics of using Tres. Each recipe is designed to help you understand the core concepts of Tres and how to use them in your projects.","md",null,{},{"title":155,"description":230},"ojHpQlM1BFiUdtS6dGQxi_kgu3mO_Vj65QWI666YzVg",[237,239],{"title":146,"path":147,"stem":148,"description":238,"children":-1},"Explore experimental WebGPU rendering capabilities in TresJS.",{"title":158,"path":159,"stem":160,"description":240,"children":-1},"Learn how to use OrbitControls in TresJS, including both manual and plug-and-play approaches.",[242,974,1748,3101,5215],{"id":243,"title":158,"body":244,"description":240,"extension":231,"links":232,"meta":970,"navigation":39,"path":159,"seo":972,"stem":160,"__hash__":973},"docs/4.cookbook/1.orbit-controls.md",{"type":214,"value":245,"toc":965},[246,249,253,272,276,282,370,387,772,776,783,797,951,961],[247,248],"examples-orbit-controls",{},[250,251,252],"p",{},"OrbitControls is a camera controller that allows you to orbit around a target. It's a great way to explore your scene interactively.",[254,255,256],"note",{},[250,257,258,259,263,264,267,268,271],{},"The OrbitControls utility, which allows users to easily navigate around a 3D scene, isn't included in the core Three.js library by default. To use it, you need to import it manually from the ",[260,261,262],"code",{},"three/addons/controls/OrbitControls"," module via the ",[260,265,266],{},"three-stdlib"," package. Alternatively, if you're using the TresJS ecosystem, you can opt for a ready-to-use version of OrbitControls available as a component in the ",[260,269,270],{},"@tresjs/cientos"," package.",[217,273,275],{"id":274},"using-orbitcontrols-manually","Using OrbitControls Manually",[250,277,278,279,281],{},"To use ",[260,280,158],{}," manually, import it and extend the catalog:",[283,284,289],"pre",{"className":285,"code":286,"filename":287,"language":288,"meta":225,"style":225},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { extend } from '@tresjs/core'\nimport { OrbitControls } from 'three/addons/controls/OrbitControls'\n\nextend({ OrbitControls })\n","setup.ts","ts",[260,290,291,323,342,348],{"__ignoreMap":225},[292,293,295,299,303,307,310,313,316,320],"span",{"class":294,"line":226},"line",[292,296,298],{"class":297},"s7zQu","import",[292,300,302],{"class":301},"sMK4o"," {",[292,304,306],{"class":305},"sTEyZ"," extend",[292,308,309],{"class":301}," }",[292,311,312],{"class":297}," from",[292,314,315],{"class":301}," '",[292,317,319],{"class":318},"sfazB","@tresjs/core",[292,321,322],{"class":301},"'\n",[292,324,325,327,329,332,334,336,338,340],{"class":294,"line":227},[292,326,298],{"class":297},[292,328,302],{"class":301},[292,330,331],{"class":305}," OrbitControls",[292,333,309],{"class":301},[292,335,312],{"class":297},[292,337,315],{"class":301},[292,339,262],{"class":318},[292,341,322],{"class":301},[292,343,345],{"class":294,"line":344},3,[292,346,347],{"emptyLinePlaceholder":39},"\n",[292,349,351,355,358,361,364,367],{"class":294,"line":350},4,[292,352,354],{"class":353},"s2Zo4","extend",[292,356,357],{"class":305},"(",[292,359,360],{"class":301},"{",[292,362,363],{"class":305}," OrbitControls ",[292,365,366],{"class":301},"}",[292,368,369],{"class":305},")\n",[250,371,372,373,376,377,383,384,386],{},"Now you can use the ",[260,374,375],{},"TresOrbitControls"," component in your scene. Since ",[378,379,158],"a",{"href":380,"rel":381},"https://threejs.org/docs/#examples/en/controls/OrbitControls",[382],"nofollow"," needs a reference to the camera and renderer, you can use the ",[260,385,92],{}," composable:",[388,389,390,576],"code-group",{},[283,391,396],{"className":392,"code":393,"filename":394,"language":395,"meta":225,"style":225},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { useTres } from '@tresjs/core'\n\nconst { camera, renderer } = useTres()\n\u003C/script>\n\n\u003Ctemplate>\n \u003CTresOrbitControls\n v-if=\"camera\"\n :args=\"[camera, renderer?.domElement]\"\n />\n\u003C/template>\n","OrbitControls.vue","vue",[260,397,398,427,446,450,476,486,491,501,510,526,561,567],{"__ignoreMap":225},[292,399,400,403,407,411,414,417,420,422,424],{"class":294,"line":226},[292,401,402],{"class":301},"\u003C",[292,404,406],{"class":405},"swJcz","script",[292,408,410],{"class":409},"spNyl"," setup",[292,412,413],{"class":409}," lang",[292,415,416],{"class":301},"=",[292,418,419],{"class":301},"\"",[292,421,288],{"class":318},[292,423,419],{"class":301},[292,425,426],{"class":301},">\n",[292,428,429,431,433,436,438,440,442,444],{"class":294,"line":227},[292,430,298],{"class":297},[292,432,302],{"class":301},[292,434,435],{"class":305}," useTres",[292,437,309],{"class":301},[292,439,312],{"class":297},[292,441,315],{"class":301},[292,443,319],{"class":318},[292,445,322],{"class":301},[292,447,448],{"class":294,"line":344},[292,449,347],{"emptyLinePlaceholder":39},[292,451,452,455,457,460,463,466,468,471,473],{"class":294,"line":350},[292,453,454],{"class":409},"const",[292,456,302],{"class":301},[292,458,459],{"class":305}," camera",[292,461,462],{"class":301},",",[292,464,465],{"class":305}," renderer ",[292,467,366],{"class":301},[292,469,470],{"class":301}," =",[292,472,435],{"class":353},[292,474,475],{"class":305},"()\n",[292,477,479,482,484],{"class":294,"line":478},5,[292,480,481],{"class":301},"\u003C/",[292,483,406],{"class":405},[292,485,426],{"class":301},[292,487,489],{"class":294,"line":488},6,[292,490,347],{"emptyLinePlaceholder":39},[292,492,494,496,499],{"class":294,"line":493},7,[292,495,402],{"class":301},[292,497,498],{"class":405},"template",[292,500,426],{"class":301},[292,502,504,507],{"class":294,"line":503},8,[292,505,506],{"class":301}," \u003C",[292,508,509],{"class":405},"TresOrbitControls\n",[292,511,513,516,518,520,523],{"class":294,"line":512},9,[292,514,515],{"class":297}," v-if",[292,517,416],{"class":301},[292,519,419],{"class":301},[292,521,522],{"class":305},"camera",[292,524,525],{"class":301},"\"\n",[292,527,529,532,535,537,539,542,544,547,550,553,556,559],{"class":294,"line":528},10,[292,530,531],{"class":301}," :",[292,533,534],{"class":409},"args",[292,536,416],{"class":301},[292,538,419],{"class":301},[292,540,541],{"class":301},"[",[292,543,522],{"class":305},[292,545,546],{"class":301},", ",[292,548,549],{"class":305},"renderer",[292,551,552],{"class":301},"?.",[292,554,555],{"class":305},"domElement",[292,557,558],{"class":301},"]",[292,560,525],{"class":301},[292,562,564],{"class":294,"line":563},11,[292,565,566],{"class":301}," />\n",[292,568,570,572,574],{"class":294,"line":569},12,[292,571,481],{"class":301},[292,573,498],{"class":405},[292,575,426],{"class":301},[283,577,580],{"className":392,"code":578,"filename":579,"language":395,"meta":225,"style":225},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport OrbitControls from './OrbitControls.vue'\n\u003C/script>\n\n\u003Ctemplate>\n \u003CTresCanvas shadows alpha>\n \u003CTresPerspectiveCamera :args=\"[45, 1, 0.1, 1000]\" />\n \u003COrbitControls />\n \u003CTresGridHelper :args=\"[10, 10]\" />\n \u003C/TresCanvas>\n\u003C/template>\n","App.vue",[260,581,582,602,621,637,645,649,657,672,717,725,755,764],{"__ignoreMap":225},[292,583,584,586,588,590,592,594,596,598,600],{"class":294,"line":226},[292,585,402],{"class":301},[292,587,406],{"class":405},[292,589,410],{"class":409},[292,591,413],{"class":409},[292,593,416],{"class":301},[292,595,419],{"class":301},[292,597,288],{"class":318},[292,599,419],{"class":301},[292,601,426],{"class":301},[292,603,604,606,608,611,613,615,617,619],{"class":294,"line":227},[292,605,298],{"class":297},[292,607,302],{"class":301},[292,609,610],{"class":305}," TresCanvas",[292,612,309],{"class":301},[292,614,312],{"class":297},[292,616,315],{"class":301},[292,618,319],{"class":318},[292,620,322],{"class":301},[292,622,623,625,627,630,632,635],{"class":294,"line":344},[292,624,298],{"class":297},[292,626,363],{"class":305},[292,628,629],{"class":297},"from",[292,631,315],{"class":301},[292,633,634],{"class":318},"./OrbitControls.vue",[292,636,322],{"class":301},[292,638,639,641,643],{"class":294,"line":350},[292,640,481],{"class":301},[292,642,406],{"class":405},[292,644,426],{"class":301},[292,646,647],{"class":294,"line":478},[292,648,347],{"emptyLinePlaceholder":39},[292,650,651,653,655],{"class":294,"line":488},[292,652,402],{"class":301},[292,654,498],{"class":405},[292,656,426],{"class":301},[292,658,659,661,664,667,670],{"class":294,"line":493},[292,660,506],{"class":301},[292,662,663],{"class":405},"TresCanvas",[292,665,666],{"class":409}," shadows",[292,668,669],{"class":409}," alpha",[292,671,426],{"class":301},[292,673,674,677,680,683,685,687,689,691,695,697,700,702,705,707,710,712,714],{"class":294,"line":503},[292,675,676],{"class":301}," \u003C",[292,678,679],{"class":405},"TresPerspectiveCamera",[292,681,682],{"class":301}," :",[292,684,534],{"class":409},[292,686,416],{"class":301},[292,688,419],{"class":301},[292,690,541],{"class":301},[292,692,694],{"class":693},"sbssI","45",[292,696,546],{"class":301},[292,698,699],{"class":693},"1",[292,701,546],{"class":301},[292,703,704],{"class":693},"0.1",[292,706,546],{"class":301},[292,708,709],{"class":693},"1000",[292,711,558],{"class":301},[292,713,419],{"class":301},[292,715,716],{"class":301}," />\n",[292,718,719,721,723],{"class":294,"line":512},[292,720,676],{"class":301},[292,722,158],{"class":405},[292,724,716],{"class":301},[292,726,727,729,732,734,736,738,740,742,745,747,749,751,753],{"class":294,"line":528},[292,728,676],{"class":301},[292,730,731],{"class":405},"TresGridHelper",[292,733,682],{"class":301},[292,735,534],{"class":409},[292,737,416],{"class":301},[292,739,419],{"class":301},[292,741,541],{"class":301},[292,743,744],{"class":693},"10",[292,746,546],{"class":301},[292,748,744],{"class":693},[292,750,558],{"class":301},[292,752,419],{"class":301},[292,754,716],{"class":301},[292,756,757,760,762],{"class":294,"line":563},[292,758,759],{"class":301}," \u003C/",[292,761,663],{"class":405},[292,763,426],{"class":301},[292,765,766,768,770],{"class":294,"line":569},[292,767,481],{"class":301},[292,769,498],{"class":405},[292,771,426],{"class":301},[773,774],"read-more",{"to":775},"/api/components/tres-objects#extending-the-catalogue",[217,777,779,780,782],{"id":778},"orbitcontrols-from-tresjscientos-recommended","OrbitControls from ",[260,781,270],{}," (Recommended)",[250,784,785,786,792,793,796],{},"The ",[378,787,790],{"href":788,"rel":789},"https://cientos.tresjs.org/",[382],[260,791,270],{}," package provides a plug-and-play ",[260,794,795],{},"\u003COrbitControls />"," component that wraps the ThreeJS OrbitControls. You don't need to extend the catalog or pass any arguments—it just works!",[283,798,801],{"className":392,"code":799,"filename":800,"language":395,"meta":225,"style":225},"\u003Cscript setup lang=\"ts\">\nimport { OrbitControls } from '@tresjs/cientos'\nimport { TresCanvas } from '@tresjs/core'\n\u003C/script>\n\n\u003Ctemplate>\n \u003CTresCanvas shadows alpha>\n \u003CTresPerspectiveCamera :args=\"[45, 1, 0.1, 1000]\" />\n \u003COrbitControls />\n \u003C/TresCanvas>\n\u003C/template>\n","CientosOrbitControls.vue",[260,802,803,823,841,859,867,871,879,891,927,935,943],{"__ignoreMap":225},[292,804,805,807,809,811,813,815,817,819,821],{"class":294,"line":226},[292,806,402],{"class":301},[292,808,406],{"class":405},[292,810,410],{"class":409},[292,812,413],{"class":409},[292,814,416],{"class":301},[292,816,419],{"class":301},[292,818,288],{"class":318},[292,820,419],{"class":301},[292,822,426],{"class":301},[292,824,825,827,829,831,833,835,837,839],{"class":294,"line":227},[292,826,298],{"class":297},[292,828,302],{"class":301},[292,830,331],{"class":305},[292,832,309],{"class":301},[292,834,312],{"class":297},[292,836,315],{"class":301},[292,838,270],{"class":318},[292,840,322],{"class":301},[292,842,843,845,847,849,851,853,855,857],{"class":294,"line":344},[292,844,298],{"class":297},[292,846,302],{"class":301},[292,848,610],{"class":305},[292,850,309],{"class":301},[292,852,312],{"class":297},[292,854,315],{"class":301},[292,856,319],{"class":318},[292,858,322],{"class":301},[292,860,861,863,865],{"class":294,"line":350},[292,862,481],{"class":301},[292,864,406],{"class":405},[292,866,426],{"class":301},[292,868,869],{"class":294,"line":478},[292,870,347],{"emptyLinePlaceholder":39},[292,872,873,875,877],{"class":294,"line":488},[292,874,402],{"class":301},[292,876,498],{"class":405},[292,878,426],{"class":301},[292,880,881,883,885,887,889],{"class":294,"line":493},[292,882,506],{"class":301},[292,884,663],{"class":405},[292,886,666],{"class":409},[292,888,669],{"class":409},[292,890,426],{"class":301},[292,892,893,895,897,899,901,903,905,907,909,911,913,915,917,919,921,923,925],{"class":294,"line":503},[292,894,676],{"class":301},[292,896,679],{"class":405},[292,898,682],{"class":301},[292,900,534],{"class":409},[292,902,416],{"class":301},[292,904,419],{"class":301},[292,906,541],{"class":301},[292,908,694],{"class":693},[292,910,546],{"class":301},[292,912,699],{"class":693},[292,914,546],{"class":301},[292,916,704],{"class":693},[292,918,546],{"class":301},[292,920,709],{"class":693},[292,922,558],{"class":301},[292,924,419],{"class":301},[292,926,716],{"class":301},[292,928,929,931,933],{"class":294,"line":512},[292,930,676],{"class":301},[292,932,158],{"class":405},[292,934,716],{"class":301},[292,936,937,939,941],{"class":294,"line":528},[292,938,759],{"class":301},[292,940,663],{"class":405},[292,942,426],{"class":301},[292,944,945,947,949],{"class":294,"line":563},[292,946,481],{"class":301},[292,948,498],{"class":405},[292,950,426],{"class":301},[952,953,954],"tip",{},[250,955,956,957,960],{},"Make sure the ",[260,958,959],{},"PerspectiveCamera"," is set first in the canvas, otherwise controls might not work as expected.",[962,963,964],"style",{},"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 .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}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 .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 .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}",{"title":225,"searchDepth":226,"depth":227,"links":966},[967,968],{"id":274,"depth":227,"text":275},{"id":778,"depth":227,"text":969},"OrbitControls from @tresjs/cientos (Recommended)",{"thumbnail":971},"/recipes/orbit-controls.png",{"title":158,"description":240},"PlSdSO5bvNZ3n4ylUgjSY4tWbB1P73bDmozCMUeLzDg",{"id":975,"title":162,"body":976,"description":1743,"extension":231,"links":232,"meta":1744,"navigation":39,"path":163,"seo":1746,"stem":164,"__hash__":1747},"docs/4.cookbook/2.basic-animations.md",{"type":214,"value":977,"toc":1741},[978,981,984,1738],[979,980],"examples-basic-animation",{},[250,982,983],{},"This recipe covers the fundamentals of creating smooth animations in TresJS.",[985,986,987,995,1005,1082,1084,1088,1101,1467,1473,1480,1488,1580,1586,1624,1633,1640,1648,1735],"steps",{},[988,989,991,992,994],"h3",{"id":990},"import-useloop-composable","Import ",[260,993,100],{}," composable",[250,996,785,997,999,1000,1004],{},[260,998,100],{}," composable is the core of TresJS updates, which includes: ",[1001,1002,1003],"strong",{},"animations",". It allows you to register a callback that will be called every time the renderer updates the scene with the browser's refresh rate.",[283,1006,1008],{"className":285,"code":1007,"language":288,"meta":225,"style":225},"import { useLoop } from '@tresjs/core'\n\nconst { onBeforeRender } = useLoop()\n\nonBeforeRender(() => {\n // Animation logic here\n})\n\n",[260,1009,1010,1029,1033,1050,1054,1070,1076],{"__ignoreMap":225},[292,1011,1012,1014,1016,1019,1021,1023,1025,1027],{"class":294,"line":226},[292,1013,298],{"class":297},[292,1015,302],{"class":301},[292,1017,1018],{"class":305}," useLoop",[292,1020,309],{"class":301},[292,1022,312],{"class":297},[292,1024,315],{"class":301},[292,1026,319],{"class":318},[292,1028,322],{"class":301},[292,1030,1031],{"class":294,"line":227},[292,1032,347],{"emptyLinePlaceholder":39},[292,1034,1035,1037,1039,1042,1044,1046,1048],{"class":294,"line":344},[292,1036,454],{"class":409},[292,1038,302],{"class":301},[292,1040,1041],{"class":305}," onBeforeRender ",[292,1043,366],{"class":301},[292,1045,470],{"class":301},[292,1047,1018],{"class":353},[292,1049,475],{"class":305},[292,1051,1052],{"class":294,"line":350},[292,1053,347],{"emptyLinePlaceholder":39},[292,1055,1056,1059,1061,1064,1067],{"class":294,"line":478},[292,1057,1058],{"class":353},"onBeforeRender",[292,1060,357],{"class":305},[292,1062,1063],{"class":301},"()",[292,1065,1066],{"class":409}," =>",[292,1068,1069],{"class":301}," {\n",[292,1071,1072],{"class":294,"line":488},[292,1073,1075],{"class":1074},"sHwdD"," // Animation logic here\n",[292,1077,1078,1080],{"class":294,"line":493},[292,1079,366],{"class":301},[292,1081,369],{"class":305},[773,1083],{"to":101},[988,1085,1087],{"id":1086},"get-a-reference-to-the-object-you-want-to-animate","Get a reference to the object you want to animate",[250,1089,1090,1091,1096,1097,1100],{},"Similar to Vue, you can use ",[378,1092,1095],{"href":1093,"rel":1094},"https://vuejs.org/guide/essentials/template-refs",[382],"template refs"," to access the Three.js object instance and manipulate its properties. If you want to optimize even further, you can use ",[260,1098,1099],{},"shallowRef"," to avoid unnecessary reactivity.",[283,1102,1105],{"className":392,"code":1103,"filename":1104,"language":395,"meta":225,"style":225},"\u003Cscript setup lang=\"ts\">\nimport { ref } from 'vue'\nimport { useLoop } from '@tresjs/core'\n\nconst cubeRef = ref\u003CTHREE.Mesh | null>(null)\n// or use shallowRef if you want to avoid reactivity\n// const cubeRef = shallowRef\u003CTHREE.Mesh | null>(null)\n\nconst { onBeforeRender } = useLoop()\n\nonBeforeRender(() => {\n if (cubeRef.value) {\n cubeRef.value.rotation.x += 0.01\n cubeRef.value.rotation.y += 0.01\n }\n})\n\u003C/script>\n\n\u003Ctemplate>\n \u003CTresMesh ref=\"cubeRef\" :position=\"[0, 1, 0]\">\n \u003CTresBoxGeometry :args=\"[1, 1, 1]\" />\n \u003CTresMeshNormalMaterial />\n \u003C/TresMesh>\n\u003C/template>\n","RotatingCube.vue",[260,1106,1107,1127,1146,1164,1168,1207,1212,1217,1221,1237,1241,1253,1275,1301,1323,1329,1336,1345,1350,1359,1405,1439,1449,1458],{"__ignoreMap":225},[292,1108,1109,1111,1113,1115,1117,1119,1121,1123,1125],{"class":294,"line":226},[292,1110,402],{"class":301},[292,1112,406],{"class":405},[292,1114,410],{"class":409},[292,1116,413],{"class":409},[292,1118,416],{"class":301},[292,1120,419],{"class":301},[292,1122,288],{"class":318},[292,1124,419],{"class":301},[292,1126,426],{"class":301},[292,1128,1129,1131,1133,1136,1138,1140,1142,1144],{"class":294,"line":227},[292,1130,298],{"class":297},[292,1132,302],{"class":301},[292,1134,1135],{"class":305}," ref",[292,1137,309],{"class":301},[292,1139,312],{"class":297},[292,1141,315],{"class":301},[292,1143,395],{"class":318},[292,1145,322],{"class":301},[292,1147,1148,1150,1152,1154,1156,1158,1160,1162],{"class":294,"line":344},[292,1149,298],{"class":297},[292,1151,302],{"class":301},[292,1153,1018],{"class":305},[292,1155,309],{"class":301},[292,1157,312],{"class":297},[292,1159,315],{"class":301},[292,1161,319],{"class":318},[292,1163,322],{"class":301},[292,1165,1166],{"class":294,"line":350},[292,1167,347],{"emptyLinePlaceholder":39},[292,1169,1170,1172,1175,1177,1179,1181,1185,1188,1191,1194,1197,1200,1202,1205],{"class":294,"line":478},[292,1171,454],{"class":409},[292,1173,1174],{"class":305}," cubeRef ",[292,1176,416],{"class":301},[292,1178,1135],{"class":353},[292,1180,402],{"class":301},[292,1182,1184],{"class":1183},"sBMFI","THREE",[292,1186,1187],{"class":301},".",[292,1189,1190],{"class":1183},"Mesh",[292,1192,1193],{"class":301}," |",[292,1195,1196],{"class":1183}," null",[292,1198,1199],{"class":301},">",[292,1201,357],{"class":305},[292,1203,1204],{"class":301},"null",[292,1206,369],{"class":305},[292,1208,1209],{"class":294,"line":488},[292,1210,1211],{"class":1074},"// or use shallowRef if you want to avoid reactivity\n",[292,1213,1214],{"class":294,"line":493},[292,1215,1216],{"class":1074},"// const cubeRef = shallowRef\u003CTHREE.Mesh | null>(null)\n",[292,1218,1219],{"class":294,"line":503},[292,1220,347],{"emptyLinePlaceholder":39},[292,1222,1223,1225,1227,1229,1231,1233,1235],{"class":294,"line":512},[292,1224,454],{"class":409},[292,1226,302],{"class":301},[292,1228,1041],{"class":305},[292,1230,366],{"class":301},[292,1232,470],{"class":301},[292,1234,1018],{"class":353},[292,1236,475],{"class":305},[292,1238,1239],{"class":294,"line":528},[292,1240,347],{"emptyLinePlaceholder":39},[292,1242,1243,1245,1247,1249,1251],{"class":294,"line":563},[292,1244,1058],{"class":353},[292,1246,357],{"class":305},[292,1248,1063],{"class":301},[292,1250,1066],{"class":409},[292,1252,1069],{"class":301},[292,1254,1255,1258,1261,1264,1266,1269,1272],{"class":294,"line":569},[292,1256,1257],{"class":297}," if",[292,1259,1260],{"class":405}," (",[292,1262,1263],{"class":305},"cubeRef",[292,1265,1187],{"class":301},[292,1267,1268],{"class":305},"value",[292,1270,1271],{"class":405},") ",[292,1273,1274],{"class":301},"{\n",[292,1276,1278,1281,1283,1285,1287,1290,1292,1295,1298],{"class":294,"line":1277},13,[292,1279,1280],{"class":305}," cubeRef",[292,1282,1187],{"class":301},[292,1284,1268],{"class":305},[292,1286,1187],{"class":301},[292,1288,1289],{"class":305},"rotation",[292,1291,1187],{"class":301},[292,1293,1294],{"class":305},"x",[292,1296,1297],{"class":301}," +=",[292,1299,1300],{"class":693}," 0.01\n",[292,1302,1304,1306,1308,1310,1312,1314,1316,1319,1321],{"class":294,"line":1303},14,[292,1305,1280],{"class":305},[292,1307,1187],{"class":301},[292,1309,1268],{"class":305},[292,1311,1187],{"class":301},[292,1313,1289],{"class":305},[292,1315,1187],{"class":301},[292,1317,1318],{"class":305},"y",[292,1320,1297],{"class":301},[292,1322,1300],{"class":693},[292,1324,1326],{"class":294,"line":1325},15,[292,1327,1328],{"class":301}," }\n",[292,1330,1332,1334],{"class":294,"line":1331},16,[292,1333,366],{"class":301},[292,1335,369],{"class":305},[292,1337,1339,1341,1343],{"class":294,"line":1338},17,[292,1340,481],{"class":301},[292,1342,406],{"class":405},[292,1344,426],{"class":301},[292,1346,1348],{"class":294,"line":1347},18,[292,1349,347],{"emptyLinePlaceholder":39},[292,1351,1353,1355,1357],{"class":294,"line":1352},19,[292,1354,402],{"class":301},[292,1356,498],{"class":405},[292,1358,426],{"class":301},[292,1360,1362,1364,1367,1369,1371,1373,1375,1377,1379,1382,1384,1386,1388,1391,1393,1395,1397,1399,1401,1403],{"class":294,"line":1361},20,[292,1363,506],{"class":301},[292,1365,1366],{"class":405},"TresMesh",[292,1368,1135],{"class":409},[292,1370,416],{"class":301},[292,1372,419],{"class":301},[292,1374,1263],{"class":318},[292,1376,419],{"class":301},[292,1378,682],{"class":301},[292,1380,1381],{"class":409},"position",[292,1383,416],{"class":301},[292,1385,419],{"class":301},[292,1387,541],{"class":301},[292,1389,1390],{"class":693},"0",[292,1392,546],{"class":301},[292,1394,699],{"class":693},[292,1396,546],{"class":301},[292,1398,1390],{"class":693},[292,1400,558],{"class":301},[292,1402,419],{"class":301},[292,1404,426],{"class":301},[292,1406,1408,1410,1413,1415,1417,1419,1421,1423,1425,1427,1429,1431,1433,1435,1437],{"class":294,"line":1407},21,[292,1409,676],{"class":301},[292,1411,1412],{"class":405},"TresBoxGeometry",[292,1414,682],{"class":301},[292,1416,534],{"class":409},[292,1418,416],{"class":301},[292,1420,419],{"class":301},[292,1422,541],{"class":301},[292,1424,699],{"class":693},[292,1426,546],{"class":301},[292,1428,699],{"class":693},[292,1430,546],{"class":301},[292,1432,699],{"class":693},[292,1434,558],{"class":301},[292,1436,419],{"class":301},[292,1438,716],{"class":301},[292,1440,1442,1444,1447],{"class":294,"line":1441},22,[292,1443,676],{"class":301},[292,1445,1446],{"class":405},"TresMeshNormalMaterial",[292,1448,716],{"class":301},[292,1450,1452,1454,1456],{"class":294,"line":1451},23,[292,1453,759],{"class":301},[292,1455,1366],{"class":405},[292,1457,426],{"class":301},[292,1459,1461,1463,1465],{"class":294,"line":1460},24,[292,1462,481],{"class":301},[292,1464,498],{"class":405},[292,1466,426],{"class":301},[773,1468,1470],{"to":1469},"/api/advanced/performance#reactivity-and-performance",[250,1471,1472],{},"To read more about reactivity and performance in TresJS.",[217,1474,1476,1477],{"id":1475},"use-delta","Use ",[260,1478,1479],{},"delta",[250,1481,785,1482,1484,1485,1487],{},[260,1483,1058],{}," callback provides a ",[260,1486,1479],{}," parameter, which represents the time elapsed since the last frame. This is useful for creating frame rate independent animations.",[283,1489,1491],{"className":285,"code":1490,"language":288,"meta":225,"style":225},"onBeforeRender(({ delta }) => {\n if (cubeRef.value) {\n cubeRef.value.rotation.x += delta\n cubeRef.value.rotation.y += delta\n }\n})\n",[260,1492,1493,1513,1529,1550,1570,1574],{"__ignoreMap":225},[292,1494,1495,1497,1499,1502,1506,1509,1511],{"class":294,"line":226},[292,1496,1058],{"class":353},[292,1498,357],{"class":305},[292,1500,1501],{"class":301},"({",[292,1503,1505],{"class":1504},"sHdIc"," delta",[292,1507,1508],{"class":301}," })",[292,1510,1066],{"class":409},[292,1512,1069],{"class":301},[292,1514,1515,1517,1519,1521,1523,1525,1527],{"class":294,"line":227},[292,1516,1257],{"class":297},[292,1518,1260],{"class":405},[292,1520,1263],{"class":305},[292,1522,1187],{"class":301},[292,1524,1268],{"class":305},[292,1526,1271],{"class":405},[292,1528,1274],{"class":301},[292,1530,1531,1533,1535,1537,1539,1541,1543,1545,1547],{"class":294,"line":344},[292,1532,1280],{"class":305},[292,1534,1187],{"class":301},[292,1536,1268],{"class":305},[292,1538,1187],{"class":301},[292,1540,1289],{"class":305},[292,1542,1187],{"class":301},[292,1544,1294],{"class":305},[292,1546,1297],{"class":301},[292,1548,1549],{"class":305}," delta\n",[292,1551,1552,1554,1556,1558,1560,1562,1564,1566,1568],{"class":294,"line":350},[292,1553,1280],{"class":305},[292,1555,1187],{"class":301},[292,1557,1268],{"class":305},[292,1559,1187],{"class":301},[292,1561,1289],{"class":305},[292,1563,1187],{"class":301},[292,1565,1318],{"class":305},[292,1567,1297],{"class":301},[292,1569,1549],{"class":305},[292,1571,1572],{"class":294,"line":478},[292,1573,1328],{"class":301},[292,1575,1576,1578],{"class":294,"line":488},[292,1577,366],{"class":301},[292,1579,369],{"class":305},[250,1581,1582,1583,1585],{},"Without using ",[260,1584,1479],{},", the animation speed would vary depending on the frame rate, leading to inconsistent behavior across different devices, like the example below:",[1587,1588,1596,1597,1614],"div",{"className":1589},[1590,1591,1592,1593,1594,1595],"w-full","flex","border","border-gray-200","rounded-lg","overflow-hidden","\n ",[1587,1598,1602,1603,1611],{"className":1599},[1600,1601,1593],"w-1/2","border-r","\n ",[1587,1604,1610],{"className":1605},[1606,1607,1608,1593,1609],"text-center","p-2","border-b","font-bold","\n 60fps\n ",[1612,1613],"examples-basic-animation-60fps",{},[1587,1615,1617,1621],{"className":1616},[1600],[1587,1618,1620],{"className":1619},[1607,1606,1607,1608,1593,1609],"\n 120fps\n",[1622,1623],"examples-basic-animation-120fps",{},[1587,1625,1632],{"className":1626},[1607,1627,1628,1629,1630,1631,1606],"text-xs","text-gray-500","italic","mt-2","block","\nThe value of `delta` is 0.016 for 60fps and 0.008 for 120fps, this difference ensures that the cube rotates at the same speed on both frame rates.\n",[217,1634,1636,1637],{"id":1635},"using-elapsed","Using ",[260,1638,1639],{},"elapsed",[250,1641,785,1642,1644,1645,1647],{},[260,1643,1058],{}," callback also provides an ",[260,1646,1639],{}," parameter, which represents the total time elapsed since the start of the animation. This can be useful for creating time-based animations like oscillations.",[283,1649,1651],{"className":285,"code":1650,"language":288,"meta":225,"style":225},"onBeforeRender(({ elapsed }) => {\nif (cubeRef.value) {\ncubeRef.value.position.y += Math.sin(elapsed) * 0.01\n}\n})\n",[260,1652,1653,1670,1687,1724,1729],{"__ignoreMap":225},[292,1654,1655,1657,1659,1661,1664,1666,1668],{"class":294,"line":226},[292,1656,1058],{"class":353},[292,1658,357],{"class":305},[292,1660,1501],{"class":301},[292,1662,1663],{"class":1504}," elapsed",[292,1665,1508],{"class":301},[292,1667,1066],{"class":409},[292,1669,1069],{"class":301},[292,1671,1672,1675,1677,1679,1681,1683,1685],{"class":294,"line":227},[292,1673,1674],{"class":297},"if",[292,1676,1260],{"class":405},[292,1678,1263],{"class":305},[292,1680,1187],{"class":301},[292,1682,1268],{"class":305},[292,1684,1271],{"class":405},[292,1686,1274],{"class":301},[292,1688,1689,1691,1693,1695,1697,1699,1701,1703,1705,1708,1710,1713,1715,1717,1719,1722],{"class":294,"line":344},[292,1690,1263],{"class":305},[292,1692,1187],{"class":301},[292,1694,1268],{"class":305},[292,1696,1187],{"class":301},[292,1698,1381],{"class":305},[292,1700,1187],{"class":301},[292,1702,1318],{"class":305},[292,1704,1297],{"class":301},[292,1706,1707],{"class":305}," Math",[292,1709,1187],{"class":301},[292,1711,1712],{"class":353},"sin",[292,1714,357],{"class":405},[292,1716,1639],{"class":305},[292,1718,1271],{"class":405},[292,1720,1721],{"class":301},"*",[292,1723,1300],{"class":693},[292,1725,1726],{"class":294,"line":350},[292,1727,1728],{"class":301},"}\n",[292,1730,1731,1733],{"class":294,"line":478},[292,1732,366],{"class":301},[292,1734,369],{"class":305},[1736,1737],"examples-basic-animation-elapsed",{},[962,1739,1740],{},"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 .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}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 .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 .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}",{"title":225,"searchDepth":226,"depth":227,"links":1742},[],"Learn how to create basic animations in TresJS",{"thumbnail":1745},"/recipes/model-n-animations/basic.png",{"title":162,"description":1743},"EiW-sVHXIrWLRwJcTOD5a3Y-msJTv1SNBHsLh_669FA",{"id":1749,"title":166,"body":1750,"description":3096,"extension":231,"links":232,"meta":3097,"navigation":39,"path":167,"seo":3099,"stem":168,"__hash__":3100},"docs/4.cookbook/3.model-animation.md",{"type":214,"value":1751,"toc":3091},[1752,1755,1758,1762,1765,1793,1807,1814,1818,2161,2165,3088],[1753,1754],"examples-model-animation",{},[250,1756,1757],{},"Let's bring your 3D models to life with animations in TresJS. This guide covers loading animated models and controlling their playback.",[217,1759,1761],{"id":1760},"where-to-find-models","Where to find models?",[250,1763,1764],{},"You can find quality 3D models for your projects in various online repositories. Here are some hand picked sources from the TresJS community:",[1766,1767,1768,1777,1785],"ul",{},[1769,1770,1771,1776],"li",{},[378,1772,1775],{"href":1773,"rel":1774},"https://poly.pizza/",[382],"poly.pizza"," - A collection of free 3D models.",[1769,1778,1779,1784],{},[378,1780,1783],{"href":1781,"rel":1782},"https://market.pmnd.rs/",[382],"Pmndrs Marketplace"," - A marketplace for 3D assets. All free",[1769,1786,1787,1792],{},[378,1788,1791],{"href":1789,"rel":1790},"https://kaylousberg.itch.io/",[382],"KayKit Character Packs"," - Free and paid character packs. Animated, all CC0, a personal favorite of ours.",[250,1794,1795,1796,1799,1800,1187],{},"For this tutorial we will use a simplified version of the ",[1001,1797,1798],{},"KayKit Knight character",", you can download it directly from ",[1801,1802,1806],"u-button",{"variant":1803,"icon":1804,"download":39,"external":225,":to":1805},"ghost","i-lucide-arrow-down","/models/knight/Knight.glb","here",[250,1808,1809],{},[1810,1811],"img",{"alt":1812,"src":1813},"Knight model","/recipes/model-n-animations/kaykit-simplified-knight.png",[217,1815,1817],{"id":1816},"loading-animated-models","Loading Animated Models",[985,1819,1820,1824,1830,1848,1852,1865,1959,1968,1972,1975,1980],{},[988,1821,1823],{"id":1822},"install-cientos","Install cientos",[250,1825,1826,1827,1829],{},"If you haven't already, install the ",[260,1828,270],{}," package, which provides components for loading 3D models.",[283,1831,1835],{"className":1832,"code":1833,"language":1834,"meta":225,"style":225},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","npm install @tresjs/cientos\n","bash",[260,1836,1837],{"__ignoreMap":225},[292,1838,1839,1842,1845],{"class":294,"line":226},[292,1840,1841],{"class":1183},"npm",[292,1843,1844],{"class":318}," install",[292,1846,1847],{"class":318}," @tresjs/cientos\n",[988,1849,1851],{"id":1850},"load-the-model","Load the Model",[250,1853,1854,1855,1858,1859,1861,1862,1187],{},"Use the ",[260,1856,1857],{},"useGLTF"," composable from ",[260,1860,270],{}," to load your animated model. Add the downloaded GLB file to your public directory in a subfolder like ",[260,1863,1864],{},"/models/knight/",[283,1866,1869],{"className":392,"code":1867,"filename":1868,"language":395,"meta":225,"style":225},"\u003Cscript setup lang=\"ts\">\nimport { useGLTF } from '@tresjs/cientos'\n\nconst { state: model, nodes } = useGLTF('/models/knight/Knight.glb')\n\u003C/script>\n","Knight.vue",[260,1870,1871,1891,1910,1914,1951],{"__ignoreMap":225},[292,1872,1873,1875,1877,1879,1881,1883,1885,1887,1889],{"class":294,"line":226},[292,1874,402],{"class":301},[292,1876,406],{"class":405},[292,1878,410],{"class":409},[292,1880,413],{"class":409},[292,1882,416],{"class":301},[292,1884,419],{"class":301},[292,1886,288],{"class":318},[292,1888,419],{"class":301},[292,1890,426],{"class":301},[292,1892,1893,1895,1897,1900,1902,1904,1906,1908],{"class":294,"line":227},[292,1894,298],{"class":297},[292,1896,302],{"class":301},[292,1898,1899],{"class":305}," useGLTF",[292,1901,309],{"class":301},[292,1903,312],{"class":297},[292,1905,315],{"class":301},[292,1907,270],{"class":318},[292,1909,322],{"class":301},[292,1911,1912],{"class":294,"line":344},[292,1913,347],{"emptyLinePlaceholder":39},[292,1915,1916,1918,1920,1923,1926,1929,1931,1934,1936,1938,1940,1942,1945,1947,1949],{"class":294,"line":350},[292,1917,454],{"class":409},[292,1919,302],{"class":301},[292,1921,1922],{"class":405}," state",[292,1924,1925],{"class":301},":",[292,1927,1928],{"class":305}," model",[292,1930,462],{"class":301},[292,1932,1933],{"class":305}," nodes ",[292,1935,366],{"class":301},[292,1937,470],{"class":301},[292,1939,1899],{"class":353},[292,1941,357],{"class":305},[292,1943,1944],{"class":301},"'",[292,1946,1805],{"class":318},[292,1948,1944],{"class":301},[292,1950,369],{"class":305},[292,1952,1953,1955,1957],{"class":294,"line":478},[292,1954,481],{"class":301},[292,1956,406],{"class":405},[292,1958,426],{"class":301},[773,1960,1962],{"to":1961},"https://cientos.tresjs.org/guide/loaders/use-gltf.html",[250,1963,1964,1965,1967],{},"Learn more about the ",[260,1966,1857],{}," composable.",[988,1969,1971],{"id":1970},"add-rig-to-the-scene","Add Rig to the Scene",[250,1973,1974],{},"The Rig is the root object that contains the entire model and its animations. You can access it from the individual nodes.",[952,1976,1977],{},[250,1978,1979],{},"The Rig might be named differently depending on the model. Check the model's structure to find the correct root object.",[283,1981,1983],{"className":392,"code":1982,"filename":1868,"language":395,"meta":225,"style":225},"\u003Cscript setup lang=\"ts\">\nimport { useGLTF } from '@tresjs/cientos'\n\nconst { state: model, nodes } = useGLTF('/models/knight/Knight.glb')\n\n// We access the rig from the individual nodes\nconst rig = computed(() => nodes.value.Rig)\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cprimitive v-if=\"rig\" :object=\"rig\" />\n\u003C/template>\n",[260,1984,1985,2005,2023,2027,2059,2063,2068,2098,2106,2110,2118,2153],{"__ignoreMap":225},[292,1986,1987,1989,1991,1993,1995,1997,1999,2001,2003],{"class":294,"line":226},[292,1988,402],{"class":301},[292,1990,406],{"class":405},[292,1992,410],{"class":409},[292,1994,413],{"class":409},[292,1996,416],{"class":301},[292,1998,419],{"class":301},[292,2000,288],{"class":318},[292,2002,419],{"class":301},[292,2004,426],{"class":301},[292,2006,2007,2009,2011,2013,2015,2017,2019,2021],{"class":294,"line":227},[292,2008,298],{"class":297},[292,2010,302],{"class":301},[292,2012,1899],{"class":305},[292,2014,309],{"class":301},[292,2016,312],{"class":297},[292,2018,315],{"class":301},[292,2020,270],{"class":318},[292,2022,322],{"class":301},[292,2024,2025],{"class":294,"line":344},[292,2026,347],{"emptyLinePlaceholder":39},[292,2028,2029,2031,2033,2035,2037,2039,2041,2043,2045,2047,2049,2051,2053,2055,2057],{"class":294,"line":350},[292,2030,454],{"class":409},[292,2032,302],{"class":301},[292,2034,1922],{"class":405},[292,2036,1925],{"class":301},[292,2038,1928],{"class":305},[292,2040,462],{"class":301},[292,2042,1933],{"class":305},[292,2044,366],{"class":301},[292,2046,470],{"class":301},[292,2048,1899],{"class":353},[292,2050,357],{"class":305},[292,2052,1944],{"class":301},[292,2054,1805],{"class":318},[292,2056,1944],{"class":301},[292,2058,369],{"class":305},[292,2060,2061],{"class":294,"line":478},[292,2062,347],{"emptyLinePlaceholder":39},[292,2064,2065],{"class":294,"line":488},[292,2066,2067],{"class":1074},"// We access the rig from the individual nodes\n",[292,2069,2070,2072,2075,2077,2080,2082,2084,2086,2089,2091,2093,2095],{"class":294,"line":493},[292,2071,454],{"class":409},[292,2073,2074],{"class":305}," rig ",[292,2076,416],{"class":301},[292,2078,2079],{"class":353}," computed",[292,2081,357],{"class":305},[292,2083,1063],{"class":301},[292,2085,1066],{"class":409},[292,2087,2088],{"class":305}," nodes",[292,2090,1187],{"class":301},[292,2092,1268],{"class":305},[292,2094,1187],{"class":301},[292,2096,2097],{"class":305},"Rig)\n",[292,2099,2100,2102,2104],{"class":294,"line":503},[292,2101,481],{"class":301},[292,2103,406],{"class":405},[292,2105,426],{"class":301},[292,2107,2108],{"class":294,"line":512},[292,2109,347],{"emptyLinePlaceholder":39},[292,2111,2112,2114,2116],{"class":294,"line":528},[292,2113,402],{"class":301},[292,2115,498],{"class":405},[292,2117,426],{"class":301},[292,2119,2120,2123,2126,2129,2131,2133,2136,2138,2140,2143,2145,2147,2149,2151],{"class":294,"line":563},[292,2121,2122],{"class":301}," \u003C",[292,2124,2125],{"class":405},"primitive",[292,2127,2128],{"class":297}," v-if",[292,2130,416],{"class":301},[292,2132,419],{"class":301},[292,2134,2135],{"class":305},"rig",[292,2137,419],{"class":301},[292,2139,682],{"class":301},[292,2141,2142],{"class":409},"object",[292,2144,416],{"class":301},[292,2146,419],{"class":301},[292,2148,2135],{"class":305},[292,2150,419],{"class":301},[292,2152,716],{"class":301},[292,2154,2155,2157,2159],{"class":294,"line":569},[292,2156,481],{"class":301},[292,2158,498],{"class":405},[292,2160,426],{"class":301},[217,2162,2164],{"id":2163},"animation-control","Animation Control",[985,2166,2167,2174,2183,2366,2373,2377,2384,2433,2437,2444,2498,2502,2513,3054,3059],{},[988,2168,1854,2170,2173],{"id":2169},"use-the-useanimations-composable",[260,2171,2172],{},"useAnimations"," Composable",[250,2175,785,2176,2178,2179,2182],{},[260,2177,2172],{}," composable helps manage and play animations from your model. It takes the animations array and the rig as parameters and returns the ",[260,2180,2181],{},"AnimationClips"," (actions).",[283,2184,2186],{"className":392,"code":2185,"filename":1868,"language":395,"meta":225,"style":225},"\u003Cscript setup lang=\"ts\">\nimport { useGLTF, useAnimations } from '@tresjs/cientos'\n\nconst { state: model, nodes } = useGLTF('/models/knight/Knight.glb')\n\nconst animations = computed(() => model.value?.animations || [])\nconst rig = computed(() => nodes.value.Rig)\n\nconst { actions } = useAnimations(animations, rig)\n\u003C/script>\n",[260,2187,2188,2208,2231,2235,2267,2271,2305,2331,2335,2358],{"__ignoreMap":225},[292,2189,2190,2192,2194,2196,2198,2200,2202,2204,2206],{"class":294,"line":226},[292,2191,402],{"class":301},[292,2193,406],{"class":405},[292,2195,410],{"class":409},[292,2197,413],{"class":409},[292,2199,416],{"class":301},[292,2201,419],{"class":301},[292,2203,288],{"class":318},[292,2205,419],{"class":301},[292,2207,426],{"class":301},[292,2209,2210,2212,2214,2216,2218,2221,2223,2225,2227,2229],{"class":294,"line":227},[292,2211,298],{"class":297},[292,2213,302],{"class":301},[292,2215,1899],{"class":305},[292,2217,462],{"class":301},[292,2219,2220],{"class":305}," useAnimations",[292,2222,309],{"class":301},[292,2224,312],{"class":297},[292,2226,315],{"class":301},[292,2228,270],{"class":318},[292,2230,322],{"class":301},[292,2232,2233],{"class":294,"line":344},[292,2234,347],{"emptyLinePlaceholder":39},[292,2236,2237,2239,2241,2243,2245,2247,2249,2251,2253,2255,2257,2259,2261,2263,2265],{"class":294,"line":350},[292,2238,454],{"class":409},[292,2240,302],{"class":301},[292,2242,1922],{"class":405},[292,2244,1925],{"class":301},[292,2246,1928],{"class":305},[292,2248,462],{"class":301},[292,2250,1933],{"class":305},[292,2252,366],{"class":301},[292,2254,470],{"class":301},[292,2256,1899],{"class":353},[292,2258,357],{"class":305},[292,2260,1944],{"class":301},[292,2262,1805],{"class":318},[292,2264,1944],{"class":301},[292,2266,369],{"class":305},[292,2268,2269],{"class":294,"line":478},[292,2270,347],{"emptyLinePlaceholder":39},[292,2272,2273,2275,2278,2280,2282,2284,2286,2288,2290,2292,2294,2296,2299,2302],{"class":294,"line":488},[292,2274,454],{"class":409},[292,2276,2277],{"class":305}," animations ",[292,2279,416],{"class":301},[292,2281,2079],{"class":353},[292,2283,357],{"class":305},[292,2285,1063],{"class":301},[292,2287,1066],{"class":409},[292,2289,1928],{"class":305},[292,2291,1187],{"class":301},[292,2293,1268],{"class":305},[292,2295,552],{"class":301},[292,2297,2298],{"class":305},"animations ",[292,2300,2301],{"class":301},"||",[292,2303,2304],{"class":305}," [])\n",[292,2306,2307,2309,2311,2313,2315,2317,2319,2321,2323,2325,2327,2329],{"class":294,"line":493},[292,2308,454],{"class":409},[292,2310,2074],{"class":305},[292,2312,416],{"class":301},[292,2314,2079],{"class":353},[292,2316,357],{"class":305},[292,2318,1063],{"class":301},[292,2320,1066],{"class":409},[292,2322,2088],{"class":305},[292,2324,1187],{"class":301},[292,2326,1268],{"class":305},[292,2328,1187],{"class":301},[292,2330,2097],{"class":305},[292,2332,2333],{"class":294,"line":503},[292,2334,347],{"emptyLinePlaceholder":39},[292,2336,2337,2339,2341,2344,2346,2348,2350,2353,2355],{"class":294,"line":512},[292,2338,454],{"class":409},[292,2340,302],{"class":301},[292,2342,2343],{"class":305}," actions ",[292,2345,366],{"class":301},[292,2347,470],{"class":301},[292,2349,2220],{"class":353},[292,2351,2352],{"class":305},"(animations",[292,2354,462],{"class":301},[292,2356,2357],{"class":305}," rig)\n",[292,2359,2360,2362,2364],{"class":294,"line":528},[292,2361,481],{"class":301},[292,2363,406],{"class":405},[292,2365,426],{"class":301},[773,2367,2369],{"to":2368},"https://cientos.tresjs.org/guide/abstractions/use-animations.html",[250,2370,1964,2371,1967],{},[260,2372,2172],{},[988,2374,2376],{"id":2375},"play-an-animation","Play an Animation",[250,2378,2379,2380,2383],{},"You can play an animation by calling the ",[260,2381,2382],{},"play"," method on the desired action. For example, to play the \"Cheer\" animation:",[283,2385,2387],{"className":285,"code":2386,"language":288,"meta":225,"style":225},"const { actions } = useAnimations(animations, rig)\n\nactions.value.Cheer?.play()\n",[260,2388,2389,2409,2413],{"__ignoreMap":225},[292,2390,2391,2393,2395,2397,2399,2401,2403,2405,2407],{"class":294,"line":226},[292,2392,454],{"class":409},[292,2394,302],{"class":301},[292,2396,2343],{"class":305},[292,2398,366],{"class":301},[292,2400,470],{"class":301},[292,2402,2220],{"class":353},[292,2404,2352],{"class":305},[292,2406,462],{"class":301},[292,2408,2357],{"class":305},[292,2410,2411],{"class":294,"line":227},[292,2412,347],{"emptyLinePlaceholder":39},[292,2414,2415,2418,2420,2422,2424,2427,2429,2431],{"class":294,"line":344},[292,2416,2417],{"class":305},"actions",[292,2419,1187],{"class":301},[292,2421,1268],{"class":305},[292,2423,1187],{"class":301},[292,2425,2426],{"class":305},"Cheer",[292,2428,552],{"class":301},[292,2430,2382],{"class":353},[292,2432,475],{"class":305},[988,2434,2436],{"id":2435},"set-animation-loop","Set animation loop",[250,2438,2439,2440,2443],{},"You can set the loop mode of an animation using the ",[260,2441,2442],{},"setLoop"," method. For example, to make the \"Cheer\" animation loop indefinitely:",[283,2445,2447],{"className":285,"code":2446,"language":288,"meta":225,"style":225},"actions.value.Cheer?.setLoop(THREE.LoopRepeat, Infinity)\nactions.value.Cheer?.play()\n",[260,2448,2449,2480],{"__ignoreMap":225},[292,2450,2451,2453,2455,2457,2459,2461,2463,2465,2468,2470,2473,2475,2478],{"class":294,"line":226},[292,2452,2417],{"class":305},[292,2454,1187],{"class":301},[292,2456,1268],{"class":305},[292,2458,1187],{"class":301},[292,2460,2426],{"class":305},[292,2462,552],{"class":301},[292,2464,2442],{"class":353},[292,2466,2467],{"class":305},"(THREE",[292,2469,1187],{"class":301},[292,2471,2472],{"class":305},"LoopRepeat",[292,2474,462],{"class":301},[292,2476,2477],{"class":301}," Infinity",[292,2479,369],{"class":305},[292,2481,2482,2484,2486,2488,2490,2492,2494,2496],{"class":294,"line":227},[292,2483,2417],{"class":305},[292,2485,1187],{"class":301},[292,2487,1268],{"class":305},[292,2489,1187],{"class":301},[292,2491,2426],{"class":305},[292,2493,552],{"class":301},[292,2495,2382],{"class":353},[292,2497,475],{"class":305},[988,2499,2501],{"id":2500},"smooth-animation-transitions","Smooth Animation Transitions",[250,2503,2504,2505,2508,2509,2512],{},"To create smooth transitions between animations, use the ",[260,2506,2507],{},"fadeIn"," and ",[260,2510,2511],{},"fadeOut"," methods. This prevents abrupt changes and creates more natural character movement:",[283,2514,2516],{"className":392,"code":2515,"filename":1868,"language":395,"meta":225,"style":225},"\u003Cscript setup lang=\"ts\">\nimport { useGLTF, useAnimations } from '@tresjs/cientos'\nimport type { AnimationAction } from 'three'\n\nconst { state: model, nodes } = useGLTF('/models/knight/Knight.glb')\nconst animations = computed(() => model.value?.animations || [])\nconst rig = computed(() => nodes.value.Rig)\nconst { actions } = useAnimations(animations, rig)\n\nlet currentAction = ref\u003CAnimationAction | null>(null)\n\nconst transitionToAnimation = (animationName: string, duration = 0.5) => {\n const nextAction = actions.value[animationName]\n if (!nextAction) return\n\n // Fade out current animation\n if (currentAction.value) {\n currentAction.value.fadeOut(duration)\n }\n\n // Fade in new animation\n nextAction.reset()\n nextAction.setEffectiveWeight(1)\n nextAction.play()\n nextAction.fadeIn(duration)\n\n currentAction.value = nextAction\n}\n\n// Example: Transition from Idle to Cheer\nconst playCheerAnimation = () => {\n transitionToAnimation('Cheer', 0.3)\n}\n\nconst playIdleAnimation = () => {\n transitionToAnimation('Idle', 0.3)\n}\n\u003C/script>\n",[260,2517,2518,2538,2560,2583,2587,2619,2649,2675,2695,2699,2728,2732,2768,2792,2809,2813,2818,2835,2855,2859,2863,2868,2880,2895,2905,2920,2925,2940,2945,2950,2956,2973,2994,2999,3004,3020,3040,3045],{"__ignoreMap":225},[292,2519,2520,2522,2524,2526,2528,2530,2532,2534,2536],{"class":294,"line":226},[292,2521,402],{"class":301},[292,2523,406],{"class":405},[292,2525,410],{"class":409},[292,2527,413],{"class":409},[292,2529,416],{"class":301},[292,2531,419],{"class":301},[292,2533,288],{"class":318},[292,2535,419],{"class":301},[292,2537,426],{"class":301},[292,2539,2540,2542,2544,2546,2548,2550,2552,2554,2556,2558],{"class":294,"line":227},[292,2541,298],{"class":297},[292,2543,302],{"class":301},[292,2545,1899],{"class":305},[292,2547,462],{"class":301},[292,2549,2220],{"class":305},[292,2551,309],{"class":301},[292,2553,312],{"class":297},[292,2555,315],{"class":301},[292,2557,270],{"class":318},[292,2559,322],{"class":301},[292,2561,2562,2564,2567,2569,2572,2574,2576,2578,2581],{"class":294,"line":344},[292,2563,298],{"class":297},[292,2565,2566],{"class":297}," type",[292,2568,302],{"class":301},[292,2570,2571],{"class":305}," AnimationAction",[292,2573,309],{"class":301},[292,2575,312],{"class":297},[292,2577,315],{"class":301},[292,2579,2580],{"class":318},"three",[292,2582,322],{"class":301},[292,2584,2585],{"class":294,"line":350},[292,2586,347],{"emptyLinePlaceholder":39},[292,2588,2589,2591,2593,2595,2597,2599,2601,2603,2605,2607,2609,2611,2613,2615,2617],{"class":294,"line":478},[292,2590,454],{"class":409},[292,2592,302],{"class":301},[292,2594,1922],{"class":405},[292,2596,1925],{"class":301},[292,2598,1928],{"class":305},[292,2600,462],{"class":301},[292,2602,1933],{"class":305},[292,2604,366],{"class":301},[292,2606,470],{"class":301},[292,2608,1899],{"class":353},[292,2610,357],{"class":305},[292,2612,1944],{"class":301},[292,2614,1805],{"class":318},[292,2616,1944],{"class":301},[292,2618,369],{"class":305},[292,2620,2621,2623,2625,2627,2629,2631,2633,2635,2637,2639,2641,2643,2645,2647],{"class":294,"line":488},[292,2622,454],{"class":409},[292,2624,2277],{"class":305},[292,2626,416],{"class":301},[292,2628,2079],{"class":353},[292,2630,357],{"class":305},[292,2632,1063],{"class":301},[292,2634,1066],{"class":409},[292,2636,1928],{"class":305},[292,2638,1187],{"class":301},[292,2640,1268],{"class":305},[292,2642,552],{"class":301},[292,2644,2298],{"class":305},[292,2646,2301],{"class":301},[292,2648,2304],{"class":305},[292,2650,2651,2653,2655,2657,2659,2661,2663,2665,2667,2669,2671,2673],{"class":294,"line":493},[292,2652,454],{"class":409},[292,2654,2074],{"class":305},[292,2656,416],{"class":301},[292,2658,2079],{"class":353},[292,2660,357],{"class":305},[292,2662,1063],{"class":301},[292,2664,1066],{"class":409},[292,2666,2088],{"class":305},[292,2668,1187],{"class":301},[292,2670,1268],{"class":305},[292,2672,1187],{"class":301},[292,2674,2097],{"class":305},[292,2676,2677,2679,2681,2683,2685,2687,2689,2691,2693],{"class":294,"line":503},[292,2678,454],{"class":409},[292,2680,302],{"class":301},[292,2682,2343],{"class":305},[292,2684,366],{"class":301},[292,2686,470],{"class":301},[292,2688,2220],{"class":353},[292,2690,2352],{"class":305},[292,2692,462],{"class":301},[292,2694,2357],{"class":305},[292,2696,2697],{"class":294,"line":512},[292,2698,347],{"emptyLinePlaceholder":39},[292,2700,2701,2704,2707,2709,2711,2713,2716,2718,2720,2722,2724,2726],{"class":294,"line":528},[292,2702,2703],{"class":409},"let",[292,2705,2706],{"class":305}," currentAction ",[292,2708,416],{"class":301},[292,2710,1135],{"class":353},[292,2712,402],{"class":301},[292,2714,2715],{"class":1183},"AnimationAction",[292,2717,1193],{"class":301},[292,2719,1196],{"class":1183},[292,2721,1199],{"class":301},[292,2723,357],{"class":305},[292,2725,1204],{"class":301},[292,2727,369],{"class":305},[292,2729,2730],{"class":294,"line":563},[292,2731,347],{"emptyLinePlaceholder":39},[292,2733,2734,2736,2739,2741,2743,2746,2748,2751,2753,2756,2758,2761,2764,2766],{"class":294,"line":569},[292,2735,454],{"class":409},[292,2737,2738],{"class":305}," transitionToAnimation ",[292,2740,416],{"class":301},[292,2742,1260],{"class":301},[292,2744,2745],{"class":1504},"animationName",[292,2747,1925],{"class":301},[292,2749,2750],{"class":1183}," string",[292,2752,462],{"class":301},[292,2754,2755],{"class":1504}," duration",[292,2757,470],{"class":301},[292,2759,2760],{"class":693}," 0.5",[292,2762,2763],{"class":301},")",[292,2765,1066],{"class":409},[292,2767,1069],{"class":301},[292,2769,2770,2773,2776,2778,2781,2783,2785,2787,2789],{"class":294,"line":1277},[292,2771,2772],{"class":409}," const",[292,2774,2775],{"class":305}," nextAction",[292,2777,470],{"class":301},[292,2779,2780],{"class":305}," actions",[292,2782,1187],{"class":301},[292,2784,1268],{"class":305},[292,2786,541],{"class":405},[292,2788,2745],{"class":305},[292,2790,2791],{"class":405},"]\n",[292,2793,2794,2796,2798,2801,2804,2806],{"class":294,"line":1303},[292,2795,1257],{"class":297},[292,2797,1260],{"class":405},[292,2799,2800],{"class":301},"!",[292,2802,2803],{"class":305},"nextAction",[292,2805,1271],{"class":405},[292,2807,2808],{"class":297},"return\n",[292,2810,2811],{"class":294,"line":1325},[292,2812,347],{"emptyLinePlaceholder":39},[292,2814,2815],{"class":294,"line":1331},[292,2816,2817],{"class":1074}," // Fade out current animation\n",[292,2819,2820,2822,2824,2827,2829,2831,2833],{"class":294,"line":1338},[292,2821,1257],{"class":297},[292,2823,1260],{"class":405},[292,2825,2826],{"class":305},"currentAction",[292,2828,1187],{"class":301},[292,2830,1268],{"class":305},[292,2832,1271],{"class":405},[292,2834,1274],{"class":301},[292,2836,2837,2840,2842,2844,2846,2848,2850,2853],{"class":294,"line":1347},[292,2838,2839],{"class":305}," currentAction",[292,2841,1187],{"class":301},[292,2843,1268],{"class":305},[292,2845,1187],{"class":301},[292,2847,2511],{"class":353},[292,2849,357],{"class":405},[292,2851,2852],{"class":305},"duration",[292,2854,369],{"class":405},[292,2856,2857],{"class":294,"line":1352},[292,2858,1328],{"class":301},[292,2860,2861],{"class":294,"line":1361},[292,2862,347],{"emptyLinePlaceholder":39},[292,2864,2865],{"class":294,"line":1407},[292,2866,2867],{"class":1074}," // Fade in new animation\n",[292,2869,2870,2873,2875,2878],{"class":294,"line":1441},[292,2871,2872],{"class":305}," nextAction",[292,2874,1187],{"class":301},[292,2876,2877],{"class":353},"reset",[292,2879,475],{"class":405},[292,2881,2882,2884,2886,2889,2891,2893],{"class":294,"line":1451},[292,2883,2872],{"class":305},[292,2885,1187],{"class":301},[292,2887,2888],{"class":353},"setEffectiveWeight",[292,2890,357],{"class":405},[292,2892,699],{"class":693},[292,2894,369],{"class":405},[292,2896,2897,2899,2901,2903],{"class":294,"line":1460},[292,2898,2872],{"class":305},[292,2900,1187],{"class":301},[292,2902,2382],{"class":353},[292,2904,475],{"class":405},[292,2906,2908,2910,2912,2914,2916,2918],{"class":294,"line":2907},25,[292,2909,2872],{"class":305},[292,2911,1187],{"class":301},[292,2913,2507],{"class":353},[292,2915,357],{"class":405},[292,2917,2852],{"class":305},[292,2919,369],{"class":405},[292,2921,2923],{"class":294,"line":2922},26,[292,2924,347],{"emptyLinePlaceholder":39},[292,2926,2928,2931,2933,2935,2937],{"class":294,"line":2927},27,[292,2929,2930],{"class":305}," currentAction",[292,2932,1187],{"class":301},[292,2934,1268],{"class":305},[292,2936,470],{"class":301},[292,2938,2939],{"class":305}," nextAction\n",[292,2941,2943],{"class":294,"line":2942},28,[292,2944,1728],{"class":301},[292,2946,2948],{"class":294,"line":2947},29,[292,2949,347],{"emptyLinePlaceholder":39},[292,2951,2953],{"class":294,"line":2952},30,[292,2954,2955],{"class":1074},"// Example: Transition from Idle to Cheer\n",[292,2957,2959,2961,2964,2966,2969,2971],{"class":294,"line":2958},31,[292,2960,454],{"class":409},[292,2962,2963],{"class":305}," playCheerAnimation ",[292,2965,416],{"class":301},[292,2967,2968],{"class":301}," ()",[292,2970,1066],{"class":409},[292,2972,1069],{"class":301},[292,2974,2976,2979,2981,2983,2985,2987,2989,2992],{"class":294,"line":2975},32,[292,2977,2978],{"class":353}," transitionToAnimation",[292,2980,357],{"class":405},[292,2982,1944],{"class":301},[292,2984,2426],{"class":318},[292,2986,1944],{"class":301},[292,2988,462],{"class":301},[292,2990,2991],{"class":693}," 0.3",[292,2993,369],{"class":405},[292,2995,2997],{"class":294,"line":2996},33,[292,2998,1728],{"class":301},[292,3000,3002],{"class":294,"line":3001},34,[292,3003,347],{"emptyLinePlaceholder":39},[292,3005,3007,3009,3012,3014,3016,3018],{"class":294,"line":3006},35,[292,3008,454],{"class":409},[292,3010,3011],{"class":305}," playIdleAnimation ",[292,3013,416],{"class":301},[292,3015,2968],{"class":301},[292,3017,1066],{"class":409},[292,3019,1069],{"class":301},[292,3021,3023,3025,3027,3029,3032,3034,3036,3038],{"class":294,"line":3022},36,[292,3024,2978],{"class":353},[292,3026,357],{"class":405},[292,3028,1944],{"class":301},[292,3030,3031],{"class":318},"Idle",[292,3033,1944],{"class":301},[292,3035,462],{"class":301},[292,3037,2991],{"class":693},[292,3039,369],{"class":405},[292,3041,3043],{"class":294,"line":3042},37,[292,3044,1728],{"class":301},[292,3046,3048,3050,3052],{"class":294,"line":3047},38,[292,3049,481],{"class":301},[292,3051,406],{"class":405},[292,3053,426],{"class":301},[250,3055,3056],{},[1001,3057,3058],{},"Key points about animation transitions:",[1766,3060,3061,3067,3073,3079,3085],{},[1769,3062,3063,3066],{},[260,3064,3065],{},"fadeOut(duration)"," gradually reduces the animation's influence over the specified duration",[1769,3068,3069,3072],{},[260,3070,3071],{},"fadeIn(duration)"," gradually increases the animation's influence over the specified duration",[1769,3074,3075,3078],{},[260,3076,3077],{},"reset()"," resets the animation to its starting frame",[1769,3080,3081,3084],{},[260,3082,3083],{},"setEffectiveWeight(1)"," ensures the animation has full influence when active",[1769,3086,3087],{},"Shorter durations (0.1-0.3s) work well for quick actions, longer ones (0.5-1s) for smoother character transitions",[962,3089,3090],{},"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 .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}",{"title":225,"searchDepth":226,"depth":227,"links":3092},[3093,3094,3095],{"id":1760,"depth":227,"text":1761},{"id":1816,"depth":227,"text":1817},{"id":2163,"depth":227,"text":2164},"Learn how to animate 3D models in TresJS",{"thumbnail":3098},"/recipes/model-n-animations/model-n-animations.png",{"title":166,"description":3096},"9LY81_yj9Oj0-4efXdxQ4xWaLUr90OGt7MyprunrPPs",{"id":3102,"title":170,"body":3103,"description":5210,"extension":231,"links":232,"meta":5211,"navigation":39,"path":171,"seo":5213,"stem":172,"__hash__":5214},"docs/4.cookbook/4.advanced-gsap-animations.md",{"type":214,"value":3104,"toc":5203},[3105,3108,3111,4093,4097,4101,4104,4107,4744,4748,4751,4786,4982,4986,4989,5189,5194,5200],[3106,3107],"examples-advanced-gsap-animations",{},[250,3109,3110],{},"This recipe demonstrates how to create sophisticated animations using GSAP (GreenSock Animation Platform) with TresJS for smooth, performance-optimized animations with advanced features like staggering and timeline control.",[985,3112,3113,3117,3120,3134,3138,3144,3207,3218,3222,3225,3319,3323,3326,3555,3559,3566,3948,3952,3958,4087],{},[988,3114,3116],{"id":3115},"install-gsap","Install GSAP",[250,3118,3119],{},"First, install GSAP as a dependency in your project:",[283,3121,3123],{"className":1832,"code":3122,"language":1834,"meta":225,"style":225},"npm install gsap\n",[260,3124,3125],{"__ignoreMap":225},[292,3126,3127,3129,3131],{"class":294,"line":226},[292,3128,1841],{"class":1183},[292,3130,1844],{"class":318},[292,3132,3133],{"class":318}," gsap\n",[988,3135,3137],{"id":3136},"import-required-modules","Import required modules",[250,3139,3140,3141,3143],{},"Import GSAP and the necessary Vue composables. Use ",[260,3142,1099],{}," for better performance with Three.js objects:",[283,3145,3147],{"className":285,"code":3146,"language":288,"meta":225,"style":225},"import { shallowRef, watch } from 'vue'\nimport { OrbitControls } from '@tresjs/cientos'\nimport gsap from 'gsap'\n",[260,3148,3149,3173,3191],{"__ignoreMap":225},[292,3150,3151,3153,3155,3158,3160,3163,3165,3167,3169,3171],{"class":294,"line":226},[292,3152,298],{"class":297},[292,3154,302],{"class":301},[292,3156,3157],{"class":305}," shallowRef",[292,3159,462],{"class":301},[292,3161,3162],{"class":305}," watch",[292,3164,309],{"class":301},[292,3166,312],{"class":297},[292,3168,315],{"class":301},[292,3170,395],{"class":318},[292,3172,322],{"class":301},[292,3174,3175,3177,3179,3181,3183,3185,3187,3189],{"class":294,"line":227},[292,3176,298],{"class":297},[292,3178,302],{"class":301},[292,3180,331],{"class":305},[292,3182,309],{"class":301},[292,3184,312],{"class":297},[292,3186,315],{"class":301},[292,3188,270],{"class":318},[292,3190,322],{"class":301},[292,3192,3193,3195,3198,3200,3202,3205],{"class":294,"line":344},[292,3194,298],{"class":297},[292,3196,3197],{"class":305}," gsap ",[292,3199,629],{"class":297},[292,3201,315],{"class":301},[292,3203,3204],{"class":318},"gsap",[292,3206,322],{"class":301},[952,3208,3209],{},[250,3210,1476,3211,3213,3214,3217],{},[260,3212,1099],{}," instead of ",[260,3215,3216],{},"ref"," to avoid unnecessary reactivity on Three.js objects, which improves performance.",[988,3219,3221],{"id":3220},"create-multiple-objects-to-animate","Create multiple objects to animate",[250,3223,3224],{},"Set up an array of positions for multiple boxes that will be animated with stagger effects:",[283,3226,3228],{"className":285,"code":3227,"language":288,"meta":225,"style":225},"const boxesRef = shallowRef()\nconst zs = []\nfor (let z = -4.5; z \u003C= 4.5; z++) {\n zs.push(z)\n}\n",[260,3229,3230,3243,3255,3298,3315],{"__ignoreMap":225},[292,3231,3232,3234,3237,3239,3241],{"class":294,"line":226},[292,3233,454],{"class":409},[292,3235,3236],{"class":305}," boxesRef ",[292,3238,416],{"class":301},[292,3240,3157],{"class":353},[292,3242,475],{"class":305},[292,3244,3245,3247,3250,3252],{"class":294,"line":227},[292,3246,454],{"class":409},[292,3248,3249],{"class":305}," zs ",[292,3251,416],{"class":301},[292,3253,3254],{"class":305}," []\n",[292,3256,3257,3260,3262,3264,3267,3269,3272,3275,3278,3280,3283,3286,3288,3291,3294,3296],{"class":294,"line":344},[292,3258,3259],{"class":297},"for",[292,3261,1260],{"class":305},[292,3263,2703],{"class":409},[292,3265,3266],{"class":305}," z ",[292,3268,416],{"class":301},[292,3270,3271],{"class":301}," -",[292,3273,3274],{"class":693},"4.5",[292,3276,3277],{"class":301},";",[292,3279,3266],{"class":305},[292,3281,3282],{"class":301},"\u003C=",[292,3284,3285],{"class":693}," 4.5",[292,3287,3277],{"class":301},[292,3289,3290],{"class":305}," z",[292,3292,3293],{"class":301},"++",[292,3295,1271],{"class":305},[292,3297,1274],{"class":301},[292,3299,3300,3303,3305,3308,3310,3313],{"class":294,"line":350},[292,3301,3302],{"class":305}," zs",[292,3304,1187],{"class":301},[292,3306,3307],{"class":353},"push",[292,3309,357],{"class":405},[292,3311,3312],{"class":305},"z",[292,3314,369],{"class":405},[292,3316,3317],{"class":294,"line":478},[292,3318,1728],{"class":301},[988,3320,3322],{"id":3321},"set-up-the-scene-structure","Set up the scene structure",[250,3324,3325],{},"Create a group of meshes that will be animated together:",[283,3327,3329],{"className":392,"code":3328,"language":395,"meta":225,"style":225},"\u003Ctemplate>\n \u003CTresPerspectiveCamera :position=\"[-15, 10, 15]\" />\n \u003COrbitControls />\n \u003CTresGroup ref=\"boxesRef\">\n \u003CTresMesh v-for=\"(z, i) of zs\" :key=\"i\" :position=\"[0, 0.5, z]\">\n \u003CTresBoxGeometry />\n \u003CTresMeshNormalMaterial />\n \u003C/TresMesh>\n \u003C/TresGroup>\n \u003CTresGridHelper :args=\"[10, 10, 0x444444, 'teal']\" />\n\u003C/template>\n",[260,3330,3331,3339,3373,3381,3401,3471,3480,3488,3497,3505,3547],{"__ignoreMap":225},[292,3332,3333,3335,3337],{"class":294,"line":226},[292,3334,402],{"class":301},[292,3336,498],{"class":405},[292,3338,426],{"class":301},[292,3340,3341,3343,3345,3347,3349,3351,3353,3356,3359,3361,3363,3365,3367,3369,3371],{"class":294,"line":227},[292,3342,506],{"class":301},[292,3344,679],{"class":405},[292,3346,682],{"class":301},[292,3348,1381],{"class":409},[292,3350,416],{"class":301},[292,3352,419],{"class":301},[292,3354,3355],{"class":301},"[-",[292,3357,3358],{"class":693},"15",[292,3360,546],{"class":301},[292,3362,744],{"class":693},[292,3364,546],{"class":301},[292,3366,3358],{"class":693},[292,3368,558],{"class":301},[292,3370,419],{"class":301},[292,3372,716],{"class":301},[292,3374,3375,3377,3379],{"class":294,"line":344},[292,3376,506],{"class":301},[292,3378,158],{"class":405},[292,3380,716],{"class":301},[292,3382,3383,3385,3388,3390,3392,3394,3397,3399],{"class":294,"line":350},[292,3384,506],{"class":301},[292,3386,3387],{"class":405},"TresGroup",[292,3389,1135],{"class":409},[292,3391,416],{"class":301},[292,3393,419],{"class":301},[292,3395,3396],{"class":318},"boxesRef",[292,3398,419],{"class":301},[292,3400,426],{"class":301},[292,3402,3403,3405,3407,3410,3412,3414,3416,3418,3420,3423,3426,3429,3431,3433,3436,3438,3440,3442,3444,3446,3448,3450,3452,3454,3456,3458,3461,3463,3465,3467,3469],{"class":294,"line":478},[292,3404,676],{"class":301},[292,3406,1366],{"class":405},[292,3408,3409],{"class":297}," v-for",[292,3411,416],{"class":301},[292,3413,419],{"class":301},[292,3415,357],{"class":301},[292,3417,3312],{"class":305},[292,3419,546],{"class":301},[292,3421,3422],{"class":305},"i",[292,3424,3425],{"class":301},") of ",[292,3427,3428],{"class":305},"zs",[292,3430,419],{"class":301},[292,3432,682],{"class":301},[292,3434,3435],{"class":409},"key",[292,3437,416],{"class":301},[292,3439,419],{"class":301},[292,3441,3422],{"class":305},[292,3443,419],{"class":301},[292,3445,682],{"class":301},[292,3447,1381],{"class":409},[292,3449,416],{"class":301},[292,3451,419],{"class":301},[292,3453,541],{"class":301},[292,3455,1390],{"class":693},[292,3457,546],{"class":301},[292,3459,3460],{"class":693},"0.5",[292,3462,546],{"class":301},[292,3464,3312],{"class":305},[292,3466,558],{"class":301},[292,3468,419],{"class":301},[292,3470,426],{"class":301},[292,3472,3473,3476,3478],{"class":294,"line":488},[292,3474,3475],{"class":301}," \u003C",[292,3477,1412],{"class":405},[292,3479,716],{"class":301},[292,3481,3482,3484,3486],{"class":294,"line":493},[292,3483,3475],{"class":301},[292,3485,1446],{"class":405},[292,3487,716],{"class":301},[292,3489,3490,3493,3495],{"class":294,"line":503},[292,3491,3492],{"class":301}," \u003C/",[292,3494,1366],{"class":405},[292,3496,426],{"class":301},[292,3498,3499,3501,3503],{"class":294,"line":512},[292,3500,759],{"class":301},[292,3502,3387],{"class":405},[292,3504,426],{"class":301},[292,3506,3507,3509,3511,3513,3515,3517,3519,3521,3523,3525,3527,3529,3532,3534,3536,3539,3541,3543,3545],{"class":294,"line":528},[292,3508,506],{"class":301},[292,3510,731],{"class":405},[292,3512,682],{"class":301},[292,3514,534],{"class":409},[292,3516,416],{"class":301},[292,3518,419],{"class":301},[292,3520,541],{"class":301},[292,3522,744],{"class":693},[292,3524,546],{"class":301},[292,3526,744],{"class":693},[292,3528,546],{"class":301},[292,3530,3531],{"class":693},"0x444444",[292,3533,546],{"class":301},[292,3535,1944],{"class":301},[292,3537,3538],{"class":318},"teal",[292,3540,1944],{"class":301},[292,3542,558],{"class":301},[292,3544,419],{"class":301},[292,3546,716],{"class":301},[292,3548,3549,3551,3553],{"class":294,"line":563},[292,3550,481],{"class":301},[292,3552,498],{"class":405},[292,3554,426],{"class":301},[988,3556,3558],{"id":3557},"create-the-gsap-staggered-animation","Create the GSAP staggered animation",[250,3560,3561,3562,3565],{},"Use Vue's ",[260,3563,3564],{},"watch"," to set up the animation when the template ref is available:",[283,3567,3569],{"className":285,"code":3568,"language":288,"meta":225,"style":225},"watch(boxesRef, () => {\n if (!boxesRef.value) return\n\n // Get positions and rotations for all boxes\n const positions = Array.from(boxesRef.value.children).map(\n (child) => child.position\n )\n const rotations = Array.from(boxesRef.value.children).map(\n (child) => child.rotation\n )\n\n const animProperties = {\n ease: 'power1.inOut',\n duration: 1,\n stagger: {\n each: 0.25,\n repeat: -1,\n yoyo: true,\n },\n }\n\n // Animate positions\n gsap.to(positions, {\n y: 2.5,\n ...animProperties,\n })\n\n // Animate rotations\n gsap.to(rotations, {\n x: 2,\n ...animProperties,\n })\n})\n",[260,3570,3571,3586,3604,3608,3613,3652,3672,3677,3712,3729,3733,3737,3748,3765,3777,3786,3798,3811,3824,3829,3833,3837,3842,3861,3873,3883,3890,3894,3899,3916,3928,3936,3942],{"__ignoreMap":225},[292,3572,3573,3575,3578,3580,3582,3584],{"class":294,"line":226},[292,3574,3564],{"class":353},[292,3576,3577],{"class":305},"(boxesRef",[292,3579,462],{"class":301},[292,3581,2968],{"class":301},[292,3583,1066],{"class":409},[292,3585,1069],{"class":301},[292,3587,3588,3590,3592,3594,3596,3598,3600,3602],{"class":294,"line":227},[292,3589,1257],{"class":297},[292,3591,1260],{"class":405},[292,3593,2800],{"class":301},[292,3595,3396],{"class":305},[292,3597,1187],{"class":301},[292,3599,1268],{"class":305},[292,3601,1271],{"class":405},[292,3603,2808],{"class":297},[292,3605,3606],{"class":294,"line":344},[292,3607,347],{"emptyLinePlaceholder":39},[292,3609,3610],{"class":294,"line":350},[292,3611,3612],{"class":1074}," // Get positions and rotations for all boxes\n",[292,3614,3615,3617,3620,3622,3625,3627,3629,3631,3633,3635,3637,3639,3642,3644,3646,3649],{"class":294,"line":478},[292,3616,2772],{"class":409},[292,3618,3619],{"class":305}," positions",[292,3621,470],{"class":301},[292,3623,3624],{"class":305}," Array",[292,3626,1187],{"class":301},[292,3628,629],{"class":353},[292,3630,357],{"class":405},[292,3632,3396],{"class":305},[292,3634,1187],{"class":301},[292,3636,1268],{"class":305},[292,3638,1187],{"class":301},[292,3640,3641],{"class":305},"children",[292,3643,2763],{"class":405},[292,3645,1187],{"class":301},[292,3647,3648],{"class":353},"map",[292,3650,3651],{"class":405},"(\n",[292,3653,3654,3657,3660,3662,3664,3667,3669],{"class":294,"line":488},[292,3655,3656],{"class":301}," (",[292,3658,3659],{"class":1504},"child",[292,3661,2763],{"class":301},[292,3663,1066],{"class":409},[292,3665,3666],{"class":305}," child",[292,3668,1187],{"class":301},[292,3670,3671],{"class":305},"position\n",[292,3673,3674],{"class":294,"line":493},[292,3675,3676],{"class":405}," )\n",[292,3678,3679,3681,3684,3686,3688,3690,3692,3694,3696,3698,3700,3702,3704,3706,3708,3710],{"class":294,"line":503},[292,3680,2772],{"class":409},[292,3682,3683],{"class":305}," rotations",[292,3685,470],{"class":301},[292,3687,3624],{"class":305},[292,3689,1187],{"class":301},[292,3691,629],{"class":353},[292,3693,357],{"class":405},[292,3695,3396],{"class":305},[292,3697,1187],{"class":301},[292,3699,1268],{"class":305},[292,3701,1187],{"class":301},[292,3703,3641],{"class":305},[292,3705,2763],{"class":405},[292,3707,1187],{"class":301},[292,3709,3648],{"class":353},[292,3711,3651],{"class":405},[292,3713,3714,3716,3718,3720,3722,3724,3726],{"class":294,"line":512},[292,3715,3656],{"class":301},[292,3717,3659],{"class":1504},[292,3719,2763],{"class":301},[292,3721,1066],{"class":409},[292,3723,3666],{"class":305},[292,3725,1187],{"class":301},[292,3727,3728],{"class":305},"rotation\n",[292,3730,3731],{"class":294,"line":528},[292,3732,3676],{"class":405},[292,3734,3735],{"class":294,"line":563},[292,3736,347],{"emptyLinePlaceholder":39},[292,3738,3739,3741,3744,3746],{"class":294,"line":569},[292,3740,2772],{"class":409},[292,3742,3743],{"class":305}," animProperties",[292,3745,470],{"class":301},[292,3747,1069],{"class":301},[292,3749,3750,3753,3755,3757,3760,3762],{"class":294,"line":1277},[292,3751,3752],{"class":405}," ease",[292,3754,1925],{"class":301},[292,3756,315],{"class":301},[292,3758,3759],{"class":318},"power1.inOut",[292,3761,1944],{"class":301},[292,3763,3764],{"class":301},",\n",[292,3766,3767,3770,3772,3775],{"class":294,"line":1303},[292,3768,3769],{"class":405}," duration",[292,3771,1925],{"class":301},[292,3773,3774],{"class":693}," 1",[292,3776,3764],{"class":301},[292,3778,3779,3782,3784],{"class":294,"line":1325},[292,3780,3781],{"class":405}," stagger",[292,3783,1925],{"class":301},[292,3785,1069],{"class":301},[292,3787,3788,3791,3793,3796],{"class":294,"line":1331},[292,3789,3790],{"class":405}," each",[292,3792,1925],{"class":301},[292,3794,3795],{"class":693}," 0.25",[292,3797,3764],{"class":301},[292,3799,3800,3803,3805,3807,3809],{"class":294,"line":1338},[292,3801,3802],{"class":405}," repeat",[292,3804,1925],{"class":301},[292,3806,3271],{"class":301},[292,3808,699],{"class":693},[292,3810,3764],{"class":301},[292,3812,3813,3816,3818,3822],{"class":294,"line":1347},[292,3814,3815],{"class":405}," yoyo",[292,3817,1925],{"class":301},[292,3819,3821],{"class":3820},"sfNiH"," true",[292,3823,3764],{"class":301},[292,3825,3826],{"class":294,"line":1352},[292,3827,3828],{"class":301}," },\n",[292,3830,3831],{"class":294,"line":1361},[292,3832,1328],{"class":301},[292,3834,3835],{"class":294,"line":1407},[292,3836,347],{"emptyLinePlaceholder":39},[292,3838,3839],{"class":294,"line":1441},[292,3840,3841],{"class":1074}," // Animate positions\n",[292,3843,3844,3847,3849,3852,3854,3857,3859],{"class":294,"line":1451},[292,3845,3846],{"class":305}," gsap",[292,3848,1187],{"class":301},[292,3850,3851],{"class":353},"to",[292,3853,357],{"class":405},[292,3855,3856],{"class":305},"positions",[292,3858,462],{"class":301},[292,3860,1069],{"class":301},[292,3862,3863,3866,3868,3871],{"class":294,"line":1460},[292,3864,3865],{"class":405}," y",[292,3867,1925],{"class":301},[292,3869,3870],{"class":693}," 2.5",[292,3872,3764],{"class":301},[292,3874,3875,3878,3881],{"class":294,"line":2907},[292,3876,3877],{"class":301}," ...",[292,3879,3880],{"class":305},"animProperties",[292,3882,3764],{"class":301},[292,3884,3885,3888],{"class":294,"line":2922},[292,3886,3887],{"class":301}," }",[292,3889,369],{"class":405},[292,3891,3892],{"class":294,"line":2927},[292,3893,347],{"emptyLinePlaceholder":39},[292,3895,3896],{"class":294,"line":2942},[292,3897,3898],{"class":1074}," // Animate rotations\n",[292,3900,3901,3903,3905,3907,3909,3912,3914],{"class":294,"line":2947},[292,3902,3846],{"class":305},[292,3904,1187],{"class":301},[292,3906,3851],{"class":353},[292,3908,357],{"class":405},[292,3910,3911],{"class":305},"rotations",[292,3913,462],{"class":301},[292,3915,1069],{"class":301},[292,3917,3918,3921,3923,3926],{"class":294,"line":2952},[292,3919,3920],{"class":405}," x",[292,3922,1925],{"class":301},[292,3924,3925],{"class":693}," 2",[292,3927,3764],{"class":301},[292,3929,3930,3932,3934],{"class":294,"line":2958},[292,3931,3877],{"class":301},[292,3933,3880],{"class":305},[292,3935,3764],{"class":301},[292,3937,3938,3940],{"class":294,"line":2975},[292,3939,3887],{"class":301},[292,3941,369],{"class":405},[292,3943,3944,3946],{"class":294,"line":2996},[292,3945,366],{"class":301},[292,3947,369],{"class":305},[988,3949,3951],{"id":3950},"understanding-gsap-stagger-options","Understanding GSAP Stagger Options",[250,3953,785,3954,3957],{},[260,3955,3956],{},"stagger"," property provides powerful control over timing:",[283,3959,3961],{"className":285,"code":3960,"language":288,"meta":225,"style":225},"const animProperties = {\n ease: 'power1.inOut', // Easing function\n duration: 1, // Animation duration in seconds\n stagger: {\n each: 0.25, // Delay between each object (0.25s)\n repeat: -1, // Infinite repeat (-1)\n yoyo: true, // Reverse on alternate cycles\n from: 'start', // Animation direction (start, center, end)\n },\n}\n",[260,3962,3963,3974,3992,4006,4015,4029,4045,4059,4078,4083],{"__ignoreMap":225},[292,3964,3965,3967,3970,3972],{"class":294,"line":226},[292,3966,454],{"class":409},[292,3968,3969],{"class":305}," animProperties ",[292,3971,416],{"class":301},[292,3973,1069],{"class":301},[292,3975,3976,3979,3981,3983,3985,3987,3989],{"class":294,"line":227},[292,3977,3978],{"class":405}," ease",[292,3980,1925],{"class":301},[292,3982,315],{"class":301},[292,3984,3759],{"class":318},[292,3986,1944],{"class":301},[292,3988,462],{"class":301},[292,3990,3991],{"class":1074}," // Easing function\n",[292,3993,3994,3997,3999,4001,4003],{"class":294,"line":344},[292,3995,3996],{"class":405}," duration",[292,3998,1925],{"class":301},[292,4000,3774],{"class":693},[292,4002,462],{"class":301},[292,4004,4005],{"class":1074}," // Animation duration in seconds\n",[292,4007,4008,4011,4013],{"class":294,"line":350},[292,4009,4010],{"class":405}," stagger",[292,4012,1925],{"class":301},[292,4014,1069],{"class":301},[292,4016,4017,4020,4022,4024,4026],{"class":294,"line":478},[292,4018,4019],{"class":405}," each",[292,4021,1925],{"class":301},[292,4023,3795],{"class":693},[292,4025,462],{"class":301},[292,4027,4028],{"class":1074}," // Delay between each object (0.25s)\n",[292,4030,4031,4034,4036,4038,4040,4042],{"class":294,"line":488},[292,4032,4033],{"class":405}," repeat",[292,4035,1925],{"class":301},[292,4037,3271],{"class":301},[292,4039,699],{"class":693},[292,4041,462],{"class":301},[292,4043,4044],{"class":1074}," // Infinite repeat (-1)\n",[292,4046,4047,4050,4052,4054,4056],{"class":294,"line":493},[292,4048,4049],{"class":405}," yoyo",[292,4051,1925],{"class":301},[292,4053,3821],{"class":3820},[292,4055,462],{"class":301},[292,4057,4058],{"class":1074}," // Reverse on alternate cycles\n",[292,4060,4061,4064,4066,4068,4071,4073,4075],{"class":294,"line":503},[292,4062,4063],{"class":405}," from",[292,4065,1925],{"class":301},[292,4067,315],{"class":301},[292,4069,4070],{"class":318},"start",[292,4072,1944],{"class":301},[292,4074,462],{"class":301},[292,4076,4077],{"class":1074}," // Animation direction (start, center, end)\n",[292,4079,4080],{"class":294,"line":512},[292,4081,4082],{"class":301}," },\n",[292,4084,4085],{"class":294,"line":528},[292,4086,1728],{"class":301},[773,4088,4090],{"to":4089},"https://gsap.com/docs/v3/Staggers/",[250,4091,4092],{},"Learn more about GSAP stagger options and configurations.",[217,4094,4096],{"id":4095},"advanced-techniques","Advanced Techniques",[988,4098,4100],{"id":4099},"timeline-control","Timeline Control",[4102,4103],"examples-advanced-gsap-timeline",{},[250,4105,4106],{},"For more complex sequences, use GSAP timelines to coordinate multiple animations:",[283,4108,4111],{"className":392,"code":4109,"filename":4110,"language":395,"meta":225,"style":225},"\u003Cscript setup lang=\"ts\">\nimport { shallowRef, watch, onMounted } from 'vue'\nimport gsap from 'gsap'\n\nconst groupRef = shallowRef()\nconst timeline = gsap.timeline({ paused: true })\n\nwatch(groupRef, () => {\n if (!groupRef.value) return\n\n const children = Array.from(groupRef.value.children)\n\n // Clear existing timeline\n timeline.clear()\n\n // Add multiple animations to timeline\n timeline\n .to(children.map(child => child.position), {\n y: 3,\n duration: 1,\n ease: 'back.out(1.7)',\n stagger: 0.1\n })\n .to(children.map(child => child.rotation), {\n y: Math.PI * 2,\n duration: 2,\n ease: 'power2.inOut',\n stagger: 0.1\n }, '-=0.5') // Start 0.5s before previous animation ends\n .to(children.map(child => child.scale), {\n x: 1.5,\n y: 1.5,\n z: 1.5,\n duration: 0.5,\n ease: 'elastic.out(1, 0.3)',\n stagger: 0.05\n })\n})\n\n// Control functions\nconst playAnimation = () => timeline.play()\nconst pauseAnimation = () => timeline.pause()\nconst reverseAnimation = () => timeline.reverse()\nconst restartAnimation = () => timeline.restart()\n\u003C/script>\n","TimelineAnimation.vue",[260,4112,4113,4133,4160,4174,4178,4191,4223,4227,4242,4261,4265,4294,4298,4303,4315,4319,4324,4329,4362,4374,4385,4401,4411,4418,4450,4470,4480,4495,4503,4520,4553,4565,4575,4586,4596,4611,4620,4626,4632,4637,4643,4666,4689,4712,4735],{"__ignoreMap":225},[292,4114,4115,4117,4119,4121,4123,4125,4127,4129,4131],{"class":294,"line":226},[292,4116,402],{"class":301},[292,4118,406],{"class":405},[292,4120,410],{"class":409},[292,4122,413],{"class":409},[292,4124,416],{"class":301},[292,4126,419],{"class":301},[292,4128,288],{"class":318},[292,4130,419],{"class":301},[292,4132,426],{"class":301},[292,4134,4135,4137,4139,4141,4143,4145,4147,4150,4152,4154,4156,4158],{"class":294,"line":227},[292,4136,298],{"class":297},[292,4138,302],{"class":301},[292,4140,3157],{"class":305},[292,4142,462],{"class":301},[292,4144,3162],{"class":305},[292,4146,462],{"class":301},[292,4148,4149],{"class":305}," onMounted",[292,4151,309],{"class":301},[292,4153,312],{"class":297},[292,4155,315],{"class":301},[292,4157,395],{"class":318},[292,4159,322],{"class":301},[292,4161,4162,4164,4166,4168,4170,4172],{"class":294,"line":344},[292,4163,298],{"class":297},[292,4165,3197],{"class":305},[292,4167,629],{"class":297},[292,4169,315],{"class":301},[292,4171,3204],{"class":318},[292,4173,322],{"class":301},[292,4175,4176],{"class":294,"line":350},[292,4177,347],{"emptyLinePlaceholder":39},[292,4179,4180,4182,4185,4187,4189],{"class":294,"line":478},[292,4181,454],{"class":409},[292,4183,4184],{"class":305}," groupRef ",[292,4186,416],{"class":301},[292,4188,3157],{"class":353},[292,4190,475],{"class":305},[292,4192,4193,4195,4198,4200,4203,4205,4208,4210,4212,4215,4217,4219,4221],{"class":294,"line":488},[292,4194,454],{"class":409},[292,4196,4197],{"class":305}," timeline ",[292,4199,416],{"class":301},[292,4201,4202],{"class":305}," gsap",[292,4204,1187],{"class":301},[292,4206,4207],{"class":353},"timeline",[292,4209,357],{"class":305},[292,4211,360],{"class":301},[292,4213,4214],{"class":405}," paused",[292,4216,1925],{"class":301},[292,4218,3821],{"class":3820},[292,4220,309],{"class":301},[292,4222,369],{"class":305},[292,4224,4225],{"class":294,"line":493},[292,4226,347],{"emptyLinePlaceholder":39},[292,4228,4229,4231,4234,4236,4238,4240],{"class":294,"line":503},[292,4230,3564],{"class":353},[292,4232,4233],{"class":305},"(groupRef",[292,4235,462],{"class":301},[292,4237,2968],{"class":301},[292,4239,1066],{"class":409},[292,4241,1069],{"class":301},[292,4243,4244,4246,4248,4250,4253,4255,4257,4259],{"class":294,"line":512},[292,4245,1257],{"class":297},[292,4247,1260],{"class":405},[292,4249,2800],{"class":301},[292,4251,4252],{"class":305},"groupRef",[292,4254,1187],{"class":301},[292,4256,1268],{"class":305},[292,4258,1271],{"class":405},[292,4260,2808],{"class":297},[292,4262,4263],{"class":294,"line":528},[292,4264,347],{"emptyLinePlaceholder":39},[292,4266,4267,4269,4272,4274,4276,4278,4280,4282,4284,4286,4288,4290,4292],{"class":294,"line":563},[292,4268,2772],{"class":409},[292,4270,4271],{"class":305}," children",[292,4273,470],{"class":301},[292,4275,3624],{"class":305},[292,4277,1187],{"class":301},[292,4279,629],{"class":353},[292,4281,357],{"class":405},[292,4283,4252],{"class":305},[292,4285,1187],{"class":301},[292,4287,1268],{"class":305},[292,4289,1187],{"class":301},[292,4291,3641],{"class":305},[292,4293,369],{"class":405},[292,4295,4296],{"class":294,"line":569},[292,4297,347],{"emptyLinePlaceholder":39},[292,4299,4300],{"class":294,"line":1277},[292,4301,4302],{"class":1074}," // Clear existing timeline\n",[292,4304,4305,4308,4310,4313],{"class":294,"line":1303},[292,4306,4307],{"class":305}," timeline",[292,4309,1187],{"class":301},[292,4311,4312],{"class":353},"clear",[292,4314,475],{"class":405},[292,4316,4317],{"class":294,"line":1325},[292,4318,347],{"emptyLinePlaceholder":39},[292,4320,4321],{"class":294,"line":1331},[292,4322,4323],{"class":1074}," // Add multiple animations to timeline\n",[292,4325,4326],{"class":294,"line":1338},[292,4327,4328],{"class":305}," timeline\n",[292,4330,4331,4334,4336,4338,4340,4342,4344,4346,4348,4350,4352,4354,4356,4358,4360],{"class":294,"line":1347},[292,4332,4333],{"class":301}," .",[292,4335,3851],{"class":353},[292,4337,357],{"class":405},[292,4339,3641],{"class":305},[292,4341,1187],{"class":301},[292,4343,3648],{"class":353},[292,4345,357],{"class":405},[292,4347,3659],{"class":1504},[292,4349,1066],{"class":409},[292,4351,3666],{"class":305},[292,4353,1187],{"class":301},[292,4355,1381],{"class":305},[292,4357,2763],{"class":405},[292,4359,462],{"class":301},[292,4361,1069],{"class":301},[292,4363,4364,4367,4369,4372],{"class":294,"line":1352},[292,4365,4366],{"class":405}," y",[292,4368,1925],{"class":301},[292,4370,4371],{"class":693}," 3",[292,4373,3764],{"class":301},[292,4375,4376,4379,4381,4383],{"class":294,"line":1361},[292,4377,4378],{"class":405}," duration",[292,4380,1925],{"class":301},[292,4382,3774],{"class":693},[292,4384,3764],{"class":301},[292,4386,4387,4390,4392,4394,4397,4399],{"class":294,"line":1407},[292,4388,4389],{"class":405}," ease",[292,4391,1925],{"class":301},[292,4393,315],{"class":301},[292,4395,4396],{"class":318},"back.out(1.7)",[292,4398,1944],{"class":301},[292,4400,3764],{"class":301},[292,4402,4403,4406,4408],{"class":294,"line":1441},[292,4404,4405],{"class":405}," stagger",[292,4407,1925],{"class":301},[292,4409,4410],{"class":693}," 0.1\n",[292,4412,4413,4416],{"class":294,"line":1451},[292,4414,4415],{"class":301}," }",[292,4417,369],{"class":405},[292,4419,4420,4422,4424,4426,4428,4430,4432,4434,4436,4438,4440,4442,4444,4446,4448],{"class":294,"line":1460},[292,4421,4333],{"class":301},[292,4423,3851],{"class":353},[292,4425,357],{"class":405},[292,4427,3641],{"class":305},[292,4429,1187],{"class":301},[292,4431,3648],{"class":353},[292,4433,357],{"class":405},[292,4435,3659],{"class":1504},[292,4437,1066],{"class":409},[292,4439,3666],{"class":305},[292,4441,1187],{"class":301},[292,4443,1289],{"class":305},[292,4445,2763],{"class":405},[292,4447,462],{"class":301},[292,4449,1069],{"class":301},[292,4451,4452,4454,4456,4458,4460,4463,4466,4468],{"class":294,"line":2907},[292,4453,4366],{"class":405},[292,4455,1925],{"class":301},[292,4457,1707],{"class":305},[292,4459,1187],{"class":301},[292,4461,4462],{"class":305},"PI",[292,4464,4465],{"class":301}," *",[292,4467,3925],{"class":693},[292,4469,3764],{"class":301},[292,4471,4472,4474,4476,4478],{"class":294,"line":2922},[292,4473,4378],{"class":405},[292,4475,1925],{"class":301},[292,4477,3925],{"class":693},[292,4479,3764],{"class":301},[292,4481,4482,4484,4486,4488,4491,4493],{"class":294,"line":2927},[292,4483,4389],{"class":405},[292,4485,1925],{"class":301},[292,4487,315],{"class":301},[292,4489,4490],{"class":318},"power2.inOut",[292,4492,1944],{"class":301},[292,4494,3764],{"class":301},[292,4496,4497,4499,4501],{"class":294,"line":2942},[292,4498,4405],{"class":405},[292,4500,1925],{"class":301},[292,4502,4410],{"class":693},[292,4504,4505,4508,4510,4513,4515,4517],{"class":294,"line":2947},[292,4506,4507],{"class":301}," },",[292,4509,315],{"class":301},[292,4511,4512],{"class":318},"-=0.5",[292,4514,1944],{"class":301},[292,4516,1271],{"class":405},[292,4518,4519],{"class":1074},"// Start 0.5s before previous animation ends\n",[292,4521,4522,4524,4526,4528,4530,4532,4534,4536,4538,4540,4542,4544,4547,4549,4551],{"class":294,"line":2952},[292,4523,4333],{"class":301},[292,4525,3851],{"class":353},[292,4527,357],{"class":405},[292,4529,3641],{"class":305},[292,4531,1187],{"class":301},[292,4533,3648],{"class":353},[292,4535,357],{"class":405},[292,4537,3659],{"class":1504},[292,4539,1066],{"class":409},[292,4541,3666],{"class":305},[292,4543,1187],{"class":301},[292,4545,4546],{"class":305},"scale",[292,4548,2763],{"class":405},[292,4550,462],{"class":301},[292,4552,1069],{"class":301},[292,4554,4555,4558,4560,4563],{"class":294,"line":2958},[292,4556,4557],{"class":405}," x",[292,4559,1925],{"class":301},[292,4561,4562],{"class":693}," 1.5",[292,4564,3764],{"class":301},[292,4566,4567,4569,4571,4573],{"class":294,"line":2975},[292,4568,4366],{"class":405},[292,4570,1925],{"class":301},[292,4572,4562],{"class":693},[292,4574,3764],{"class":301},[292,4576,4577,4580,4582,4584],{"class":294,"line":2996},[292,4578,4579],{"class":405}," z",[292,4581,1925],{"class":301},[292,4583,4562],{"class":693},[292,4585,3764],{"class":301},[292,4587,4588,4590,4592,4594],{"class":294,"line":3001},[292,4589,4378],{"class":405},[292,4591,1925],{"class":301},[292,4593,2760],{"class":693},[292,4595,3764],{"class":301},[292,4597,4598,4600,4602,4604,4607,4609],{"class":294,"line":3006},[292,4599,4389],{"class":405},[292,4601,1925],{"class":301},[292,4603,315],{"class":301},[292,4605,4606],{"class":318},"elastic.out(1, 0.3)",[292,4608,1944],{"class":301},[292,4610,3764],{"class":301},[292,4612,4613,4615,4617],{"class":294,"line":3022},[292,4614,4405],{"class":405},[292,4616,1925],{"class":301},[292,4618,4619],{"class":693}," 0.05\n",[292,4621,4622,4624],{"class":294,"line":3042},[292,4623,4415],{"class":301},[292,4625,369],{"class":405},[292,4627,4628,4630],{"class":294,"line":3047},[292,4629,366],{"class":301},[292,4631,369],{"class":305},[292,4633,4635],{"class":294,"line":4634},39,[292,4636,347],{"emptyLinePlaceholder":39},[292,4638,4640],{"class":294,"line":4639},40,[292,4641,4642],{"class":1074},"// Control functions\n",[292,4644,4646,4648,4651,4653,4655,4657,4660,4662,4664],{"class":294,"line":4645},41,[292,4647,454],{"class":409},[292,4649,4650],{"class":305}," playAnimation ",[292,4652,416],{"class":301},[292,4654,2968],{"class":301},[292,4656,1066],{"class":409},[292,4658,4659],{"class":305}," timeline",[292,4661,1187],{"class":301},[292,4663,2382],{"class":353},[292,4665,475],{"class":305},[292,4667,4669,4671,4674,4676,4678,4680,4682,4684,4687],{"class":294,"line":4668},42,[292,4670,454],{"class":409},[292,4672,4673],{"class":305}," pauseAnimation ",[292,4675,416],{"class":301},[292,4677,2968],{"class":301},[292,4679,1066],{"class":409},[292,4681,4659],{"class":305},[292,4683,1187],{"class":301},[292,4685,4686],{"class":353},"pause",[292,4688,475],{"class":305},[292,4690,4692,4694,4697,4699,4701,4703,4705,4707,4710],{"class":294,"line":4691},43,[292,4693,454],{"class":409},[292,4695,4696],{"class":305}," reverseAnimation ",[292,4698,416],{"class":301},[292,4700,2968],{"class":301},[292,4702,1066],{"class":409},[292,4704,4659],{"class":305},[292,4706,1187],{"class":301},[292,4708,4709],{"class":353},"reverse",[292,4711,475],{"class":305},[292,4713,4715,4717,4720,4722,4724,4726,4728,4730,4733],{"class":294,"line":4714},44,[292,4716,454],{"class":409},[292,4718,4719],{"class":305}," restartAnimation ",[292,4721,416],{"class":301},[292,4723,2968],{"class":301},[292,4725,1066],{"class":409},[292,4727,4659],{"class":305},[292,4729,1187],{"class":301},[292,4731,4732],{"class":353},"restart",[292,4734,475],{"class":305},[292,4736,4738,4740,4742],{"class":294,"line":4737},45,[292,4739,481],{"class":301},[292,4741,406],{"class":405},[292,4743,426],{"class":301},[988,4745,4747],{"id":4746},"performance-optimization","Performance Optimization",[250,4749,4750],{},"When animating many objects, optimize performance by:",[4752,4753,4754,4761,4767,4777],"ol",{},[1769,4755,4756,4760],{},[1001,4757,1476,4758],{},[260,4759,1099],{}," for Three.js object references",[1769,4762,4763,4766],{},[1001,4764,4765],{},"Batch property access"," to avoid repeated DOM queries",[1769,4768,4769,4776],{},[1001,4770,4771,4772,4775],{},"Use GSAP's ",[260,4773,4774],{},"set()"," method"," for immediate property changes",[1769,4778,4779,4782,4783],{},[1001,4780,4781],{},"Leverage hardware acceleration"," with ",[260,4784,4785],{},"force3D: true",[283,4787,4789],{"className":285,"code":4788,"language":288,"meta":225,"style":225},"// Optimized animation setup\nconst optimizedAnimation = () => {\n // Get all properties at once\n const meshes = Array.from(boxesRef.value.children)\n const positions = meshes.map(mesh => mesh.position)\n const rotations = meshes.map(mesh => mesh.rotation)\n\n // Use force3D for hardware acceleration\n gsap.to(positions, {\n y: 2,\n duration: 1,\n force3D: true,\n ease: 'power2.out'\n })\n}\n",[260,4790,4791,4796,4811,4816,4845,4875,4903,4907,4912,4928,4938,4948,4959,4972,4978],{"__ignoreMap":225},[292,4792,4793],{"class":294,"line":226},[292,4794,4795],{"class":1074},"// Optimized animation setup\n",[292,4797,4798,4800,4803,4805,4807,4809],{"class":294,"line":227},[292,4799,454],{"class":409},[292,4801,4802],{"class":305}," optimizedAnimation ",[292,4804,416],{"class":301},[292,4806,2968],{"class":301},[292,4808,1066],{"class":409},[292,4810,1069],{"class":301},[292,4812,4813],{"class":294,"line":344},[292,4814,4815],{"class":1074}," // Get all properties at once\n",[292,4817,4818,4820,4823,4825,4827,4829,4831,4833,4835,4837,4839,4841,4843],{"class":294,"line":350},[292,4819,2772],{"class":409},[292,4821,4822],{"class":305}," meshes",[292,4824,470],{"class":301},[292,4826,3624],{"class":305},[292,4828,1187],{"class":301},[292,4830,629],{"class":353},[292,4832,357],{"class":405},[292,4834,3396],{"class":305},[292,4836,1187],{"class":301},[292,4838,1268],{"class":305},[292,4840,1187],{"class":301},[292,4842,3641],{"class":305},[292,4844,369],{"class":405},[292,4846,4847,4849,4851,4853,4855,4857,4859,4861,4864,4866,4869,4871,4873],{"class":294,"line":478},[292,4848,2772],{"class":409},[292,4850,3619],{"class":305},[292,4852,470],{"class":301},[292,4854,4822],{"class":305},[292,4856,1187],{"class":301},[292,4858,3648],{"class":353},[292,4860,357],{"class":405},[292,4862,4863],{"class":1504},"mesh",[292,4865,1066],{"class":409},[292,4867,4868],{"class":305}," mesh",[292,4870,1187],{"class":301},[292,4872,1381],{"class":305},[292,4874,369],{"class":405},[292,4876,4877,4879,4881,4883,4885,4887,4889,4891,4893,4895,4897,4899,4901],{"class":294,"line":488},[292,4878,2772],{"class":409},[292,4880,3683],{"class":305},[292,4882,470],{"class":301},[292,4884,4822],{"class":305},[292,4886,1187],{"class":301},[292,4888,3648],{"class":353},[292,4890,357],{"class":405},[292,4892,4863],{"class":1504},[292,4894,1066],{"class":409},[292,4896,4868],{"class":305},[292,4898,1187],{"class":301},[292,4900,1289],{"class":305},[292,4902,369],{"class":405},[292,4904,4905],{"class":294,"line":493},[292,4906,347],{"emptyLinePlaceholder":39},[292,4908,4909],{"class":294,"line":503},[292,4910,4911],{"class":1074}," // Use force3D for hardware acceleration\n",[292,4913,4914,4916,4918,4920,4922,4924,4926],{"class":294,"line":512},[292,4915,3846],{"class":305},[292,4917,1187],{"class":301},[292,4919,3851],{"class":353},[292,4921,357],{"class":405},[292,4923,3856],{"class":305},[292,4925,462],{"class":301},[292,4927,1069],{"class":301},[292,4929,4930,4932,4934,4936],{"class":294,"line":528},[292,4931,3865],{"class":405},[292,4933,1925],{"class":301},[292,4935,3925],{"class":693},[292,4937,3764],{"class":301},[292,4939,4940,4942,4944,4946],{"class":294,"line":563},[292,4941,3769],{"class":405},[292,4943,1925],{"class":301},[292,4945,3774],{"class":693},[292,4947,3764],{"class":301},[292,4949,4950,4953,4955,4957],{"class":294,"line":569},[292,4951,4952],{"class":405}," force3D",[292,4954,1925],{"class":301},[292,4956,3821],{"class":3820},[292,4958,3764],{"class":301},[292,4960,4961,4963,4965,4967,4970],{"class":294,"line":1277},[292,4962,3752],{"class":405},[292,4964,1925],{"class":301},[292,4966,315],{"class":301},[292,4968,4969],{"class":318},"power2.out",[292,4971,322],{"class":301},[292,4973,4974,4976],{"class":294,"line":1303},[292,4975,3887],{"class":301},[292,4977,369],{"class":405},[292,4979,4980],{"class":294,"line":1325},[292,4981,1728],{"class":301},[988,4983,4985],{"id":4984},"animation-events","Animation Events",[250,4987,4988],{},"GSAP provides powerful callback events to sync with your application state:",[283,4990,4992],{"className":285,"code":4991,"language":288,"meta":225,"style":225},"gsap.to(positions, {\n y: 2,\n duration: 1,\n stagger: 0.1,\n onStart: () => console.log('Animation started'),\n onComplete: () => console.log('Animation completed'),\n onUpdate: function() {\n // Called on every frame\n console.log('Progress:', this.progress())\n },\n onRepeat: () => console.log('Animation repeated')\n})\n",[260,4993,4994,5009,5020,5030,5041,5073,5103,5117,5122,5151,5155,5183],{"__ignoreMap":225},[292,4995,4996,4998,5000,5002,5005,5007],{"class":294,"line":226},[292,4997,3204],{"class":305},[292,4999,1187],{"class":301},[292,5001,3851],{"class":353},[292,5003,5004],{"class":305},"(positions",[292,5006,462],{"class":301},[292,5008,1069],{"class":301},[292,5010,5011,5014,5016,5018],{"class":294,"line":227},[292,5012,5013],{"class":405}," y",[292,5015,1925],{"class":301},[292,5017,3925],{"class":693},[292,5019,3764],{"class":301},[292,5021,5022,5024,5026,5028],{"class":294,"line":344},[292,5023,3996],{"class":405},[292,5025,1925],{"class":301},[292,5027,3774],{"class":693},[292,5029,3764],{"class":301},[292,5031,5032,5034,5036,5039],{"class":294,"line":350},[292,5033,4010],{"class":405},[292,5035,1925],{"class":301},[292,5037,5038],{"class":693}," 0.1",[292,5040,3764],{"class":301},[292,5042,5043,5046,5048,5050,5052,5055,5057,5060,5062,5064,5067,5069,5071],{"class":294,"line":478},[292,5044,5045],{"class":353}," onStart",[292,5047,1925],{"class":301},[292,5049,2968],{"class":301},[292,5051,1066],{"class":409},[292,5053,5054],{"class":305}," console",[292,5056,1187],{"class":301},[292,5058,5059],{"class":353},"log",[292,5061,357],{"class":305},[292,5063,1944],{"class":301},[292,5065,5066],{"class":318},"Animation started",[292,5068,1944],{"class":301},[292,5070,2763],{"class":305},[292,5072,3764],{"class":301},[292,5074,5075,5078,5080,5082,5084,5086,5088,5090,5092,5094,5097,5099,5101],{"class":294,"line":488},[292,5076,5077],{"class":353}," onComplete",[292,5079,1925],{"class":301},[292,5081,2968],{"class":301},[292,5083,1066],{"class":409},[292,5085,5054],{"class":305},[292,5087,1187],{"class":301},[292,5089,5059],{"class":353},[292,5091,357],{"class":305},[292,5093,1944],{"class":301},[292,5095,5096],{"class":318},"Animation completed",[292,5098,1944],{"class":301},[292,5100,2763],{"class":305},[292,5102,3764],{"class":301},[292,5104,5105,5108,5110,5113,5115],{"class":294,"line":493},[292,5106,5107],{"class":353}," onUpdate",[292,5109,1925],{"class":301},[292,5111,5112],{"class":409}," function",[292,5114,1063],{"class":301},[292,5116,1069],{"class":301},[292,5118,5119],{"class":294,"line":503},[292,5120,5121],{"class":1074}," // Called on every frame\n",[292,5123,5124,5127,5129,5131,5133,5135,5138,5140,5142,5145,5148],{"class":294,"line":512},[292,5125,5126],{"class":305}," console",[292,5128,1187],{"class":301},[292,5130,5059],{"class":353},[292,5132,357],{"class":405},[292,5134,1944],{"class":301},[292,5136,5137],{"class":318},"Progress:",[292,5139,1944],{"class":301},[292,5141,462],{"class":301},[292,5143,5144],{"class":301}," this.",[292,5146,5147],{"class":353},"progress",[292,5149,5150],{"class":405},"())\n",[292,5152,5153],{"class":294,"line":528},[292,5154,4082],{"class":301},[292,5156,5157,5160,5162,5164,5166,5168,5170,5172,5174,5176,5179,5181],{"class":294,"line":563},[292,5158,5159],{"class":353}," onRepeat",[292,5161,1925],{"class":301},[292,5163,2968],{"class":301},[292,5165,1066],{"class":409},[292,5167,5054],{"class":305},[292,5169,1187],{"class":301},[292,5171,5059],{"class":353},[292,5173,357],{"class":305},[292,5175,1944],{"class":301},[292,5177,5178],{"class":318},"Animation repeated",[292,5180,1944],{"class":301},[292,5182,369],{"class":305},[292,5184,5185,5187],{"class":294,"line":569},[292,5186,366],{"class":301},[292,5188,369],{"class":305},[952,5190,5191],{},[250,5192,5193],{},"GSAP automatically handles frame rate optimization and provides better performance than manual animations for complex sequences.",[773,5195,5197],{"to":5196},"https://gsap.com/docs/v3/",[250,5198,5199],{},"Explore the full GSAP documentation for advanced features and techniques.",[962,5201,5202],{},"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 .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 .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}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 .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}",{"title":225,"searchDepth":226,"depth":227,"links":5204},[5205],{"id":4095,"depth":227,"text":4096,"children":5206},[5207,5208,5209],{"id":4099,"depth":344,"text":4100},{"id":4746,"depth":344,"text":4747},{"id":4984,"depth":344,"text":4985},"Learn how to create complex animations using GSAP with TresJS",{"thumbnail":5212},"/recipes/advance-animations-gsap.png",{"title":170,"description":5210},"YvGhhAngEr1GhNvB76ruZxymGGy6Niv2k2uwvsjAn4w",{"id":5216,"title":174,"body":5217,"description":7628,"extension":231,"links":232,"meta":7629,"navigation":39,"path":175,"seo":7631,"stem":176,"__hash__":7632},"docs/4.cookbook/5.tweakpane.md",{"type":214,"value":5218,"toc":7621},[5219,5226,5229,5232,5235,5280,5283,5332,5337,5341,5344,7383,7387,7390,7547,7551,7554,7613,7618],[250,5220,5221,5225],{},[378,5222,174],{"href":5223,"rel":5224},"https://tweakpane.github.io/docs/",[382]," 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.",[5227,5228],"examples-tweakpane",{},[217,5230,13],{"id":5231},"installation",[250,5233,5234],{},"First, install Tweakpane v4 in your project:",[388,5236,5237,5251,5266],{},[283,5238,5240],{"className":1832,"code":5239,"filename":1841,"language":1834,"meta":225,"style":225},"npm install tweakpane@^4.0.0\n",[260,5241,5242],{"__ignoreMap":225},[292,5243,5244,5246,5248],{"class":294,"line":226},[292,5245,1841],{"class":1183},[292,5247,1844],{"class":318},[292,5249,5250],{"class":318}," tweakpane@^4.0.0\n",[283,5252,5255],{"className":1832,"code":5253,"filename":5254,"language":1834,"meta":225,"style":225},"yarn add tweakpane@^4.0.0\n","yarn",[260,5256,5257],{"__ignoreMap":225},[292,5258,5259,5261,5264],{"class":294,"line":226},[292,5260,5254],{"class":1183},[292,5262,5263],{"class":318}," add",[292,5265,5250],{"class":318},[283,5267,5270],{"className":1832,"code":5268,"filename":5269,"language":1834,"meta":225,"style":225},"pnpm add tweakpane@^4.0.0\n","pnpm",[260,5271,5272],{"__ignoreMap":225},[292,5273,5274,5276,5278],{"class":294,"line":226},[292,5275,5269],{"class":1183},[292,5277,5263],{"class":318},[292,5279,5250],{"class":318},[250,5281,5282],{},"Additionally, if you are working with TypeScript:",[388,5284,5285,5302,5317],{},[283,5286,5288],{"className":1832,"code":5287,"filename":1841,"language":1834,"meta":225,"style":225},"npm install --save-dev @tweakpane/core\n",[260,5289,5290],{"__ignoreMap":225},[292,5291,5292,5294,5296,5299],{"class":294,"line":226},[292,5293,1841],{"class":1183},[292,5295,1844],{"class":318},[292,5297,5298],{"class":318}," --save-dev",[292,5300,5301],{"class":318}," @tweakpane/core\n",[283,5303,5305],{"className":1832,"code":5304,"filename":5254,"language":1834,"meta":225,"style":225},"yarn add --save-dev @tweakpane/core\n",[260,5306,5307],{"__ignoreMap":225},[292,5308,5309,5311,5313,5315],{"class":294,"line":226},[292,5310,5254],{"class":1183},[292,5312,5263],{"class":318},[292,5314,5298],{"class":318},[292,5316,5301],{"class":318},[283,5318,5320],{"className":1832,"code":5319,"filename":5269,"language":1834,"meta":225,"style":225},"pnpm add --save-dev @tweakpane/core\n",[260,5321,5322],{"__ignoreMap":225},[292,5323,5324,5326,5328,5330],{"class":294,"line":226},[292,5325,5269],{"class":1183},[292,5327,5263],{"class":318},[292,5329,5298],{"class":318},[292,5331,5301],{"class":318},[952,5333,5334],{},[250,5335,5336],{},"Make sure to use Tweakpane v4 or higher, as this recipe uses the latest API which has breaking changes from v3.",[217,5338,5340],{"id":5339},"basic-setup","Basic Setup",[250,5342,5343],{},"Here's how to set up Tweakpane with a basic TresJS scene:",[283,5345,5347],{"className":392,"code":5346,"language":395,"meta":225,"style":225},"\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",[260,5348,5349,5369,5396,5416,5434,5438,5451,5471,5491,5495,5500,5515,5527,5538,5549,5560,5571,5582,5593,5609,5621,5637,5643,5647,5660,5679,5683,5688,5708,5724,5739,5745,5749,5754,5795,5859,5916,5973,5977,5982,6020,6088,6153,6218,6222,6227,6266,6322,6350,6378,6408,6418,6434,6451,6468,6473,6480,6485,6491,6546,6569,6599,6629,6674,6681,6688,6695,6700,6706,6720,6736,6743,6752,6757,6766,6787,6793,6823,6828,6849,6882,6891,6896,6904,6919,6959,6998,7017,7023,7033,7041,7067,7087,7106,7112,7120,7144,7163,7168,7176,7199,7218,7237,7242,7252,7257,7286,7309,7356,7365,7374],{"__ignoreMap":225},[292,5350,5351,5353,5355,5357,5359,5361,5363,5365,5367],{"class":294,"line":226},[292,5352,402],{"class":301},[292,5354,406],{"class":405},[292,5356,410],{"class":409},[292,5358,413],{"class":409},[292,5360,416],{"class":301},[292,5362,419],{"class":301},[292,5364,288],{"class":318},[292,5366,419],{"class":301},[292,5368,426],{"class":301},[292,5370,5371,5373,5375,5377,5379,5381,5383,5386,5388,5390,5392,5394],{"class":294,"line":227},[292,5372,298],{"class":297},[292,5374,302],{"class":301},[292,5376,1135],{"class":305},[292,5378,462],{"class":301},[292,5380,4149],{"class":305},[292,5382,462],{"class":301},[292,5384,5385],{"class":305}," onUnmounted",[292,5387,309],{"class":301},[292,5389,312],{"class":297},[292,5391,315],{"class":301},[292,5393,395],{"class":318},[292,5395,322],{"class":301},[292,5397,5398,5400,5402,5405,5407,5409,5411,5414],{"class":294,"line":344},[292,5399,298],{"class":297},[292,5401,302],{"class":301},[292,5403,5404],{"class":305}," Pane",[292,5406,309],{"class":301},[292,5408,312],{"class":297},[292,5410,315],{"class":301},[292,5412,5413],{"class":318},"tweakpane",[292,5415,322],{"class":301},[292,5417,5418,5420,5422,5424,5426,5428,5430,5432],{"class":294,"line":350},[292,5419,298],{"class":297},[292,5421,302],{"class":301},[292,5423,331],{"class":305},[292,5425,309],{"class":301},[292,5427,312],{"class":297},[292,5429,315],{"class":301},[292,5431,270],{"class":318},[292,5433,322],{"class":301},[292,5435,5436],{"class":294,"line":478},[292,5437,347],{"emptyLinePlaceholder":39},[292,5439,5440,5442,5445,5447,5449],{"class":294,"line":488},[292,5441,454],{"class":409},[292,5443,5444],{"class":305}," meshRef ",[292,5446,416],{"class":301},[292,5448,1135],{"class":353},[292,5450,475],{"class":305},[292,5452,5453,5455,5458,5460,5462,5464,5467,5469],{"class":294,"line":493},[292,5454,454],{"class":409},[292,5456,5457],{"class":305}," pane ",[292,5459,416],{"class":301},[292,5461,1135],{"class":353},[292,5463,402],{"class":301},[292,5465,5466],{"class":1183},"Pane",[292,5468,1199],{"class":301},[292,5470,475],{"class":305},[292,5472,5473,5475,5478,5480,5482,5484,5487,5489],{"class":294,"line":503},[292,5474,454],{"class":409},[292,5476,5477],{"class":305}," paneContainer ",[292,5479,416],{"class":301},[292,5481,1135],{"class":353},[292,5483,402],{"class":301},[292,5485,5486],{"class":1183},"HTMLElement",[292,5488,1199],{"class":301},[292,5490,475],{"class":305},[292,5492,5493],{"class":294,"line":512},[292,5494,347],{"emptyLinePlaceholder":39},[292,5496,5497],{"class":294,"line":528},[292,5498,5499],{"class":1074},"// Reactive properties that will be controlled by Tweakpane\n",[292,5501,5502,5504,5507,5509,5511,5513],{"class":294,"line":563},[292,5503,454],{"class":409},[292,5505,5506],{"class":305}," controls ",[292,5508,416],{"class":301},[292,5510,1135],{"class":353},[292,5512,357],{"class":305},[292,5514,1274],{"class":301},[292,5516,5517,5520,5522,5525],{"class":294,"line":569},[292,5518,5519],{"class":405}," positionX",[292,5521,1925],{"class":301},[292,5523,5524],{"class":693}," 0",[292,5526,3764],{"class":301},[292,5528,5529,5532,5534,5536],{"class":294,"line":1277},[292,5530,5531],{"class":405}," positionY",[292,5533,1925],{"class":301},[292,5535,5524],{"class":693},[292,5537,3764],{"class":301},[292,5539,5540,5543,5545,5547],{"class":294,"line":1303},[292,5541,5542],{"class":405}," positionZ",[292,5544,1925],{"class":301},[292,5546,5524],{"class":693},[292,5548,3764],{"class":301},[292,5550,5551,5554,5556,5558],{"class":294,"line":1325},[292,5552,5553],{"class":405}," rotationX",[292,5555,1925],{"class":301},[292,5557,5524],{"class":693},[292,5559,3764],{"class":301},[292,5561,5562,5565,5567,5569],{"class":294,"line":1331},[292,5563,5564],{"class":405}," rotationY",[292,5566,1925],{"class":301},[292,5568,5524],{"class":693},[292,5570,3764],{"class":301},[292,5572,5573,5576,5578,5580],{"class":294,"line":1338},[292,5574,5575],{"class":405}," rotationZ",[292,5577,1925],{"class":301},[292,5579,5524],{"class":693},[292,5581,3764],{"class":301},[292,5583,5584,5587,5589,5591],{"class":294,"line":1347},[292,5585,5586],{"class":405}," scale",[292,5588,1925],{"class":301},[292,5590,3774],{"class":693},[292,5592,3764],{"class":301},[292,5594,5595,5598,5600,5602,5605,5607],{"class":294,"line":1352},[292,5596,5597],{"class":405}," color",[292,5599,1925],{"class":301},[292,5601,315],{"class":301},[292,5603,5604],{"class":318},"#ff6b6b",[292,5606,1944],{"class":301},[292,5608,3764],{"class":301},[292,5610,5611,5614,5616,5619],{"class":294,"line":1361},[292,5612,5613],{"class":405}," wireframe",[292,5615,1925],{"class":301},[292,5617,5618],{"class":3820}," false",[292,5620,3764],{"class":301},[292,5622,5623,5626,5628,5630,5633,5635],{"class":294,"line":1407},[292,5624,5625],{"class":405}," material",[292,5627,1925],{"class":301},[292,5629,315],{"class":301},[292,5631,5632],{"class":318},"basic",[292,5634,1944],{"class":301},[292,5636,3764],{"class":301},[292,5638,5639,5641],{"class":294,"line":1441},[292,5640,366],{"class":301},[292,5642,369],{"class":305},[292,5644,5645],{"class":294,"line":1451},[292,5646,347],{"emptyLinePlaceholder":39},[292,5648,5649,5652,5654,5656,5658],{"class":294,"line":1460},[292,5650,5651],{"class":353},"onMounted",[292,5653,357],{"class":305},[292,5655,1063],{"class":301},[292,5657,1066],{"class":409},[292,5659,1069],{"class":301},[292,5661,5662,5664,5666,5668,5671,5673,5675,5677],{"class":294,"line":2907},[292,5663,1257],{"class":297},[292,5665,1260],{"class":405},[292,5667,2800],{"class":301},[292,5669,5670],{"class":305},"paneContainer",[292,5672,1187],{"class":301},[292,5674,1268],{"class":305},[292,5676,1271],{"class":405},[292,5678,2808],{"class":297},[292,5680,5681],{"class":294,"line":2922},[292,5682,347],{"emptyLinePlaceholder":39},[292,5684,5685],{"class":294,"line":2927},[292,5686,5687],{"class":1074}," // Create Tweakpane instance with container\n",[292,5689,5690,5693,5695,5697,5699,5702,5704,5706],{"class":294,"line":2942},[292,5691,5692],{"class":305}," pane",[292,5694,1187],{"class":301},[292,5696,1268],{"class":305},[292,5698,470],{"class":301},[292,5700,5701],{"class":301}," new",[292,5703,5404],{"class":353},[292,5705,357],{"class":405},[292,5707,1274],{"class":301},[292,5709,5710,5713,5715,5717,5720,5722],{"class":294,"line":2947},[292,5711,5712],{"class":405}," title",[292,5714,1925],{"class":301},[292,5716,315],{"class":301},[292,5718,5719],{"class":318},"Scene Controls",[292,5721,1944],{"class":301},[292,5723,3764],{"class":301},[292,5725,5726,5729,5731,5734,5736],{"class":294,"line":2952},[292,5727,5728],{"class":405}," container",[292,5730,1925],{"class":301},[292,5732,5733],{"class":305}," paneContainer",[292,5735,1187],{"class":301},[292,5737,5738],{"class":305},"value\n",[292,5740,5741,5743],{"class":294,"line":2958},[292,5742,3887],{"class":301},[292,5744,369],{"class":405},[292,5746,5747],{"class":294,"line":2975},[292,5748,347],{"emptyLinePlaceholder":39},[292,5750,5751],{"class":294,"line":2996},[292,5752,5753],{"class":1074}," // Add position controls\n",[292,5755,5756,5758,5761,5763,5766,5768,5770,5772,5775,5777,5779,5782,5784,5786,5789,5791,5793],{"class":294,"line":3001},[292,5757,2772],{"class":409},[292,5759,5760],{"class":305}," positionFolder",[292,5762,470],{"class":301},[292,5764,5765],{"class":305}," pane",[292,5767,1187],{"class":301},[292,5769,1268],{"class":305},[292,5771,1187],{"class":301},[292,5773,5774],{"class":353},"addFolder",[292,5776,357],{"class":405},[292,5778,360],{"class":301},[292,5780,5781],{"class":405}," title",[292,5783,1925],{"class":301},[292,5785,315],{"class":301},[292,5787,5788],{"class":318},"Position",[292,5790,1944],{"class":301},[292,5792,309],{"class":301},[292,5794,369],{"class":405},[292,5796,5797,5800,5802,5805,5807,5810,5812,5814,5816,5818,5821,5823,5825,5827,5830,5832,5834,5837,5839,5842,5844,5846,5848,5851,5853,5855,5857],{"class":294,"line":3006},[292,5798,5799],{"class":305}," positionFolder",[292,5801,1187],{"class":301},[292,5803,5804],{"class":353},"addBinding",[292,5806,357],{"class":405},[292,5808,5809],{"class":305},"controls",[292,5811,1187],{"class":301},[292,5813,1268],{"class":305},[292,5815,462],{"class":301},[292,5817,315],{"class":301},[292,5819,5820],{"class":318},"positionX",[292,5822,1944],{"class":301},[292,5824,462],{"class":301},[292,5826,302],{"class":301},[292,5828,5829],{"class":405}," min",[292,5831,1925],{"class":301},[292,5833,3271],{"class":301},[292,5835,5836],{"class":693},"3",[292,5838,462],{"class":301},[292,5840,5841],{"class":405}," max",[292,5843,1925],{"class":301},[292,5845,4371],{"class":693},[292,5847,462],{"class":301},[292,5849,5850],{"class":405}," step",[292,5852,1925],{"class":301},[292,5854,5038],{"class":693},[292,5856,309],{"class":301},[292,5858,369],{"class":405},[292,5860,5861,5863,5865,5867,5869,5871,5873,5875,5877,5879,5882,5884,5886,5888,5890,5892,5894,5896,5898,5900,5902,5904,5906,5908,5910,5912,5914],{"class":294,"line":3022},[292,5862,5799],{"class":305},[292,5864,1187],{"class":301},[292,5866,5804],{"class":353},[292,5868,357],{"class":405},[292,5870,5809],{"class":305},[292,5872,1187],{"class":301},[292,5874,1268],{"class":305},[292,5876,462],{"class":301},[292,5878,315],{"class":301},[292,5880,5881],{"class":318},"positionY",[292,5883,1944],{"class":301},[292,5885,462],{"class":301},[292,5887,302],{"class":301},[292,5889,5829],{"class":405},[292,5891,1925],{"class":301},[292,5893,3271],{"class":301},[292,5895,5836],{"class":693},[292,5897,462],{"class":301},[292,5899,5841],{"class":405},[292,5901,1925],{"class":301},[292,5903,4371],{"class":693},[292,5905,462],{"class":301},[292,5907,5850],{"class":405},[292,5909,1925],{"class":301},[292,5911,5038],{"class":693},[292,5913,309],{"class":301},[292,5915,369],{"class":405},[292,5917,5918,5920,5922,5924,5926,5928,5930,5932,5934,5936,5939,5941,5943,5945,5947,5949,5951,5953,5955,5957,5959,5961,5963,5965,5967,5969,5971],{"class":294,"line":3042},[292,5919,5799],{"class":305},[292,5921,1187],{"class":301},[292,5923,5804],{"class":353},[292,5925,357],{"class":405},[292,5927,5809],{"class":305},[292,5929,1187],{"class":301},[292,5931,1268],{"class":305},[292,5933,462],{"class":301},[292,5935,315],{"class":301},[292,5937,5938],{"class":318},"positionZ",[292,5940,1944],{"class":301},[292,5942,462],{"class":301},[292,5944,302],{"class":301},[292,5946,5829],{"class":405},[292,5948,1925],{"class":301},[292,5950,3271],{"class":301},[292,5952,5836],{"class":693},[292,5954,462],{"class":301},[292,5956,5841],{"class":405},[292,5958,1925],{"class":301},[292,5960,4371],{"class":693},[292,5962,462],{"class":301},[292,5964,5850],{"class":405},[292,5966,1925],{"class":301},[292,5968,5038],{"class":693},[292,5970,309],{"class":301},[292,5972,369],{"class":405},[292,5974,5975],{"class":294,"line":3047},[292,5976,347],{"emptyLinePlaceholder":39},[292,5978,5979],{"class":294,"line":4634},[292,5980,5981],{"class":1074}," // Add rotation controls\n",[292,5983,5984,5986,5989,5991,5993,5995,5997,5999,6001,6003,6005,6007,6009,6011,6014,6016,6018],{"class":294,"line":4639},[292,5985,2772],{"class":409},[292,5987,5988],{"class":305}," rotationFolder",[292,5990,470],{"class":301},[292,5992,5765],{"class":305},[292,5994,1187],{"class":301},[292,5996,1268],{"class":305},[292,5998,1187],{"class":301},[292,6000,5774],{"class":353},[292,6002,357],{"class":405},[292,6004,360],{"class":301},[292,6006,5781],{"class":405},[292,6008,1925],{"class":301},[292,6010,315],{"class":301},[292,6012,6013],{"class":318},"Rotation",[292,6015,1944],{"class":301},[292,6017,309],{"class":301},[292,6019,369],{"class":405},[292,6021,6022,6025,6027,6029,6031,6033,6035,6037,6039,6041,6044,6046,6048,6050,6052,6054,6056,6059,6061,6063,6065,6067,6069,6071,6073,6075,6077,6079,6081,6084,6086],{"class":294,"line":4645},[292,6023,6024],{"class":305}," rotationFolder",[292,6026,1187],{"class":301},[292,6028,5804],{"class":353},[292,6030,357],{"class":405},[292,6032,5809],{"class":305},[292,6034,1187],{"class":301},[292,6036,1268],{"class":305},[292,6038,462],{"class":301},[292,6040,315],{"class":301},[292,6042,6043],{"class":318},"rotationX",[292,6045,1944],{"class":301},[292,6047,462],{"class":301},[292,6049,302],{"class":301},[292,6051,5829],{"class":405},[292,6053,1925],{"class":301},[292,6055,3271],{"class":301},[292,6057,6058],{"class":305},"Math",[292,6060,1187],{"class":301},[292,6062,4462],{"class":305},[292,6064,462],{"class":301},[292,6066,5841],{"class":405},[292,6068,1925],{"class":301},[292,6070,1707],{"class":305},[292,6072,1187],{"class":301},[292,6074,4462],{"class":305},[292,6076,462],{"class":301},[292,6078,5850],{"class":405},[292,6080,1925],{"class":301},[292,6082,6083],{"class":693}," 0.01",[292,6085,309],{"class":301},[292,6087,369],{"class":405},[292,6089,6090,6092,6094,6096,6098,6100,6102,6104,6106,6108,6111,6113,6115,6117,6119,6121,6123,6125,6127,6129,6131,6133,6135,6137,6139,6141,6143,6145,6147,6149,6151],{"class":294,"line":4668},[292,6091,6024],{"class":305},[292,6093,1187],{"class":301},[292,6095,5804],{"class":353},[292,6097,357],{"class":405},[292,6099,5809],{"class":305},[292,6101,1187],{"class":301},[292,6103,1268],{"class":305},[292,6105,462],{"class":301},[292,6107,315],{"class":301},[292,6109,6110],{"class":318},"rotationY",[292,6112,1944],{"class":301},[292,6114,462],{"class":301},[292,6116,302],{"class":301},[292,6118,5829],{"class":405},[292,6120,1925],{"class":301},[292,6122,3271],{"class":301},[292,6124,6058],{"class":305},[292,6126,1187],{"class":301},[292,6128,4462],{"class":305},[292,6130,462],{"class":301},[292,6132,5841],{"class":405},[292,6134,1925],{"class":301},[292,6136,1707],{"class":305},[292,6138,1187],{"class":301},[292,6140,4462],{"class":305},[292,6142,462],{"class":301},[292,6144,5850],{"class":405},[292,6146,1925],{"class":301},[292,6148,6083],{"class":693},[292,6150,309],{"class":301},[292,6152,369],{"class":405},[292,6154,6155,6157,6159,6161,6163,6165,6167,6169,6171,6173,6176,6178,6180,6182,6184,6186,6188,6190,6192,6194,6196,6198,6200,6202,6204,6206,6208,6210,6212,6214,6216],{"class":294,"line":4691},[292,6156,6024],{"class":305},[292,6158,1187],{"class":301},[292,6160,5804],{"class":353},[292,6162,357],{"class":405},[292,6164,5809],{"class":305},[292,6166,1187],{"class":301},[292,6168,1268],{"class":305},[292,6170,462],{"class":301},[292,6172,315],{"class":301},[292,6174,6175],{"class":318},"rotationZ",[292,6177,1944],{"class":301},[292,6179,462],{"class":301},[292,6181,302],{"class":301},[292,6183,5829],{"class":405},[292,6185,1925],{"class":301},[292,6187,3271],{"class":301},[292,6189,6058],{"class":305},[292,6191,1187],{"class":301},[292,6193,4462],{"class":305},[292,6195,462],{"class":301},[292,6197,5841],{"class":405},[292,6199,1925],{"class":301},[292,6201,1707],{"class":305},[292,6203,1187],{"class":301},[292,6205,4462],{"class":305},[292,6207,462],{"class":301},[292,6209,5850],{"class":405},[292,6211,1925],{"class":301},[292,6213,6083],{"class":693},[292,6215,309],{"class":301},[292,6217,369],{"class":405},[292,6219,6220],{"class":294,"line":4714},[292,6221,347],{"emptyLinePlaceholder":39},[292,6223,6224],{"class":294,"line":4737},[292,6225,6226],{"class":1074}," // Add material controls\n",[292,6228,6230,6232,6235,6237,6239,6241,6243,6245,6247,6249,6251,6253,6255,6257,6260,6262,6264],{"class":294,"line":6229},46,[292,6231,2772],{"class":409},[292,6233,6234],{"class":305}," materialFolder",[292,6236,470],{"class":301},[292,6238,5765],{"class":305},[292,6240,1187],{"class":301},[292,6242,1268],{"class":305},[292,6244,1187],{"class":301},[292,6246,5774],{"class":353},[292,6248,357],{"class":405},[292,6250,360],{"class":301},[292,6252,5781],{"class":405},[292,6254,1925],{"class":301},[292,6256,315],{"class":301},[292,6258,6259],{"class":318},"Material",[292,6261,1944],{"class":301},[292,6263,309],{"class":301},[292,6265,369],{"class":405},[292,6267,6269,6272,6274,6276,6278,6280,6282,6284,6286,6288,6290,6292,6294,6296,6298,6300,6302,6304,6306,6308,6310,6312,6314,6316,6318,6320],{"class":294,"line":6268},47,[292,6270,6271],{"class":305}," materialFolder",[292,6273,1187],{"class":301},[292,6275,5804],{"class":353},[292,6277,357],{"class":405},[292,6279,5809],{"class":305},[292,6281,1187],{"class":301},[292,6283,1268],{"class":305},[292,6285,462],{"class":301},[292,6287,315],{"class":301},[292,6289,4546],{"class":318},[292,6291,1944],{"class":301},[292,6293,462],{"class":301},[292,6295,302],{"class":301},[292,6297,5829],{"class":405},[292,6299,1925],{"class":301},[292,6301,5038],{"class":693},[292,6303,462],{"class":301},[292,6305,5841],{"class":405},[292,6307,1925],{"class":301},[292,6309,4371],{"class":693},[292,6311,462],{"class":301},[292,6313,5850],{"class":405},[292,6315,1925],{"class":301},[292,6317,5038],{"class":693},[292,6319,309],{"class":301},[292,6321,369],{"class":405},[292,6323,6325,6327,6329,6331,6333,6335,6337,6339,6341,6343,6346,6348],{"class":294,"line":6324},48,[292,6326,6271],{"class":305},[292,6328,1187],{"class":301},[292,6330,5804],{"class":353},[292,6332,357],{"class":405},[292,6334,5809],{"class":305},[292,6336,1187],{"class":301},[292,6338,1268],{"class":305},[292,6340,462],{"class":301},[292,6342,315],{"class":301},[292,6344,6345],{"class":318},"color",[292,6347,1944],{"class":301},[292,6349,369],{"class":405},[292,6351,6353,6355,6357,6359,6361,6363,6365,6367,6369,6371,6374,6376],{"class":294,"line":6352},49,[292,6354,6271],{"class":305},[292,6356,1187],{"class":301},[292,6358,5804],{"class":353},[292,6360,357],{"class":405},[292,6362,5809],{"class":305},[292,6364,1187],{"class":301},[292,6366,1268],{"class":305},[292,6368,462],{"class":301},[292,6370,315],{"class":301},[292,6372,6373],{"class":318},"wireframe",[292,6375,1944],{"class":301},[292,6377,369],{"class":405},[292,6379,6381,6383,6385,6387,6389,6391,6393,6395,6397,6399,6402,6404,6406],{"class":294,"line":6380},50,[292,6382,6271],{"class":305},[292,6384,1187],{"class":301},[292,6386,5804],{"class":353},[292,6388,357],{"class":405},[292,6390,5809],{"class":305},[292,6392,1187],{"class":301},[292,6394,1268],{"class":305},[292,6396,462],{"class":301},[292,6398,315],{"class":301},[292,6400,6401],{"class":318},"material",[292,6403,1944],{"class":301},[292,6405,462],{"class":301},[292,6407,1069],{"class":301},[292,6409,6411,6414,6416],{"class":294,"line":6410},51,[292,6412,6413],{"class":405}," options",[292,6415,1925],{"class":301},[292,6417,1069],{"class":301},[292,6419,6421,6424,6426,6428,6430,6432],{"class":294,"line":6420},52,[292,6422,6423],{"class":405}," Basic",[292,6425,1925],{"class":301},[292,6427,315],{"class":301},[292,6429,5632],{"class":318},[292,6431,1944],{"class":301},[292,6433,3764],{"class":301},[292,6435,6437,6440,6442,6444,6447,6449],{"class":294,"line":6436},53,[292,6438,6439],{"class":405}," Normal",[292,6441,1925],{"class":301},[292,6443,315],{"class":301},[292,6445,6446],{"class":318},"normal",[292,6448,1944],{"class":301},[292,6450,3764],{"class":301},[292,6452,6454,6457,6459,6461,6464,6466],{"class":294,"line":6453},54,[292,6455,6456],{"class":405}," Standard",[292,6458,1925],{"class":301},[292,6460,315],{"class":301},[292,6462,6463],{"class":318},"standard",[292,6465,1944],{"class":301},[292,6467,3764],{"class":301},[292,6469,6471],{"class":294,"line":6470},55,[292,6472,3828],{"class":301},[292,6474,6476,6478],{"class":294,"line":6475},56,[292,6477,3887],{"class":301},[292,6479,369],{"class":405},[292,6481,6483],{"class":294,"line":6482},57,[292,6484,347],{"emptyLinePlaceholder":39},[292,6486,6488],{"class":294,"line":6487},58,[292,6489,6490],{"class":1074}," // Add reset button\n",[292,6492,6494,6496,6498,6500,6502,6505,6507,6509,6511,6513,6515,6518,6520,6522,6524,6526,6529,6531,6533,6536,6538,6540,6542,6544],{"class":294,"line":6493},59,[292,6495,5692],{"class":305},[292,6497,1187],{"class":301},[292,6499,1268],{"class":305},[292,6501,1187],{"class":301},[292,6503,6504],{"class":353},"addButton",[292,6506,357],{"class":405},[292,6508,360],{"class":301},[292,6510,5781],{"class":405},[292,6512,1925],{"class":301},[292,6514,315],{"class":301},[292,6516,6517],{"class":318},"Reset All",[292,6519,1944],{"class":301},[292,6521,309],{"class":301},[292,6523,2763],{"class":405},[292,6525,1187],{"class":301},[292,6527,6528],{"class":353},"on",[292,6530,357],{"class":405},[292,6532,1944],{"class":301},[292,6534,6535],{"class":318},"click",[292,6537,1944],{"class":301},[292,6539,462],{"class":301},[292,6541,2968],{"class":301},[292,6543,1066],{"class":409},[292,6545,1069],{"class":301},[292,6547,6549,6552,6554,6557,6559,6561,6563,6565,6567],{"class":294,"line":6548},60,[292,6550,6551],{"class":305}," Object",[292,6553,1187],{"class":301},[292,6555,6556],{"class":353},"assign",[292,6558,357],{"class":405},[292,6560,5809],{"class":305},[292,6562,1187],{"class":301},[292,6564,1268],{"class":305},[292,6566,462],{"class":301},[292,6568,1069],{"class":301},[292,6570,6572,6575,6577,6579,6581,6584,6586,6588,6590,6593,6595,6597],{"class":294,"line":6571},61,[292,6573,6574],{"class":405}," positionX",[292,6576,1925],{"class":301},[292,6578,5524],{"class":693},[292,6580,462],{"class":301},[292,6582,6583],{"class":405}," positionY",[292,6585,1925],{"class":301},[292,6587,5524],{"class":693},[292,6589,462],{"class":301},[292,6591,6592],{"class":405}," positionZ",[292,6594,1925],{"class":301},[292,6596,5524],{"class":693},[292,6598,3764],{"class":301},[292,6600,6602,6605,6607,6609,6611,6614,6616,6618,6620,6623,6625,6627],{"class":294,"line":6601},62,[292,6603,6604],{"class":405}," rotationX",[292,6606,1925],{"class":301},[292,6608,5524],{"class":693},[292,6610,462],{"class":301},[292,6612,6613],{"class":405}," rotationY",[292,6615,1925],{"class":301},[292,6617,5524],{"class":693},[292,6619,462],{"class":301},[292,6621,6622],{"class":405}," rotationZ",[292,6624,1925],{"class":301},[292,6626,5524],{"class":693},[292,6628,3764],{"class":301},[292,6630,6632,6635,6637,6639,6641,6644,6646,6648,6650,6652,6654,6657,6659,6661,6663,6666,6668,6670,6672],{"class":294,"line":6631},63,[292,6633,6634],{"class":405}," scale",[292,6636,1925],{"class":301},[292,6638,3774],{"class":693},[292,6640,462],{"class":301},[292,6642,6643],{"class":405}," color",[292,6645,1925],{"class":301},[292,6647,315],{"class":301},[292,6649,5604],{"class":318},[292,6651,1944],{"class":301},[292,6653,462],{"class":301},[292,6655,6656],{"class":405}," wireframe",[292,6658,1925],{"class":301},[292,6660,5618],{"class":3820},[292,6662,462],{"class":301},[292,6664,6665],{"class":405}," material",[292,6667,1925],{"class":301},[292,6669,315],{"class":301},[292,6671,5632],{"class":318},[292,6673,322],{"class":301},[292,6675,6677,6679],{"class":294,"line":6676},64,[292,6678,4415],{"class":301},[292,6680,369],{"class":405},[292,6682,6684,6686],{"class":294,"line":6683},65,[292,6685,3887],{"class":301},[292,6687,369],{"class":405},[292,6689,6691,6693],{"class":294,"line":6690},66,[292,6692,366],{"class":301},[292,6694,369],{"class":305},[292,6696,6698],{"class":294,"line":6697},67,[292,6699,347],{"emptyLinePlaceholder":39},[292,6701,6703],{"class":294,"line":6702},68,[292,6704,6705],{"class":1074},"// Clean up on unmount\n",[292,6707,6709,6712,6714,6716,6718],{"class":294,"line":6708},69,[292,6710,6711],{"class":353},"onUnmounted",[292,6713,357],{"class":305},[292,6715,1063],{"class":301},[292,6717,1066],{"class":409},[292,6719,1069],{"class":301},[292,6721,6723,6725,6727,6729,6731,6734],{"class":294,"line":6722},70,[292,6724,5692],{"class":305},[292,6726,1187],{"class":301},[292,6728,1268],{"class":305},[292,6730,552],{"class":301},[292,6732,6733],{"class":353},"dispose",[292,6735,475],{"class":405},[292,6737,6739,6741],{"class":294,"line":6738},71,[292,6740,366],{"class":301},[292,6742,369],{"class":305},[292,6744,6746,6748,6750],{"class":294,"line":6745},72,[292,6747,481],{"class":301},[292,6749,406],{"class":405},[292,6751,426],{"class":301},[292,6753,6755],{"class":294,"line":6754},73,[292,6756,347],{"emptyLinePlaceholder":39},[292,6758,6760,6762,6764],{"class":294,"line":6759},74,[292,6761,402],{"class":301},[292,6763,498],{"class":405},[292,6765,426],{"class":301},[292,6767,6769,6771,6773,6776,6778,6780,6783,6785],{"class":294,"line":6768},75,[292,6770,506],{"class":301},[292,6772,1587],{"class":405},[292,6774,6775],{"class":409}," class",[292,6777,416],{"class":301},[292,6779,419],{"class":301},[292,6781,6782],{"class":318},"relative w-full h-full",[292,6784,419],{"class":301},[292,6786,426],{"class":301},[292,6788,6790],{"class":294,"line":6789},76,[292,6791,6792],{"class":1074}," \u003C!-- Tweakpane container positioned outside canvas -->\n",[292,6794,6796,6798,6800,6802,6804,6806,6808,6810,6812,6814,6816,6819,6821],{"class":294,"line":6795},77,[292,6797,676],{"class":301},[292,6799,1587],{"class":405},[292,6801,1135],{"class":409},[292,6803,416],{"class":301},[292,6805,419],{"class":301},[292,6807,5670],{"class":318},[292,6809,419],{"class":301},[292,6811,6775],{"class":409},[292,6813,416],{"class":301},[292,6815,419],{"class":301},[292,6817,6818],{"class":318},"absolute top-4 right-4 z-10",[292,6820,419],{"class":301},[292,6822,716],{"class":301},[292,6824,6826],{"class":294,"line":6825},78,[292,6827,347],{"emptyLinePlaceholder":39},[292,6829,6831,6833,6835,6838,6840,6842,6845,6847],{"class":294,"line":6830},79,[292,6832,676],{"class":301},[292,6834,663],{"class":405},[292,6836,6837],{"class":409}," clear-color",[292,6839,416],{"class":301},[292,6841,419],{"class":301},[292,6843,6844],{"class":318},"#82DBC5",[292,6846,419],{"class":301},[292,6848,426],{"class":301},[292,6850,6852,6854,6856,6858,6860,6862,6864,6866,6868,6870,6872,6874,6876,6878,6880],{"class":294,"line":6851},80,[292,6853,3475],{"class":301},[292,6855,679],{"class":405},[292,6857,682],{"class":301},[292,6859,1381],{"class":409},[292,6861,416],{"class":301},[292,6863,419],{"class":301},[292,6865,541],{"class":301},[292,6867,5836],{"class":693},[292,6869,546],{"class":301},[292,6871,5836],{"class":693},[292,6873,546],{"class":301},[292,6875,5836],{"class":693},[292,6877,558],{"class":301},[292,6879,419],{"class":301},[292,6881,716],{"class":301},[292,6883,6885,6887,6889],{"class":294,"line":6884},81,[292,6886,3475],{"class":301},[292,6888,158],{"class":405},[292,6890,716],{"class":301},[292,6892,6894],{"class":294,"line":6893},82,[292,6895,347],{"emptyLinePlaceholder":39},[292,6897,6899,6901],{"class":294,"line":6898},83,[292,6900,3475],{"class":301},[292,6902,6903],{"class":405},"TresMesh\n",[292,6905,6907,6910,6912,6914,6917],{"class":294,"line":6906},84,[292,6908,6909],{"class":409}," ref",[292,6911,416],{"class":301},[292,6913,419],{"class":301},[292,6915,6916],{"class":318},"meshRef",[292,6918,525],{"class":301},[292,6920,6922,6925,6927,6929,6931,6933,6935,6937,6939,6941,6943,6945,6947,6949,6951,6953,6955,6957],{"class":294,"line":6921},85,[292,6923,6924],{"class":301}," :",[292,6926,1381],{"class":409},[292,6928,416],{"class":301},[292,6930,419],{"class":301},[292,6932,541],{"class":301},[292,6934,5809],{"class":305},[292,6936,1187],{"class":301},[292,6938,5820],{"class":305},[292,6940,546],{"class":301},[292,6942,5809],{"class":305},[292,6944,1187],{"class":301},[292,6946,5881],{"class":305},[292,6948,546],{"class":301},[292,6950,5809],{"class":305},[292,6952,1187],{"class":301},[292,6954,5938],{"class":305},[292,6956,558],{"class":301},[292,6958,525],{"class":301},[292,6960,6962,6964,6966,6968,6970,6972,6974,6976,6978,6980,6982,6984,6986,6988,6990,6992,6994,6996],{"class":294,"line":6961},86,[292,6963,6924],{"class":301},[292,6965,1289],{"class":409},[292,6967,416],{"class":301},[292,6969,419],{"class":301},[292,6971,541],{"class":301},[292,6973,5809],{"class":305},[292,6975,1187],{"class":301},[292,6977,6043],{"class":305},[292,6979,546],{"class":301},[292,6981,5809],{"class":305},[292,6983,1187],{"class":301},[292,6985,6110],{"class":305},[292,6987,546],{"class":301},[292,6989,5809],{"class":305},[292,6991,1187],{"class":301},[292,6993,6175],{"class":305},[292,6995,558],{"class":301},[292,6997,525],{"class":301},[292,6999,7001,7003,7005,7007,7009,7011,7013,7015],{"class":294,"line":7000},87,[292,7002,6924],{"class":301},[292,7004,4546],{"class":409},[292,7006,416],{"class":301},[292,7008,419],{"class":301},[292,7010,5809],{"class":305},[292,7012,1187],{"class":301},[292,7014,4546],{"class":305},[292,7016,525],{"class":301},[292,7018,7020],{"class":294,"line":7019},88,[292,7021,7022],{"class":301}," >\n",[292,7024,7026,7029,7031],{"class":294,"line":7025},89,[292,7027,7028],{"class":301}," \u003C",[292,7030,1412],{"class":405},[292,7032,716],{"class":301},[292,7034,7036,7038],{"class":294,"line":7035},90,[292,7037,7028],{"class":301},[292,7039,7040],{"class":405},"TresMeshBasicMaterial\n",[292,7042,7044,7047,7049,7051,7053,7055,7057,7060,7062,7064],{"class":294,"line":7043},91,[292,7045,7046],{"class":297}," v-if",[292,7048,416],{"class":301},[292,7050,419],{"class":301},[292,7052,5809],{"class":305},[292,7054,1187],{"class":301},[292,7056,6401],{"class":305},[292,7058,7059],{"class":301}," === ",[292,7061,1944],{"class":301},[292,7063,5632],{"class":318},[292,7065,7066],{"class":301},"'\"\n",[292,7068,7070,7073,7075,7077,7079,7081,7083,7085],{"class":294,"line":7069},92,[292,7071,7072],{"class":301}," :",[292,7074,6345],{"class":409},[292,7076,416],{"class":301},[292,7078,419],{"class":301},[292,7080,5809],{"class":305},[292,7082,1187],{"class":301},[292,7084,6345],{"class":305},[292,7086,525],{"class":301},[292,7088,7090,7092,7094,7096,7098,7100,7102,7104],{"class":294,"line":7089},93,[292,7091,7072],{"class":301},[292,7093,6373],{"class":409},[292,7095,416],{"class":301},[292,7097,419],{"class":301},[292,7099,5809],{"class":305},[292,7101,1187],{"class":301},[292,7103,6373],{"class":305},[292,7105,525],{"class":301},[292,7107,7109],{"class":294,"line":7108},94,[292,7110,7111],{"class":301}," />\n",[292,7113,7115,7117],{"class":294,"line":7114},95,[292,7116,7028],{"class":301},[292,7118,7119],{"class":405},"TresMeshNormalMaterial\n",[292,7121,7123,7126,7128,7130,7132,7134,7136,7138,7140,7142],{"class":294,"line":7122},96,[292,7124,7125],{"class":297}," v-else-if",[292,7127,416],{"class":301},[292,7129,419],{"class":301},[292,7131,5809],{"class":305},[292,7133,1187],{"class":301},[292,7135,6401],{"class":305},[292,7137,7059],{"class":301},[292,7139,1944],{"class":301},[292,7141,6446],{"class":318},[292,7143,7066],{"class":301},[292,7145,7147,7149,7151,7153,7155,7157,7159,7161],{"class":294,"line":7146},97,[292,7148,7072],{"class":301},[292,7150,6373],{"class":409},[292,7152,416],{"class":301},[292,7154,419],{"class":301},[292,7156,5809],{"class":305},[292,7158,1187],{"class":301},[292,7160,6373],{"class":305},[292,7162,525],{"class":301},[292,7164,7166],{"class":294,"line":7165},98,[292,7167,7111],{"class":301},[292,7169,7171,7173],{"class":294,"line":7170},99,[292,7172,7028],{"class":301},[292,7174,7175],{"class":405},"TresMeshStandardMaterial\n",[292,7177,7179,7181,7183,7185,7187,7189,7191,7193,7195,7197],{"class":294,"line":7178},100,[292,7180,7125],{"class":297},[292,7182,416],{"class":301},[292,7184,419],{"class":301},[292,7186,5809],{"class":305},[292,7188,1187],{"class":301},[292,7190,6401],{"class":305},[292,7192,7059],{"class":301},[292,7194,1944],{"class":301},[292,7196,6463],{"class":318},[292,7198,7066],{"class":301},[292,7200,7202,7204,7206,7208,7210,7212,7214,7216],{"class":294,"line":7201},101,[292,7203,7072],{"class":301},[292,7205,6345],{"class":409},[292,7207,416],{"class":301},[292,7209,419],{"class":301},[292,7211,5809],{"class":305},[292,7213,1187],{"class":301},[292,7215,6345],{"class":305},[292,7217,525],{"class":301},[292,7219,7221,7223,7225,7227,7229,7231,7233,7235],{"class":294,"line":7220},102,[292,7222,7072],{"class":301},[292,7224,6373],{"class":409},[292,7226,416],{"class":301},[292,7228,419],{"class":301},[292,7230,5809],{"class":305},[292,7232,1187],{"class":301},[292,7234,6373],{"class":305},[292,7236,525],{"class":301},[292,7238,7240],{"class":294,"line":7239},103,[292,7241,7111],{"class":301},[292,7243,7245,7248,7250],{"class":294,"line":7244},104,[292,7246,7247],{"class":301}," \u003C/",[292,7249,1366],{"class":405},[292,7251,426],{"class":301},[292,7253,7255],{"class":294,"line":7254},105,[292,7256,347],{"emptyLinePlaceholder":39},[292,7258,7260,7262,7264,7266,7268,7270,7272,7274,7276,7278,7280,7282,7284],{"class":294,"line":7259},106,[292,7261,3475],{"class":301},[292,7263,731],{"class":405},[292,7265,682],{"class":301},[292,7267,534],{"class":409},[292,7269,416],{"class":301},[292,7271,419],{"class":301},[292,7273,541],{"class":301},[292,7275,744],{"class":693},[292,7277,546],{"class":301},[292,7279,744],{"class":693},[292,7281,558],{"class":301},[292,7283,419],{"class":301},[292,7285,716],{"class":301},[292,7287,7289,7291,7294,7296,7299,7301,7303,7305,7307],{"class":294,"line":7288},107,[292,7290,3475],{"class":301},[292,7292,7293],{"class":405},"TresAmbientLight",[292,7295,682],{"class":301},[292,7297,7298],{"class":409},"intensity",[292,7300,416],{"class":301},[292,7302,419],{"class":301},[292,7304,3460],{"class":693},[292,7306,419],{"class":301},[292,7308,716],{"class":301},[292,7310,7312,7314,7317,7319,7321,7323,7325,7327,7329,7331,7333,7335,7338,7340,7342,7344,7346,7348,7350,7352,7354],{"class":294,"line":7311},108,[292,7313,3475],{"class":301},[292,7315,7316],{"class":405},"TresDirectionalLight",[292,7318,682],{"class":301},[292,7320,1381],{"class":409},[292,7322,416],{"class":301},[292,7324,419],{"class":301},[292,7326,541],{"class":301},[292,7328,1390],{"class":693},[292,7330,546],{"class":301},[292,7332,1390],{"class":693},[292,7334,546],{"class":301},[292,7336,7337],{"class":693},"5",[292,7339,558],{"class":301},[292,7341,419],{"class":301},[292,7343,682],{"class":301},[292,7345,7298],{"class":409},[292,7347,416],{"class":301},[292,7349,419],{"class":301},[292,7351,3460],{"class":693},[292,7353,419],{"class":301},[292,7355,716],{"class":301},[292,7357,7359,7361,7363],{"class":294,"line":7358},109,[292,7360,3492],{"class":301},[292,7362,663],{"class":405},[292,7364,426],{"class":301},[292,7366,7368,7370,7372],{"class":294,"line":7367},110,[292,7369,759],{"class":301},[292,7371,1587],{"class":405},[292,7373,426],{"class":301},[292,7375,7377,7379,7381],{"class":294,"line":7376},111,[292,7378,481],{"class":301},[292,7380,498],{"class":405},[292,7382,426],{"class":301},[988,7384,7386],{"id":7385},"monitoring-values","Monitoring Values",[250,7388,7389],{},"You can also monitor values without making them editable:",[283,7391,7393],{"className":285,"code":7392,"language":288,"meta":225,"style":225},"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",[260,7394,7395,7410,7421,7432,7438,7442,7480,7508],{"__ignoreMap":225},[292,7396,7397,7399,7402,7404,7406,7408],{"class":294,"line":226},[292,7398,454],{"class":409},[292,7400,7401],{"class":305}," stats ",[292,7403,416],{"class":301},[292,7405,1135],{"class":353},[292,7407,357],{"class":305},[292,7409,1274],{"class":301},[292,7411,7412,7415,7417,7419],{"class":294,"line":227},[292,7413,7414],{"class":405}," triangles",[292,7416,1925],{"class":301},[292,7418,5524],{"class":693},[292,7420,3764],{"class":301},[292,7422,7423,7426,7428,7430],{"class":294,"line":344},[292,7424,7425],{"class":405}," fps",[292,7427,1925],{"class":301},[292,7429,5524],{"class":693},[292,7431,3764],{"class":301},[292,7433,7434,7436],{"class":294,"line":350},[292,7435,366],{"class":301},[292,7437,369],{"class":305},[292,7439,7440],{"class":294,"line":478},[292,7441,347],{"emptyLinePlaceholder":39},[292,7443,7444,7446,7449,7451,7453,7455,7457,7459,7461,7463,7465,7467,7469,7471,7474,7476,7478],{"class":294,"line":488},[292,7445,454],{"class":409},[292,7447,7448],{"class":305}," statsFolder ",[292,7450,416],{"class":301},[292,7452,5765],{"class":305},[292,7454,1187],{"class":301},[292,7456,1268],{"class":305},[292,7458,1187],{"class":301},[292,7460,5774],{"class":353},[292,7462,357],{"class":305},[292,7464,360],{"class":301},[292,7466,5781],{"class":405},[292,7468,1925],{"class":301},[292,7470,315],{"class":301},[292,7472,7473],{"class":318},"Statistics",[292,7475,1944],{"class":301},[292,7477,309],{"class":301},[292,7479,369],{"class":305},[292,7481,7482,7485,7487,7490,7493,7495,7497,7499,7501,7504,7506],{"class":294,"line":493},[292,7483,7484],{"class":305},"statsFolder",[292,7486,1187],{"class":301},[292,7488,7489],{"class":353},"addMonitor",[292,7491,7492],{"class":305},"(stats",[292,7494,1187],{"class":301},[292,7496,1268],{"class":305},[292,7498,462],{"class":301},[292,7500,315],{"class":301},[292,7502,7503],{"class":318},"triangles",[292,7505,1944],{"class":301},[292,7507,369],{"class":305},[292,7509,7510,7512,7514,7516,7518,7520,7522,7524,7526,7529,7531,7533,7535,7538,7540,7543,7545],{"class":294,"line":503},[292,7511,7484],{"class":305},[292,7513,1187],{"class":301},[292,7515,7489],{"class":353},[292,7517,7492],{"class":305},[292,7519,1187],{"class":301},[292,7521,1268],{"class":305},[292,7523,462],{"class":301},[292,7525,315],{"class":301},[292,7527,7528],{"class":318},"fps",[292,7530,1944],{"class":301},[292,7532,462],{"class":301},[292,7534,302],{"class":301},[292,7536,7537],{"class":405}," interval",[292,7539,1925],{"class":301},[292,7541,7542],{"class":693}," 100",[292,7544,309],{"class":301},[292,7546,369],{"class":305},[217,7548,7550],{"id":7549},"cleanup","Cleanup",[250,7552,7553],{},"Don't forget to dispose of the pane when the component unmounts:",[283,7555,7557],{"className":285,"code":7556,"language":288,"meta":225,"style":225},"import { onUnmounted } from 'vue'\n\nonUnmounted(() => {\n pane.value?.dispose()\n})\n",[260,7558,7559,7577,7581,7593,7607],{"__ignoreMap":225},[292,7560,7561,7563,7565,7567,7569,7571,7573,7575],{"class":294,"line":226},[292,7562,298],{"class":297},[292,7564,302],{"class":301},[292,7566,5385],{"class":305},[292,7568,309],{"class":301},[292,7570,312],{"class":297},[292,7572,315],{"class":301},[292,7574,395],{"class":318},[292,7576,322],{"class":301},[292,7578,7579],{"class":294,"line":227},[292,7580,347],{"emptyLinePlaceholder":39},[292,7582,7583,7585,7587,7589,7591],{"class":294,"line":344},[292,7584,6711],{"class":353},[292,7586,357],{"class":305},[292,7588,1063],{"class":301},[292,7590,1066],{"class":409},[292,7592,1069],{"class":301},[292,7594,7595,7597,7599,7601,7603,7605],{"class":294,"line":350},[292,7596,5692],{"class":305},[292,7598,1187],{"class":301},[292,7600,1268],{"class":305},[292,7602,552],{"class":301},[292,7604,6733],{"class":353},[292,7606,475],{"class":405},[292,7608,7609,7611],{"class":294,"line":478},[292,7610,366],{"class":301},[292,7612,369],{"class":305},[952,7614,7615],{},[250,7616,7617],{},"Always dispose of the pane instance to prevent memory leaks, especially in SPAs where components are frequently mounted/unmounted.",[962,7619,7620],{},"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":225,"searchDepth":226,"depth":227,"links":7622},[7623,7624,7627],{"id":5231,"depth":227,"text":13},{"id":5339,"depth":227,"text":5340,"children":7625},[7626],{"id":7385,"depth":344,"text":7386},{"id":7549,"depth":227,"text":7550},"Learn how to integrate Tweakpane with TresJS for interactive 3D controls",{"thumbnail":7630},"/recipes/tweakpane.png",{"title":174,"description":7628},"suCCHSWMshvjVAPUx0r5Xcx_akl-XuzHczWZNutNSWs",1768600244523]