[{"data":1,"prerenderedAt":10448},["ShallowReactive",2],{"navigation":3,"/cookbook":256,"/cookbook-surround":281,"$Rv2XlAkWKb":286},[4,29,78,177,190,222,232,236,240,244,248,252],{"title":5,"path":6,"stem":7,"children":8,"icon":27,"titleTemplate":28},"Getting Started","/getting-started","1.getting-started/1.index",[9,12,17,22],{"title":10,"path":6,"stem":7,"icon":11},"Introduction","i-lucide-house",{"title":13,"path":14,"stem":15,"icon":16},"Installation","/getting-started/installation","1.getting-started/2.installation","i-lucide-download",{"title":18,"path":19,"stem":20,"icon":21},"Your First Scene","/getting-started/your-first-scene","1.getting-started/3.your-first-scene","i-lucide-donut",{"title":23,"path":24,"stem":25,"icon":26},"Upgrade Guide","/getting-started/upgrade-guide","1.getting-started/4.upgrade-guide","i-lucide-circle-arrow-up","i-lucide-rocket","%s · Get Started with TresJS",{"title":30,"path":31,"stem":32,"children":33},"Essentials","/essentials","2.essentials",[34,36,48],{"title":30,"path":31,"stem":35},"2.essentials/index",{"title":37,"icon":38,"open":39,"path":40,"stem":41,"children":42,"page":47},"Core Architecture","i-lucide-cpu",true,"/essentials/core-architecture","2.essentials/1.core-architecture",[43],{"title":44,"path":45,"stem":46},"Custom Vue Renderer","/essentials/core-architecture/custom-vue-renderer","2.essentials/1.core-architecture/2.custom-vue-renderer",false,{"title":49,"icon":50,"open":39,"path":51,"stem":52,"children":53,"page":47},"Key Concepts","i-lucide-medal","/essentials/concepts","2.essentials/2.concepts",[54,58,62,66,70,74],{"title":55,"path":56,"stem":57},"Declarative vs Imperative","/essentials/concepts/declarative-vs-imperative","2.essentials/2.concepts/1.declarative-vs-imperative",{"title":59,"path":60,"stem":61},"Reactivity","/essentials/concepts/reactivity","2.essentials/2.concepts/2.reactivity",{"title":63,"path":64,"stem":65},"Constructor Arguments","/essentials/concepts/constructor-arguments","2.essentials/2.concepts/3.constructor-arguments",{"title":67,"path":68,"stem":69},"Declarative Properties","/essentials/concepts/declarative-properties","2.essentials/2.concepts/4.declarative-properties",{"title":71,"path":72,"stem":73},"Extending the Catalogue","/essentials/concepts/extending-catalogue","2.essentials/2.concepts/5.extending-catalogue",{"title":75,"path":76,"stem":77},"Child Attachments","/essentials/concepts/child-attachments","2.essentials/2.concepts/6.child-attachments",{"title":79,"path":80,"stem":81,"children":82},"API","/api","3.api",[83,86,108,135,145,159],{"title":84,"path":80,"stem":85},"TresJS API Reference","3.api/1.index",{"title":87,"icon":88,"open":39,"path":89,"stem":90,"children":91,"page":47},"Components","i-lucide-box","/api/components","3.api/1.components",[92,96,100,104],{"title":93,"path":94,"stem":95},"\u003CTresCanvas />","/api/components/tres-canvas","3.api/1.components/tres-canvas",{"title":97,"path":98,"stem":99},"\u003CTresCanvasContext />","/api/components/tres-context","3.api/1.components/tres-context",{"title":101,"path":102,"stem":103},"Tres Components","/api/components/tres-objects","3.api/1.components/tres-objects",{"title":105,"path":106,"stem":107},"TresPortal","/api/components/tres-portal","3.api/1.components/tres-portal",{"title":109,"titleTemplate":110,"icon":111,"path":112,"stem":113,"children":114,"page":47},"Composables","%s · TresJS Composables","i-lucide-arrow-right-left","/api/composables","3.api/2.composables",[115,119,123,127,131],{"title":116,"path":117,"stem":118},"useTres","/api/composables/use-tres","3.api/2.composables/1.use-tres",{"title":120,"path":121,"stem":122},"useTresContext","/api/composables/use-tres-context","3.api/2.composables/2.use-tres-context",{"title":124,"path":125,"stem":126},"useLoop","/api/composables/use-loop","3.api/2.composables/3.use-loop",{"title":128,"path":129,"stem":130},"useGraph","/api/composables/use-graph","3.api/2.composables/4.use-graph",{"title":132,"path":133,"stem":134},"useLoader","/api/composables/use-loader","3.api/2.composables/5.use-loader",{"title":136,"icon":137,"path":138,"stem":139,"children":140,"page":47},"Event handling","i-lucide-mouse-pointer-2","/api/events","3.api/3.events",[141],{"title":142,"path":143,"stem":144},"Pointer Events","/api/events/pointer-events","3.api/3.events/1.pointer-events",{"title":146,"icon":147,"path":148,"stem":149,"children":150,"page":47},"Utils","i-lucide-wrench","/api/utils","3.api/4.utils",[151,155],{"title":152,"path":153,"stem":154},"Type Guards","/api/utils/type-guards","3.api/4.utils/1.type-guards",{"title":156,"path":157,"stem":158},"Directives","/api/utils/directives","3.api/4.utils/2.directives",{"title":160,"icon":161,"path":162,"stem":163,"children":164,"page":47},"Advanced","i-lucide-brain-circuit","/api/advanced","3.api/5.advanced",[165,169,173],{"title":166,"path":167,"stem":168},"Scaling Performance 🚀","/api/advanced/performance","3.api/5.advanced/performance",{"title":170,"path":171,"stem":172},"Primitives","/api/advanced/primitives","3.api/5.advanced/primitives",{"title":174,"path":175,"stem":176},"WebGPU","/api/advanced/web-gpu","3.api/5.advanced/web-gpu",{"title":178,"path":179,"stem":180,"children":181,"icon":184,"titleTemplate":189},"CLI","/cli","4.cli/1.index",[182,185],{"title":183,"path":179,"stem":180,"icon":184},"TresJS CLI","i-lucide-terminal",{"title":186,"path":187,"stem":188,"icon":88},"tres gltf","/cli/gltf","4.cli/2.gltf","%s · TresJS CLI",{"title":191,"path":192,"stem":193,"children":194},"Cookbook","/cookbook","5.cookbook",[195,198,202,206,210,214,218],{"title":196,"path":192,"stem":197},"Cookbook 🍳🧑‍🍳","5.cookbook/index",{"title":199,"path":200,"stem":201},"OrbitControls","/cookbook/orbit-controls","5.cookbook/1.orbit-controls",{"title":203,"path":204,"stem":205},"Basic Animations","/cookbook/basic-animations","5.cookbook/2.basic-animations",{"title":207,"path":208,"stem":209},"Model Animation","/cookbook/model-animation","5.cookbook/3.model-animation",{"title":211,"path":212,"stem":213},"Advanced GSAP Animations","/cookbook/advanced-gsap-animations","5.cookbook/4.advanced-gsap-animations",{"title":215,"path":216,"stem":217},"Tweakpane","/cookbook/tweakpane","5.cookbook/5.tweakpane",{"title":219,"path":220,"stem":221},"Dynamic components","/cookbook/transition-dynamic","5.cookbook/6.transition-dynamic",{"title":223,"path":224,"stem":225,"children":226},"Community","/community","6.community/1.index",[227,228],{"title":223,"path":224,"stem":225},{"title":229,"path":230,"stem":231},"Awesome Resources","/community/awesome-resources","6.community/awesome-resources",{"title":233,"path":234,"stem":235},"German Translation","/de","de",{"title":237,"path":238,"stem":239},"Spanish Translation","/es","es",{"title":241,"path":242,"stem":243},"French Translation","/fr","fr",{"title":245,"path":246,"stem":247},"Italian Translation","/it","it",{"title":249,"path":250,"stem":251},"Japanese Translation","/jp","jp",{"title":253,"path":254,"stem":255},"Chinese Translation","/zh","zh",{"id":257,"title":196,"body":258,"description":275,"extension":276,"links":277,"meta":278,"navigation":39,"path":192,"seo":279,"stem":197,"__hash__":280},"docs/5.cookbook/index.md",{"type":259,"value":260,"toc":269},"minimark",[261,266],[262,263,265],"h2",{"id":264},"recipes","Recipes",[267,268],"recipes-list",{},{"title":270,"searchDepth":271,"depth":272,"links":273},"",1,2,[274],{"id":264,"depth":272,"text":265},"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":196,"description":275},"X8At6Kc-rXi2TiguhpeFaZmjAar9LCktWQraE4SH2fs",[282,284],{"title":186,"path":187,"stem":188,"description":283,"icon":88,"children":-1},"Generate a typed Vue component from a .glb/.gltf model, with a slot for every node.",{"title":199,"path":200,"stem":201,"description":285,"children":-1},"Learn how to use OrbitControls in TresJS, including both manual and plug-and-play approaches.",[287,949,1696,3055,5135,7401],{"id":288,"title":199,"body":289,"description":285,"extension":276,"links":277,"meta":945,"navigation":39,"path":200,"seo":947,"stem":201,"__hash__":948},"docs/5.cookbook/1.orbit-controls.md",{"type":259,"value":290,"toc":940},[291,294,298,317,321,327,415,432,765,769,776,790,926,936],[292,293],"examples-orbit-controls",{},[295,296,297],"p",{},"OrbitControls is a camera controller that allows you to orbit around a target. It's a great way to explore your scene interactively.",[299,300,301],"note",{},[295,302,303,304,308,309,312,313,316],{},"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 ",[305,306,307],"code",{},"three/addons/controls/OrbitControls"," module via the ",[305,310,311],{},"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 ",[305,314,315],{},"@tresjs/cientos"," package.",[262,318,320],{"id":319},"using-orbitcontrols-manually","Using OrbitControls Manually",[295,322,323,324,326],{},"To use ",[305,325,199],{}," manually, import it and extend the catalog:",[328,329,334],"pre",{"className":330,"code":331,"filename":332,"language":333,"meta":270,"style":270},"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",[305,335,336,368,387,393],{"__ignoreMap":270},[337,338,340,344,348,352,355,358,361,365],"span",{"class":339,"line":271},"line",[337,341,343],{"class":342},"s7zQu","import",[337,345,347],{"class":346},"sMK4o"," {",[337,349,351],{"class":350},"sTEyZ"," extend",[337,353,354],{"class":346}," }",[337,356,357],{"class":342}," from",[337,359,360],{"class":346}," '",[337,362,364],{"class":363},"sfazB","@tresjs/core",[337,366,367],{"class":346},"'\n",[337,369,370,372,374,377,379,381,383,385],{"class":339,"line":272},[337,371,343],{"class":342},[337,373,347],{"class":346},[337,375,376],{"class":350}," OrbitControls",[337,378,354],{"class":346},[337,380,357],{"class":342},[337,382,360],{"class":346},[337,384,307],{"class":363},[337,386,367],{"class":346},[337,388,390],{"class":339,"line":389},3,[337,391,392],{"emptyLinePlaceholder":39},"\n",[337,394,396,400,403,406,409,412],{"class":339,"line":395},4,[337,397,399],{"class":398},"s2Zo4","extend",[337,401,402],{"class":350},"(",[337,404,405],{"class":346},"{",[337,407,408],{"class":350}," OrbitControls ",[337,410,411],{"class":346},"}",[337,413,414],{"class":350},")\n",[295,416,417,418,421,422,428,429,431],{},"Now you can use the ",[305,419,420],{},"TresOrbitControls"," component in your scene. Since ",[423,424,199],"a",{"href":425,"rel":426},"https://threejs.org/docs/#examples/en/controls/OrbitControls",[427],"nofollow"," needs a reference to the camera and renderer, you can use the ",[305,430,116],{}," composable:",[433,434,435,601],"code-group",{},[328,436,441],{"className":437,"code":438,"filename":439,"language":440,"meta":270,"style":270},"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",[305,442,443,472,491,495,521,531,536,546,555,571,586,592],{"__ignoreMap":270},[337,444,445,448,452,456,459,462,465,467,469],{"class":339,"line":271},[337,446,447],{"class":346},"\u003C",[337,449,451],{"class":450},"swJcz","script",[337,453,455],{"class":454},"spNyl"," setup",[337,457,458],{"class":454}," lang",[337,460,461],{"class":346},"=",[337,463,464],{"class":346},"\"",[337,466,333],{"class":363},[337,468,464],{"class":346},[337,470,471],{"class":346},">\n",[337,473,474,476,478,481,483,485,487,489],{"class":339,"line":272},[337,475,343],{"class":342},[337,477,347],{"class":346},[337,479,480],{"class":350}," useTres",[337,482,354],{"class":346},[337,484,357],{"class":342},[337,486,360],{"class":346},[337,488,364],{"class":363},[337,490,367],{"class":346},[337,492,493],{"class":339,"line":389},[337,494,392],{"emptyLinePlaceholder":39},[337,496,497,500,502,505,508,511,513,516,518],{"class":339,"line":395},[337,498,499],{"class":454},"const",[337,501,347],{"class":346},[337,503,504],{"class":350}," camera",[337,506,507],{"class":346},",",[337,509,510],{"class":350}," renderer ",[337,512,411],{"class":346},[337,514,515],{"class":346}," =",[337,517,480],{"class":398},[337,519,520],{"class":350},"()\n",[337,522,524,527,529],{"class":339,"line":523},5,[337,525,526],{"class":346},"\u003C/",[337,528,451],{"class":450},[337,530,471],{"class":346},[337,532,534],{"class":339,"line":533},6,[337,535,392],{"emptyLinePlaceholder":39},[337,537,539,541,544],{"class":339,"line":538},7,[337,540,447],{"class":346},[337,542,543],{"class":450},"template",[337,545,471],{"class":346},[337,547,549,552],{"class":339,"line":548},8,[337,550,551],{"class":346},"  \u003C",[337,553,554],{"class":450},"TresOrbitControls\n",[337,556,558,561,563,565,568],{"class":339,"line":557},9,[337,559,560],{"class":454},"    v-if",[337,562,461],{"class":346},[337,564,464],{"class":346},[337,566,567],{"class":363},"camera",[337,569,570],{"class":346},"\"\n",[337,572,574,577,579,581,584],{"class":339,"line":573},10,[337,575,576],{"class":454},"    :args",[337,578,461],{"class":346},[337,580,464],{"class":346},[337,582,583],{"class":363},"[camera, renderer?.domElement]",[337,585,570],{"class":346},[337,587,589],{"class":339,"line":588},11,[337,590,591],{"class":346},"  />\n",[337,593,595,597,599],{"class":339,"line":594},12,[337,596,526],{"class":346},[337,598,543],{"class":450},[337,600,471],{"class":346},[328,602,605],{"className":437,"code":603,"filename":604,"language":440,"meta":270,"style":270},"\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",[305,606,607,627,646,662,670,674,682,697,720,728,748,757],{"__ignoreMap":270},[337,608,609,611,613,615,617,619,621,623,625],{"class":339,"line":271},[337,610,447],{"class":346},[337,612,451],{"class":450},[337,614,455],{"class":454},[337,616,458],{"class":454},[337,618,461],{"class":346},[337,620,464],{"class":346},[337,622,333],{"class":363},[337,624,464],{"class":346},[337,626,471],{"class":346},[337,628,629,631,633,636,638,640,642,644],{"class":339,"line":272},[337,630,343],{"class":342},[337,632,347],{"class":346},[337,634,635],{"class":350}," TresCanvas",[337,637,354],{"class":346},[337,639,357],{"class":342},[337,641,360],{"class":346},[337,643,364],{"class":363},[337,645,367],{"class":346},[337,647,648,650,652,655,657,660],{"class":339,"line":389},[337,649,343],{"class":342},[337,651,408],{"class":350},[337,653,654],{"class":342},"from",[337,656,360],{"class":346},[337,658,659],{"class":363},"./OrbitControls.vue",[337,661,367],{"class":346},[337,663,664,666,668],{"class":339,"line":395},[337,665,526],{"class":346},[337,667,451],{"class":450},[337,669,471],{"class":346},[337,671,672],{"class":339,"line":523},[337,673,392],{"emptyLinePlaceholder":39},[337,675,676,678,680],{"class":339,"line":533},[337,677,447],{"class":346},[337,679,543],{"class":450},[337,681,471],{"class":346},[337,683,684,686,689,692,695],{"class":339,"line":538},[337,685,551],{"class":346},[337,687,688],{"class":450},"TresCanvas",[337,690,691],{"class":454}," shadows",[337,693,694],{"class":454}," alpha",[337,696,471],{"class":346},[337,698,699,702,705,708,710,712,715,717],{"class":339,"line":548},[337,700,701],{"class":346},"    \u003C",[337,703,704],{"class":450},"TresPerspectiveCamera",[337,706,707],{"class":454}," :args",[337,709,461],{"class":346},[337,711,464],{"class":346},[337,713,714],{"class":363},"[45, 1, 0.1, 1000]",[337,716,464],{"class":346},[337,718,719],{"class":346}," />\n",[337,721,722,724,726],{"class":339,"line":557},[337,723,701],{"class":346},[337,725,199],{"class":450},[337,727,719],{"class":346},[337,729,730,732,735,737,739,741,744,746],{"class":339,"line":573},[337,731,701],{"class":346},[337,733,734],{"class":450},"TresGridHelper",[337,736,707],{"class":454},[337,738,461],{"class":346},[337,740,464],{"class":346},[337,742,743],{"class":363},"[10, 10]",[337,745,464],{"class":346},[337,747,719],{"class":346},[337,749,750,753,755],{"class":339,"line":588},[337,751,752],{"class":346},"  \u003C/",[337,754,688],{"class":450},[337,756,471],{"class":346},[337,758,759,761,763],{"class":339,"line":594},[337,760,526],{"class":346},[337,762,543],{"class":450},[337,764,471],{"class":346},[766,767],"read-more",{"to":768},"/api/components/tres-objects#extending-the-catalogue",[262,770,772,773,775],{"id":771},"orbitcontrols-from-tresjscientos-recommended","OrbitControls from ",[305,774,315],{}," (Recommended)",[295,777,778,779,785,786,789],{},"The ",[423,780,783],{"href":781,"rel":782},"https://cientos.tresjs.org/",[427],[305,784,315],{}," package provides a plug-and-play ",[305,787,788],{},"\u003COrbitControls />"," component that wraps the ThreeJS OrbitControls. You don't need to extend the catalog or pass any arguments—it just works!",[328,791,794],{"className":437,"code":792,"filename":793,"language":440,"meta":270,"style":270},"\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",[305,795,796,816,834,852,860,864,872,884,902,910,918],{"__ignoreMap":270},[337,797,798,800,802,804,806,808,810,812,814],{"class":339,"line":271},[337,799,447],{"class":346},[337,801,451],{"class":450},[337,803,455],{"class":454},[337,805,458],{"class":454},[337,807,461],{"class":346},[337,809,464],{"class":346},[337,811,333],{"class":363},[337,813,464],{"class":346},[337,815,471],{"class":346},[337,817,818,820,822,824,826,828,830,832],{"class":339,"line":272},[337,819,343],{"class":342},[337,821,347],{"class":346},[337,823,376],{"class":350},[337,825,354],{"class":346},[337,827,357],{"class":342},[337,829,360],{"class":346},[337,831,315],{"class":363},[337,833,367],{"class":346},[337,835,836,838,840,842,844,846,848,850],{"class":339,"line":389},[337,837,343],{"class":342},[337,839,347],{"class":346},[337,841,635],{"class":350},[337,843,354],{"class":346},[337,845,357],{"class":342},[337,847,360],{"class":346},[337,849,364],{"class":363},[337,851,367],{"class":346},[337,853,854,856,858],{"class":339,"line":395},[337,855,526],{"class":346},[337,857,451],{"class":450},[337,859,471],{"class":346},[337,861,862],{"class":339,"line":523},[337,863,392],{"emptyLinePlaceholder":39},[337,865,866,868,870],{"class":339,"line":533},[337,867,447],{"class":346},[337,869,543],{"class":450},[337,871,471],{"class":346},[337,873,874,876,878,880,882],{"class":339,"line":538},[337,875,551],{"class":346},[337,877,688],{"class":450},[337,879,691],{"class":454},[337,881,694],{"class":454},[337,883,471],{"class":346},[337,885,886,888,890,892,894,896,898,900],{"class":339,"line":548},[337,887,701],{"class":346},[337,889,704],{"class":450},[337,891,707],{"class":454},[337,893,461],{"class":346},[337,895,464],{"class":346},[337,897,714],{"class":363},[337,899,464],{"class":346},[337,901,719],{"class":346},[337,903,904,906,908],{"class":339,"line":557},[337,905,701],{"class":346},[337,907,199],{"class":450},[337,909,719],{"class":346},[337,911,912,914,916],{"class":339,"line":573},[337,913,752],{"class":346},[337,915,688],{"class":450},[337,917,471],{"class":346},[337,919,920,922,924],{"class":339,"line":588},[337,921,526],{"class":346},[337,923,543],{"class":450},[337,925,471],{"class":346},[927,928,929],"tip",{},[295,930,931,932,935],{},"Make sure the ",[305,933,934],{},"PerspectiveCamera"," is set first in the canvas, otherwise controls might not work as expected.",[937,938,939],"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}",{"title":270,"searchDepth":271,"depth":272,"links":941},[942,943],{"id":319,"depth":272,"text":320},{"id":771,"depth":272,"text":944},"OrbitControls from @tresjs/cientos (Recommended)",{"thumbnail":946},"/recipes/orbit-controls.png",{"title":199,"description":285},"6Wj6AVVFvHJj4BwkOn2Gd8cP0IqmOiFAJsR1AMyIAVU",{"id":950,"title":203,"body":951,"description":1691,"extension":276,"links":277,"meta":1692,"navigation":39,"path":204,"seo":1694,"stem":205,"__hash__":1695},"docs/5.cookbook/2.basic-animations.md",{"type":259,"value":952,"toc":1689},[953,956,959,1686],[954,955],"examples-basic-animation",{},[295,957,958],{},"This recipe covers the fundamentals of creating smooth animations in TresJS.",[960,961,962,970,980,1057,1059,1063,1076,1416,1422,1429,1437,1529,1535,1573,1582,1589,1597,1683],"steps",{},[963,964,966,967,969],"h3",{"id":965},"import-useloop-composable","Import ",[305,968,124],{}," composable",[295,971,778,972,974,975,979],{},[305,973,124],{}," composable is the core of TresJS updates, which includes: ",[976,977,978],"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.",[328,981,983],{"className":330,"code":982,"language":333,"meta":270,"style":270},"import { useLoop } from '@tresjs/core'\n\nconst { onBeforeRender } = useLoop()\n\nonBeforeRender(() => {\n  // Animation logic here\n})\n\n",[305,984,985,1004,1008,1025,1029,1045,1051],{"__ignoreMap":270},[337,986,987,989,991,994,996,998,1000,1002],{"class":339,"line":271},[337,988,343],{"class":342},[337,990,347],{"class":346},[337,992,993],{"class":350}," useLoop",[337,995,354],{"class":346},[337,997,357],{"class":342},[337,999,360],{"class":346},[337,1001,364],{"class":363},[337,1003,367],{"class":346},[337,1005,1006],{"class":339,"line":272},[337,1007,392],{"emptyLinePlaceholder":39},[337,1009,1010,1012,1014,1017,1019,1021,1023],{"class":339,"line":389},[337,1011,499],{"class":454},[337,1013,347],{"class":346},[337,1015,1016],{"class":350}," onBeforeRender ",[337,1018,411],{"class":346},[337,1020,515],{"class":346},[337,1022,993],{"class":398},[337,1024,520],{"class":350},[337,1026,1027],{"class":339,"line":395},[337,1028,392],{"emptyLinePlaceholder":39},[337,1030,1031,1034,1036,1039,1042],{"class":339,"line":523},[337,1032,1033],{"class":398},"onBeforeRender",[337,1035,402],{"class":350},[337,1037,1038],{"class":346},"()",[337,1040,1041],{"class":454}," =>",[337,1043,1044],{"class":346}," {\n",[337,1046,1047],{"class":339,"line":533},[337,1048,1050],{"class":1049},"sHwdD","  // Animation logic here\n",[337,1052,1053,1055],{"class":339,"line":538},[337,1054,411],{"class":346},[337,1056,414],{"class":350},[766,1058],{"to":125},[963,1060,1062],{"id":1061},"get-a-reference-to-the-object-you-want-to-animate","Get a reference to the object you want to animate",[295,1064,1065,1066,1071,1072,1075],{},"Similar to Vue, you can use ",[423,1067,1070],{"href":1068,"rel":1069},"https://vuejs.org/guide/essentials/template-refs",[427],"template refs"," to access the Three.js object instance and manipulate its properties. If you want to optimize even further, you can use ",[305,1073,1074],{},"shallowRef"," to avoid unnecessary reactivity.",[328,1077,1080],{"className":437,"code":1078,"filename":1079,"language":440,"meta":270,"style":270},"\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",[305,1081,1082,1102,1121,1139,1143,1182,1187,1192,1196,1212,1216,1228,1250,1277,1299,1305,1312,1321,1326,1335,1367,1388,1398,1407],{"__ignoreMap":270},[337,1083,1084,1086,1088,1090,1092,1094,1096,1098,1100],{"class":339,"line":271},[337,1085,447],{"class":346},[337,1087,451],{"class":450},[337,1089,455],{"class":454},[337,1091,458],{"class":454},[337,1093,461],{"class":346},[337,1095,464],{"class":346},[337,1097,333],{"class":363},[337,1099,464],{"class":346},[337,1101,471],{"class":346},[337,1103,1104,1106,1108,1111,1113,1115,1117,1119],{"class":339,"line":272},[337,1105,343],{"class":342},[337,1107,347],{"class":346},[337,1109,1110],{"class":350}," ref",[337,1112,354],{"class":346},[337,1114,357],{"class":342},[337,1116,360],{"class":346},[337,1118,440],{"class":363},[337,1120,367],{"class":346},[337,1122,1123,1125,1127,1129,1131,1133,1135,1137],{"class":339,"line":389},[337,1124,343],{"class":342},[337,1126,347],{"class":346},[337,1128,993],{"class":350},[337,1130,354],{"class":346},[337,1132,357],{"class":342},[337,1134,360],{"class":346},[337,1136,364],{"class":363},[337,1138,367],{"class":346},[337,1140,1141],{"class":339,"line":395},[337,1142,392],{"emptyLinePlaceholder":39},[337,1144,1145,1147,1150,1152,1154,1156,1160,1163,1166,1169,1172,1175,1177,1180],{"class":339,"line":523},[337,1146,499],{"class":454},[337,1148,1149],{"class":350}," cubeRef ",[337,1151,461],{"class":346},[337,1153,1110],{"class":398},[337,1155,447],{"class":346},[337,1157,1159],{"class":1158},"sBMFI","THREE",[337,1161,1162],{"class":346},".",[337,1164,1165],{"class":1158},"Mesh",[337,1167,1168],{"class":346}," |",[337,1170,1171],{"class":1158}," null",[337,1173,1174],{"class":346},">",[337,1176,402],{"class":350},[337,1178,1179],{"class":346},"null",[337,1181,414],{"class":350},[337,1183,1184],{"class":339,"line":533},[337,1185,1186],{"class":1049},"// or use shallowRef if you want to avoid reactivity\n",[337,1188,1189],{"class":339,"line":538},[337,1190,1191],{"class":1049},"// const cubeRef = shallowRef\u003CTHREE.Mesh | null>(null)\n",[337,1193,1194],{"class":339,"line":548},[337,1195,392],{"emptyLinePlaceholder":39},[337,1197,1198,1200,1202,1204,1206,1208,1210],{"class":339,"line":557},[337,1199,499],{"class":454},[337,1201,347],{"class":346},[337,1203,1016],{"class":350},[337,1205,411],{"class":346},[337,1207,515],{"class":346},[337,1209,993],{"class":398},[337,1211,520],{"class":350},[337,1213,1214],{"class":339,"line":573},[337,1215,392],{"emptyLinePlaceholder":39},[337,1217,1218,1220,1222,1224,1226],{"class":339,"line":588},[337,1219,1033],{"class":398},[337,1221,402],{"class":350},[337,1223,1038],{"class":346},[337,1225,1041],{"class":454},[337,1227,1044],{"class":346},[337,1229,1230,1233,1236,1239,1241,1244,1247],{"class":339,"line":594},[337,1231,1232],{"class":342},"  if",[337,1234,1235],{"class":450}," (",[337,1237,1238],{"class":350},"cubeRef",[337,1240,1162],{"class":346},[337,1242,1243],{"class":350},"value",[337,1245,1246],{"class":450},") ",[337,1248,1249],{"class":346},"{\n",[337,1251,1253,1256,1258,1260,1262,1265,1267,1270,1273],{"class":339,"line":1252},13,[337,1254,1255],{"class":350},"    cubeRef",[337,1257,1162],{"class":346},[337,1259,1243],{"class":350},[337,1261,1162],{"class":346},[337,1263,1264],{"class":350},"rotation",[337,1266,1162],{"class":346},[337,1268,1269],{"class":350},"x",[337,1271,1272],{"class":346}," +=",[337,1274,1276],{"class":1275},"sbssI"," 0.01\n",[337,1278,1280,1282,1284,1286,1288,1290,1292,1295,1297],{"class":339,"line":1279},14,[337,1281,1255],{"class":350},[337,1283,1162],{"class":346},[337,1285,1243],{"class":350},[337,1287,1162],{"class":346},[337,1289,1264],{"class":350},[337,1291,1162],{"class":346},[337,1293,1294],{"class":350},"y",[337,1296,1272],{"class":346},[337,1298,1276],{"class":1275},[337,1300,1302],{"class":339,"line":1301},15,[337,1303,1304],{"class":346},"  }\n",[337,1306,1308,1310],{"class":339,"line":1307},16,[337,1309,411],{"class":346},[337,1311,414],{"class":350},[337,1313,1315,1317,1319],{"class":339,"line":1314},17,[337,1316,526],{"class":346},[337,1318,451],{"class":450},[337,1320,471],{"class":346},[337,1322,1324],{"class":339,"line":1323},18,[337,1325,392],{"emptyLinePlaceholder":39},[337,1327,1329,1331,1333],{"class":339,"line":1328},19,[337,1330,447],{"class":346},[337,1332,543],{"class":450},[337,1334,471],{"class":346},[337,1336,1338,1340,1343,1345,1347,1349,1351,1353,1356,1358,1360,1363,1365],{"class":339,"line":1337},20,[337,1339,551],{"class":346},[337,1341,1342],{"class":450},"TresMesh",[337,1344,1110],{"class":454},[337,1346,461],{"class":346},[337,1348,464],{"class":346},[337,1350,1238],{"class":363},[337,1352,464],{"class":346},[337,1354,1355],{"class":454}," :position",[337,1357,461],{"class":346},[337,1359,464],{"class":346},[337,1361,1362],{"class":363},"[0, 1, 0]",[337,1364,464],{"class":346},[337,1366,471],{"class":346},[337,1368,1370,1372,1375,1377,1379,1381,1384,1386],{"class":339,"line":1369},21,[337,1371,701],{"class":346},[337,1373,1374],{"class":450},"TresBoxGeometry",[337,1376,707],{"class":454},[337,1378,461],{"class":346},[337,1380,464],{"class":346},[337,1382,1383],{"class":363},"[1, 1, 1]",[337,1385,464],{"class":346},[337,1387,719],{"class":346},[337,1389,1391,1393,1396],{"class":339,"line":1390},22,[337,1392,701],{"class":346},[337,1394,1395],{"class":450},"TresMeshNormalMaterial",[337,1397,719],{"class":346},[337,1399,1401,1403,1405],{"class":339,"line":1400},23,[337,1402,752],{"class":346},[337,1404,1342],{"class":450},[337,1406,471],{"class":346},[337,1408,1410,1412,1414],{"class":339,"line":1409},24,[337,1411,526],{"class":346},[337,1413,543],{"class":450},[337,1415,471],{"class":346},[766,1417,1419],{"to":1418},"/api/advanced/performance#reactivity-and-performance",[295,1420,1421],{},"To read more about reactivity and performance in TresJS.",[262,1423,1425,1426],{"id":1424},"use-delta","Use ",[305,1427,1428],{},"delta",[295,1430,778,1431,1433,1434,1436],{},[305,1432,1033],{}," callback provides a ",[305,1435,1428],{}," parameter, which represents the time elapsed since the last frame. This is useful for creating frame rate independent animations.",[328,1438,1440],{"className":330,"code":1439,"language":333,"meta":270,"style":270},"onBeforeRender(({ delta }) => {\n  if (cubeRef.value) {\n    cubeRef.value.rotation.x += delta\n    cubeRef.value.rotation.y += delta\n  }\n})\n",[305,1441,1442,1462,1478,1499,1519,1523],{"__ignoreMap":270},[337,1443,1444,1446,1448,1451,1455,1458,1460],{"class":339,"line":271},[337,1445,1033],{"class":398},[337,1447,402],{"class":350},[337,1449,1450],{"class":346},"({",[337,1452,1454],{"class":1453},"sHdIc"," delta",[337,1456,1457],{"class":346}," })",[337,1459,1041],{"class":454},[337,1461,1044],{"class":346},[337,1463,1464,1466,1468,1470,1472,1474,1476],{"class":339,"line":272},[337,1465,1232],{"class":342},[337,1467,1235],{"class":450},[337,1469,1238],{"class":350},[337,1471,1162],{"class":346},[337,1473,1243],{"class":350},[337,1475,1246],{"class":450},[337,1477,1249],{"class":346},[337,1479,1480,1482,1484,1486,1488,1490,1492,1494,1496],{"class":339,"line":389},[337,1481,1255],{"class":350},[337,1483,1162],{"class":346},[337,1485,1243],{"class":350},[337,1487,1162],{"class":346},[337,1489,1264],{"class":350},[337,1491,1162],{"class":346},[337,1493,1269],{"class":350},[337,1495,1272],{"class":346},[337,1497,1498],{"class":350}," delta\n",[337,1500,1501,1503,1505,1507,1509,1511,1513,1515,1517],{"class":339,"line":395},[337,1502,1255],{"class":350},[337,1504,1162],{"class":346},[337,1506,1243],{"class":350},[337,1508,1162],{"class":346},[337,1510,1264],{"class":350},[337,1512,1162],{"class":346},[337,1514,1294],{"class":350},[337,1516,1272],{"class":346},[337,1518,1498],{"class":350},[337,1520,1521],{"class":339,"line":523},[337,1522,1304],{"class":346},[337,1524,1525,1527],{"class":339,"line":533},[337,1526,411],{"class":346},[337,1528,414],{"class":350},[295,1530,1531,1532,1534],{},"Without using ",[305,1533,1428],{},", the animation speed would vary depending on the frame rate, leading to inconsistent behavior across different devices, like the example below:",[1536,1537,1545,1546,1563],"div",{"className":1538},[1539,1540,1541,1542,1543,1544],"w-full","flex","border","border-gray-200","rounded-lg","overflow-hidden","\n   ",[1536,1547,1551,1552,1560],{"className":1548},[1549,1550,1542],"w-1/2","border-r","\n      ",[1536,1553,1559],{"className":1554},[1555,1556,1557,1542,1558],"text-center","p-2","border-b","font-bold","\n         60fps\n      ",[1561,1562],"examples-basic-animation-60fps",{},[1536,1564,1566,1570],{"className":1565},[1549],[1536,1567,1569],{"className":1568},[1556,1555,1556,1557,1542,1558],"\n   120fps\n",[1571,1572],"examples-basic-animation-120fps",{},[1536,1574,1581],{"className":1575},[1556,1576,1577,1578,1579,1580,1555],"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",[262,1583,1585,1586],{"id":1584},"using-elapsed","Using ",[305,1587,1588],{},"elapsed",[295,1590,778,1591,1593,1594,1596],{},[305,1592,1033],{}," callback also provides an ",[305,1595,1588],{}," parameter, which represents the total time elapsed since the start of the animation. This can be useful for creating time-based animations like oscillations.",[328,1598,1600],{"className":330,"code":1599,"language":333,"meta":270,"style":270},"onBeforeRender(({ elapsed }) => {\n  if (cubeRef.value) {\n    cubeRef.value.position.y += Math.sin(elapsed) * 0.01\n  }\n})\n",[305,1601,1602,1619,1635,1673,1677],{"__ignoreMap":270},[337,1603,1604,1606,1608,1610,1613,1615,1617],{"class":339,"line":271},[337,1605,1033],{"class":398},[337,1607,402],{"class":350},[337,1609,1450],{"class":346},[337,1611,1612],{"class":1453}," elapsed",[337,1614,1457],{"class":346},[337,1616,1041],{"class":454},[337,1618,1044],{"class":346},[337,1620,1621,1623,1625,1627,1629,1631,1633],{"class":339,"line":272},[337,1622,1232],{"class":342},[337,1624,1235],{"class":450},[337,1626,1238],{"class":350},[337,1628,1162],{"class":346},[337,1630,1243],{"class":350},[337,1632,1246],{"class":450},[337,1634,1249],{"class":346},[337,1636,1637,1639,1641,1643,1645,1648,1650,1652,1654,1657,1659,1662,1664,1666,1668,1671],{"class":339,"line":389},[337,1638,1255],{"class":350},[337,1640,1162],{"class":346},[337,1642,1243],{"class":350},[337,1644,1162],{"class":346},[337,1646,1647],{"class":350},"position",[337,1649,1162],{"class":346},[337,1651,1294],{"class":350},[337,1653,1272],{"class":346},[337,1655,1656],{"class":350}," Math",[337,1658,1162],{"class":346},[337,1660,1661],{"class":398},"sin",[337,1663,402],{"class":450},[337,1665,1588],{"class":350},[337,1667,1246],{"class":450},[337,1669,1670],{"class":346},"*",[337,1672,1276],{"class":1275},[337,1674,1675],{"class":339,"line":395},[337,1676,1304],{"class":346},[337,1678,1679,1681],{"class":339,"line":523},[337,1680,411],{"class":346},[337,1682,414],{"class":350},[1684,1685],"examples-basic-animation-elapsed",{},[937,1687,1688],{},"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":270,"searchDepth":271,"depth":272,"links":1690},[],"Learn how to create basic animations in TresJS",{"thumbnail":1693},"/recipes/model-n-animations/basic.png",{"title":203,"description":1691},"B2bwvJapI7dixhiYB5lSwQFA1WR9sps5LtjrfAK5fcQ",{"id":1697,"title":207,"body":1698,"description":3050,"extension":276,"links":277,"meta":3051,"navigation":39,"path":208,"seo":3053,"stem":209,"__hash__":3054},"docs/5.cookbook/3.model-animation.md",{"type":259,"value":1699,"toc":3045},[1700,1703,1706,1710,1713,1741,1755,1762,1766,2124,2128,3042],[1701,1702],"examples-model-animation",{},[295,1704,1705],{},"Let's bring your 3D models to life with animations in TresJS. This guide covers loading animated models and controlling their playback.",[262,1707,1709],{"id":1708},"where-to-find-models","Where to find models?",[295,1711,1712],{},"You can find quality 3D models for your projects in various online repositories. Here are some hand picked sources from the TresJS community:",[1714,1715,1716,1725,1733],"ul",{},[1717,1718,1719,1724],"li",{},[423,1720,1723],{"href":1721,"rel":1722},"https://poly.pizza/",[427],"poly.pizza"," - A collection of free 3D models.",[1717,1726,1727,1732],{},[423,1728,1731],{"href":1729,"rel":1730},"https://market.pmnd.rs/",[427],"Pmndrs Marketplace"," - A marketplace for 3D assets. All free",[1717,1734,1735,1740],{},[423,1736,1739],{"href":1737,"rel":1738},"https://kaylousberg.itch.io/",[427],"KayKit Character Packs"," - Free and paid character packs. Animated, all CC0, a personal favorite of ours.",[295,1742,1743,1744,1747,1748,1162],{},"For this tutorial we will use a simplified version of the ",[976,1745,1746],{},"KayKit Knight character",", you can download it directly from ",[1749,1750,1754],"u-button",{"variant":1751,"icon":1752,"download":39,"external":270,":to":1753},"ghost","i-lucide-arrow-down","/models/knight/Knight.glb","here",[295,1756,1757],{},[1758,1759],"img",{"alt":1760,"src":1761},"Knight model","/recipes/model-n-animations/kaykit-simplified-knight.png",[262,1763,1765],{"id":1764},"loading-animated-models","Loading Animated Models",[960,1767,1768,1772,1778,1796,1800,1813,1907,1916,1933,1937,1940,1945],{},[963,1769,1771],{"id":1770},"install-cientos","Install cientos",[295,1773,1774,1775,1777],{},"If you haven't already, install the ",[305,1776,315],{}," package, which provides components for loading 3D models.",[328,1779,1783],{"className":1780,"code":1781,"language":1782,"meta":270,"style":270},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","npm install @tresjs/cientos\n","bash",[305,1784,1785],{"__ignoreMap":270},[337,1786,1787,1790,1793],{"class":339,"line":271},[337,1788,1789],{"class":1158},"npm",[337,1791,1792],{"class":363}," install",[337,1794,1795],{"class":363}," @tresjs/cientos\n",[963,1797,1799],{"id":1798},"load-the-model","Load the Model",[295,1801,1802,1803,1806,1807,1809,1810,1162],{},"Use the ",[305,1804,1805],{},"useGLTF"," composable from ",[305,1808,315],{}," to load your animated model. Add the downloaded GLB file to your public directory in a subfolder like ",[305,1811,1812],{},"/models/knight/",[328,1814,1817],{"className":437,"code":1815,"filename":1816,"language":440,"meta":270,"style":270},"\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",[305,1818,1819,1839,1858,1862,1899],{"__ignoreMap":270},[337,1820,1821,1823,1825,1827,1829,1831,1833,1835,1837],{"class":339,"line":271},[337,1822,447],{"class":346},[337,1824,451],{"class":450},[337,1826,455],{"class":454},[337,1828,458],{"class":454},[337,1830,461],{"class":346},[337,1832,464],{"class":346},[337,1834,333],{"class":363},[337,1836,464],{"class":346},[337,1838,471],{"class":346},[337,1840,1841,1843,1845,1848,1850,1852,1854,1856],{"class":339,"line":272},[337,1842,343],{"class":342},[337,1844,347],{"class":346},[337,1846,1847],{"class":350}," useGLTF",[337,1849,354],{"class":346},[337,1851,357],{"class":342},[337,1853,360],{"class":346},[337,1855,315],{"class":363},[337,1857,367],{"class":346},[337,1859,1860],{"class":339,"line":389},[337,1861,392],{"emptyLinePlaceholder":39},[337,1863,1864,1866,1868,1871,1874,1877,1879,1882,1884,1886,1888,1890,1893,1895,1897],{"class":339,"line":395},[337,1865,499],{"class":454},[337,1867,347],{"class":346},[337,1869,1870],{"class":450}," state",[337,1872,1873],{"class":346},":",[337,1875,1876],{"class":350}," model",[337,1878,507],{"class":346},[337,1880,1881],{"class":350}," nodes ",[337,1883,411],{"class":346},[337,1885,515],{"class":346},[337,1887,1847],{"class":398},[337,1889,402],{"class":350},[337,1891,1892],{"class":346},"'",[337,1894,1753],{"class":363},[337,1896,1892],{"class":346},[337,1898,414],{"class":350},[337,1900,1901,1903,1905],{"class":339,"line":523},[337,1902,526],{"class":346},[337,1904,451],{"class":450},[337,1906,471],{"class":346},[766,1908,1910],{"to":1909},"https://cientos.tresjs.org/api/loaders/use-gltf",[295,1911,1912,1913,1915],{},"Learn more about the ",[305,1914,1805],{}," composable.",[927,1917,1918],{},[295,1919,1920,1921,1924,1925,1928,1929,1162],{},"Instead of wiring the model up by hand, you can generate a typed component from it with\n",[305,1922,1923],{},"npx @tresjs/cli gltf public/models/knight/Knight.glb",". It exposes the clips as\n",[305,1926,1927],{},"actions",", keyed by a union of their names. See ",[423,1930,1931],{"href":187},[305,1932,186],{},[963,1934,1936],{"id":1935},"add-rig-to-the-scene","Add Rig to the Scene",[295,1938,1939],{},"The Rig is the root object that contains the entire model and its animations. You can access it from the individual nodes.",[927,1941,1942],{},[295,1943,1944],{},"The Rig might be named differently depending on the model. Check the model's structure to find the correct root object.",[328,1946,1948],{"className":437,"code":1947,"filename":1816,"language":440,"meta":270,"style":270},"\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",[305,1949,1950,1970,1988,1992,2024,2028,2033,2063,2071,2075,2083,2116],{"__ignoreMap":270},[337,1951,1952,1954,1956,1958,1960,1962,1964,1966,1968],{"class":339,"line":271},[337,1953,447],{"class":346},[337,1955,451],{"class":450},[337,1957,455],{"class":454},[337,1959,458],{"class":454},[337,1961,461],{"class":346},[337,1963,464],{"class":346},[337,1965,333],{"class":363},[337,1967,464],{"class":346},[337,1969,471],{"class":346},[337,1971,1972,1974,1976,1978,1980,1982,1984,1986],{"class":339,"line":272},[337,1973,343],{"class":342},[337,1975,347],{"class":346},[337,1977,1847],{"class":350},[337,1979,354],{"class":346},[337,1981,357],{"class":342},[337,1983,360],{"class":346},[337,1985,315],{"class":363},[337,1987,367],{"class":346},[337,1989,1990],{"class":339,"line":389},[337,1991,392],{"emptyLinePlaceholder":39},[337,1993,1994,1996,1998,2000,2002,2004,2006,2008,2010,2012,2014,2016,2018,2020,2022],{"class":339,"line":395},[337,1995,499],{"class":454},[337,1997,347],{"class":346},[337,1999,1870],{"class":450},[337,2001,1873],{"class":346},[337,2003,1876],{"class":350},[337,2005,507],{"class":346},[337,2007,1881],{"class":350},[337,2009,411],{"class":346},[337,2011,515],{"class":346},[337,2013,1847],{"class":398},[337,2015,402],{"class":350},[337,2017,1892],{"class":346},[337,2019,1753],{"class":363},[337,2021,1892],{"class":346},[337,2023,414],{"class":350},[337,2025,2026],{"class":339,"line":523},[337,2027,392],{"emptyLinePlaceholder":39},[337,2029,2030],{"class":339,"line":533},[337,2031,2032],{"class":1049},"// We access the rig from the individual nodes\n",[337,2034,2035,2037,2040,2042,2045,2047,2049,2051,2054,2056,2058,2060],{"class":339,"line":538},[337,2036,499],{"class":454},[337,2038,2039],{"class":350}," rig ",[337,2041,461],{"class":346},[337,2043,2044],{"class":398}," computed",[337,2046,402],{"class":350},[337,2048,1038],{"class":346},[337,2050,1041],{"class":454},[337,2052,2053],{"class":350}," nodes",[337,2055,1162],{"class":346},[337,2057,1243],{"class":350},[337,2059,1162],{"class":346},[337,2061,2062],{"class":350},"Rig)\n",[337,2064,2065,2067,2069],{"class":339,"line":548},[337,2066,526],{"class":346},[337,2068,451],{"class":450},[337,2070,471],{"class":346},[337,2072,2073],{"class":339,"line":557},[337,2074,392],{"emptyLinePlaceholder":39},[337,2076,2077,2079,2081],{"class":339,"line":573},[337,2078,447],{"class":346},[337,2080,543],{"class":450},[337,2082,471],{"class":346},[337,2084,2085,2088,2091,2094,2096,2098,2101,2103,2106,2108,2110,2112,2114],{"class":339,"line":588},[337,2086,2087],{"class":346},"   \u003C",[337,2089,2090],{"class":450},"primitive",[337,2092,2093],{"class":454}," v-if",[337,2095,461],{"class":346},[337,2097,464],{"class":346},[337,2099,2100],{"class":363},"rig",[337,2102,464],{"class":346},[337,2104,2105],{"class":454}," :object",[337,2107,461],{"class":346},[337,2109,464],{"class":346},[337,2111,2100],{"class":363},[337,2113,464],{"class":346},[337,2115,719],{"class":346},[337,2117,2118,2120,2122],{"class":339,"line":594},[337,2119,526],{"class":346},[337,2121,543],{"class":450},[337,2123,471],{"class":346},[262,2125,2127],{"id":2126},"animation-control","Animation Control",[960,2129,2130,2137,2146,2330,2337,2341,2348,2392,2396,2403,2449,2453,2464,3008,3013],{},[963,2131,1802,2133,2136],{"id":2132},"use-the-useanimations-composable",[305,2134,2135],{},"useAnimations"," Composable",[295,2138,778,2139,2141,2142,2145],{},[305,2140,2135],{}," composable helps manage and play animations from your model. It takes the animations array and the rig as parameters and returns the ",[305,2143,2144],{},"AnimationClips"," (actions).",[328,2147,2149],{"className":437,"code":2148,"filename":1816,"language":440,"meta":270,"style":270},"\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",[305,2150,2151,2171,2194,2198,2230,2234,2269,2295,2299,2322],{"__ignoreMap":270},[337,2152,2153,2155,2157,2159,2161,2163,2165,2167,2169],{"class":339,"line":271},[337,2154,447],{"class":346},[337,2156,451],{"class":450},[337,2158,455],{"class":454},[337,2160,458],{"class":454},[337,2162,461],{"class":346},[337,2164,464],{"class":346},[337,2166,333],{"class":363},[337,2168,464],{"class":346},[337,2170,471],{"class":346},[337,2172,2173,2175,2177,2179,2181,2184,2186,2188,2190,2192],{"class":339,"line":272},[337,2174,343],{"class":342},[337,2176,347],{"class":346},[337,2178,1847],{"class":350},[337,2180,507],{"class":346},[337,2182,2183],{"class":350}," useAnimations",[337,2185,354],{"class":346},[337,2187,357],{"class":342},[337,2189,360],{"class":346},[337,2191,315],{"class":363},[337,2193,367],{"class":346},[337,2195,2196],{"class":339,"line":389},[337,2197,392],{"emptyLinePlaceholder":39},[337,2199,2200,2202,2204,2206,2208,2210,2212,2214,2216,2218,2220,2222,2224,2226,2228],{"class":339,"line":395},[337,2201,499],{"class":454},[337,2203,347],{"class":346},[337,2205,1870],{"class":450},[337,2207,1873],{"class":346},[337,2209,1876],{"class":350},[337,2211,507],{"class":346},[337,2213,1881],{"class":350},[337,2215,411],{"class":346},[337,2217,515],{"class":346},[337,2219,1847],{"class":398},[337,2221,402],{"class":350},[337,2223,1892],{"class":346},[337,2225,1753],{"class":363},[337,2227,1892],{"class":346},[337,2229,414],{"class":350},[337,2231,2232],{"class":339,"line":523},[337,2233,392],{"emptyLinePlaceholder":39},[337,2235,2236,2238,2241,2243,2245,2247,2249,2251,2253,2255,2257,2260,2263,2266],{"class":339,"line":533},[337,2237,499],{"class":454},[337,2239,2240],{"class":350}," animations ",[337,2242,461],{"class":346},[337,2244,2044],{"class":398},[337,2246,402],{"class":350},[337,2248,1038],{"class":346},[337,2250,1041],{"class":454},[337,2252,1876],{"class":350},[337,2254,1162],{"class":346},[337,2256,1243],{"class":350},[337,2258,2259],{"class":346},"?.",[337,2261,2262],{"class":350},"animations ",[337,2264,2265],{"class":346},"||",[337,2267,2268],{"class":350}," [])\n",[337,2270,2271,2273,2275,2277,2279,2281,2283,2285,2287,2289,2291,2293],{"class":339,"line":538},[337,2272,499],{"class":454},[337,2274,2039],{"class":350},[337,2276,461],{"class":346},[337,2278,2044],{"class":398},[337,2280,402],{"class":350},[337,2282,1038],{"class":346},[337,2284,1041],{"class":454},[337,2286,2053],{"class":350},[337,2288,1162],{"class":346},[337,2290,1243],{"class":350},[337,2292,1162],{"class":346},[337,2294,2062],{"class":350},[337,2296,2297],{"class":339,"line":548},[337,2298,392],{"emptyLinePlaceholder":39},[337,2300,2301,2303,2305,2308,2310,2312,2314,2317,2319],{"class":339,"line":557},[337,2302,499],{"class":454},[337,2304,347],{"class":346},[337,2306,2307],{"class":350}," actions ",[337,2309,411],{"class":346},[337,2311,515],{"class":346},[337,2313,2183],{"class":398},[337,2315,2316],{"class":350},"(animations",[337,2318,507],{"class":346},[337,2320,2321],{"class":350}," rig)\n",[337,2323,2324,2326,2328],{"class":339,"line":573},[337,2325,526],{"class":346},[337,2327,451],{"class":450},[337,2329,471],{"class":346},[766,2331,2333],{"to":2332},"https://cientos.tresjs.org/api/miscellaneous/use-animations",[295,2334,1912,2335,1915],{},[305,2336,2135],{},[963,2338,2340],{"id":2339},"play-an-animation","Play an Animation",[295,2342,2343,2344,2347],{},"You can play an animation by calling the ",[305,2345,2346],{},"play"," method on the desired action. For example, to play the \"Cheer\" animation:",[328,2349,2351],{"className":330,"code":2350,"language":333,"meta":270,"style":270},"const { actions } = useAnimations(animations, rig)\n\nactions.Cheer?.play()\n",[305,2352,2353,2373,2377],{"__ignoreMap":270},[337,2354,2355,2357,2359,2361,2363,2365,2367,2369,2371],{"class":339,"line":271},[337,2356,499],{"class":454},[337,2358,347],{"class":346},[337,2360,2307],{"class":350},[337,2362,411],{"class":346},[337,2364,515],{"class":346},[337,2366,2183],{"class":398},[337,2368,2316],{"class":350},[337,2370,507],{"class":346},[337,2372,2321],{"class":350},[337,2374,2375],{"class":339,"line":272},[337,2376,392],{"emptyLinePlaceholder":39},[337,2378,2379,2381,2383,2386,2388,2390],{"class":339,"line":389},[337,2380,1927],{"class":350},[337,2382,1162],{"class":346},[337,2384,2385],{"class":350},"Cheer",[337,2387,2259],{"class":346},[337,2389,2346],{"class":398},[337,2391,520],{"class":350},[963,2393,2395],{"id":2394},"set-animation-loop","Set animation loop",[295,2397,2398,2399,2402],{},"You can set the loop mode of an animation using the ",[305,2400,2401],{},"setLoop"," method. For example, to make the \"Cheer\" animation loop indefinitely:",[328,2404,2406],{"className":330,"code":2405,"language":333,"meta":270,"style":270},"actions.Cheer?.setLoop(THREE.LoopRepeat, Infinity)\nactions.Cheer?.play()\n",[305,2407,2408,2435],{"__ignoreMap":270},[337,2409,2410,2412,2414,2416,2418,2420,2423,2425,2428,2430,2433],{"class":339,"line":271},[337,2411,1927],{"class":350},[337,2413,1162],{"class":346},[337,2415,2385],{"class":350},[337,2417,2259],{"class":346},[337,2419,2401],{"class":398},[337,2421,2422],{"class":350},"(THREE",[337,2424,1162],{"class":346},[337,2426,2427],{"class":350},"LoopRepeat",[337,2429,507],{"class":346},[337,2431,2432],{"class":346}," Infinity",[337,2434,414],{"class":350},[337,2436,2437,2439,2441,2443,2445,2447],{"class":339,"line":272},[337,2438,1927],{"class":350},[337,2440,1162],{"class":346},[337,2442,2385],{"class":350},[337,2444,2259],{"class":346},[337,2446,2346],{"class":398},[337,2448,520],{"class":350},[963,2450,2452],{"id":2451},"smooth-animation-transitions","Smooth Animation Transitions",[295,2454,2455,2456,2459,2460,2463],{},"To create smooth transitions between animations, use the ",[305,2457,2458],{},"fadeIn"," and ",[305,2461,2462],{},"fadeOut"," methods. This prevents abrupt changes and creates more natural character movement:",[328,2465,2467],{"className":437,"code":2466,"filename":1816,"language":440,"meta":270,"style":270},"\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",[305,2468,2469,2489,2511,2534,2538,2570,2600,2626,2646,2650,2679,2683,2719,2744,2761,2765,2770,2787,2807,2811,2815,2820,2832,2848,2858,2873,2878,2893,2899,2904,2910,2927,2948,2953,2958,2974,2994,2999],{"__ignoreMap":270},[337,2470,2471,2473,2475,2477,2479,2481,2483,2485,2487],{"class":339,"line":271},[337,2472,447],{"class":346},[337,2474,451],{"class":450},[337,2476,455],{"class":454},[337,2478,458],{"class":454},[337,2480,461],{"class":346},[337,2482,464],{"class":346},[337,2484,333],{"class":363},[337,2486,464],{"class":346},[337,2488,471],{"class":346},[337,2490,2491,2493,2495,2497,2499,2501,2503,2505,2507,2509],{"class":339,"line":272},[337,2492,343],{"class":342},[337,2494,347],{"class":346},[337,2496,1847],{"class":350},[337,2498,507],{"class":346},[337,2500,2183],{"class":350},[337,2502,354],{"class":346},[337,2504,357],{"class":342},[337,2506,360],{"class":346},[337,2508,315],{"class":363},[337,2510,367],{"class":346},[337,2512,2513,2515,2518,2520,2523,2525,2527,2529,2532],{"class":339,"line":389},[337,2514,343],{"class":342},[337,2516,2517],{"class":342}," type",[337,2519,347],{"class":346},[337,2521,2522],{"class":350}," AnimationAction",[337,2524,354],{"class":346},[337,2526,357],{"class":342},[337,2528,360],{"class":346},[337,2530,2531],{"class":363},"three",[337,2533,367],{"class":346},[337,2535,2536],{"class":339,"line":395},[337,2537,392],{"emptyLinePlaceholder":39},[337,2539,2540,2542,2544,2546,2548,2550,2552,2554,2556,2558,2560,2562,2564,2566,2568],{"class":339,"line":523},[337,2541,499],{"class":454},[337,2543,347],{"class":346},[337,2545,1870],{"class":450},[337,2547,1873],{"class":346},[337,2549,1876],{"class":350},[337,2551,507],{"class":346},[337,2553,1881],{"class":350},[337,2555,411],{"class":346},[337,2557,515],{"class":346},[337,2559,1847],{"class":398},[337,2561,402],{"class":350},[337,2563,1892],{"class":346},[337,2565,1753],{"class":363},[337,2567,1892],{"class":346},[337,2569,414],{"class":350},[337,2571,2572,2574,2576,2578,2580,2582,2584,2586,2588,2590,2592,2594,2596,2598],{"class":339,"line":533},[337,2573,499],{"class":454},[337,2575,2240],{"class":350},[337,2577,461],{"class":346},[337,2579,2044],{"class":398},[337,2581,402],{"class":350},[337,2583,1038],{"class":346},[337,2585,1041],{"class":454},[337,2587,1876],{"class":350},[337,2589,1162],{"class":346},[337,2591,1243],{"class":350},[337,2593,2259],{"class":346},[337,2595,2262],{"class":350},[337,2597,2265],{"class":346},[337,2599,2268],{"class":350},[337,2601,2602,2604,2606,2608,2610,2612,2614,2616,2618,2620,2622,2624],{"class":339,"line":538},[337,2603,499],{"class":454},[337,2605,2039],{"class":350},[337,2607,461],{"class":346},[337,2609,2044],{"class":398},[337,2611,402],{"class":350},[337,2613,1038],{"class":346},[337,2615,1041],{"class":454},[337,2617,2053],{"class":350},[337,2619,1162],{"class":346},[337,2621,1243],{"class":350},[337,2623,1162],{"class":346},[337,2625,2062],{"class":350},[337,2627,2628,2630,2632,2634,2636,2638,2640,2642,2644],{"class":339,"line":548},[337,2629,499],{"class":454},[337,2631,347],{"class":346},[337,2633,2307],{"class":350},[337,2635,411],{"class":346},[337,2637,515],{"class":346},[337,2639,2183],{"class":398},[337,2641,2316],{"class":350},[337,2643,507],{"class":346},[337,2645,2321],{"class":350},[337,2647,2648],{"class":339,"line":557},[337,2649,392],{"emptyLinePlaceholder":39},[337,2651,2652,2655,2658,2660,2662,2664,2667,2669,2671,2673,2675,2677],{"class":339,"line":573},[337,2653,2654],{"class":454},"let",[337,2656,2657],{"class":350}," currentAction ",[337,2659,461],{"class":346},[337,2661,1110],{"class":398},[337,2663,447],{"class":346},[337,2665,2666],{"class":1158},"AnimationAction",[337,2668,1168],{"class":346},[337,2670,1171],{"class":1158},[337,2672,1174],{"class":346},[337,2674,402],{"class":350},[337,2676,1179],{"class":346},[337,2678,414],{"class":350},[337,2680,2681],{"class":339,"line":588},[337,2682,392],{"emptyLinePlaceholder":39},[337,2684,2685,2687,2690,2692,2694,2697,2699,2702,2704,2707,2709,2712,2715,2717],{"class":339,"line":594},[337,2686,499],{"class":454},[337,2688,2689],{"class":350}," transitionToAnimation ",[337,2691,461],{"class":346},[337,2693,1235],{"class":346},[337,2695,2696],{"class":1453},"animationName",[337,2698,1873],{"class":346},[337,2700,2701],{"class":1158}," string",[337,2703,507],{"class":346},[337,2705,2706],{"class":1453}," duration",[337,2708,515],{"class":346},[337,2710,2711],{"class":1275}," 0.5",[337,2713,2714],{"class":346},")",[337,2716,1041],{"class":454},[337,2718,1044],{"class":346},[337,2720,2721,2724,2727,2729,2732,2734,2736,2739,2741],{"class":339,"line":1252},[337,2722,2723],{"class":454},"  const",[337,2725,2726],{"class":350}," nextAction",[337,2728,515],{"class":346},[337,2730,2731],{"class":350}," actions",[337,2733,1162],{"class":346},[337,2735,1243],{"class":350},[337,2737,2738],{"class":450},"[",[337,2740,2696],{"class":350},[337,2742,2743],{"class":450},"]\n",[337,2745,2746,2748,2750,2753,2756,2758],{"class":339,"line":1279},[337,2747,1232],{"class":342},[337,2749,1235],{"class":450},[337,2751,2752],{"class":346},"!",[337,2754,2755],{"class":350},"nextAction",[337,2757,1246],{"class":450},[337,2759,2760],{"class":342},"return\n",[337,2762,2763],{"class":339,"line":1301},[337,2764,392],{"emptyLinePlaceholder":39},[337,2766,2767],{"class":339,"line":1307},[337,2768,2769],{"class":1049},"  // Fade out current animation\n",[337,2771,2772,2774,2776,2779,2781,2783,2785],{"class":339,"line":1314},[337,2773,1232],{"class":342},[337,2775,1235],{"class":450},[337,2777,2778],{"class":350},"currentAction",[337,2780,1162],{"class":346},[337,2782,1243],{"class":350},[337,2784,1246],{"class":450},[337,2786,1249],{"class":346},[337,2788,2789,2792,2794,2796,2798,2800,2802,2805],{"class":339,"line":1323},[337,2790,2791],{"class":350},"    currentAction",[337,2793,1162],{"class":346},[337,2795,1243],{"class":350},[337,2797,1162],{"class":346},[337,2799,2462],{"class":398},[337,2801,402],{"class":450},[337,2803,2804],{"class":350},"duration",[337,2806,414],{"class":450},[337,2808,2809],{"class":339,"line":1328},[337,2810,1304],{"class":346},[337,2812,2813],{"class":339,"line":1337},[337,2814,392],{"emptyLinePlaceholder":39},[337,2816,2817],{"class":339,"line":1369},[337,2818,2819],{"class":1049},"  // Fade in new animation\n",[337,2821,2822,2825,2827,2830],{"class":339,"line":1390},[337,2823,2824],{"class":350},"  nextAction",[337,2826,1162],{"class":346},[337,2828,2829],{"class":398},"reset",[337,2831,520],{"class":450},[337,2833,2834,2836,2838,2841,2843,2846],{"class":339,"line":1400},[337,2835,2824],{"class":350},[337,2837,1162],{"class":346},[337,2839,2840],{"class":398},"setEffectiveWeight",[337,2842,402],{"class":450},[337,2844,2845],{"class":1275},"1",[337,2847,414],{"class":450},[337,2849,2850,2852,2854,2856],{"class":339,"line":1409},[337,2851,2824],{"class":350},[337,2853,1162],{"class":346},[337,2855,2346],{"class":398},[337,2857,520],{"class":450},[337,2859,2861,2863,2865,2867,2869,2871],{"class":339,"line":2860},25,[337,2862,2824],{"class":350},[337,2864,1162],{"class":346},[337,2866,2458],{"class":398},[337,2868,402],{"class":450},[337,2870,2804],{"class":350},[337,2872,414],{"class":450},[337,2874,2876],{"class":339,"line":2875},26,[337,2877,392],{"emptyLinePlaceholder":39},[337,2879,2881,2884,2886,2888,2890],{"class":339,"line":2880},27,[337,2882,2883],{"class":350},"  currentAction",[337,2885,1162],{"class":346},[337,2887,1243],{"class":350},[337,2889,515],{"class":346},[337,2891,2892],{"class":350}," nextAction\n",[337,2894,2896],{"class":339,"line":2895},28,[337,2897,2898],{"class":346},"}\n",[337,2900,2902],{"class":339,"line":2901},29,[337,2903,392],{"emptyLinePlaceholder":39},[337,2905,2907],{"class":339,"line":2906},30,[337,2908,2909],{"class":1049},"// Example: Transition from Idle to Cheer\n",[337,2911,2913,2915,2918,2920,2923,2925],{"class":339,"line":2912},31,[337,2914,499],{"class":454},[337,2916,2917],{"class":350}," playCheerAnimation ",[337,2919,461],{"class":346},[337,2921,2922],{"class":346}," ()",[337,2924,1041],{"class":454},[337,2926,1044],{"class":346},[337,2928,2930,2933,2935,2937,2939,2941,2943,2946],{"class":339,"line":2929},32,[337,2931,2932],{"class":398},"  transitionToAnimation",[337,2934,402],{"class":450},[337,2936,1892],{"class":346},[337,2938,2385],{"class":363},[337,2940,1892],{"class":346},[337,2942,507],{"class":346},[337,2944,2945],{"class":1275}," 0.3",[337,2947,414],{"class":450},[337,2949,2951],{"class":339,"line":2950},33,[337,2952,2898],{"class":346},[337,2954,2956],{"class":339,"line":2955},34,[337,2957,392],{"emptyLinePlaceholder":39},[337,2959,2961,2963,2966,2968,2970,2972],{"class":339,"line":2960},35,[337,2962,499],{"class":454},[337,2964,2965],{"class":350}," playIdleAnimation ",[337,2967,461],{"class":346},[337,2969,2922],{"class":346},[337,2971,1041],{"class":454},[337,2973,1044],{"class":346},[337,2975,2977,2979,2981,2983,2986,2988,2990,2992],{"class":339,"line":2976},36,[337,2978,2932],{"class":398},[337,2980,402],{"class":450},[337,2982,1892],{"class":346},[337,2984,2985],{"class":363},"Idle",[337,2987,1892],{"class":346},[337,2989,507],{"class":346},[337,2991,2945],{"class":1275},[337,2993,414],{"class":450},[337,2995,2997],{"class":339,"line":2996},37,[337,2998,2898],{"class":346},[337,3000,3002,3004,3006],{"class":339,"line":3001},38,[337,3003,526],{"class":346},[337,3005,451],{"class":450},[337,3007,471],{"class":346},[295,3009,3010],{},[976,3011,3012],{},"Key points about animation transitions:",[1714,3014,3015,3021,3027,3033,3039],{},[1717,3016,3017,3020],{},[305,3018,3019],{},"fadeOut(duration)"," gradually reduces the animation's influence over the specified duration",[1717,3022,3023,3026],{},[305,3024,3025],{},"fadeIn(duration)"," gradually increases the animation's influence over the specified duration",[1717,3028,3029,3032],{},[305,3030,3031],{},"reset()"," resets the animation to its starting frame",[1717,3034,3035,3038],{},[305,3036,3037],{},"setEffectiveWeight(1)"," ensures the animation has full influence when active",[1717,3040,3041],{},"Shorter durations (0.1-0.3s) work well for quick actions, longer ones (0.5-1s) for smoother character transitions",[937,3043,3044],{},"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":270,"searchDepth":271,"depth":272,"links":3046},[3047,3048,3049],{"id":1708,"depth":272,"text":1709},{"id":1764,"depth":272,"text":1765},{"id":2126,"depth":272,"text":2127},"Learn how to animate 3D models in TresJS",{"thumbnail":3052},"/recipes/model-n-animations/model-n-animations.png",{"title":207,"description":3050},"LqvFMChcIpF4MeE0JUAHf4ENPQMX0-XKmtaAyXy0AQo",{"id":3056,"title":211,"body":3057,"description":5130,"extension":276,"links":277,"meta":5131,"navigation":39,"path":212,"seo":5133,"stem":213,"__hash__":5134},"docs/5.cookbook/4.advanced-gsap-animations.md",{"type":259,"value":3058,"toc":5123},[3059,3062,3065,4013,4017,4021,4024,4027,4664,4668,4671,4706,4902,4906,4909,5109,5114,5120],[3060,3061],"examples-advanced-gsap-animations",{},[295,3063,3064],{},"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.",[960,3066,3067,3071,3074,3119,3123,3129,3192,3203,3207,3210,3304,3308,3311,3475,3479,3486,3868,3872,3878,4007],{},[963,3068,3070],{"id":3069},"install-gsap","Install GSAP",[295,3072,3073],{},"First, install GSAP as a dependency in your project:",[433,3075,3076,3090,3105],{},[328,3077,3079],{"className":1780,"code":3078,"filename":1789,"language":1782,"meta":270,"style":270},"npm install gsap\n",[305,3080,3081],{"__ignoreMap":270},[337,3082,3083,3085,3087],{"class":339,"line":271},[337,3084,1789],{"class":1158},[337,3086,1792],{"class":363},[337,3088,3089],{"class":363}," gsap\n",[328,3091,3094],{"className":1780,"code":3092,"filename":3093,"language":1782,"meta":270,"style":270},"yarn add gsap\n","yarn",[305,3095,3096],{"__ignoreMap":270},[337,3097,3098,3100,3103],{"class":339,"line":271},[337,3099,3093],{"class":1158},[337,3101,3102],{"class":363}," add",[337,3104,3089],{"class":363},[328,3106,3109],{"className":1780,"code":3107,"filename":3108,"language":1782,"meta":270,"style":270},"pnpm install gsap\n","pnpm",[305,3110,3111],{"__ignoreMap":270},[337,3112,3113,3115,3117],{"class":339,"line":271},[337,3114,3108],{"class":1158},[337,3116,1792],{"class":363},[337,3118,3089],{"class":363},[963,3120,3122],{"id":3121},"import-required-modules","Import required modules",[295,3124,3125,3126,3128],{},"Import GSAP and the necessary Vue composables. Use ",[305,3127,1074],{}," for better performance with Three.js objects:",[328,3130,3132],{"className":330,"code":3131,"language":333,"meta":270,"style":270},"import { shallowRef, watch } from 'vue'\nimport { OrbitControls } from '@tresjs/cientos'\nimport gsap from 'gsap'\n",[305,3133,3134,3158,3176],{"__ignoreMap":270},[337,3135,3136,3138,3140,3143,3145,3148,3150,3152,3154,3156],{"class":339,"line":271},[337,3137,343],{"class":342},[337,3139,347],{"class":346},[337,3141,3142],{"class":350}," shallowRef",[337,3144,507],{"class":346},[337,3146,3147],{"class":350}," watch",[337,3149,354],{"class":346},[337,3151,357],{"class":342},[337,3153,360],{"class":346},[337,3155,440],{"class":363},[337,3157,367],{"class":346},[337,3159,3160,3162,3164,3166,3168,3170,3172,3174],{"class":339,"line":272},[337,3161,343],{"class":342},[337,3163,347],{"class":346},[337,3165,376],{"class":350},[337,3167,354],{"class":346},[337,3169,357],{"class":342},[337,3171,360],{"class":346},[337,3173,315],{"class":363},[337,3175,367],{"class":346},[337,3177,3178,3180,3183,3185,3187,3190],{"class":339,"line":389},[337,3179,343],{"class":342},[337,3181,3182],{"class":350}," gsap ",[337,3184,654],{"class":342},[337,3186,360],{"class":346},[337,3188,3189],{"class":363},"gsap",[337,3191,367],{"class":346},[927,3193,3194],{},[295,3195,1425,3196,3198,3199,3202],{},[305,3197,1074],{}," instead of ",[305,3200,3201],{},"ref"," to avoid unnecessary reactivity on Three.js objects, which improves performance.",[963,3204,3206],{"id":3205},"create-multiple-objects-to-animate","Create multiple objects to animate",[295,3208,3209],{},"Set up an array of positions for multiple boxes that will be animated with stagger effects:",[328,3211,3213],{"className":330,"code":3212,"language":333,"meta":270,"style":270},"const boxesRef = shallowRef()\nconst zs = []\nfor (let z = -4.5; z \u003C= 4.5; z++) {\n  zs.push(z)\n}\n",[305,3214,3215,3228,3240,3283,3300],{"__ignoreMap":270},[337,3216,3217,3219,3222,3224,3226],{"class":339,"line":271},[337,3218,499],{"class":454},[337,3220,3221],{"class":350}," boxesRef ",[337,3223,461],{"class":346},[337,3225,3142],{"class":398},[337,3227,520],{"class":350},[337,3229,3230,3232,3235,3237],{"class":339,"line":272},[337,3231,499],{"class":454},[337,3233,3234],{"class":350}," zs ",[337,3236,461],{"class":346},[337,3238,3239],{"class":350}," []\n",[337,3241,3242,3245,3247,3249,3252,3254,3257,3260,3263,3265,3268,3271,3273,3276,3279,3281],{"class":339,"line":389},[337,3243,3244],{"class":342},"for",[337,3246,1235],{"class":350},[337,3248,2654],{"class":454},[337,3250,3251],{"class":350}," z ",[337,3253,461],{"class":346},[337,3255,3256],{"class":346}," -",[337,3258,3259],{"class":1275},"4.5",[337,3261,3262],{"class":346},";",[337,3264,3251],{"class":350},[337,3266,3267],{"class":346},"\u003C=",[337,3269,3270],{"class":1275}," 4.5",[337,3272,3262],{"class":346},[337,3274,3275],{"class":350}," z",[337,3277,3278],{"class":346},"++",[337,3280,1246],{"class":350},[337,3282,1249],{"class":346},[337,3284,3285,3288,3290,3293,3295,3298],{"class":339,"line":395},[337,3286,3287],{"class":350},"  zs",[337,3289,1162],{"class":346},[337,3291,3292],{"class":398},"push",[337,3294,402],{"class":450},[337,3296,3297],{"class":350},"z",[337,3299,414],{"class":450},[337,3301,3302],{"class":339,"line":523},[337,3303,2898],{"class":346},[963,3305,3307],{"id":3306},"set-up-the-scene-structure","Set up the scene structure",[295,3309,3310],{},"Create a group of meshes that will be animated together:",[328,3312,3314],{"className":437,"code":3313,"language":440,"meta":270,"style":270},"\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",[305,3315,3316,3324,3343,3351,3371,3414,3423,3431,3440,3448,3467],{"__ignoreMap":270},[337,3317,3318,3320,3322],{"class":339,"line":271},[337,3319,447],{"class":346},[337,3321,543],{"class":450},[337,3323,471],{"class":346},[337,3325,3326,3328,3330,3332,3334,3336,3339,3341],{"class":339,"line":272},[337,3327,551],{"class":346},[337,3329,704],{"class":450},[337,3331,1355],{"class":454},[337,3333,461],{"class":346},[337,3335,464],{"class":346},[337,3337,3338],{"class":363},"[-15, 10, 15]",[337,3340,464],{"class":346},[337,3342,719],{"class":346},[337,3344,3345,3347,3349],{"class":339,"line":389},[337,3346,551],{"class":346},[337,3348,199],{"class":450},[337,3350,719],{"class":346},[337,3352,3353,3355,3358,3360,3362,3364,3367,3369],{"class":339,"line":395},[337,3354,551],{"class":346},[337,3356,3357],{"class":450},"TresGroup",[337,3359,1110],{"class":454},[337,3361,461],{"class":346},[337,3363,464],{"class":346},[337,3365,3366],{"class":363},"boxesRef",[337,3368,464],{"class":346},[337,3370,471],{"class":346},[337,3372,3373,3375,3377,3380,3382,3384,3387,3389,3392,3394,3396,3399,3401,3403,3405,3407,3410,3412],{"class":339,"line":523},[337,3374,701],{"class":346},[337,3376,1342],{"class":450},[337,3378,3379],{"class":454}," v-for",[337,3381,461],{"class":346},[337,3383,464],{"class":346},[337,3385,3386],{"class":363},"(z, i) of zs",[337,3388,464],{"class":346},[337,3390,3391],{"class":454}," :key",[337,3393,461],{"class":346},[337,3395,464],{"class":346},[337,3397,3398],{"class":363},"i",[337,3400,464],{"class":346},[337,3402,1355],{"class":454},[337,3404,461],{"class":346},[337,3406,464],{"class":346},[337,3408,3409],{"class":363},"[0, 0.5, z]",[337,3411,464],{"class":346},[337,3413,471],{"class":346},[337,3415,3416,3419,3421],{"class":339,"line":533},[337,3417,3418],{"class":346},"      \u003C",[337,3420,1374],{"class":450},[337,3422,719],{"class":346},[337,3424,3425,3427,3429],{"class":339,"line":538},[337,3426,3418],{"class":346},[337,3428,1395],{"class":450},[337,3430,719],{"class":346},[337,3432,3433,3436,3438],{"class":339,"line":548},[337,3434,3435],{"class":346},"    \u003C/",[337,3437,1342],{"class":450},[337,3439,471],{"class":346},[337,3441,3442,3444,3446],{"class":339,"line":557},[337,3443,752],{"class":346},[337,3445,3357],{"class":450},[337,3447,471],{"class":346},[337,3449,3450,3452,3454,3456,3458,3460,3463,3465],{"class":339,"line":573},[337,3451,551],{"class":346},[337,3453,734],{"class":450},[337,3455,707],{"class":454},[337,3457,461],{"class":346},[337,3459,464],{"class":346},[337,3461,3462],{"class":363},"[10, 10, 0x444444, 'teal']",[337,3464,464],{"class":346},[337,3466,719],{"class":346},[337,3468,3469,3471,3473],{"class":339,"line":588},[337,3470,526],{"class":346},[337,3472,543],{"class":450},[337,3474,471],{"class":346},[963,3476,3478],{"id":3477},"create-the-gsap-staggered-animation","Create the GSAP staggered animation",[295,3480,3481,3482,3485],{},"Use Vue's ",[305,3483,3484],{},"watch"," to set up the animation when the template ref is available:",[328,3487,3489],{"className":330,"code":3488,"language":333,"meta":270,"style":270},"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",[305,3490,3491,3506,3524,3528,3533,3572,3592,3597,3632,3649,3653,3657,3668,3685,3697,3706,3718,3731,3744,3749,3753,3757,3762,3781,3793,3803,3810,3814,3819,3836,3848,3856,3862],{"__ignoreMap":270},[337,3492,3493,3495,3498,3500,3502,3504],{"class":339,"line":271},[337,3494,3484],{"class":398},[337,3496,3497],{"class":350},"(boxesRef",[337,3499,507],{"class":346},[337,3501,2922],{"class":346},[337,3503,1041],{"class":454},[337,3505,1044],{"class":346},[337,3507,3508,3510,3512,3514,3516,3518,3520,3522],{"class":339,"line":272},[337,3509,1232],{"class":342},[337,3511,1235],{"class":450},[337,3513,2752],{"class":346},[337,3515,3366],{"class":350},[337,3517,1162],{"class":346},[337,3519,1243],{"class":350},[337,3521,1246],{"class":450},[337,3523,2760],{"class":342},[337,3525,3526],{"class":339,"line":389},[337,3527,392],{"emptyLinePlaceholder":39},[337,3529,3530],{"class":339,"line":395},[337,3531,3532],{"class":1049},"  // Get positions and rotations for all boxes\n",[337,3534,3535,3537,3540,3542,3545,3547,3549,3551,3553,3555,3557,3559,3562,3564,3566,3569],{"class":339,"line":523},[337,3536,2723],{"class":454},[337,3538,3539],{"class":350}," positions",[337,3541,515],{"class":346},[337,3543,3544],{"class":350}," Array",[337,3546,1162],{"class":346},[337,3548,654],{"class":398},[337,3550,402],{"class":450},[337,3552,3366],{"class":350},[337,3554,1162],{"class":346},[337,3556,1243],{"class":350},[337,3558,1162],{"class":346},[337,3560,3561],{"class":350},"children",[337,3563,2714],{"class":450},[337,3565,1162],{"class":346},[337,3567,3568],{"class":398},"map",[337,3570,3571],{"class":450},"(\n",[337,3573,3574,3577,3580,3582,3584,3587,3589],{"class":339,"line":533},[337,3575,3576],{"class":346},"    (",[337,3578,3579],{"class":1453},"child",[337,3581,2714],{"class":346},[337,3583,1041],{"class":454},[337,3585,3586],{"class":350}," child",[337,3588,1162],{"class":346},[337,3590,3591],{"class":350},"position\n",[337,3593,3594],{"class":339,"line":538},[337,3595,3596],{"class":450},"  )\n",[337,3598,3599,3601,3604,3606,3608,3610,3612,3614,3616,3618,3620,3622,3624,3626,3628,3630],{"class":339,"line":548},[337,3600,2723],{"class":454},[337,3602,3603],{"class":350}," rotations",[337,3605,515],{"class":346},[337,3607,3544],{"class":350},[337,3609,1162],{"class":346},[337,3611,654],{"class":398},[337,3613,402],{"class":450},[337,3615,3366],{"class":350},[337,3617,1162],{"class":346},[337,3619,1243],{"class":350},[337,3621,1162],{"class":346},[337,3623,3561],{"class":350},[337,3625,2714],{"class":450},[337,3627,1162],{"class":346},[337,3629,3568],{"class":398},[337,3631,3571],{"class":450},[337,3633,3634,3636,3638,3640,3642,3644,3646],{"class":339,"line":557},[337,3635,3576],{"class":346},[337,3637,3579],{"class":1453},[337,3639,2714],{"class":346},[337,3641,1041],{"class":454},[337,3643,3586],{"class":350},[337,3645,1162],{"class":346},[337,3647,3648],{"class":350},"rotation\n",[337,3650,3651],{"class":339,"line":573},[337,3652,3596],{"class":450},[337,3654,3655],{"class":339,"line":588},[337,3656,392],{"emptyLinePlaceholder":39},[337,3658,3659,3661,3664,3666],{"class":339,"line":594},[337,3660,2723],{"class":454},[337,3662,3663],{"class":350}," animProperties",[337,3665,515],{"class":346},[337,3667,1044],{"class":346},[337,3669,3670,3673,3675,3677,3680,3682],{"class":339,"line":1252},[337,3671,3672],{"class":450},"    ease",[337,3674,1873],{"class":346},[337,3676,360],{"class":346},[337,3678,3679],{"class":363},"power1.inOut",[337,3681,1892],{"class":346},[337,3683,3684],{"class":346},",\n",[337,3686,3687,3690,3692,3695],{"class":339,"line":1279},[337,3688,3689],{"class":450},"    duration",[337,3691,1873],{"class":346},[337,3693,3694],{"class":1275}," 1",[337,3696,3684],{"class":346},[337,3698,3699,3702,3704],{"class":339,"line":1301},[337,3700,3701],{"class":450},"    stagger",[337,3703,1873],{"class":346},[337,3705,1044],{"class":346},[337,3707,3708,3711,3713,3716],{"class":339,"line":1307},[337,3709,3710],{"class":450},"      each",[337,3712,1873],{"class":346},[337,3714,3715],{"class":1275}," 0.25",[337,3717,3684],{"class":346},[337,3719,3720,3723,3725,3727,3729],{"class":339,"line":1314},[337,3721,3722],{"class":450},"      repeat",[337,3724,1873],{"class":346},[337,3726,3256],{"class":346},[337,3728,2845],{"class":1275},[337,3730,3684],{"class":346},[337,3732,3733,3736,3738,3742],{"class":339,"line":1323},[337,3734,3735],{"class":450},"      yoyo",[337,3737,1873],{"class":346},[337,3739,3741],{"class":3740},"sfNiH"," true",[337,3743,3684],{"class":346},[337,3745,3746],{"class":339,"line":1328},[337,3747,3748],{"class":346},"    },\n",[337,3750,3751],{"class":339,"line":1337},[337,3752,1304],{"class":346},[337,3754,3755],{"class":339,"line":1369},[337,3756,392],{"emptyLinePlaceholder":39},[337,3758,3759],{"class":339,"line":1390},[337,3760,3761],{"class":1049},"  // Animate positions\n",[337,3763,3764,3767,3769,3772,3774,3777,3779],{"class":339,"line":1400},[337,3765,3766],{"class":350},"  gsap",[337,3768,1162],{"class":346},[337,3770,3771],{"class":398},"to",[337,3773,402],{"class":450},[337,3775,3776],{"class":350},"positions",[337,3778,507],{"class":346},[337,3780,1044],{"class":346},[337,3782,3783,3786,3788,3791],{"class":339,"line":1409},[337,3784,3785],{"class":450},"    y",[337,3787,1873],{"class":346},[337,3789,3790],{"class":1275}," 2.5",[337,3792,3684],{"class":346},[337,3794,3795,3798,3801],{"class":339,"line":2860},[337,3796,3797],{"class":346},"    ...",[337,3799,3800],{"class":350},"animProperties",[337,3802,3684],{"class":346},[337,3804,3805,3808],{"class":339,"line":2875},[337,3806,3807],{"class":346},"  }",[337,3809,414],{"class":450},[337,3811,3812],{"class":339,"line":2880},[337,3813,392],{"emptyLinePlaceholder":39},[337,3815,3816],{"class":339,"line":2895},[337,3817,3818],{"class":1049},"  // Animate rotations\n",[337,3820,3821,3823,3825,3827,3829,3832,3834],{"class":339,"line":2901},[337,3822,3766],{"class":350},[337,3824,1162],{"class":346},[337,3826,3771],{"class":398},[337,3828,402],{"class":450},[337,3830,3831],{"class":350},"rotations",[337,3833,507],{"class":346},[337,3835,1044],{"class":346},[337,3837,3838,3841,3843,3846],{"class":339,"line":2906},[337,3839,3840],{"class":450},"    x",[337,3842,1873],{"class":346},[337,3844,3845],{"class":1275}," 2",[337,3847,3684],{"class":346},[337,3849,3850,3852,3854],{"class":339,"line":2912},[337,3851,3797],{"class":346},[337,3853,3800],{"class":350},[337,3855,3684],{"class":346},[337,3857,3858,3860],{"class":339,"line":2929},[337,3859,3807],{"class":346},[337,3861,414],{"class":450},[337,3863,3864,3866],{"class":339,"line":2950},[337,3865,411],{"class":346},[337,3867,414],{"class":350},[963,3869,3871],{"id":3870},"understanding-gsap-stagger-options","Understanding GSAP Stagger Options",[295,3873,778,3874,3877],{},[305,3875,3876],{},"stagger"," property provides powerful control over timing:",[328,3879,3881],{"className":330,"code":3880,"language":333,"meta":270,"style":270},"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",[305,3882,3883,3894,3912,3926,3935,3949,3965,3979,3998,4003],{"__ignoreMap":270},[337,3884,3885,3887,3890,3892],{"class":339,"line":271},[337,3886,499],{"class":454},[337,3888,3889],{"class":350}," animProperties ",[337,3891,461],{"class":346},[337,3893,1044],{"class":346},[337,3895,3896,3899,3901,3903,3905,3907,3909],{"class":339,"line":272},[337,3897,3898],{"class":450},"  ease",[337,3900,1873],{"class":346},[337,3902,360],{"class":346},[337,3904,3679],{"class":363},[337,3906,1892],{"class":346},[337,3908,507],{"class":346},[337,3910,3911],{"class":1049},"     // Easing function\n",[337,3913,3914,3917,3919,3921,3923],{"class":339,"line":389},[337,3915,3916],{"class":450},"  duration",[337,3918,1873],{"class":346},[337,3920,3694],{"class":1275},[337,3922,507],{"class":346},[337,3924,3925],{"class":1049},"              // Animation duration in seconds\n",[337,3927,3928,3931,3933],{"class":339,"line":395},[337,3929,3930],{"class":450},"  stagger",[337,3932,1873],{"class":346},[337,3934,1044],{"class":346},[337,3936,3937,3940,3942,3944,3946],{"class":339,"line":523},[337,3938,3939],{"class":450},"    each",[337,3941,1873],{"class":346},[337,3943,3715],{"class":1275},[337,3945,507],{"class":346},[337,3947,3948],{"class":1049},"            // Delay between each object (0.25s)\n",[337,3950,3951,3954,3956,3958,3960,3962],{"class":339,"line":533},[337,3952,3953],{"class":450},"    repeat",[337,3955,1873],{"class":346},[337,3957,3256],{"class":346},[337,3959,2845],{"class":1275},[337,3961,507],{"class":346},[337,3963,3964],{"class":1049},"            // Infinite repeat (-1)\n",[337,3966,3967,3970,3972,3974,3976],{"class":339,"line":538},[337,3968,3969],{"class":450},"    yoyo",[337,3971,1873],{"class":346},[337,3973,3741],{"class":3740},[337,3975,507],{"class":346},[337,3977,3978],{"class":1049},"            // Reverse on alternate cycles\n",[337,3980,3981,3984,3986,3988,3991,3993,3995],{"class":339,"line":548},[337,3982,3983],{"class":450},"    from",[337,3985,1873],{"class":346},[337,3987,360],{"class":346},[337,3989,3990],{"class":363},"start",[337,3992,1892],{"class":346},[337,3994,507],{"class":346},[337,3996,3997],{"class":1049},"         // Animation direction (start, center, end)\n",[337,3999,4000],{"class":339,"line":557},[337,4001,4002],{"class":346},"  },\n",[337,4004,4005],{"class":339,"line":573},[337,4006,2898],{"class":346},[766,4008,4010],{"to":4009},"https://gsap.com/docs/v3/Staggers/",[295,4011,4012],{},"Learn more about GSAP stagger options and configurations.",[262,4014,4016],{"id":4015},"advanced-techniques","Advanced Techniques",[963,4018,4020],{"id":4019},"timeline-control","Timeline Control",[4022,4023],"examples-advanced-gsap-timeline",{},[295,4025,4026],{},"For more complex sequences, use GSAP timelines to coordinate multiple animations:",[328,4028,4031],{"className":437,"code":4029,"filename":4030,"language":440,"meta":270,"style":270},"\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",[305,4032,4033,4053,4080,4094,4098,4111,4143,4147,4162,4181,4185,4214,4218,4223,4235,4239,4244,4249,4282,4294,4305,4321,4331,4338,4370,4390,4400,4415,4423,4440,4473,4485,4495,4506,4516,4531,4540,4546,4552,4557,4563,4586,4609,4632,4655],{"__ignoreMap":270},[337,4034,4035,4037,4039,4041,4043,4045,4047,4049,4051],{"class":339,"line":271},[337,4036,447],{"class":346},[337,4038,451],{"class":450},[337,4040,455],{"class":454},[337,4042,458],{"class":454},[337,4044,461],{"class":346},[337,4046,464],{"class":346},[337,4048,333],{"class":363},[337,4050,464],{"class":346},[337,4052,471],{"class":346},[337,4054,4055,4057,4059,4061,4063,4065,4067,4070,4072,4074,4076,4078],{"class":339,"line":272},[337,4056,343],{"class":342},[337,4058,347],{"class":346},[337,4060,3142],{"class":350},[337,4062,507],{"class":346},[337,4064,3147],{"class":350},[337,4066,507],{"class":346},[337,4068,4069],{"class":350}," onMounted",[337,4071,354],{"class":346},[337,4073,357],{"class":342},[337,4075,360],{"class":346},[337,4077,440],{"class":363},[337,4079,367],{"class":346},[337,4081,4082,4084,4086,4088,4090,4092],{"class":339,"line":389},[337,4083,343],{"class":342},[337,4085,3182],{"class":350},[337,4087,654],{"class":342},[337,4089,360],{"class":346},[337,4091,3189],{"class":363},[337,4093,367],{"class":346},[337,4095,4096],{"class":339,"line":395},[337,4097,392],{"emptyLinePlaceholder":39},[337,4099,4100,4102,4105,4107,4109],{"class":339,"line":523},[337,4101,499],{"class":454},[337,4103,4104],{"class":350}," groupRef ",[337,4106,461],{"class":346},[337,4108,3142],{"class":398},[337,4110,520],{"class":350},[337,4112,4113,4115,4118,4120,4123,4125,4128,4130,4132,4135,4137,4139,4141],{"class":339,"line":533},[337,4114,499],{"class":454},[337,4116,4117],{"class":350}," timeline ",[337,4119,461],{"class":346},[337,4121,4122],{"class":350}," gsap",[337,4124,1162],{"class":346},[337,4126,4127],{"class":398},"timeline",[337,4129,402],{"class":350},[337,4131,405],{"class":346},[337,4133,4134],{"class":450}," paused",[337,4136,1873],{"class":346},[337,4138,3741],{"class":3740},[337,4140,354],{"class":346},[337,4142,414],{"class":350},[337,4144,4145],{"class":339,"line":538},[337,4146,392],{"emptyLinePlaceholder":39},[337,4148,4149,4151,4154,4156,4158,4160],{"class":339,"line":548},[337,4150,3484],{"class":398},[337,4152,4153],{"class":350},"(groupRef",[337,4155,507],{"class":346},[337,4157,2922],{"class":346},[337,4159,1041],{"class":454},[337,4161,1044],{"class":346},[337,4163,4164,4166,4168,4170,4173,4175,4177,4179],{"class":339,"line":557},[337,4165,1232],{"class":342},[337,4167,1235],{"class":450},[337,4169,2752],{"class":346},[337,4171,4172],{"class":350},"groupRef",[337,4174,1162],{"class":346},[337,4176,1243],{"class":350},[337,4178,1246],{"class":450},[337,4180,2760],{"class":342},[337,4182,4183],{"class":339,"line":573},[337,4184,392],{"emptyLinePlaceholder":39},[337,4186,4187,4189,4192,4194,4196,4198,4200,4202,4204,4206,4208,4210,4212],{"class":339,"line":588},[337,4188,2723],{"class":454},[337,4190,4191],{"class":350}," children",[337,4193,515],{"class":346},[337,4195,3544],{"class":350},[337,4197,1162],{"class":346},[337,4199,654],{"class":398},[337,4201,402],{"class":450},[337,4203,4172],{"class":350},[337,4205,1162],{"class":346},[337,4207,1243],{"class":350},[337,4209,1162],{"class":346},[337,4211,3561],{"class":350},[337,4213,414],{"class":450},[337,4215,4216],{"class":339,"line":594},[337,4217,392],{"emptyLinePlaceholder":39},[337,4219,4220],{"class":339,"line":1252},[337,4221,4222],{"class":1049},"  // Clear existing timeline\n",[337,4224,4225,4228,4230,4233],{"class":339,"line":1279},[337,4226,4227],{"class":350},"  timeline",[337,4229,1162],{"class":346},[337,4231,4232],{"class":398},"clear",[337,4234,520],{"class":450},[337,4236,4237],{"class":339,"line":1301},[337,4238,392],{"emptyLinePlaceholder":39},[337,4240,4241],{"class":339,"line":1307},[337,4242,4243],{"class":1049},"  // Add multiple animations to timeline\n",[337,4245,4246],{"class":339,"line":1314},[337,4247,4248],{"class":350},"  timeline\n",[337,4250,4251,4254,4256,4258,4260,4262,4264,4266,4268,4270,4272,4274,4276,4278,4280],{"class":339,"line":1323},[337,4252,4253],{"class":346},"    .",[337,4255,3771],{"class":398},[337,4257,402],{"class":450},[337,4259,3561],{"class":350},[337,4261,1162],{"class":346},[337,4263,3568],{"class":398},[337,4265,402],{"class":450},[337,4267,3579],{"class":1453},[337,4269,1041],{"class":454},[337,4271,3586],{"class":350},[337,4273,1162],{"class":346},[337,4275,1647],{"class":350},[337,4277,2714],{"class":450},[337,4279,507],{"class":346},[337,4281,1044],{"class":346},[337,4283,4284,4287,4289,4292],{"class":339,"line":1328},[337,4285,4286],{"class":450},"      y",[337,4288,1873],{"class":346},[337,4290,4291],{"class":1275}," 3",[337,4293,3684],{"class":346},[337,4295,4296,4299,4301,4303],{"class":339,"line":1337},[337,4297,4298],{"class":450},"      duration",[337,4300,1873],{"class":346},[337,4302,3694],{"class":1275},[337,4304,3684],{"class":346},[337,4306,4307,4310,4312,4314,4317,4319],{"class":339,"line":1369},[337,4308,4309],{"class":450},"      ease",[337,4311,1873],{"class":346},[337,4313,360],{"class":346},[337,4315,4316],{"class":363},"back.out(1.7)",[337,4318,1892],{"class":346},[337,4320,3684],{"class":346},[337,4322,4323,4326,4328],{"class":339,"line":1390},[337,4324,4325],{"class":450},"      stagger",[337,4327,1873],{"class":346},[337,4329,4330],{"class":1275}," 0.1\n",[337,4332,4333,4336],{"class":339,"line":1400},[337,4334,4335],{"class":346},"    }",[337,4337,414],{"class":450},[337,4339,4340,4342,4344,4346,4348,4350,4352,4354,4356,4358,4360,4362,4364,4366,4368],{"class":339,"line":1409},[337,4341,4253],{"class":346},[337,4343,3771],{"class":398},[337,4345,402],{"class":450},[337,4347,3561],{"class":350},[337,4349,1162],{"class":346},[337,4351,3568],{"class":398},[337,4353,402],{"class":450},[337,4355,3579],{"class":1453},[337,4357,1041],{"class":454},[337,4359,3586],{"class":350},[337,4361,1162],{"class":346},[337,4363,1264],{"class":350},[337,4365,2714],{"class":450},[337,4367,507],{"class":346},[337,4369,1044],{"class":346},[337,4371,4372,4374,4376,4378,4380,4383,4386,4388],{"class":339,"line":2860},[337,4373,4286],{"class":450},[337,4375,1873],{"class":346},[337,4377,1656],{"class":350},[337,4379,1162],{"class":346},[337,4381,4382],{"class":350},"PI",[337,4384,4385],{"class":346}," *",[337,4387,3845],{"class":1275},[337,4389,3684],{"class":346},[337,4391,4392,4394,4396,4398],{"class":339,"line":2875},[337,4393,4298],{"class":450},[337,4395,1873],{"class":346},[337,4397,3845],{"class":1275},[337,4399,3684],{"class":346},[337,4401,4402,4404,4406,4408,4411,4413],{"class":339,"line":2880},[337,4403,4309],{"class":450},[337,4405,1873],{"class":346},[337,4407,360],{"class":346},[337,4409,4410],{"class":363},"power2.inOut",[337,4412,1892],{"class":346},[337,4414,3684],{"class":346},[337,4416,4417,4419,4421],{"class":339,"line":2895},[337,4418,4325],{"class":450},[337,4420,1873],{"class":346},[337,4422,4330],{"class":1275},[337,4424,4425,4428,4430,4433,4435,4437],{"class":339,"line":2901},[337,4426,4427],{"class":346},"    },",[337,4429,360],{"class":346},[337,4431,4432],{"class":363},"-=0.5",[337,4434,1892],{"class":346},[337,4436,1246],{"class":450},[337,4438,4439],{"class":1049},"// Start 0.5s before previous animation ends\n",[337,4441,4442,4444,4446,4448,4450,4452,4454,4456,4458,4460,4462,4464,4467,4469,4471],{"class":339,"line":2906},[337,4443,4253],{"class":346},[337,4445,3771],{"class":398},[337,4447,402],{"class":450},[337,4449,3561],{"class":350},[337,4451,1162],{"class":346},[337,4453,3568],{"class":398},[337,4455,402],{"class":450},[337,4457,3579],{"class":1453},[337,4459,1041],{"class":454},[337,4461,3586],{"class":350},[337,4463,1162],{"class":346},[337,4465,4466],{"class":350},"scale",[337,4468,2714],{"class":450},[337,4470,507],{"class":346},[337,4472,1044],{"class":346},[337,4474,4475,4478,4480,4483],{"class":339,"line":2912},[337,4476,4477],{"class":450},"      x",[337,4479,1873],{"class":346},[337,4481,4482],{"class":1275}," 1.5",[337,4484,3684],{"class":346},[337,4486,4487,4489,4491,4493],{"class":339,"line":2929},[337,4488,4286],{"class":450},[337,4490,1873],{"class":346},[337,4492,4482],{"class":1275},[337,4494,3684],{"class":346},[337,4496,4497,4500,4502,4504],{"class":339,"line":2950},[337,4498,4499],{"class":450},"      z",[337,4501,1873],{"class":346},[337,4503,4482],{"class":1275},[337,4505,3684],{"class":346},[337,4507,4508,4510,4512,4514],{"class":339,"line":2955},[337,4509,4298],{"class":450},[337,4511,1873],{"class":346},[337,4513,2711],{"class":1275},[337,4515,3684],{"class":346},[337,4517,4518,4520,4522,4524,4527,4529],{"class":339,"line":2960},[337,4519,4309],{"class":450},[337,4521,1873],{"class":346},[337,4523,360],{"class":346},[337,4525,4526],{"class":363},"elastic.out(1, 0.3)",[337,4528,1892],{"class":346},[337,4530,3684],{"class":346},[337,4532,4533,4535,4537],{"class":339,"line":2976},[337,4534,4325],{"class":450},[337,4536,1873],{"class":346},[337,4538,4539],{"class":1275}," 0.05\n",[337,4541,4542,4544],{"class":339,"line":2996},[337,4543,4335],{"class":346},[337,4545,414],{"class":450},[337,4547,4548,4550],{"class":339,"line":3001},[337,4549,411],{"class":346},[337,4551,414],{"class":350},[337,4553,4555],{"class":339,"line":4554},39,[337,4556,392],{"emptyLinePlaceholder":39},[337,4558,4560],{"class":339,"line":4559},40,[337,4561,4562],{"class":1049},"// Control functions\n",[337,4564,4566,4568,4571,4573,4575,4577,4580,4582,4584],{"class":339,"line":4565},41,[337,4567,499],{"class":454},[337,4569,4570],{"class":350}," playAnimation ",[337,4572,461],{"class":346},[337,4574,2922],{"class":346},[337,4576,1041],{"class":454},[337,4578,4579],{"class":350}," timeline",[337,4581,1162],{"class":346},[337,4583,2346],{"class":398},[337,4585,520],{"class":350},[337,4587,4589,4591,4594,4596,4598,4600,4602,4604,4607],{"class":339,"line":4588},42,[337,4590,499],{"class":454},[337,4592,4593],{"class":350}," pauseAnimation ",[337,4595,461],{"class":346},[337,4597,2922],{"class":346},[337,4599,1041],{"class":454},[337,4601,4579],{"class":350},[337,4603,1162],{"class":346},[337,4605,4606],{"class":398},"pause",[337,4608,520],{"class":350},[337,4610,4612,4614,4617,4619,4621,4623,4625,4627,4630],{"class":339,"line":4611},43,[337,4613,499],{"class":454},[337,4615,4616],{"class":350}," reverseAnimation ",[337,4618,461],{"class":346},[337,4620,2922],{"class":346},[337,4622,1041],{"class":454},[337,4624,4579],{"class":350},[337,4626,1162],{"class":346},[337,4628,4629],{"class":398},"reverse",[337,4631,520],{"class":350},[337,4633,4635,4637,4640,4642,4644,4646,4648,4650,4653],{"class":339,"line":4634},44,[337,4636,499],{"class":454},[337,4638,4639],{"class":350}," restartAnimation ",[337,4641,461],{"class":346},[337,4643,2922],{"class":346},[337,4645,1041],{"class":454},[337,4647,4579],{"class":350},[337,4649,1162],{"class":346},[337,4651,4652],{"class":398},"restart",[337,4654,520],{"class":350},[337,4656,4658,4660,4662],{"class":339,"line":4657},45,[337,4659,526],{"class":346},[337,4661,451],{"class":450},[337,4663,471],{"class":346},[963,4665,4667],{"id":4666},"performance-optimization","Performance Optimization",[295,4669,4670],{},"When animating many objects, optimize performance by:",[4672,4673,4674,4681,4687,4697],"ol",{},[1717,4675,4676,4680],{},[976,4677,1425,4678],{},[305,4679,1074],{}," for Three.js object references",[1717,4682,4683,4686],{},[976,4684,4685],{},"Batch property access"," to avoid repeated DOM queries",[1717,4688,4689,4696],{},[976,4690,4691,4692,4695],{},"Use GSAP's ",[305,4693,4694],{},"set()"," method"," for immediate property changes",[1717,4698,4699,4702,4703],{},[976,4700,4701],{},"Leverage hardware acceleration"," with ",[305,4704,4705],{},"force3D: true",[328,4707,4709],{"className":330,"code":4708,"language":333,"meta":270,"style":270},"// 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",[305,4710,4711,4716,4731,4736,4765,4795,4823,4827,4832,4848,4858,4868,4879,4892,4898],{"__ignoreMap":270},[337,4712,4713],{"class":339,"line":271},[337,4714,4715],{"class":1049},"// Optimized animation setup\n",[337,4717,4718,4720,4723,4725,4727,4729],{"class":339,"line":272},[337,4719,499],{"class":454},[337,4721,4722],{"class":350}," optimizedAnimation ",[337,4724,461],{"class":346},[337,4726,2922],{"class":346},[337,4728,1041],{"class":454},[337,4730,1044],{"class":346},[337,4732,4733],{"class":339,"line":389},[337,4734,4735],{"class":1049},"  // Get all properties at once\n",[337,4737,4738,4740,4743,4745,4747,4749,4751,4753,4755,4757,4759,4761,4763],{"class":339,"line":395},[337,4739,2723],{"class":454},[337,4741,4742],{"class":350}," meshes",[337,4744,515],{"class":346},[337,4746,3544],{"class":350},[337,4748,1162],{"class":346},[337,4750,654],{"class":398},[337,4752,402],{"class":450},[337,4754,3366],{"class":350},[337,4756,1162],{"class":346},[337,4758,1243],{"class":350},[337,4760,1162],{"class":346},[337,4762,3561],{"class":350},[337,4764,414],{"class":450},[337,4766,4767,4769,4771,4773,4775,4777,4779,4781,4784,4786,4789,4791,4793],{"class":339,"line":523},[337,4768,2723],{"class":454},[337,4770,3539],{"class":350},[337,4772,515],{"class":346},[337,4774,4742],{"class":350},[337,4776,1162],{"class":346},[337,4778,3568],{"class":398},[337,4780,402],{"class":450},[337,4782,4783],{"class":1453},"mesh",[337,4785,1041],{"class":454},[337,4787,4788],{"class":350}," mesh",[337,4790,1162],{"class":346},[337,4792,1647],{"class":350},[337,4794,414],{"class":450},[337,4796,4797,4799,4801,4803,4805,4807,4809,4811,4813,4815,4817,4819,4821],{"class":339,"line":533},[337,4798,2723],{"class":454},[337,4800,3603],{"class":350},[337,4802,515],{"class":346},[337,4804,4742],{"class":350},[337,4806,1162],{"class":346},[337,4808,3568],{"class":398},[337,4810,402],{"class":450},[337,4812,4783],{"class":1453},[337,4814,1041],{"class":454},[337,4816,4788],{"class":350},[337,4818,1162],{"class":346},[337,4820,1264],{"class":350},[337,4822,414],{"class":450},[337,4824,4825],{"class":339,"line":538},[337,4826,392],{"emptyLinePlaceholder":39},[337,4828,4829],{"class":339,"line":548},[337,4830,4831],{"class":1049},"  // Use force3D for hardware acceleration\n",[337,4833,4834,4836,4838,4840,4842,4844,4846],{"class":339,"line":557},[337,4835,3766],{"class":350},[337,4837,1162],{"class":346},[337,4839,3771],{"class":398},[337,4841,402],{"class":450},[337,4843,3776],{"class":350},[337,4845,507],{"class":346},[337,4847,1044],{"class":346},[337,4849,4850,4852,4854,4856],{"class":339,"line":573},[337,4851,3785],{"class":450},[337,4853,1873],{"class":346},[337,4855,3845],{"class":1275},[337,4857,3684],{"class":346},[337,4859,4860,4862,4864,4866],{"class":339,"line":588},[337,4861,3689],{"class":450},[337,4863,1873],{"class":346},[337,4865,3694],{"class":1275},[337,4867,3684],{"class":346},[337,4869,4870,4873,4875,4877],{"class":339,"line":594},[337,4871,4872],{"class":450},"    force3D",[337,4874,1873],{"class":346},[337,4876,3741],{"class":3740},[337,4878,3684],{"class":346},[337,4880,4881,4883,4885,4887,4890],{"class":339,"line":1252},[337,4882,3672],{"class":450},[337,4884,1873],{"class":346},[337,4886,360],{"class":346},[337,4888,4889],{"class":363},"power2.out",[337,4891,367],{"class":346},[337,4893,4894,4896],{"class":339,"line":1279},[337,4895,3807],{"class":346},[337,4897,414],{"class":450},[337,4899,4900],{"class":339,"line":1301},[337,4901,2898],{"class":346},[963,4903,4905],{"id":4904},"animation-events","Animation Events",[295,4907,4908],{},"GSAP provides powerful callback events to sync with your application state:",[328,4910,4912],{"className":330,"code":4911,"language":333,"meta":270,"style":270},"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",[305,4913,4914,4929,4940,4950,4961,4993,5023,5037,5042,5071,5075,5103],{"__ignoreMap":270},[337,4915,4916,4918,4920,4922,4925,4927],{"class":339,"line":271},[337,4917,3189],{"class":350},[337,4919,1162],{"class":346},[337,4921,3771],{"class":398},[337,4923,4924],{"class":350},"(positions",[337,4926,507],{"class":346},[337,4928,1044],{"class":346},[337,4930,4931,4934,4936,4938],{"class":339,"line":272},[337,4932,4933],{"class":450},"  y",[337,4935,1873],{"class":346},[337,4937,3845],{"class":1275},[337,4939,3684],{"class":346},[337,4941,4942,4944,4946,4948],{"class":339,"line":389},[337,4943,3916],{"class":450},[337,4945,1873],{"class":346},[337,4947,3694],{"class":1275},[337,4949,3684],{"class":346},[337,4951,4952,4954,4956,4959],{"class":339,"line":395},[337,4953,3930],{"class":450},[337,4955,1873],{"class":346},[337,4957,4958],{"class":1275}," 0.1",[337,4960,3684],{"class":346},[337,4962,4963,4966,4968,4970,4972,4975,4977,4980,4982,4984,4987,4989,4991],{"class":339,"line":523},[337,4964,4965],{"class":398},"  onStart",[337,4967,1873],{"class":346},[337,4969,2922],{"class":346},[337,4971,1041],{"class":454},[337,4973,4974],{"class":350}," console",[337,4976,1162],{"class":346},[337,4978,4979],{"class":398},"log",[337,4981,402],{"class":350},[337,4983,1892],{"class":346},[337,4985,4986],{"class":363},"Animation started",[337,4988,1892],{"class":346},[337,4990,2714],{"class":350},[337,4992,3684],{"class":346},[337,4994,4995,4998,5000,5002,5004,5006,5008,5010,5012,5014,5017,5019,5021],{"class":339,"line":533},[337,4996,4997],{"class":398},"  onComplete",[337,4999,1873],{"class":346},[337,5001,2922],{"class":346},[337,5003,1041],{"class":454},[337,5005,4974],{"class":350},[337,5007,1162],{"class":346},[337,5009,4979],{"class":398},[337,5011,402],{"class":350},[337,5013,1892],{"class":346},[337,5015,5016],{"class":363},"Animation completed",[337,5018,1892],{"class":346},[337,5020,2714],{"class":350},[337,5022,3684],{"class":346},[337,5024,5025,5028,5030,5033,5035],{"class":339,"line":538},[337,5026,5027],{"class":398},"  onUpdate",[337,5029,1873],{"class":346},[337,5031,5032],{"class":454}," function",[337,5034,1038],{"class":346},[337,5036,1044],{"class":346},[337,5038,5039],{"class":339,"line":548},[337,5040,5041],{"class":1049},"    // Called on every frame\n",[337,5043,5044,5047,5049,5051,5053,5055,5058,5060,5062,5065,5068],{"class":339,"line":557},[337,5045,5046],{"class":350},"    console",[337,5048,1162],{"class":346},[337,5050,4979],{"class":398},[337,5052,402],{"class":450},[337,5054,1892],{"class":346},[337,5056,5057],{"class":363},"Progress:",[337,5059,1892],{"class":346},[337,5061,507],{"class":346},[337,5063,5064],{"class":346}," this.",[337,5066,5067],{"class":398},"progress",[337,5069,5070],{"class":450},"())\n",[337,5072,5073],{"class":339,"line":573},[337,5074,4002],{"class":346},[337,5076,5077,5080,5082,5084,5086,5088,5090,5092,5094,5096,5099,5101],{"class":339,"line":588},[337,5078,5079],{"class":398},"  onRepeat",[337,5081,1873],{"class":346},[337,5083,2922],{"class":346},[337,5085,1041],{"class":454},[337,5087,4974],{"class":350},[337,5089,1162],{"class":346},[337,5091,4979],{"class":398},[337,5093,402],{"class":350},[337,5095,1892],{"class":346},[337,5097,5098],{"class":363},"Animation repeated",[337,5100,1892],{"class":346},[337,5102,414],{"class":350},[337,5104,5105,5107],{"class":339,"line":594},[337,5106,411],{"class":346},[337,5108,414],{"class":350},[927,5110,5111],{},[295,5112,5113],{},"GSAP automatically handles frame rate optimization and provides better performance than manual animations for complex sequences.",[766,5115,5117],{"to":5116},"https://gsap.com/docs/v3/",[295,5118,5119],{},"Explore the full GSAP documentation for advanced features and techniques.",[937,5121,5122],{},"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":270,"searchDepth":271,"depth":272,"links":5124},[5125],{"id":4015,"depth":272,"text":4016,"children":5126},[5127,5128,5129],{"id":4019,"depth":389,"text":4020},{"id":4666,"depth":389,"text":4667},{"id":4904,"depth":389,"text":4905},"Learn how to create complex animations using GSAP with TresJS",{"thumbnail":5132},"/recipes/advance-animations-gsap.png",{"title":211,"description":5130},"A5eP4L8nInDSuVCNW8LWJpKctw1s66-kqJl-TVBDFLo",{"id":5136,"title":215,"body":5137,"description":7396,"extension":276,"links":277,"meta":7397,"navigation":39,"path":216,"seo":7399,"stem":217,"__hash__":7400},"docs/5.cookbook/5.tweakpane.md",{"type":259,"value":5138,"toc":7389},[5139,5146,5149,5152,5155,5197,5200,5249,5254,5258,5261,7151,7155,7158,7315,7319,7322,7381,7386],[295,5140,5141,5145],{},[423,5142,215],{"href":5143,"rel":5144},"https://tweakpane.github.io/docs/",[427]," 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.",[5147,5148],"examples-tweakpane",{},[262,5150,13],{"id":5151},"installation",[295,5153,5154],{},"First, install Tweakpane v4 in your project:",[433,5156,5157,5171,5184],{},[328,5158,5160],{"className":1780,"code":5159,"filename":1789,"language":1782,"meta":270,"style":270},"npm install tweakpane@^4.0.0\n",[305,5161,5162],{"__ignoreMap":270},[337,5163,5164,5166,5168],{"class":339,"line":271},[337,5165,1789],{"class":1158},[337,5167,1792],{"class":363},[337,5169,5170],{"class":363}," tweakpane@^4.0.0\n",[328,5172,5174],{"className":1780,"code":5173,"filename":3093,"language":1782,"meta":270,"style":270},"yarn add tweakpane@^4.0.0\n",[305,5175,5176],{"__ignoreMap":270},[337,5177,5178,5180,5182],{"class":339,"line":271},[337,5179,3093],{"class":1158},[337,5181,3102],{"class":363},[337,5183,5170],{"class":363},[328,5185,5187],{"className":1780,"code":5186,"filename":3108,"language":1782,"meta":270,"style":270},"pnpm add tweakpane@^4.0.0\n",[305,5188,5189],{"__ignoreMap":270},[337,5190,5191,5193,5195],{"class":339,"line":271},[337,5192,3108],{"class":1158},[337,5194,3102],{"class":363},[337,5196,5170],{"class":363},[295,5198,5199],{},"Additionally, if you are working with TypeScript:",[433,5201,5202,5219,5234],{},[328,5203,5205],{"className":1780,"code":5204,"filename":1789,"language":1782,"meta":270,"style":270},"npm install --save-dev @tweakpane/core\n",[305,5206,5207],{"__ignoreMap":270},[337,5208,5209,5211,5213,5216],{"class":339,"line":271},[337,5210,1789],{"class":1158},[337,5212,1792],{"class":363},[337,5214,5215],{"class":363}," --save-dev",[337,5217,5218],{"class":363}," @tweakpane/core\n",[328,5220,5222],{"className":1780,"code":5221,"filename":3093,"language":1782,"meta":270,"style":270},"yarn add --save-dev @tweakpane/core\n",[305,5223,5224],{"__ignoreMap":270},[337,5225,5226,5228,5230,5232],{"class":339,"line":271},[337,5227,3093],{"class":1158},[337,5229,3102],{"class":363},[337,5231,5215],{"class":363},[337,5233,5218],{"class":363},[328,5235,5237],{"className":1780,"code":5236,"filename":3108,"language":1782,"meta":270,"style":270},"pnpm add --save-dev @tweakpane/core\n",[305,5238,5239],{"__ignoreMap":270},[337,5240,5241,5243,5245,5247],{"class":339,"line":271},[337,5242,3108],{"class":1158},[337,5244,3102],{"class":363},[337,5246,5215],{"class":363},[337,5248,5218],{"class":363},[927,5250,5251],{},[295,5252,5253],{},"Make sure to use Tweakpane v4 or higher, as this recipe uses the latest API which has breaking changes from v3.",[262,5255,5257],{"id":5256},"basic-setup","Basic Setup",[295,5259,5260],{},"Here's how to set up Tweakpane with a basic TresJS scene:",[328,5262,5264],{"className":437,"code":5263,"language":440,"meta":270,"style":270},"\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",[305,5265,5266,5286,5313,5333,5351,5355,5368,5388,5408,5412,5417,5432,5444,5455,5466,5477,5488,5499,5510,5526,5538,5554,5560,5564,5577,5596,5600,5605,5625,5641,5656,5662,5666,5671,5712,5776,5833,5890,5894,5899,5937,6005,6070,6135,6139,6144,6183,6239,6267,6295,6325,6335,6351,6368,6385,6390,6397,6402,6408,6463,6486,6516,6546,6591,6598,6605,6612,6617,6623,6637,6653,6660,6669,6674,6683,6704,6710,6740,6745,6766,6786,6795,6800,6808,6823,6838,6853,6868,6874,6884,6892,6907,6922,6937,6943,6951,6966,6979,6984,6992,7006,7019,7032,7037,7047,7052,7071,7093,7124,7133,7142],{"__ignoreMap":270},[337,5267,5268,5270,5272,5274,5276,5278,5280,5282,5284],{"class":339,"line":271},[337,5269,447],{"class":346},[337,5271,451],{"class":450},[337,5273,455],{"class":454},[337,5275,458],{"class":454},[337,5277,461],{"class":346},[337,5279,464],{"class":346},[337,5281,333],{"class":363},[337,5283,464],{"class":346},[337,5285,471],{"class":346},[337,5287,5288,5290,5292,5294,5296,5298,5300,5303,5305,5307,5309,5311],{"class":339,"line":272},[337,5289,343],{"class":342},[337,5291,347],{"class":346},[337,5293,1110],{"class":350},[337,5295,507],{"class":346},[337,5297,4069],{"class":350},[337,5299,507],{"class":346},[337,5301,5302],{"class":350}," onUnmounted",[337,5304,354],{"class":346},[337,5306,357],{"class":342},[337,5308,360],{"class":346},[337,5310,440],{"class":363},[337,5312,367],{"class":346},[337,5314,5315,5317,5319,5322,5324,5326,5328,5331],{"class":339,"line":389},[337,5316,343],{"class":342},[337,5318,347],{"class":346},[337,5320,5321],{"class":350}," Pane",[337,5323,354],{"class":346},[337,5325,357],{"class":342},[337,5327,360],{"class":346},[337,5329,5330],{"class":363},"tweakpane",[337,5332,367],{"class":346},[337,5334,5335,5337,5339,5341,5343,5345,5347,5349],{"class":339,"line":395},[337,5336,343],{"class":342},[337,5338,347],{"class":346},[337,5340,376],{"class":350},[337,5342,354],{"class":346},[337,5344,357],{"class":342},[337,5346,360],{"class":346},[337,5348,315],{"class":363},[337,5350,367],{"class":346},[337,5352,5353],{"class":339,"line":523},[337,5354,392],{"emptyLinePlaceholder":39},[337,5356,5357,5359,5362,5364,5366],{"class":339,"line":533},[337,5358,499],{"class":454},[337,5360,5361],{"class":350}," meshRef ",[337,5363,461],{"class":346},[337,5365,1110],{"class":398},[337,5367,520],{"class":350},[337,5369,5370,5372,5375,5377,5379,5381,5384,5386],{"class":339,"line":538},[337,5371,499],{"class":454},[337,5373,5374],{"class":350}," pane ",[337,5376,461],{"class":346},[337,5378,1110],{"class":398},[337,5380,447],{"class":346},[337,5382,5383],{"class":1158},"Pane",[337,5385,1174],{"class":346},[337,5387,520],{"class":350},[337,5389,5390,5392,5395,5397,5399,5401,5404,5406],{"class":339,"line":548},[337,5391,499],{"class":454},[337,5393,5394],{"class":350}," paneContainer ",[337,5396,461],{"class":346},[337,5398,1110],{"class":398},[337,5400,447],{"class":346},[337,5402,5403],{"class":1158},"HTMLElement",[337,5405,1174],{"class":346},[337,5407,520],{"class":350},[337,5409,5410],{"class":339,"line":557},[337,5411,392],{"emptyLinePlaceholder":39},[337,5413,5414],{"class":339,"line":573},[337,5415,5416],{"class":1049},"// Reactive properties that will be controlled by Tweakpane\n",[337,5418,5419,5421,5424,5426,5428,5430],{"class":339,"line":588},[337,5420,499],{"class":454},[337,5422,5423],{"class":350}," controls ",[337,5425,461],{"class":346},[337,5427,1110],{"class":398},[337,5429,402],{"class":350},[337,5431,1249],{"class":346},[337,5433,5434,5437,5439,5442],{"class":339,"line":594},[337,5435,5436],{"class":450},"  positionX",[337,5438,1873],{"class":346},[337,5440,5441],{"class":1275}," 0",[337,5443,3684],{"class":346},[337,5445,5446,5449,5451,5453],{"class":339,"line":1252},[337,5447,5448],{"class":450},"  positionY",[337,5450,1873],{"class":346},[337,5452,5441],{"class":1275},[337,5454,3684],{"class":346},[337,5456,5457,5460,5462,5464],{"class":339,"line":1279},[337,5458,5459],{"class":450},"  positionZ",[337,5461,1873],{"class":346},[337,5463,5441],{"class":1275},[337,5465,3684],{"class":346},[337,5467,5468,5471,5473,5475],{"class":339,"line":1301},[337,5469,5470],{"class":450},"  rotationX",[337,5472,1873],{"class":346},[337,5474,5441],{"class":1275},[337,5476,3684],{"class":346},[337,5478,5479,5482,5484,5486],{"class":339,"line":1307},[337,5480,5481],{"class":450},"  rotationY",[337,5483,1873],{"class":346},[337,5485,5441],{"class":1275},[337,5487,3684],{"class":346},[337,5489,5490,5493,5495,5497],{"class":339,"line":1314},[337,5491,5492],{"class":450},"  rotationZ",[337,5494,1873],{"class":346},[337,5496,5441],{"class":1275},[337,5498,3684],{"class":346},[337,5500,5501,5504,5506,5508],{"class":339,"line":1323},[337,5502,5503],{"class":450},"  scale",[337,5505,1873],{"class":346},[337,5507,3694],{"class":1275},[337,5509,3684],{"class":346},[337,5511,5512,5515,5517,5519,5522,5524],{"class":339,"line":1328},[337,5513,5514],{"class":450},"  color",[337,5516,1873],{"class":346},[337,5518,360],{"class":346},[337,5520,5521],{"class":363},"#ff6b6b",[337,5523,1892],{"class":346},[337,5525,3684],{"class":346},[337,5527,5528,5531,5533,5536],{"class":339,"line":1337},[337,5529,5530],{"class":450},"  wireframe",[337,5532,1873],{"class":346},[337,5534,5535],{"class":3740}," false",[337,5537,3684],{"class":346},[337,5539,5540,5543,5545,5547,5550,5552],{"class":339,"line":1369},[337,5541,5542],{"class":450},"  material",[337,5544,1873],{"class":346},[337,5546,360],{"class":346},[337,5548,5549],{"class":363},"basic",[337,5551,1892],{"class":346},[337,5553,3684],{"class":346},[337,5555,5556,5558],{"class":339,"line":1390},[337,5557,411],{"class":346},[337,5559,414],{"class":350},[337,5561,5562],{"class":339,"line":1400},[337,5563,392],{"emptyLinePlaceholder":39},[337,5565,5566,5569,5571,5573,5575],{"class":339,"line":1409},[337,5567,5568],{"class":398},"onMounted",[337,5570,402],{"class":350},[337,5572,1038],{"class":346},[337,5574,1041],{"class":454},[337,5576,1044],{"class":346},[337,5578,5579,5581,5583,5585,5588,5590,5592,5594],{"class":339,"line":2860},[337,5580,1232],{"class":342},[337,5582,1235],{"class":450},[337,5584,2752],{"class":346},[337,5586,5587],{"class":350},"paneContainer",[337,5589,1162],{"class":346},[337,5591,1243],{"class":350},[337,5593,1246],{"class":450},[337,5595,2760],{"class":342},[337,5597,5598],{"class":339,"line":2875},[337,5599,392],{"emptyLinePlaceholder":39},[337,5601,5602],{"class":339,"line":2880},[337,5603,5604],{"class":1049},"  // Create Tweakpane instance with container\n",[337,5606,5607,5610,5612,5614,5616,5619,5621,5623],{"class":339,"line":2895},[337,5608,5609],{"class":350},"  pane",[337,5611,1162],{"class":346},[337,5613,1243],{"class":350},[337,5615,515],{"class":346},[337,5617,5618],{"class":346}," new",[337,5620,5321],{"class":398},[337,5622,402],{"class":450},[337,5624,1249],{"class":346},[337,5626,5627,5630,5632,5634,5637,5639],{"class":339,"line":2901},[337,5628,5629],{"class":450},"    title",[337,5631,1873],{"class":346},[337,5633,360],{"class":346},[337,5635,5636],{"class":363},"Scene Controls",[337,5638,1892],{"class":346},[337,5640,3684],{"class":346},[337,5642,5643,5646,5648,5651,5653],{"class":339,"line":2906},[337,5644,5645],{"class":450},"    container",[337,5647,1873],{"class":346},[337,5649,5650],{"class":350}," paneContainer",[337,5652,1162],{"class":346},[337,5654,5655],{"class":350},"value\n",[337,5657,5658,5660],{"class":339,"line":2912},[337,5659,3807],{"class":346},[337,5661,414],{"class":450},[337,5663,5664],{"class":339,"line":2929},[337,5665,392],{"emptyLinePlaceholder":39},[337,5667,5668],{"class":339,"line":2950},[337,5669,5670],{"class":1049},"  // Add position controls\n",[337,5672,5673,5675,5678,5680,5683,5685,5687,5689,5692,5694,5696,5699,5701,5703,5706,5708,5710],{"class":339,"line":2955},[337,5674,2723],{"class":454},[337,5676,5677],{"class":350}," positionFolder",[337,5679,515],{"class":346},[337,5681,5682],{"class":350}," pane",[337,5684,1162],{"class":346},[337,5686,1243],{"class":350},[337,5688,1162],{"class":346},[337,5690,5691],{"class":398},"addFolder",[337,5693,402],{"class":450},[337,5695,405],{"class":346},[337,5697,5698],{"class":450}," title",[337,5700,1873],{"class":346},[337,5702,360],{"class":346},[337,5704,5705],{"class":363},"Position",[337,5707,1892],{"class":346},[337,5709,354],{"class":346},[337,5711,414],{"class":450},[337,5713,5714,5717,5719,5722,5724,5727,5729,5731,5733,5735,5738,5740,5742,5744,5747,5749,5751,5754,5756,5759,5761,5763,5765,5768,5770,5772,5774],{"class":339,"line":2960},[337,5715,5716],{"class":350},"  positionFolder",[337,5718,1162],{"class":346},[337,5720,5721],{"class":398},"addBinding",[337,5723,402],{"class":450},[337,5725,5726],{"class":350},"controls",[337,5728,1162],{"class":346},[337,5730,1243],{"class":350},[337,5732,507],{"class":346},[337,5734,360],{"class":346},[337,5736,5737],{"class":363},"positionX",[337,5739,1892],{"class":346},[337,5741,507],{"class":346},[337,5743,347],{"class":346},[337,5745,5746],{"class":450}," min",[337,5748,1873],{"class":346},[337,5750,3256],{"class":346},[337,5752,5753],{"class":1275},"3",[337,5755,507],{"class":346},[337,5757,5758],{"class":450}," max",[337,5760,1873],{"class":346},[337,5762,4291],{"class":1275},[337,5764,507],{"class":346},[337,5766,5767],{"class":450}," step",[337,5769,1873],{"class":346},[337,5771,4958],{"class":1275},[337,5773,354],{"class":346},[337,5775,414],{"class":450},[337,5777,5778,5780,5782,5784,5786,5788,5790,5792,5794,5796,5799,5801,5803,5805,5807,5809,5811,5813,5815,5817,5819,5821,5823,5825,5827,5829,5831],{"class":339,"line":2976},[337,5779,5716],{"class":350},[337,5781,1162],{"class":346},[337,5783,5721],{"class":398},[337,5785,402],{"class":450},[337,5787,5726],{"class":350},[337,5789,1162],{"class":346},[337,5791,1243],{"class":350},[337,5793,507],{"class":346},[337,5795,360],{"class":346},[337,5797,5798],{"class":363},"positionY",[337,5800,1892],{"class":346},[337,5802,507],{"class":346},[337,5804,347],{"class":346},[337,5806,5746],{"class":450},[337,5808,1873],{"class":346},[337,5810,3256],{"class":346},[337,5812,5753],{"class":1275},[337,5814,507],{"class":346},[337,5816,5758],{"class":450},[337,5818,1873],{"class":346},[337,5820,4291],{"class":1275},[337,5822,507],{"class":346},[337,5824,5767],{"class":450},[337,5826,1873],{"class":346},[337,5828,4958],{"class":1275},[337,5830,354],{"class":346},[337,5832,414],{"class":450},[337,5834,5835,5837,5839,5841,5843,5845,5847,5849,5851,5853,5856,5858,5860,5862,5864,5866,5868,5870,5872,5874,5876,5878,5880,5882,5884,5886,5888],{"class":339,"line":2996},[337,5836,5716],{"class":350},[337,5838,1162],{"class":346},[337,5840,5721],{"class":398},[337,5842,402],{"class":450},[337,5844,5726],{"class":350},[337,5846,1162],{"class":346},[337,5848,1243],{"class":350},[337,5850,507],{"class":346},[337,5852,360],{"class":346},[337,5854,5855],{"class":363},"positionZ",[337,5857,1892],{"class":346},[337,5859,507],{"class":346},[337,5861,347],{"class":346},[337,5863,5746],{"class":450},[337,5865,1873],{"class":346},[337,5867,3256],{"class":346},[337,5869,5753],{"class":1275},[337,5871,507],{"class":346},[337,5873,5758],{"class":450},[337,5875,1873],{"class":346},[337,5877,4291],{"class":1275},[337,5879,507],{"class":346},[337,5881,5767],{"class":450},[337,5883,1873],{"class":346},[337,5885,4958],{"class":1275},[337,5887,354],{"class":346},[337,5889,414],{"class":450},[337,5891,5892],{"class":339,"line":3001},[337,5893,392],{"emptyLinePlaceholder":39},[337,5895,5896],{"class":339,"line":4554},[337,5897,5898],{"class":1049},"  // Add rotation controls\n",[337,5900,5901,5903,5906,5908,5910,5912,5914,5916,5918,5920,5922,5924,5926,5928,5931,5933,5935],{"class":339,"line":4559},[337,5902,2723],{"class":454},[337,5904,5905],{"class":350}," rotationFolder",[337,5907,515],{"class":346},[337,5909,5682],{"class":350},[337,5911,1162],{"class":346},[337,5913,1243],{"class":350},[337,5915,1162],{"class":346},[337,5917,5691],{"class":398},[337,5919,402],{"class":450},[337,5921,405],{"class":346},[337,5923,5698],{"class":450},[337,5925,1873],{"class":346},[337,5927,360],{"class":346},[337,5929,5930],{"class":363},"Rotation",[337,5932,1892],{"class":346},[337,5934,354],{"class":346},[337,5936,414],{"class":450},[337,5938,5939,5942,5944,5946,5948,5950,5952,5954,5956,5958,5961,5963,5965,5967,5969,5971,5973,5976,5978,5980,5982,5984,5986,5988,5990,5992,5994,5996,5998,6001,6003],{"class":339,"line":4565},[337,5940,5941],{"class":350},"  rotationFolder",[337,5943,1162],{"class":346},[337,5945,5721],{"class":398},[337,5947,402],{"class":450},[337,5949,5726],{"class":350},[337,5951,1162],{"class":346},[337,5953,1243],{"class":350},[337,5955,507],{"class":346},[337,5957,360],{"class":346},[337,5959,5960],{"class":363},"rotationX",[337,5962,1892],{"class":346},[337,5964,507],{"class":346},[337,5966,347],{"class":346},[337,5968,5746],{"class":450},[337,5970,1873],{"class":346},[337,5972,3256],{"class":346},[337,5974,5975],{"class":350},"Math",[337,5977,1162],{"class":346},[337,5979,4382],{"class":350},[337,5981,507],{"class":346},[337,5983,5758],{"class":450},[337,5985,1873],{"class":346},[337,5987,1656],{"class":350},[337,5989,1162],{"class":346},[337,5991,4382],{"class":350},[337,5993,507],{"class":346},[337,5995,5767],{"class":450},[337,5997,1873],{"class":346},[337,5999,6000],{"class":1275}," 0.01",[337,6002,354],{"class":346},[337,6004,414],{"class":450},[337,6006,6007,6009,6011,6013,6015,6017,6019,6021,6023,6025,6028,6030,6032,6034,6036,6038,6040,6042,6044,6046,6048,6050,6052,6054,6056,6058,6060,6062,6064,6066,6068],{"class":339,"line":4588},[337,6008,5941],{"class":350},[337,6010,1162],{"class":346},[337,6012,5721],{"class":398},[337,6014,402],{"class":450},[337,6016,5726],{"class":350},[337,6018,1162],{"class":346},[337,6020,1243],{"class":350},[337,6022,507],{"class":346},[337,6024,360],{"class":346},[337,6026,6027],{"class":363},"rotationY",[337,6029,1892],{"class":346},[337,6031,507],{"class":346},[337,6033,347],{"class":346},[337,6035,5746],{"class":450},[337,6037,1873],{"class":346},[337,6039,3256],{"class":346},[337,6041,5975],{"class":350},[337,6043,1162],{"class":346},[337,6045,4382],{"class":350},[337,6047,507],{"class":346},[337,6049,5758],{"class":450},[337,6051,1873],{"class":346},[337,6053,1656],{"class":350},[337,6055,1162],{"class":346},[337,6057,4382],{"class":350},[337,6059,507],{"class":346},[337,6061,5767],{"class":450},[337,6063,1873],{"class":346},[337,6065,6000],{"class":1275},[337,6067,354],{"class":346},[337,6069,414],{"class":450},[337,6071,6072,6074,6076,6078,6080,6082,6084,6086,6088,6090,6093,6095,6097,6099,6101,6103,6105,6107,6109,6111,6113,6115,6117,6119,6121,6123,6125,6127,6129,6131,6133],{"class":339,"line":4611},[337,6073,5941],{"class":350},[337,6075,1162],{"class":346},[337,6077,5721],{"class":398},[337,6079,402],{"class":450},[337,6081,5726],{"class":350},[337,6083,1162],{"class":346},[337,6085,1243],{"class":350},[337,6087,507],{"class":346},[337,6089,360],{"class":346},[337,6091,6092],{"class":363},"rotationZ",[337,6094,1892],{"class":346},[337,6096,507],{"class":346},[337,6098,347],{"class":346},[337,6100,5746],{"class":450},[337,6102,1873],{"class":346},[337,6104,3256],{"class":346},[337,6106,5975],{"class":350},[337,6108,1162],{"class":346},[337,6110,4382],{"class":350},[337,6112,507],{"class":346},[337,6114,5758],{"class":450},[337,6116,1873],{"class":346},[337,6118,1656],{"class":350},[337,6120,1162],{"class":346},[337,6122,4382],{"class":350},[337,6124,507],{"class":346},[337,6126,5767],{"class":450},[337,6128,1873],{"class":346},[337,6130,6000],{"class":1275},[337,6132,354],{"class":346},[337,6134,414],{"class":450},[337,6136,6137],{"class":339,"line":4634},[337,6138,392],{"emptyLinePlaceholder":39},[337,6140,6141],{"class":339,"line":4657},[337,6142,6143],{"class":1049},"  // Add material controls\n",[337,6145,6147,6149,6152,6154,6156,6158,6160,6162,6164,6166,6168,6170,6172,6174,6177,6179,6181],{"class":339,"line":6146},46,[337,6148,2723],{"class":454},[337,6150,6151],{"class":350}," materialFolder",[337,6153,515],{"class":346},[337,6155,5682],{"class":350},[337,6157,1162],{"class":346},[337,6159,1243],{"class":350},[337,6161,1162],{"class":346},[337,6163,5691],{"class":398},[337,6165,402],{"class":450},[337,6167,405],{"class":346},[337,6169,5698],{"class":450},[337,6171,1873],{"class":346},[337,6173,360],{"class":346},[337,6175,6176],{"class":363},"Material",[337,6178,1892],{"class":346},[337,6180,354],{"class":346},[337,6182,414],{"class":450},[337,6184,6186,6189,6191,6193,6195,6197,6199,6201,6203,6205,6207,6209,6211,6213,6215,6217,6219,6221,6223,6225,6227,6229,6231,6233,6235,6237],{"class":339,"line":6185},47,[337,6187,6188],{"class":350},"  materialFolder",[337,6190,1162],{"class":346},[337,6192,5721],{"class":398},[337,6194,402],{"class":450},[337,6196,5726],{"class":350},[337,6198,1162],{"class":346},[337,6200,1243],{"class":350},[337,6202,507],{"class":346},[337,6204,360],{"class":346},[337,6206,4466],{"class":363},[337,6208,1892],{"class":346},[337,6210,507],{"class":346},[337,6212,347],{"class":346},[337,6214,5746],{"class":450},[337,6216,1873],{"class":346},[337,6218,4958],{"class":1275},[337,6220,507],{"class":346},[337,6222,5758],{"class":450},[337,6224,1873],{"class":346},[337,6226,4291],{"class":1275},[337,6228,507],{"class":346},[337,6230,5767],{"class":450},[337,6232,1873],{"class":346},[337,6234,4958],{"class":1275},[337,6236,354],{"class":346},[337,6238,414],{"class":450},[337,6240,6242,6244,6246,6248,6250,6252,6254,6256,6258,6260,6263,6265],{"class":339,"line":6241},48,[337,6243,6188],{"class":350},[337,6245,1162],{"class":346},[337,6247,5721],{"class":398},[337,6249,402],{"class":450},[337,6251,5726],{"class":350},[337,6253,1162],{"class":346},[337,6255,1243],{"class":350},[337,6257,507],{"class":346},[337,6259,360],{"class":346},[337,6261,6262],{"class":363},"color",[337,6264,1892],{"class":346},[337,6266,414],{"class":450},[337,6268,6270,6272,6274,6276,6278,6280,6282,6284,6286,6288,6291,6293],{"class":339,"line":6269},49,[337,6271,6188],{"class":350},[337,6273,1162],{"class":346},[337,6275,5721],{"class":398},[337,6277,402],{"class":450},[337,6279,5726],{"class":350},[337,6281,1162],{"class":346},[337,6283,1243],{"class":350},[337,6285,507],{"class":346},[337,6287,360],{"class":346},[337,6289,6290],{"class":363},"wireframe",[337,6292,1892],{"class":346},[337,6294,414],{"class":450},[337,6296,6298,6300,6302,6304,6306,6308,6310,6312,6314,6316,6319,6321,6323],{"class":339,"line":6297},50,[337,6299,6188],{"class":350},[337,6301,1162],{"class":346},[337,6303,5721],{"class":398},[337,6305,402],{"class":450},[337,6307,5726],{"class":350},[337,6309,1162],{"class":346},[337,6311,1243],{"class":350},[337,6313,507],{"class":346},[337,6315,360],{"class":346},[337,6317,6318],{"class":363},"material",[337,6320,1892],{"class":346},[337,6322,507],{"class":346},[337,6324,1044],{"class":346},[337,6326,6328,6331,6333],{"class":339,"line":6327},51,[337,6329,6330],{"class":450},"    options",[337,6332,1873],{"class":346},[337,6334,1044],{"class":346},[337,6336,6338,6341,6343,6345,6347,6349],{"class":339,"line":6337},52,[337,6339,6340],{"class":450},"      Basic",[337,6342,1873],{"class":346},[337,6344,360],{"class":346},[337,6346,5549],{"class":363},[337,6348,1892],{"class":346},[337,6350,3684],{"class":346},[337,6352,6354,6357,6359,6361,6364,6366],{"class":339,"line":6353},53,[337,6355,6356],{"class":450},"      Normal",[337,6358,1873],{"class":346},[337,6360,360],{"class":346},[337,6362,6363],{"class":363},"normal",[337,6365,1892],{"class":346},[337,6367,3684],{"class":346},[337,6369,6371,6374,6376,6378,6381,6383],{"class":339,"line":6370},54,[337,6372,6373],{"class":450},"      Standard",[337,6375,1873],{"class":346},[337,6377,360],{"class":346},[337,6379,6380],{"class":363},"standard",[337,6382,1892],{"class":346},[337,6384,3684],{"class":346},[337,6386,6388],{"class":339,"line":6387},55,[337,6389,3748],{"class":346},[337,6391,6393,6395],{"class":339,"line":6392},56,[337,6394,3807],{"class":346},[337,6396,414],{"class":450},[337,6398,6400],{"class":339,"line":6399},57,[337,6401,392],{"emptyLinePlaceholder":39},[337,6403,6405],{"class":339,"line":6404},58,[337,6406,6407],{"class":1049},"  // Add reset button\n",[337,6409,6411,6413,6415,6417,6419,6422,6424,6426,6428,6430,6432,6435,6437,6439,6441,6443,6446,6448,6450,6453,6455,6457,6459,6461],{"class":339,"line":6410},59,[337,6412,5609],{"class":350},[337,6414,1162],{"class":346},[337,6416,1243],{"class":350},[337,6418,1162],{"class":346},[337,6420,6421],{"class":398},"addButton",[337,6423,402],{"class":450},[337,6425,405],{"class":346},[337,6427,5698],{"class":450},[337,6429,1873],{"class":346},[337,6431,360],{"class":346},[337,6433,6434],{"class":363},"Reset All",[337,6436,1892],{"class":346},[337,6438,354],{"class":346},[337,6440,2714],{"class":450},[337,6442,1162],{"class":346},[337,6444,6445],{"class":398},"on",[337,6447,402],{"class":450},[337,6449,1892],{"class":346},[337,6451,6452],{"class":363},"click",[337,6454,1892],{"class":346},[337,6456,507],{"class":346},[337,6458,2922],{"class":346},[337,6460,1041],{"class":454},[337,6462,1044],{"class":346},[337,6464,6466,6469,6471,6474,6476,6478,6480,6482,6484],{"class":339,"line":6465},60,[337,6467,6468],{"class":350},"    Object",[337,6470,1162],{"class":346},[337,6472,6473],{"class":398},"assign",[337,6475,402],{"class":450},[337,6477,5726],{"class":350},[337,6479,1162],{"class":346},[337,6481,1243],{"class":350},[337,6483,507],{"class":346},[337,6485,1044],{"class":346},[337,6487,6489,6492,6494,6496,6498,6501,6503,6505,6507,6510,6512,6514],{"class":339,"line":6488},61,[337,6490,6491],{"class":450},"      positionX",[337,6493,1873],{"class":346},[337,6495,5441],{"class":1275},[337,6497,507],{"class":346},[337,6499,6500],{"class":450}," positionY",[337,6502,1873],{"class":346},[337,6504,5441],{"class":1275},[337,6506,507],{"class":346},[337,6508,6509],{"class":450}," positionZ",[337,6511,1873],{"class":346},[337,6513,5441],{"class":1275},[337,6515,3684],{"class":346},[337,6517,6519,6522,6524,6526,6528,6531,6533,6535,6537,6540,6542,6544],{"class":339,"line":6518},62,[337,6520,6521],{"class":450},"      rotationX",[337,6523,1873],{"class":346},[337,6525,5441],{"class":1275},[337,6527,507],{"class":346},[337,6529,6530],{"class":450}," rotationY",[337,6532,1873],{"class":346},[337,6534,5441],{"class":1275},[337,6536,507],{"class":346},[337,6538,6539],{"class":450}," rotationZ",[337,6541,1873],{"class":346},[337,6543,5441],{"class":1275},[337,6545,3684],{"class":346},[337,6547,6549,6552,6554,6556,6558,6561,6563,6565,6567,6569,6571,6574,6576,6578,6580,6583,6585,6587,6589],{"class":339,"line":6548},63,[337,6550,6551],{"class":450},"      scale",[337,6553,1873],{"class":346},[337,6555,3694],{"class":1275},[337,6557,507],{"class":346},[337,6559,6560],{"class":450}," color",[337,6562,1873],{"class":346},[337,6564,360],{"class":346},[337,6566,5521],{"class":363},[337,6568,1892],{"class":346},[337,6570,507],{"class":346},[337,6572,6573],{"class":450}," wireframe",[337,6575,1873],{"class":346},[337,6577,5535],{"class":3740},[337,6579,507],{"class":346},[337,6581,6582],{"class":450}," material",[337,6584,1873],{"class":346},[337,6586,360],{"class":346},[337,6588,5549],{"class":363},[337,6590,367],{"class":346},[337,6592,6594,6596],{"class":339,"line":6593},64,[337,6595,4335],{"class":346},[337,6597,414],{"class":450},[337,6599,6601,6603],{"class":339,"line":6600},65,[337,6602,3807],{"class":346},[337,6604,414],{"class":450},[337,6606,6608,6610],{"class":339,"line":6607},66,[337,6609,411],{"class":346},[337,6611,414],{"class":350},[337,6613,6615],{"class":339,"line":6614},67,[337,6616,392],{"emptyLinePlaceholder":39},[337,6618,6620],{"class":339,"line":6619},68,[337,6621,6622],{"class":1049},"// Clean up on unmount\n",[337,6624,6626,6629,6631,6633,6635],{"class":339,"line":6625},69,[337,6627,6628],{"class":398},"onUnmounted",[337,6630,402],{"class":350},[337,6632,1038],{"class":346},[337,6634,1041],{"class":454},[337,6636,1044],{"class":346},[337,6638,6640,6642,6644,6646,6648,6651],{"class":339,"line":6639},70,[337,6641,5609],{"class":350},[337,6643,1162],{"class":346},[337,6645,1243],{"class":350},[337,6647,2259],{"class":346},[337,6649,6650],{"class":398},"dispose",[337,6652,520],{"class":450},[337,6654,6656,6658],{"class":339,"line":6655},71,[337,6657,411],{"class":346},[337,6659,414],{"class":350},[337,6661,6663,6665,6667],{"class":339,"line":6662},72,[337,6664,526],{"class":346},[337,6666,451],{"class":450},[337,6668,471],{"class":346},[337,6670,6672],{"class":339,"line":6671},73,[337,6673,392],{"emptyLinePlaceholder":39},[337,6675,6677,6679,6681],{"class":339,"line":6676},74,[337,6678,447],{"class":346},[337,6680,543],{"class":450},[337,6682,471],{"class":346},[337,6684,6686,6688,6690,6693,6695,6697,6700,6702],{"class":339,"line":6685},75,[337,6687,551],{"class":346},[337,6689,1536],{"class":450},[337,6691,6692],{"class":454}," class",[337,6694,461],{"class":346},[337,6696,464],{"class":346},[337,6698,6699],{"class":363},"relative w-full h-full",[337,6701,464],{"class":346},[337,6703,471],{"class":346},[337,6705,6707],{"class":339,"line":6706},76,[337,6708,6709],{"class":1049},"    \u003C!-- Tweakpane container positioned outside canvas -->\n",[337,6711,6713,6715,6717,6719,6721,6723,6725,6727,6729,6731,6733,6736,6738],{"class":339,"line":6712},77,[337,6714,701],{"class":346},[337,6716,1536],{"class":450},[337,6718,1110],{"class":454},[337,6720,461],{"class":346},[337,6722,464],{"class":346},[337,6724,5587],{"class":363},[337,6726,464],{"class":346},[337,6728,6692],{"class":454},[337,6730,461],{"class":346},[337,6732,464],{"class":346},[337,6734,6735],{"class":363},"absolute top-4 right-4 z-10",[337,6737,464],{"class":346},[337,6739,719],{"class":346},[337,6741,6743],{"class":339,"line":6742},78,[337,6744,392],{"emptyLinePlaceholder":39},[337,6746,6748,6750,6752,6755,6757,6759,6762,6764],{"class":339,"line":6747},79,[337,6749,701],{"class":346},[337,6751,688],{"class":450},[337,6753,6754],{"class":454}," clear-color",[337,6756,461],{"class":346},[337,6758,464],{"class":346},[337,6760,6761],{"class":363},"#82DBC5",[337,6763,464],{"class":346},[337,6765,471],{"class":346},[337,6767,6769,6771,6773,6775,6777,6779,6782,6784],{"class":339,"line":6768},80,[337,6770,3418],{"class":346},[337,6772,704],{"class":450},[337,6774,1355],{"class":454},[337,6776,461],{"class":346},[337,6778,464],{"class":346},[337,6780,6781],{"class":363},"[3, 3, 3]",[337,6783,464],{"class":346},[337,6785,719],{"class":346},[337,6787,6789,6791,6793],{"class":339,"line":6788},81,[337,6790,3418],{"class":346},[337,6792,199],{"class":450},[337,6794,719],{"class":346},[337,6796,6798],{"class":339,"line":6797},82,[337,6799,392],{"emptyLinePlaceholder":39},[337,6801,6803,6805],{"class":339,"line":6802},83,[337,6804,3418],{"class":346},[337,6806,6807],{"class":450},"TresMesh\n",[337,6809,6811,6814,6816,6818,6821],{"class":339,"line":6810},84,[337,6812,6813],{"class":454},"        ref",[337,6815,461],{"class":346},[337,6817,464],{"class":346},[337,6819,6820],{"class":363},"meshRef",[337,6822,570],{"class":346},[337,6824,6826,6829,6831,6833,6836],{"class":339,"line":6825},85,[337,6827,6828],{"class":454},"        :position",[337,6830,461],{"class":346},[337,6832,464],{"class":346},[337,6834,6835],{"class":363},"[controls.positionX, controls.positionY, controls.positionZ]",[337,6837,570],{"class":346},[337,6839,6841,6844,6846,6848,6851],{"class":339,"line":6840},86,[337,6842,6843],{"class":454},"        :rotation",[337,6845,461],{"class":346},[337,6847,464],{"class":346},[337,6849,6850],{"class":363},"[controls.rotationX, controls.rotationY, controls.rotationZ]",[337,6852,570],{"class":346},[337,6854,6856,6859,6861,6863,6866],{"class":339,"line":6855},87,[337,6857,6858],{"class":454},"        :scale",[337,6860,461],{"class":346},[337,6862,464],{"class":346},[337,6864,6865],{"class":363},"controls.scale",[337,6867,570],{"class":346},[337,6869,6871],{"class":339,"line":6870},88,[337,6872,6873],{"class":346},"      >\n",[337,6875,6877,6880,6882],{"class":339,"line":6876},89,[337,6878,6879],{"class":346},"        \u003C",[337,6881,1374],{"class":450},[337,6883,719],{"class":346},[337,6885,6887,6889],{"class":339,"line":6886},90,[337,6888,6879],{"class":346},[337,6890,6891],{"class":450},"TresMeshBasicMaterial\n",[337,6893,6895,6898,6900,6902,6905],{"class":339,"line":6894},91,[337,6896,6897],{"class":454},"          v-if",[337,6899,461],{"class":346},[337,6901,464],{"class":346},[337,6903,6904],{"class":363},"controls.material === 'basic'",[337,6906,570],{"class":346},[337,6908,6910,6913,6915,6917,6920],{"class":339,"line":6909},92,[337,6911,6912],{"class":454},"          :color",[337,6914,461],{"class":346},[337,6916,464],{"class":346},[337,6918,6919],{"class":363},"controls.color",[337,6921,570],{"class":346},[337,6923,6925,6928,6930,6932,6935],{"class":339,"line":6924},93,[337,6926,6927],{"class":454},"          :wireframe",[337,6929,461],{"class":346},[337,6931,464],{"class":346},[337,6933,6934],{"class":363},"controls.wireframe",[337,6936,570],{"class":346},[337,6938,6940],{"class":339,"line":6939},94,[337,6941,6942],{"class":346},"        />\n",[337,6944,6946,6948],{"class":339,"line":6945},95,[337,6947,6879],{"class":346},[337,6949,6950],{"class":450},"TresMeshNormalMaterial\n",[337,6952,6954,6957,6959,6961,6964],{"class":339,"line":6953},96,[337,6955,6956],{"class":454},"          v-else-if",[337,6958,461],{"class":346},[337,6960,464],{"class":346},[337,6962,6963],{"class":363},"controls.material === 'normal'",[337,6965,570],{"class":346},[337,6967,6969,6971,6973,6975,6977],{"class":339,"line":6968},97,[337,6970,6927],{"class":454},[337,6972,461],{"class":346},[337,6974,464],{"class":346},[337,6976,6934],{"class":363},[337,6978,570],{"class":346},[337,6980,6982],{"class":339,"line":6981},98,[337,6983,6942],{"class":346},[337,6985,6987,6989],{"class":339,"line":6986},99,[337,6988,6879],{"class":346},[337,6990,6991],{"class":450},"TresMeshStandardMaterial\n",[337,6993,6995,6997,6999,7001,7004],{"class":339,"line":6994},100,[337,6996,6956],{"class":454},[337,6998,461],{"class":346},[337,7000,464],{"class":346},[337,7002,7003],{"class":363},"controls.material === 'standard'",[337,7005,570],{"class":346},[337,7007,7009,7011,7013,7015,7017],{"class":339,"line":7008},101,[337,7010,6912],{"class":454},[337,7012,461],{"class":346},[337,7014,464],{"class":346},[337,7016,6919],{"class":363},[337,7018,570],{"class":346},[337,7020,7022,7024,7026,7028,7030],{"class":339,"line":7021},102,[337,7023,6927],{"class":454},[337,7025,461],{"class":346},[337,7027,464],{"class":346},[337,7029,6934],{"class":363},[337,7031,570],{"class":346},[337,7033,7035],{"class":339,"line":7034},103,[337,7036,6942],{"class":346},[337,7038,7040,7043,7045],{"class":339,"line":7039},104,[337,7041,7042],{"class":346},"      \u003C/",[337,7044,1342],{"class":450},[337,7046,471],{"class":346},[337,7048,7050],{"class":339,"line":7049},105,[337,7051,392],{"emptyLinePlaceholder":39},[337,7053,7055,7057,7059,7061,7063,7065,7067,7069],{"class":339,"line":7054},106,[337,7056,3418],{"class":346},[337,7058,734],{"class":450},[337,7060,707],{"class":454},[337,7062,461],{"class":346},[337,7064,464],{"class":346},[337,7066,743],{"class":363},[337,7068,464],{"class":346},[337,7070,719],{"class":346},[337,7072,7074,7076,7079,7082,7084,7086,7089,7091],{"class":339,"line":7073},107,[337,7075,3418],{"class":346},[337,7077,7078],{"class":450},"TresAmbientLight",[337,7080,7081],{"class":454}," :intensity",[337,7083,461],{"class":346},[337,7085,464],{"class":346},[337,7087,7088],{"class":363},"0.5",[337,7090,464],{"class":346},[337,7092,719],{"class":346},[337,7094,7096,7098,7101,7103,7105,7107,7110,7112,7114,7116,7118,7120,7122],{"class":339,"line":7095},108,[337,7097,3418],{"class":346},[337,7099,7100],{"class":450},"TresDirectionalLight",[337,7102,1355],{"class":454},[337,7104,461],{"class":346},[337,7106,464],{"class":346},[337,7108,7109],{"class":363},"[0, 0, 5]",[337,7111,464],{"class":346},[337,7113,7081],{"class":454},[337,7115,461],{"class":346},[337,7117,464],{"class":346},[337,7119,7088],{"class":363},[337,7121,464],{"class":346},[337,7123,719],{"class":346},[337,7125,7127,7129,7131],{"class":339,"line":7126},109,[337,7128,3435],{"class":346},[337,7130,688],{"class":450},[337,7132,471],{"class":346},[337,7134,7136,7138,7140],{"class":339,"line":7135},110,[337,7137,752],{"class":346},[337,7139,1536],{"class":450},[337,7141,471],{"class":346},[337,7143,7145,7147,7149],{"class":339,"line":7144},111,[337,7146,526],{"class":346},[337,7148,543],{"class":450},[337,7150,471],{"class":346},[963,7152,7154],{"id":7153},"monitoring-values","Monitoring Values",[295,7156,7157],{},"You can also monitor values without making them editable:",[328,7159,7161],{"className":330,"code":7160,"language":333,"meta":270,"style":270},"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",[305,7162,7163,7178,7189,7200,7206,7210,7248,7276],{"__ignoreMap":270},[337,7164,7165,7167,7170,7172,7174,7176],{"class":339,"line":271},[337,7166,499],{"class":454},[337,7168,7169],{"class":350}," stats ",[337,7171,461],{"class":346},[337,7173,1110],{"class":398},[337,7175,402],{"class":350},[337,7177,1249],{"class":346},[337,7179,7180,7183,7185,7187],{"class":339,"line":272},[337,7181,7182],{"class":450},"  triangles",[337,7184,1873],{"class":346},[337,7186,5441],{"class":1275},[337,7188,3684],{"class":346},[337,7190,7191,7194,7196,7198],{"class":339,"line":389},[337,7192,7193],{"class":450},"  fps",[337,7195,1873],{"class":346},[337,7197,5441],{"class":1275},[337,7199,3684],{"class":346},[337,7201,7202,7204],{"class":339,"line":395},[337,7203,411],{"class":346},[337,7205,414],{"class":350},[337,7207,7208],{"class":339,"line":523},[337,7209,392],{"emptyLinePlaceholder":39},[337,7211,7212,7214,7217,7219,7221,7223,7225,7227,7229,7231,7233,7235,7237,7239,7242,7244,7246],{"class":339,"line":533},[337,7213,499],{"class":454},[337,7215,7216],{"class":350}," statsFolder ",[337,7218,461],{"class":346},[337,7220,5682],{"class":350},[337,7222,1162],{"class":346},[337,7224,1243],{"class":350},[337,7226,1162],{"class":346},[337,7228,5691],{"class":398},[337,7230,402],{"class":350},[337,7232,405],{"class":346},[337,7234,5698],{"class":450},[337,7236,1873],{"class":346},[337,7238,360],{"class":346},[337,7240,7241],{"class":363},"Statistics",[337,7243,1892],{"class":346},[337,7245,354],{"class":346},[337,7247,414],{"class":350},[337,7249,7250,7253,7255,7258,7261,7263,7265,7267,7269,7272,7274],{"class":339,"line":538},[337,7251,7252],{"class":350},"statsFolder",[337,7254,1162],{"class":346},[337,7256,7257],{"class":398},"addMonitor",[337,7259,7260],{"class":350},"(stats",[337,7262,1162],{"class":346},[337,7264,1243],{"class":350},[337,7266,507],{"class":346},[337,7268,360],{"class":346},[337,7270,7271],{"class":363},"triangles",[337,7273,1892],{"class":346},[337,7275,414],{"class":350},[337,7277,7278,7280,7282,7284,7286,7288,7290,7292,7294,7297,7299,7301,7303,7306,7308,7311,7313],{"class":339,"line":548},[337,7279,7252],{"class":350},[337,7281,1162],{"class":346},[337,7283,7257],{"class":398},[337,7285,7260],{"class":350},[337,7287,1162],{"class":346},[337,7289,1243],{"class":350},[337,7291,507],{"class":346},[337,7293,360],{"class":346},[337,7295,7296],{"class":363},"fps",[337,7298,1892],{"class":346},[337,7300,507],{"class":346},[337,7302,347],{"class":346},[337,7304,7305],{"class":450}," interval",[337,7307,1873],{"class":346},[337,7309,7310],{"class":1275}," 100",[337,7312,354],{"class":346},[337,7314,414],{"class":350},[262,7316,7318],{"id":7317},"cleanup","Cleanup",[295,7320,7321],{},"Don't forget to dispose of the pane when the component unmounts:",[328,7323,7325],{"className":330,"code":7324,"language":333,"meta":270,"style":270},"import { onUnmounted } from 'vue'\n\nonUnmounted(() => {\n  pane.value?.dispose()\n})\n",[305,7326,7327,7345,7349,7361,7375],{"__ignoreMap":270},[337,7328,7329,7331,7333,7335,7337,7339,7341,7343],{"class":339,"line":271},[337,7330,343],{"class":342},[337,7332,347],{"class":346},[337,7334,5302],{"class":350},[337,7336,354],{"class":346},[337,7338,357],{"class":342},[337,7340,360],{"class":346},[337,7342,440],{"class":363},[337,7344,367],{"class":346},[337,7346,7347],{"class":339,"line":272},[337,7348,392],{"emptyLinePlaceholder":39},[337,7350,7351,7353,7355,7357,7359],{"class":339,"line":389},[337,7352,6628],{"class":398},[337,7354,402],{"class":350},[337,7356,1038],{"class":346},[337,7358,1041],{"class":454},[337,7360,1044],{"class":346},[337,7362,7363,7365,7367,7369,7371,7373],{"class":339,"line":395},[337,7364,5609],{"class":350},[337,7366,1162],{"class":346},[337,7368,1243],{"class":350},[337,7370,2259],{"class":346},[337,7372,6650],{"class":398},[337,7374,520],{"class":450},[337,7376,7377,7379],{"class":339,"line":523},[337,7378,411],{"class":346},[337,7380,414],{"class":350},[927,7382,7383],{},[295,7384,7385],{},"Always dispose of the pane instance to prevent memory leaks, especially in SPAs where components are frequently mounted/unmounted.",[937,7387,7388],{},"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":270,"searchDepth":271,"depth":272,"links":7390},[7391,7392,7395],{"id":5151,"depth":272,"text":13},{"id":5256,"depth":272,"text":5257,"children":7393},[7394],{"id":7153,"depth":389,"text":7154},{"id":7317,"depth":272,"text":7318},"Learn how to integrate Tweakpane with TresJS for interactive 3D controls",{"thumbnail":7398},"/recipes/tweakpane.png",{"title":215,"description":7396},"enYczTtKAPukKJi-OyoE_F5e-DnPYPnWa2klh_M1lzc",{"id":7402,"title":219,"body":7403,"description":10443,"extension":276,"links":277,"meta":10444,"navigation":39,"path":220,"seo":10446,"stem":221,"__hash__":10447},"docs/5.cookbook/6.transition-dynamic.md",{"type":259,"value":7404,"toc":10441},[7405,7408,7426,9119,10438],[7406,7407],"examples-dynamic-transition",{},[295,7409,7410,7411,2459,7418,7425],{},"This recipe covers how to use ",[423,7412,7415],{"href":7413,"rel":7414},"https://vuejs.org/guide/built-ins/transition.html#transition",[427],[305,7416,7417],{},"\u003CTransition>",[423,7419,7422],{"href":7420,"rel":7421},"https://vuejs.org/guide/essentials/component-basics.html#dynamic-components",[427],[305,7423,7424],{},"Dynamic"," Vue built-in components.",[960,7427,7428,7432,7435,7642,7646,7649,7941,8246,8250,8258,8289,8631,8635,8644,8795,8798,9105,9108],{},[963,7429,7431],{"id":7430},"set-up-our-main-scene","Set up our main scene",[295,7433,7434],{},"Let's start with a simple scene.",[328,7436,7439],{"className":437,"code":7437,"filename":7438,"language":440,"meta":270,"style":270},"\u003Cscript setup>\nimport { TresCanvas } from '@tresjs/core'\n// import our two custom components\nimport Sphere from './Sphere.vue'\nimport Box from './Box.vue'\n\n\u003C/script>\n\u003Ctemplate>\n    \u003CTresCanvas window-size clear-color=\"#82DBC5\">\n      \u003CTresPerspectiveCamera\n        :position=\"[0, 0, 5]\"\n      />\n      \u003CTresAmbientLight :intensity=\"0.5\" />\n      \u003CTresDirectionalLight\n        :position=\"[5, 5, 5]\"\n        :intensity=\"1\"\n      />\n    \u003C/TresCanvas>\n\u003C/template>\n","main.vue",[305,7440,7441,7451,7469,7474,7490,7506,7510,7518,7526,7547,7554,7566,7571,7589,7596,7609,7622,7626,7634],{"__ignoreMap":270},[337,7442,7443,7445,7447,7449],{"class":339,"line":271},[337,7444,447],{"class":346},[337,7446,451],{"class":450},[337,7448,455],{"class":454},[337,7450,471],{"class":346},[337,7452,7453,7455,7457,7459,7461,7463,7465,7467],{"class":339,"line":272},[337,7454,343],{"class":342},[337,7456,347],{"class":346},[337,7458,635],{"class":350},[337,7460,354],{"class":346},[337,7462,357],{"class":342},[337,7464,360],{"class":346},[337,7466,364],{"class":363},[337,7468,367],{"class":346},[337,7470,7471],{"class":339,"line":389},[337,7472,7473],{"class":1049},"// import our two custom components\n",[337,7475,7476,7478,7481,7483,7485,7488],{"class":339,"line":395},[337,7477,343],{"class":342},[337,7479,7480],{"class":350}," Sphere ",[337,7482,654],{"class":342},[337,7484,360],{"class":346},[337,7486,7487],{"class":363},"./Sphere.vue",[337,7489,367],{"class":346},[337,7491,7492,7494,7497,7499,7501,7504],{"class":339,"line":523},[337,7493,343],{"class":342},[337,7495,7496],{"class":350}," Box ",[337,7498,654],{"class":342},[337,7500,360],{"class":346},[337,7502,7503],{"class":363},"./Box.vue",[337,7505,367],{"class":346},[337,7507,7508],{"class":339,"line":533},[337,7509,392],{"emptyLinePlaceholder":39},[337,7511,7512,7514,7516],{"class":339,"line":538},[337,7513,526],{"class":346},[337,7515,451],{"class":450},[337,7517,471],{"class":346},[337,7519,7520,7522,7524],{"class":339,"line":548},[337,7521,447],{"class":346},[337,7523,543],{"class":450},[337,7525,471],{"class":346},[337,7527,7528,7530,7532,7535,7537,7539,7541,7543,7545],{"class":339,"line":557},[337,7529,701],{"class":346},[337,7531,688],{"class":450},[337,7533,7534],{"class":454}," window-size",[337,7536,6754],{"class":454},[337,7538,461],{"class":346},[337,7540,464],{"class":346},[337,7542,6761],{"class":363},[337,7544,464],{"class":346},[337,7546,471],{"class":346},[337,7548,7549,7551],{"class":339,"line":573},[337,7550,3418],{"class":346},[337,7552,7553],{"class":450},"TresPerspectiveCamera\n",[337,7555,7556,7558,7560,7562,7564],{"class":339,"line":588},[337,7557,6828],{"class":454},[337,7559,461],{"class":346},[337,7561,464],{"class":346},[337,7563,7109],{"class":363},[337,7565,570],{"class":346},[337,7567,7568],{"class":339,"line":594},[337,7569,7570],{"class":346},"      />\n",[337,7572,7573,7575,7577,7579,7581,7583,7585,7587],{"class":339,"line":1252},[337,7574,3418],{"class":346},[337,7576,7078],{"class":450},[337,7578,7081],{"class":454},[337,7580,461],{"class":346},[337,7582,464],{"class":346},[337,7584,7088],{"class":363},[337,7586,464],{"class":346},[337,7588,719],{"class":346},[337,7590,7591,7593],{"class":339,"line":1279},[337,7592,3418],{"class":346},[337,7594,7595],{"class":450},"TresDirectionalLight\n",[337,7597,7598,7600,7602,7604,7607],{"class":339,"line":1301},[337,7599,6828],{"class":454},[337,7601,461],{"class":346},[337,7603,464],{"class":346},[337,7605,7606],{"class":363},"[5, 5, 5]",[337,7608,570],{"class":346},[337,7610,7611,7614,7616,7618,7620],{"class":339,"line":1307},[337,7612,7613],{"class":454},"        :intensity",[337,7615,461],{"class":346},[337,7617,464],{"class":346},[337,7619,2845],{"class":363},[337,7621,570],{"class":346},[337,7623,7624],{"class":339,"line":1314},[337,7625,7570],{"class":346},[337,7627,7628,7630,7632],{"class":339,"line":1323},[337,7629,3435],{"class":346},[337,7631,688],{"class":450},[337,7633,471],{"class":346},[337,7635,7636,7638,7640],{"class":339,"line":1328},[337,7637,526],{"class":346},[337,7639,543],{"class":450},[337,7641,471],{"class":346},[963,7643,7645],{"id":7644},"lets-create-two-simple-components","Let's create two simple components",[295,7647,7648],{},"I'm going to add some simple animation logic just to add a little more life.",[328,7650,7653],{"className":437,"code":7651,"filename":7652,"language":440,"meta":270,"style":270},"\u003Cscript setup>\nimport { shallowRef } from 'vue'\nimport { useLoop } from '@tresjs/core'\n\n// Retrieving the object\nconst boxRef = shallowRef()\n\nconst { onBeforeRender } = useLoop()\n\nonBeforeRender(({ elapsed }) => {\n  // little animation logic completely optional\n  if (boxRef.value) {\n    boxRef.value.rotation.y = elapsed * 0.5\n    boxRef.value.rotation.x = elapsed * 0.2\n  }\n})\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresMesh ref=\"boxRef\">\n    \u003CTresBoxGeometry :args=\"[1, 1, 1]\" />\n    \u003CTresMeshStandardMaterial color=\"orange\" transparent />\n  \u003C/TresMesh>\n\u003C/template>\n\n","Box.vue",[305,7654,7655,7665,7683,7701,7705,7710,7723,7727,7743,7747,7763,7768,7785,7811,7836,7840,7846,7854,7858,7866,7884,7902,7925,7933],{"__ignoreMap":270},[337,7656,7657,7659,7661,7663],{"class":339,"line":271},[337,7658,447],{"class":346},[337,7660,451],{"class":450},[337,7662,455],{"class":454},[337,7664,471],{"class":346},[337,7666,7667,7669,7671,7673,7675,7677,7679,7681],{"class":339,"line":272},[337,7668,343],{"class":342},[337,7670,347],{"class":346},[337,7672,3142],{"class":350},[337,7674,354],{"class":346},[337,7676,357],{"class":342},[337,7678,360],{"class":346},[337,7680,440],{"class":363},[337,7682,367],{"class":346},[337,7684,7685,7687,7689,7691,7693,7695,7697,7699],{"class":339,"line":389},[337,7686,343],{"class":342},[337,7688,347],{"class":346},[337,7690,993],{"class":350},[337,7692,354],{"class":346},[337,7694,357],{"class":342},[337,7696,360],{"class":346},[337,7698,364],{"class":363},[337,7700,367],{"class":346},[337,7702,7703],{"class":339,"line":395},[337,7704,392],{"emptyLinePlaceholder":39},[337,7706,7707],{"class":339,"line":523},[337,7708,7709],{"class":1049},"// Retrieving the object\n",[337,7711,7712,7714,7717,7719,7721],{"class":339,"line":533},[337,7713,499],{"class":454},[337,7715,7716],{"class":350}," boxRef ",[337,7718,461],{"class":346},[337,7720,3142],{"class":398},[337,7722,520],{"class":350},[337,7724,7725],{"class":339,"line":538},[337,7726,392],{"emptyLinePlaceholder":39},[337,7728,7729,7731,7733,7735,7737,7739,7741],{"class":339,"line":548},[337,7730,499],{"class":454},[337,7732,347],{"class":346},[337,7734,1016],{"class":350},[337,7736,411],{"class":346},[337,7738,515],{"class":346},[337,7740,993],{"class":398},[337,7742,520],{"class":350},[337,7744,7745],{"class":339,"line":557},[337,7746,392],{"emptyLinePlaceholder":39},[337,7748,7749,7751,7753,7755,7757,7759,7761],{"class":339,"line":573},[337,7750,1033],{"class":398},[337,7752,402],{"class":350},[337,7754,1450],{"class":346},[337,7756,1612],{"class":1453},[337,7758,1457],{"class":346},[337,7760,1041],{"class":454},[337,7762,1044],{"class":346},[337,7764,7765],{"class":339,"line":588},[337,7766,7767],{"class":1049},"  // little animation logic completely optional\n",[337,7769,7770,7772,7774,7777,7779,7781,7783],{"class":339,"line":594},[337,7771,1232],{"class":342},[337,7773,1235],{"class":450},[337,7775,7776],{"class":350},"boxRef",[337,7778,1162],{"class":346},[337,7780,1243],{"class":350},[337,7782,1246],{"class":450},[337,7784,1249],{"class":346},[337,7786,7787,7790,7792,7794,7796,7798,7800,7802,7804,7806,7808],{"class":339,"line":1252},[337,7788,7789],{"class":350},"    boxRef",[337,7791,1162],{"class":346},[337,7793,1243],{"class":350},[337,7795,1162],{"class":346},[337,7797,1264],{"class":350},[337,7799,1162],{"class":346},[337,7801,1294],{"class":350},[337,7803,515],{"class":346},[337,7805,1612],{"class":350},[337,7807,4385],{"class":346},[337,7809,7810],{"class":1275}," 0.5\n",[337,7812,7813,7815,7817,7819,7821,7823,7825,7827,7829,7831,7833],{"class":339,"line":1279},[337,7814,7789],{"class":350},[337,7816,1162],{"class":346},[337,7818,1243],{"class":350},[337,7820,1162],{"class":346},[337,7822,1264],{"class":350},[337,7824,1162],{"class":346},[337,7826,1269],{"class":350},[337,7828,515],{"class":346},[337,7830,1612],{"class":350},[337,7832,4385],{"class":346},[337,7834,7835],{"class":1275}," 0.2\n",[337,7837,7838],{"class":339,"line":1301},[337,7839,1304],{"class":346},[337,7841,7842,7844],{"class":339,"line":1307},[337,7843,411],{"class":346},[337,7845,414],{"class":350},[337,7847,7848,7850,7852],{"class":339,"line":1314},[337,7849,526],{"class":346},[337,7851,451],{"class":450},[337,7853,471],{"class":346},[337,7855,7856],{"class":339,"line":1323},[337,7857,392],{"emptyLinePlaceholder":39},[337,7859,7860,7862,7864],{"class":339,"line":1328},[337,7861,447],{"class":346},[337,7863,543],{"class":450},[337,7865,471],{"class":346},[337,7867,7868,7870,7872,7874,7876,7878,7880,7882],{"class":339,"line":1337},[337,7869,551],{"class":346},[337,7871,1342],{"class":450},[337,7873,1110],{"class":454},[337,7875,461],{"class":346},[337,7877,464],{"class":346},[337,7879,7776],{"class":363},[337,7881,464],{"class":346},[337,7883,471],{"class":346},[337,7885,7886,7888,7890,7892,7894,7896,7898,7900],{"class":339,"line":1369},[337,7887,701],{"class":346},[337,7889,1374],{"class":450},[337,7891,707],{"class":454},[337,7893,461],{"class":346},[337,7895,464],{"class":346},[337,7897,1383],{"class":363},[337,7899,464],{"class":346},[337,7901,719],{"class":346},[337,7903,7904,7906,7909,7911,7913,7915,7918,7920,7923],{"class":339,"line":1390},[337,7905,701],{"class":346},[337,7907,7908],{"class":450},"TresMeshStandardMaterial",[337,7910,6560],{"class":454},[337,7912,461],{"class":346},[337,7914,464],{"class":346},[337,7916,7917],{"class":363},"orange",[337,7919,464],{"class":346},[337,7921,7922],{"class":454}," transparent",[337,7924,719],{"class":346},[337,7926,7927,7929,7931],{"class":339,"line":1400},[337,7928,752],{"class":346},[337,7930,1342],{"class":450},[337,7932,471],{"class":346},[337,7934,7935,7937,7939],{"class":339,"line":1409},[337,7936,526],{"class":346},[337,7938,543],{"class":450},[337,7940,471],{"class":346},[328,7942,7945],{"className":437,"code":7943,"filename":7944,"language":440,"meta":270,"style":270},"\u003Cscript setup>\nimport { shallowRef } from 'vue'\nimport { useLoop } from '@tresjs/core'\n\nconst sphereRef = shallowRef()\n\nconst { onBeforeRender } = useLoop()\n\nonBeforeRender(({ elapsed }) => {\n  if (sphereRef.value) {\n    // Moving my sphere instead of rotating\n    sphereRef.value.position.y = Math.sin(elapsed) * 0.5\n    sphereRef.value.position.x = Math.cos(elapsed) * 0.2\n  }\n})\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresMesh ref=\"sphereRef\">\n    \u003CTresSphereGeometry :args=\"[1, 32]\" />\n    \u003CTresMeshStandardMaterial color=\"orange\" transparent />\n  \u003C/TresMesh>\n\u003C/template>\n","Sphere.vue",[305,7946,7947,7957,7975,7993,7997,8010,8014,8030,8034,8050,8067,8072,8107,8142,8146,8152,8160,8164,8172,8190,8210,8230,8238],{"__ignoreMap":270},[337,7948,7949,7951,7953,7955],{"class":339,"line":271},[337,7950,447],{"class":346},[337,7952,451],{"class":450},[337,7954,455],{"class":454},[337,7956,471],{"class":346},[337,7958,7959,7961,7963,7965,7967,7969,7971,7973],{"class":339,"line":272},[337,7960,343],{"class":342},[337,7962,347],{"class":346},[337,7964,3142],{"class":350},[337,7966,354],{"class":346},[337,7968,357],{"class":342},[337,7970,360],{"class":346},[337,7972,440],{"class":363},[337,7974,367],{"class":346},[337,7976,7977,7979,7981,7983,7985,7987,7989,7991],{"class":339,"line":389},[337,7978,343],{"class":342},[337,7980,347],{"class":346},[337,7982,993],{"class":350},[337,7984,354],{"class":346},[337,7986,357],{"class":342},[337,7988,360],{"class":346},[337,7990,364],{"class":363},[337,7992,367],{"class":346},[337,7994,7995],{"class":339,"line":395},[337,7996,392],{"emptyLinePlaceholder":39},[337,7998,7999,8001,8004,8006,8008],{"class":339,"line":523},[337,8000,499],{"class":454},[337,8002,8003],{"class":350}," sphereRef ",[337,8005,461],{"class":346},[337,8007,3142],{"class":398},[337,8009,520],{"class":350},[337,8011,8012],{"class":339,"line":533},[337,8013,392],{"emptyLinePlaceholder":39},[337,8015,8016,8018,8020,8022,8024,8026,8028],{"class":339,"line":538},[337,8017,499],{"class":454},[337,8019,347],{"class":346},[337,8021,1016],{"class":350},[337,8023,411],{"class":346},[337,8025,515],{"class":346},[337,8027,993],{"class":398},[337,8029,520],{"class":350},[337,8031,8032],{"class":339,"line":548},[337,8033,392],{"emptyLinePlaceholder":39},[337,8035,8036,8038,8040,8042,8044,8046,8048],{"class":339,"line":557},[337,8037,1033],{"class":398},[337,8039,402],{"class":350},[337,8041,1450],{"class":346},[337,8043,1612],{"class":1453},[337,8045,1457],{"class":346},[337,8047,1041],{"class":454},[337,8049,1044],{"class":346},[337,8051,8052,8054,8056,8059,8061,8063,8065],{"class":339,"line":573},[337,8053,1232],{"class":342},[337,8055,1235],{"class":450},[337,8057,8058],{"class":350},"sphereRef",[337,8060,1162],{"class":346},[337,8062,1243],{"class":350},[337,8064,1246],{"class":450},[337,8066,1249],{"class":346},[337,8068,8069],{"class":339,"line":588},[337,8070,8071],{"class":1049},"    // Moving my sphere instead of rotating\n",[337,8073,8074,8077,8079,8081,8083,8085,8087,8089,8091,8093,8095,8097,8099,8101,8103,8105],{"class":339,"line":594},[337,8075,8076],{"class":350},"    sphereRef",[337,8078,1162],{"class":346},[337,8080,1243],{"class":350},[337,8082,1162],{"class":346},[337,8084,1647],{"class":350},[337,8086,1162],{"class":346},[337,8088,1294],{"class":350},[337,8090,515],{"class":346},[337,8092,1656],{"class":350},[337,8094,1162],{"class":346},[337,8096,1661],{"class":398},[337,8098,402],{"class":450},[337,8100,1588],{"class":350},[337,8102,1246],{"class":450},[337,8104,1670],{"class":346},[337,8106,7810],{"class":1275},[337,8108,8109,8111,8113,8115,8117,8119,8121,8123,8125,8127,8129,8132,8134,8136,8138,8140],{"class":339,"line":1252},[337,8110,8076],{"class":350},[337,8112,1162],{"class":346},[337,8114,1243],{"class":350},[337,8116,1162],{"class":346},[337,8118,1647],{"class":350},[337,8120,1162],{"class":346},[337,8122,1269],{"class":350},[337,8124,515],{"class":346},[337,8126,1656],{"class":350},[337,8128,1162],{"class":346},[337,8130,8131],{"class":398},"cos",[337,8133,402],{"class":450},[337,8135,1588],{"class":350},[337,8137,1246],{"class":450},[337,8139,1670],{"class":346},[337,8141,7835],{"class":1275},[337,8143,8144],{"class":339,"line":1279},[337,8145,1304],{"class":346},[337,8147,8148,8150],{"class":339,"line":1301},[337,8149,411],{"class":346},[337,8151,414],{"class":350},[337,8153,8154,8156,8158],{"class":339,"line":1307},[337,8155,526],{"class":346},[337,8157,451],{"class":450},[337,8159,471],{"class":346},[337,8161,8162],{"class":339,"line":1314},[337,8163,392],{"emptyLinePlaceholder":39},[337,8165,8166,8168,8170],{"class":339,"line":1323},[337,8167,447],{"class":346},[337,8169,543],{"class":450},[337,8171,471],{"class":346},[337,8173,8174,8176,8178,8180,8182,8184,8186,8188],{"class":339,"line":1328},[337,8175,551],{"class":346},[337,8177,1342],{"class":450},[337,8179,1110],{"class":454},[337,8181,461],{"class":346},[337,8183,464],{"class":346},[337,8185,8058],{"class":363},[337,8187,464],{"class":346},[337,8189,471],{"class":346},[337,8191,8192,8194,8197,8199,8201,8203,8206,8208],{"class":339,"line":1337},[337,8193,701],{"class":346},[337,8195,8196],{"class":450},"TresSphereGeometry",[337,8198,707],{"class":454},[337,8200,461],{"class":346},[337,8202,464],{"class":346},[337,8204,8205],{"class":363},"[1, 32]",[337,8207,464],{"class":346},[337,8209,719],{"class":346},[337,8211,8212,8214,8216,8218,8220,8222,8224,8226,8228],{"class":339,"line":1369},[337,8213,701],{"class":346},[337,8215,7908],{"class":450},[337,8217,6560],{"class":454},[337,8219,461],{"class":346},[337,8221,464],{"class":346},[337,8223,7917],{"class":363},[337,8225,464],{"class":346},[337,8227,7922],{"class":454},[337,8229,719],{"class":346},[337,8231,8232,8234,8236],{"class":339,"line":1390},[337,8233,752],{"class":346},[337,8235,1342],{"class":450},[337,8237,471],{"class":346},[337,8239,8240,8242,8244],{"class":339,"line":1400},[337,8241,526],{"class":346},[337,8243,543],{"class":450},[337,8245,471],{"class":346},[963,8247,8249],{"id":8248},"using-vue-dynamic-components","Using Vue dynamic components",[295,8251,8252,8253,8257],{},"You can use ",[423,8254,8256],{"href":7420,"rel":8255},[427],"dynamic components"," just as you would in Vue.js. There are several ways to do this, but here we’ll follow the official Vue example.",[1714,8259,8260,8267,8279,8282],{},[1717,8261,8262,8263,8266],{},"First, we create a ref that contains our ",[976,8264,8265],{},"current"," component name.",[1717,8268,8269,8270,1162],{},"Then we create another object that will contain ",[976,8271,8272,8273,8275,8276,2714],{},"all our ",[337,8274,8256],{},".(",[423,8277,7420],{"href":7420,"rel":8278},[427],[1717,8280,8281],{},"After that, we can define a simple function to change our ref to the new component.",[1717,8283,8284,8285,8288],{},"Don't forget to add the ",[305,8286,8287],{},"\u003Ccomponent :is=\"meshes[current]\" />"," to our scene.",[328,8290,8293],{"className":437,"code":8291,"filename":7438,"highlights":8292,"language":440,"meta":270,"style":270},"\u003Cscript setup>\nimport { ref } from 'vue'\nimport { TresCanvas } from '@tresjs/core'\nimport Sphere from './Sphere.vue'\nimport Box from './Box.vue'\n\n\nconst current = ref('Box')\nconst meshes = {\n  Box,\n  Sphere,\n}\nconst handleComponents = (component) => {\n  current.value = component\n}\n\u003C/script>\n\u003Ctemplate>\n    \u003CTresCanvas window-size clear-color=\"#82DBC5\">\n      \u003CTresPerspectiveCamera\n        :position=\"[0, 0, 5]\"\n      />\n      \u003C!-- Dynamic component -->\n      \u003Ccomponent :is=\"meshes[current]\" />\n\n      \u003CTresAmbientLight :intensity=\"0.5\" />\n      \u003CTresDirectionalLight\n        :position=\"[5, 5, 5]\"\n        :intensity=\"1\"\n      />\n    \u003C/TresCanvas>\n\u003C/template>\n",[538,548,557,573,588,594,1252,1279,1400],[305,8294,8295,8305,8323,8341,8355,8369,8373,8379,8402,8414,8422,8430,8435,8456,8471,8475,8483,8491,8511,8517,8529,8533,8538,8559,8563,8581,8587,8599,8611,8615,8623],{"__ignoreMap":270},[337,8296,8297,8299,8301,8303],{"class":339,"line":271},[337,8298,447],{"class":346},[337,8300,451],{"class":450},[337,8302,455],{"class":454},[337,8304,471],{"class":346},[337,8306,8307,8309,8311,8313,8315,8317,8319,8321],{"class":339,"line":272},[337,8308,343],{"class":342},[337,8310,347],{"class":346},[337,8312,1110],{"class":350},[337,8314,354],{"class":346},[337,8316,357],{"class":342},[337,8318,360],{"class":346},[337,8320,440],{"class":363},[337,8322,367],{"class":346},[337,8324,8325,8327,8329,8331,8333,8335,8337,8339],{"class":339,"line":389},[337,8326,343],{"class":342},[337,8328,347],{"class":346},[337,8330,635],{"class":350},[337,8332,354],{"class":346},[337,8334,357],{"class":342},[337,8336,360],{"class":346},[337,8338,364],{"class":363},[337,8340,367],{"class":346},[337,8342,8343,8345,8347,8349,8351,8353],{"class":339,"line":395},[337,8344,343],{"class":342},[337,8346,7480],{"class":350},[337,8348,654],{"class":342},[337,8350,360],{"class":346},[337,8352,7487],{"class":363},[337,8354,367],{"class":346},[337,8356,8357,8359,8361,8363,8365,8367],{"class":339,"line":523},[337,8358,343],{"class":342},[337,8360,7496],{"class":350},[337,8362,654],{"class":342},[337,8364,360],{"class":346},[337,8366,7503],{"class":363},[337,8368,367],{"class":346},[337,8370,8371],{"class":339,"line":533},[337,8372,392],{"emptyLinePlaceholder":39},[337,8374,8377],{"class":8375,"line":538},[339,8376],"highlight",[337,8378,392],{"emptyLinePlaceholder":39},[337,8380,8382,8384,8387,8389,8391,8393,8395,8398,8400],{"class":8381,"line":548},[339,8376],[337,8383,499],{"class":454},[337,8385,8386],{"class":350}," current ",[337,8388,461],{"class":346},[337,8390,1110],{"class":398},[337,8392,402],{"class":350},[337,8394,1892],{"class":346},[337,8396,8397],{"class":363},"Box",[337,8399,1892],{"class":346},[337,8401,414],{"class":350},[337,8403,8405,8407,8410,8412],{"class":8404,"line":557},[339,8376],[337,8406,499],{"class":454},[337,8408,8409],{"class":350}," meshes ",[337,8411,461],{"class":346},[337,8413,1044],{"class":346},[337,8415,8417,8420],{"class":8416,"line":573},[339,8376],[337,8418,8419],{"class":350},"  Box",[337,8421,3684],{"class":346},[337,8423,8425,8428],{"class":8424,"line":588},[339,8376],[337,8426,8427],{"class":350},"  Sphere",[337,8429,3684],{"class":346},[337,8431,8433],{"class":8432,"line":594},[339,8376],[337,8434,2898],{"class":346},[337,8436,8438,8440,8443,8445,8447,8450,8452,8454],{"class":8437,"line":1252},[339,8376],[337,8439,499],{"class":454},[337,8441,8442],{"class":350}," handleComponents ",[337,8444,461],{"class":346},[337,8446,1235],{"class":346},[337,8448,8449],{"class":1453},"component",[337,8451,2714],{"class":346},[337,8453,1041],{"class":454},[337,8455,1044],{"class":346},[337,8457,8459,8462,8464,8466,8468],{"class":8458,"line":1279},[339,8376],[337,8460,8461],{"class":350},"  current",[337,8463,1162],{"class":346},[337,8465,1243],{"class":350},[337,8467,515],{"class":346},[337,8469,8470],{"class":350}," component\n",[337,8472,8473],{"class":339,"line":1301},[337,8474,2898],{"class":346},[337,8476,8477,8479,8481],{"class":339,"line":1307},[337,8478,526],{"class":346},[337,8480,451],{"class":450},[337,8482,471],{"class":346},[337,8484,8485,8487,8489],{"class":339,"line":1314},[337,8486,447],{"class":346},[337,8488,543],{"class":450},[337,8490,471],{"class":346},[337,8492,8493,8495,8497,8499,8501,8503,8505,8507,8509],{"class":339,"line":1323},[337,8494,701],{"class":346},[337,8496,688],{"class":450},[337,8498,7534],{"class":454},[337,8500,6754],{"class":454},[337,8502,461],{"class":346},[337,8504,464],{"class":346},[337,8506,6761],{"class":363},[337,8508,464],{"class":346},[337,8510,471],{"class":346},[337,8512,8513,8515],{"class":339,"line":1328},[337,8514,3418],{"class":346},[337,8516,7553],{"class":450},[337,8518,8519,8521,8523,8525,8527],{"class":339,"line":1337},[337,8520,6828],{"class":454},[337,8522,461],{"class":346},[337,8524,464],{"class":346},[337,8526,7109],{"class":363},[337,8528,570],{"class":346},[337,8530,8531],{"class":339,"line":1369},[337,8532,7570],{"class":346},[337,8534,8535],{"class":339,"line":1390},[337,8536,8537],{"class":1049},"      \u003C!-- Dynamic component -->\n",[337,8539,8541,8543,8545,8548,8550,8552,8555,8557],{"class":8540,"line":1400},[339,8376],[337,8542,3418],{"class":346},[337,8544,8449],{"class":450},[337,8546,8547],{"class":454}," :is",[337,8549,461],{"class":346},[337,8551,464],{"class":346},[337,8553,8554],{"class":363},"meshes[current]",[337,8556,464],{"class":346},[337,8558,719],{"class":346},[337,8560,8561],{"class":339,"line":1409},[337,8562,392],{"emptyLinePlaceholder":39},[337,8564,8565,8567,8569,8571,8573,8575,8577,8579],{"class":339,"line":2860},[337,8566,3418],{"class":346},[337,8568,7078],{"class":450},[337,8570,7081],{"class":454},[337,8572,461],{"class":346},[337,8574,464],{"class":346},[337,8576,7088],{"class":363},[337,8578,464],{"class":346},[337,8580,719],{"class":346},[337,8582,8583,8585],{"class":339,"line":2875},[337,8584,3418],{"class":346},[337,8586,7595],{"class":450},[337,8588,8589,8591,8593,8595,8597],{"class":339,"line":2880},[337,8590,6828],{"class":454},[337,8592,461],{"class":346},[337,8594,464],{"class":346},[337,8596,7606],{"class":363},[337,8598,570],{"class":346},[337,8600,8601,8603,8605,8607,8609],{"class":339,"line":2895},[337,8602,7613],{"class":454},[337,8604,461],{"class":346},[337,8606,464],{"class":346},[337,8608,2845],{"class":363},[337,8610,570],{"class":346},[337,8612,8613],{"class":339,"line":2901},[337,8614,7570],{"class":346},[337,8616,8617,8619,8621],{"class":339,"line":2906},[337,8618,3435],{"class":346},[337,8620,688],{"class":450},[337,8622,471],{"class":346},[337,8624,8625,8627,8629],{"class":339,"line":2912},[337,8626,526],{"class":346},[337,8628,543],{"class":450},[337,8630,471],{"class":346},[963,8632,8634],{"id":8633},"adding-ui-controls-to-switch-components","Adding UI controls to switch components",[295,8636,8637,8638,8640,8641],{},"To be able to switch between components, lets add a floating UI containing buttons to change between the ",[976,8639,8397],{}," and the ",[976,8642,8643],{},"Sphere",[328,8645,8647],{"className":437,"code":8646,"language":440,"meta":270,"style":270},"\u003Ctemplate>\n  \u003Cdiv class=\"floating-container\">\n    \u003Cbutton\n      :class=\"{ isActive: meshes[current] === Box }\"\n      @click=\"handleComponents('Box')\"\n    >\n        Cube\n    \u003C/button>\n    \u003Cbutton\n      :class=\"{ isActive: meshes[current] === Sphere }\"\n      @click=\"handleComponents('Sphere')\"\n    >\n       Sphere\n    \u003C/button>\n\u003C/div>\n\u003C/template>\n",[305,8648,8649,8657,8676,8683,8697,8711,8716,8721,8730,8736,8749,8762,8766,8771,8779,8787],{"__ignoreMap":270},[337,8650,8651,8653,8655],{"class":339,"line":271},[337,8652,447],{"class":346},[337,8654,543],{"class":450},[337,8656,471],{"class":346},[337,8658,8659,8661,8663,8665,8667,8669,8672,8674],{"class":339,"line":272},[337,8660,551],{"class":346},[337,8662,1536],{"class":450},[337,8664,6692],{"class":454},[337,8666,461],{"class":346},[337,8668,464],{"class":346},[337,8670,8671],{"class":363},"floating-container",[337,8673,464],{"class":346},[337,8675,471],{"class":346},[337,8677,8678,8680],{"class":339,"line":389},[337,8679,701],{"class":346},[337,8681,8682],{"class":450},"button\n",[337,8684,8685,8688,8690,8692,8695],{"class":339,"line":395},[337,8686,8687],{"class":454},"      :class",[337,8689,461],{"class":346},[337,8691,464],{"class":346},[337,8693,8694],{"class":363},"{ isActive: meshes[current] === Box }",[337,8696,570],{"class":346},[337,8698,8699,8702,8704,8706,8709],{"class":339,"line":523},[337,8700,8701],{"class":454},"      @click",[337,8703,461],{"class":346},[337,8705,464],{"class":346},[337,8707,8708],{"class":363},"handleComponents('Box')",[337,8710,570],{"class":346},[337,8712,8713],{"class":339,"line":533},[337,8714,8715],{"class":346},"    >\n",[337,8717,8718],{"class":339,"line":538},[337,8719,8720],{"class":350},"        Cube\n",[337,8722,8723,8725,8728],{"class":339,"line":548},[337,8724,3435],{"class":346},[337,8726,8727],{"class":450},"button",[337,8729,471],{"class":346},[337,8731,8732,8734],{"class":339,"line":557},[337,8733,701],{"class":346},[337,8735,8682],{"class":450},[337,8737,8738,8740,8742,8744,8747],{"class":339,"line":573},[337,8739,8687],{"class":454},[337,8741,461],{"class":346},[337,8743,464],{"class":346},[337,8745,8746],{"class":363},"{ isActive: meshes[current] === Sphere }",[337,8748,570],{"class":346},[337,8750,8751,8753,8755,8757,8760],{"class":339,"line":588},[337,8752,8701],{"class":454},[337,8754,461],{"class":346},[337,8756,464],{"class":346},[337,8758,8759],{"class":363},"handleComponents('Sphere')",[337,8761,570],{"class":346},[337,8763,8764],{"class":339,"line":594},[337,8765,8715],{"class":346},[337,8767,8768],{"class":339,"line":1252},[337,8769,8770],{"class":350},"       Sphere\n",[337,8772,8773,8775,8777],{"class":339,"line":1279},[337,8774,3435],{"class":346},[337,8776,8727],{"class":450},[337,8778,471],{"class":346},[337,8780,8781,8783,8785],{"class":339,"line":1301},[337,8782,526],{"class":346},[337,8784,1536],{"class":450},[337,8786,471],{"class":346},[337,8788,8789,8791,8793],{"class":339,"line":1307},[337,8790,526],{"class":346},[337,8792,543],{"class":450},[337,8794,471],{"class":346},[295,8796,8797],{},"Let's add a little CSS.",[328,8799,8801],{"className":437,"code":8800,"language":440,"meta":270,"style":270},"\u003Cstyle scoped>\n.floating-container {\n  position: absolute;\n  top: 0;\n  left: 50%;\n  z-index: 10;\n  background-color: #f7f7f7;\n  color: #333;\n  border-radius: 8px;\n  padding: 0.25rem;\n  display: flex;\n  gap: 0.25rem;\n  transform: translateX(-50%);\n  button {\n    padding: 8px 16px;\n    border: none;\n    background-color: #4caf50;\n    color: white;\n    cursor: pointer;\n    border-radius: 4px;\n    font-size: 14px;\n  }\n}\n\nbutton.isActive {\n  background-color: #388e3c;\n}\n\u003C/style>\n",[305,8802,8803,8814,8822,8836,8847,8859,8871,8886,8899,8911,8923,8935,8946,8964,8969,8983,8995,9009,9021,9033,9045,9057,9061,9065,9069,9080,9093,9097],{"__ignoreMap":270},[337,8804,8805,8807,8809,8812],{"class":339,"line":271},[337,8806,447],{"class":346},[337,8808,937],{"class":450},[337,8810,8811],{"class":454}," scoped",[337,8813,471],{"class":346},[337,8815,8816,8818,8820],{"class":339,"line":272},[337,8817,1162],{"class":346},[337,8819,8671],{"class":1158},[337,8821,1044],{"class":346},[337,8823,8824,8828,8830,8833],{"class":339,"line":389},[337,8825,8827],{"class":8826},"sqsOY","  position",[337,8829,1873],{"class":346},[337,8831,8832],{"class":350}," absolute",[337,8834,8835],{"class":346},";\n",[337,8837,8838,8841,8843,8845],{"class":339,"line":395},[337,8839,8840],{"class":8826},"  top",[337,8842,1873],{"class":346},[337,8844,5441],{"class":1275},[337,8846,8835],{"class":346},[337,8848,8849,8852,8854,8857],{"class":339,"line":523},[337,8850,8851],{"class":8826},"  left",[337,8853,1873],{"class":346},[337,8855,8856],{"class":1275}," 50%",[337,8858,8835],{"class":346},[337,8860,8861,8864,8866,8869],{"class":339,"line":533},[337,8862,8863],{"class":8826},"  z-index",[337,8865,1873],{"class":346},[337,8867,8868],{"class":1275}," 10",[337,8870,8835],{"class":346},[337,8872,8873,8876,8878,8881,8884],{"class":339,"line":538},[337,8874,8875],{"class":8826},"  background-color",[337,8877,1873],{"class":346},[337,8879,8880],{"class":346}," #",[337,8882,8883],{"class":350},"f7f7f7",[337,8885,8835],{"class":346},[337,8887,8888,8890,8892,8894,8897],{"class":339,"line":548},[337,8889,5514],{"class":8826},[337,8891,1873],{"class":346},[337,8893,8880],{"class":346},[337,8895,8896],{"class":350},"333",[337,8898,8835],{"class":346},[337,8900,8901,8904,8906,8909],{"class":339,"line":557},[337,8902,8903],{"class":8826},"  border-radius",[337,8905,1873],{"class":346},[337,8907,8908],{"class":1275}," 8px",[337,8910,8835],{"class":346},[337,8912,8913,8916,8918,8921],{"class":339,"line":573},[337,8914,8915],{"class":8826},"  padding",[337,8917,1873],{"class":346},[337,8919,8920],{"class":1275}," 0.25rem",[337,8922,8835],{"class":346},[337,8924,8925,8928,8930,8933],{"class":339,"line":588},[337,8926,8927],{"class":8826},"  display",[337,8929,1873],{"class":346},[337,8931,8932],{"class":350}," flex",[337,8934,8835],{"class":346},[337,8936,8937,8940,8942,8944],{"class":339,"line":594},[337,8938,8939],{"class":8826},"  gap",[337,8941,1873],{"class":346},[337,8943,8920],{"class":1275},[337,8945,8835],{"class":346},[337,8947,8948,8951,8953,8956,8958,8961],{"class":339,"line":1252},[337,8949,8950],{"class":8826},"  transform",[337,8952,1873],{"class":346},[337,8954,8955],{"class":398}," translateX",[337,8957,402],{"class":346},[337,8959,8960],{"class":1275},"-50%",[337,8962,8963],{"class":346},");\n",[337,8965,8966],{"class":339,"line":1279},[337,8967,8968],{"class":350},"  button {\n",[337,8970,8971,8974,8976,8978,8981],{"class":339,"line":1301},[337,8972,8973],{"class":8826},"    padding",[337,8975,1873],{"class":346},[337,8977,8908],{"class":1275},[337,8979,8980],{"class":1275}," 16px",[337,8982,8835],{"class":346},[337,8984,8985,8988,8990,8993],{"class":339,"line":1307},[337,8986,8987],{"class":8826},"    border",[337,8989,1873],{"class":346},[337,8991,8992],{"class":350}," none",[337,8994,8835],{"class":346},[337,8996,8997,9000,9002,9004,9007],{"class":339,"line":1314},[337,8998,8999],{"class":8826},"    background-color",[337,9001,1873],{"class":346},[337,9003,8880],{"class":346},[337,9005,9006],{"class":350},"4caf50",[337,9008,8835],{"class":346},[337,9010,9011,9014,9016,9019],{"class":339,"line":1323},[337,9012,9013],{"class":8826},"    color",[337,9015,1873],{"class":346},[337,9017,9018],{"class":350}," white",[337,9020,8835],{"class":346},[337,9022,9023,9026,9028,9031],{"class":339,"line":1328},[337,9024,9025],{"class":8826},"    cursor",[337,9027,1873],{"class":346},[337,9029,9030],{"class":350}," pointer",[337,9032,8835],{"class":346},[337,9034,9035,9038,9040,9043],{"class":339,"line":1337},[337,9036,9037],{"class":8826},"    border-radius",[337,9039,1873],{"class":346},[337,9041,9042],{"class":1275}," 4px",[337,9044,8835],{"class":346},[337,9046,9047,9050,9052,9055],{"class":339,"line":1369},[337,9048,9049],{"class":8826},"    font-size",[337,9051,1873],{"class":346},[337,9053,9054],{"class":1275}," 14px",[337,9056,8835],{"class":346},[337,9058,9059],{"class":339,"line":1390},[337,9060,1304],{"class":346},[337,9062,9063],{"class":339,"line":1400},[337,9064,2898],{"class":350},[337,9066,9067],{"class":339,"line":1409},[337,9068,392],{"emptyLinePlaceholder":39},[337,9070,9071,9073,9075,9078],{"class":339,"line":2860},[337,9072,8727],{"class":1158},[337,9074,1162],{"class":346},[337,9076,9077],{"class":1158},"isActive",[337,9079,1044],{"class":346},[337,9081,9082,9084,9086,9088,9091],{"class":339,"line":2875},[337,9083,8875],{"class":8826},[337,9085,1873],{"class":346},[337,9087,8880],{"class":346},[337,9089,9090],{"class":350},"388e3c",[337,9092,8835],{"class":346},[337,9094,9095],{"class":339,"line":2880},[337,9096,2898],{"class":346},[337,9098,9099,9101,9103],{"class":339,"line":2895},[337,9100,526],{"class":346},[337,9102,937],{"class":450},[337,9104,471],{"class":346},[9106,9107],"examples-dynamic-transition-only-dynamic",{},[9109,9110,9111],"prose-note",{},[295,9112,8252,9113,9118],{},[423,9114,9117],{"href":9115,"rel":9116},"https://vuejs.org/guide/built-ins/keep-alive.html#keepalive",[427],"KeepAlive"," if you want component instances to be cached and preserved between component switches",[960,9120,9121,9125,9135,9151,9159,9174,9179,9233,9237,9252,9325,9329,9336,9374,9382,9537,9550,9554],{},[262,9122,9124],{"id":9123},"adding-transitions","Adding transitions",[963,9126,9128,9129],{"id":9127},"wrap-the-component-inside-the-transition","Wrap the component inside the ",[423,9130,9132],{"href":7413,"rel":9131},[427],[305,9133,9134],{},"\u003Ctransition>",[295,9136,9137,9138,2459,9145,9150],{},"Once we know the power of using dynamic components, we can create more interactive scenes using built-in Vue components! Now let's add a little animation using ",[423,9139,9142],{"href":9140,"rel":9141},"https://gsap.com/",[427],[305,9143,9144],{},"GSAP",[423,9146,9148],{"href":7413,"rel":9147},[427],[305,9149,7417],{}," components.",[295,9152,9153,9154,1162],{},"For that, the first step is to wrap our dynamic component in a ",[423,9155,9157],{"href":7413,"rel":9156},[427],[305,9158,7417],{},[295,9160,9161,9162,9165,9166,9169,9170,9173],{},"Very important: we need to tell our component that we're going to handle our animations using ",[305,9163,9164],{},"JS",", not ",[305,9167,9168],{},"CSS",", by using the prop ",[305,9171,9172],{},":css=\"false\"",". Otherwise, the component will search for a DOM element and will fail.",[9109,9175,9176],{},[295,9177,9178],{},"Elements inside Tres.js live inside a canvas, not in the DOM.",[328,9180,9184],{"className":9181,"code":9182,"language":9183,"meta":270,"style":270},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003CTransition :css=\"false\">\n  \u003Ccomponent :is=\"meshes[current]\" />\n\u003C/Transition>\n","html",[305,9185,9186,9207,9225],{"__ignoreMap":270},[337,9187,9188,9190,9193,9196,9198,9200,9203,9205],{"class":339,"line":271},[337,9189,447],{"class":346},[337,9191,9192],{"class":450},"Transition",[337,9194,9195],{"class":454}," :css",[337,9197,461],{"class":346},[337,9199,464],{"class":346},[337,9201,9202],{"class":363},"false",[337,9204,464],{"class":346},[337,9206,471],{"class":346},[337,9208,9209,9211,9213,9215,9217,9219,9221,9223],{"class":339,"line":272},[337,9210,551],{"class":346},[337,9212,8449],{"class":450},[337,9214,8547],{"class":454},[337,9216,461],{"class":346},[337,9218,464],{"class":346},[337,9220,8554],{"class":363},[337,9222,464],{"class":346},[337,9224,719],{"class":346},[337,9226,9227,9229,9231],{"class":339,"line":389},[337,9228,526],{"class":346},[337,9230,9192],{"class":450},[337,9232,471],{"class":346},[963,9234,9236],{"id":9235},"using-js-hooks","Using JS hooks",[295,9238,9239,9240,9245,9246,2459,9249,1162],{},"Then we can use the provided ",[423,9241,9244],{"href":9242,"rel":9243},"https://vuejs.org/guide/built-ins/transition.html#javascript-hooks",[427],"JS hooks","; in this demo, we're going to use ",[305,9247,9248],{},"@enter",[305,9250,9251],{},"@leave",[328,9253,9255],{"className":9181,"code":9254,"language":9183,"meta":270,"style":270},"\u003CTransition :css=\"false\" @enter=\"onEnter\" @leave=\"onLeave\">\n  \u003Ccomponent :is=\"meshes[current]\" />\n\u003C/Transition>\n",[305,9256,9257,9299,9317],{"__ignoreMap":270},[337,9258,9259,9261,9263,9265,9267,9269,9271,9273,9276,9278,9280,9283,9285,9288,9290,9292,9295,9297],{"class":339,"line":271},[337,9260,447],{"class":346},[337,9262,9192],{"class":450},[337,9264,9195],{"class":454},[337,9266,461],{"class":346},[337,9268,464],{"class":346},[337,9270,9202],{"class":363},[337,9272,464],{"class":346},[337,9274,9275],{"class":454}," @enter",[337,9277,461],{"class":346},[337,9279,464],{"class":346},[337,9281,9282],{"class":363},"onEnter",[337,9284,464],{"class":346},[337,9286,9287],{"class":454}," @leave",[337,9289,461],{"class":346},[337,9291,464],{"class":346},[337,9293,9294],{"class":363},"onLeave",[337,9296,464],{"class":346},[337,9298,471],{"class":346},[337,9300,9301,9303,9305,9307,9309,9311,9313,9315],{"class":339,"line":272},[337,9302,551],{"class":346},[337,9304,8449],{"class":450},[337,9306,8547],{"class":454},[337,9308,461],{"class":346},[337,9310,464],{"class":346},[337,9312,8554],{"class":363},[337,9314,464],{"class":346},[337,9316,719],{"class":346},[337,9318,9319,9321,9323],{"class":339,"line":389},[337,9320,526],{"class":346},[337,9322,9192],{"class":450},[337,9324,471],{"class":346},[963,9326,9328],{"id":9327},"now-its-time-to-animate","Now it's time to animate!",[295,9330,9331,9332,9335],{},"In case you haven't installed it already, install ",[423,9333,9144],{"href":9140,"rel":9334},[427]," as a dependency in your project:",[433,9337,9338,9350,9362],{},[328,9339,9340],{"className":1780,"code":3078,"filename":1789,"language":1782,"meta":270,"style":270},[305,9341,9342],{"__ignoreMap":270},[337,9343,9344,9346,9348],{"class":339,"line":271},[337,9345,1789],{"class":1158},[337,9347,1792],{"class":363},[337,9349,3089],{"class":363},[328,9351,9352],{"className":1780,"code":3092,"filename":3093,"language":1782,"meta":270,"style":270},[305,9353,9354],{"__ignoreMap":270},[337,9355,9356,9358,9360],{"class":339,"line":271},[337,9357,3093],{"class":1158},[337,9359,3102],{"class":363},[337,9361,3089],{"class":363},[328,9363,9364],{"className":1780,"code":3107,"filename":3108,"language":1782,"meta":270,"style":270},[305,9365,9366],{"__ignoreMap":270},[337,9367,9368,9370,9372],{"class":339,"line":271},[337,9369,3108],{"class":1158},[337,9371,1792],{"class":363},[337,9373,3089],{"class":363},[295,9375,9376,9377,2459,9379,9381],{},"In our ",[305,9378,9282],{},[305,9380,9294],{}," functions, we put our desired animations. As the names indicate, one controls when the element enters the scene and the other when it leaves.",[328,9383,9387],{"className":9384,"code":9385,"language":9386,"meta":270,"style":270},"language-js shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { gsap } from 'gsap' // don't forget to import GSAP\n\nfunction onEnter(el) {\n  gsap.from(el.material, { duration: 1, opacity: 0 })\n}\nfunction onLeave(el, done) {\n  gsap.to(el.material, { duration: 0.05, opacity: 0 })\n}\n","js",[305,9388,9389,9410,9414,9431,9470,9474,9494,9533],{"__ignoreMap":270},[337,9390,9391,9393,9395,9397,9399,9401,9403,9405,9407],{"class":339,"line":271},[337,9392,343],{"class":342},[337,9394,347],{"class":346},[337,9396,4122],{"class":350},[337,9398,354],{"class":346},[337,9400,357],{"class":342},[337,9402,360],{"class":346},[337,9404,3189],{"class":363},[337,9406,1892],{"class":346},[337,9408,9409],{"class":1049}," // don't forget to import GSAP\n",[337,9411,9412],{"class":339,"line":272},[337,9413,392],{"emptyLinePlaceholder":39},[337,9415,9416,9419,9422,9424,9427,9429],{"class":339,"line":389},[337,9417,9418],{"class":454},"function",[337,9420,9421],{"class":398}," onEnter",[337,9423,402],{"class":346},[337,9425,9426],{"class":1453},"el",[337,9428,2714],{"class":346},[337,9430,1044],{"class":346},[337,9432,9433,9435,9437,9439,9441,9443,9445,9447,9449,9451,9453,9455,9457,9459,9462,9464,9466,9468],{"class":339,"line":395},[337,9434,3766],{"class":350},[337,9436,1162],{"class":346},[337,9438,654],{"class":398},[337,9440,402],{"class":450},[337,9442,9426],{"class":350},[337,9444,1162],{"class":346},[337,9446,6318],{"class":350},[337,9448,507],{"class":346},[337,9450,347],{"class":346},[337,9452,2706],{"class":450},[337,9454,1873],{"class":346},[337,9456,3694],{"class":1275},[337,9458,507],{"class":346},[337,9460,9461],{"class":450}," opacity",[337,9463,1873],{"class":346},[337,9465,5441],{"class":1275},[337,9467,354],{"class":346},[337,9469,414],{"class":450},[337,9471,9472],{"class":339,"line":523},[337,9473,2898],{"class":346},[337,9475,9476,9478,9481,9483,9485,9487,9490,9492],{"class":339,"line":533},[337,9477,9418],{"class":454},[337,9479,9480],{"class":398}," onLeave",[337,9482,402],{"class":346},[337,9484,9426],{"class":1453},[337,9486,507],{"class":346},[337,9488,9489],{"class":1453}," done",[337,9491,2714],{"class":346},[337,9493,1044],{"class":346},[337,9495,9496,9498,9500,9502,9504,9506,9508,9510,9512,9514,9516,9518,9521,9523,9525,9527,9529,9531],{"class":339,"line":538},[337,9497,3766],{"class":350},[337,9499,1162],{"class":346},[337,9501,3771],{"class":398},[337,9503,402],{"class":450},[337,9505,9426],{"class":350},[337,9507,1162],{"class":346},[337,9509,6318],{"class":350},[337,9511,507],{"class":346},[337,9513,347],{"class":346},[337,9515,2706],{"class":450},[337,9517,1873],{"class":346},[337,9519,9520],{"class":1275}," 0.05",[337,9522,507],{"class":346},[337,9524,9461],{"class":450},[337,9526,1873],{"class":346},[337,9528,5441],{"class":1275},[337,9530,354],{"class":346},[337,9532,414],{"class":450},[337,9534,9535],{"class":339,"line":548},[337,9536,2898],{"class":346},[9109,9538,9539],{},[295,9540,9541,9542,9545,9546,9549],{},"Important: note that animating the ",[305,9543,9544],{},"opacity"," works here because we set ",[305,9547,9548],{},"transparent"," in our materials.",[262,9551,9553],{"id":9552},"full-example-of-our-main-component","Full example of our main component",[328,9555,9557],{"className":437,"code":9556,"language":440,"meta":270,"style":270},"\u003Cscript setup>\nimport { ref } from 'vue'\nimport { TresCanvas } from '@tresjs/core'\nimport { gsap } from 'gsap'\nimport Sphere from './Sphere.vue'\nimport Box from './Box.vue'\n\nconst current = ref('Box')\n\nconst handleComponents = (component) => {\n  current.value = component\n}\n\nfunction onEnter(el) {\n  gsap.from(el.material, { duration: 1, opacity: 0 })\n}\nfunction onLeave(el) {\n  gsap.to(el.material, { duration: 0.05, opacity: 0 })\n}\n\nconst meshes = {\n  Box,\n  Sphere,\n}\n\u003C/script>\n\n\u003Ctemplate>\n  \u003C!---->\n  \u003CSceneWrapper>\n    \u003Cdiv class=\"floating-container\">\n      \u003Cbutton :class=\"{ isActive: meshes[current] === Box }\" @click=\"handleComponents('Box')\">Cube\u003C/button>\n      \u003Cbutton :class=\"{ isActive: meshes[current] === Sphere }\" @click=\"handleComponents('Sphere')\">Sphere\u003C/button>\n    \u003C/div>\n    \u003CTresCanvas clear-color=\"#82DBC5\">\n      \u003CTresPerspectiveCamera\n        :position=\"[0, 0, 5]\"\n      />\n      \u003CTransition :css=\"false\" @enter=\"onEnter\" @leave=\"onLeave\">\n        \u003Ccomponent :is=\"meshes[current]\" />\n      \u003C/Transition>\n      \u003CTresAmbientLight :intensity=\"0.5\" />\n      \u003CTresDirectionalLight\n        :position=\"[5, 5, 5]\"\n        :intensity=\"1\"\n      />\n    \u003C/TresCanvas>\n  \u003C/SceneWrapper>\n\u003C/template>\n\n\u003Cstyle scoped>\n.floating-container {\n  position: absolute;\n  top: 0;\n  left: 50%;\n  z-index: 10;\n  background-color: #f7f7f7;\n  color: #333;\n  border-radius: 8px;\n  padding: 0.25rem;\n  display: flex;\n  gap: 0.25rem;\n  transform: translateX(-50%);\n  button {\n    padding: 8px 16px;\n    border: none;\n    background-color: #4caf50;\n    color: white;\n    cursor: pointer;\n    border-radius: 4px;\n    font-size: 14px;\n  }\n}\n\nbutton.isActive {\n  background-color: #388e3c;\n}\n\u003C/style>\n\n",[305,9558,9559,9569,9587,9605,9623,9637,9651,9655,9675,9679,9697,9709,9713,9717,9731,9769,9773,9787,9825,9829,9833,9843,9849,9855,9859,9867,9871,9879,9884,9893,9911,9950,9986,9994,10012,10018,10030,10034,10072,10090,10098,10116,10122,10134,10146,10150,10158,10166,10174,10178,10188,10196,10206,10216,10226,10236,10248,10260,10270,10280,10290,10300,10314,10318,10330,10340,10352,10362,10372,10382,10392,10396,10400,10404,10414,10426,10430],{"__ignoreMap":270},[337,9560,9561,9563,9565,9567],{"class":339,"line":271},[337,9562,447],{"class":346},[337,9564,451],{"class":450},[337,9566,455],{"class":454},[337,9568,471],{"class":346},[337,9570,9571,9573,9575,9577,9579,9581,9583,9585],{"class":339,"line":272},[337,9572,343],{"class":342},[337,9574,347],{"class":346},[337,9576,1110],{"class":350},[337,9578,354],{"class":346},[337,9580,357],{"class":342},[337,9582,360],{"class":346},[337,9584,440],{"class":363},[337,9586,367],{"class":346},[337,9588,9589,9591,9593,9595,9597,9599,9601,9603],{"class":339,"line":389},[337,9590,343],{"class":342},[337,9592,347],{"class":346},[337,9594,635],{"class":350},[337,9596,354],{"class":346},[337,9598,357],{"class":342},[337,9600,360],{"class":346},[337,9602,364],{"class":363},[337,9604,367],{"class":346},[337,9606,9607,9609,9611,9613,9615,9617,9619,9621],{"class":339,"line":395},[337,9608,343],{"class":342},[337,9610,347],{"class":346},[337,9612,4122],{"class":350},[337,9614,354],{"class":346},[337,9616,357],{"class":342},[337,9618,360],{"class":346},[337,9620,3189],{"class":363},[337,9622,367],{"class":346},[337,9624,9625,9627,9629,9631,9633,9635],{"class":339,"line":523},[337,9626,343],{"class":342},[337,9628,7480],{"class":350},[337,9630,654],{"class":342},[337,9632,360],{"class":346},[337,9634,7487],{"class":363},[337,9636,367],{"class":346},[337,9638,9639,9641,9643,9645,9647,9649],{"class":339,"line":533},[337,9640,343],{"class":342},[337,9642,7496],{"class":350},[337,9644,654],{"class":342},[337,9646,360],{"class":346},[337,9648,7503],{"class":363},[337,9650,367],{"class":346},[337,9652,9653],{"class":339,"line":538},[337,9654,392],{"emptyLinePlaceholder":39},[337,9656,9657,9659,9661,9663,9665,9667,9669,9671,9673],{"class":339,"line":548},[337,9658,499],{"class":454},[337,9660,8386],{"class":350},[337,9662,461],{"class":346},[337,9664,1110],{"class":398},[337,9666,402],{"class":350},[337,9668,1892],{"class":346},[337,9670,8397],{"class":363},[337,9672,1892],{"class":346},[337,9674,414],{"class":350},[337,9676,9677],{"class":339,"line":557},[337,9678,392],{"emptyLinePlaceholder":39},[337,9680,9681,9683,9685,9687,9689,9691,9693,9695],{"class":339,"line":573},[337,9682,499],{"class":454},[337,9684,8442],{"class":350},[337,9686,461],{"class":346},[337,9688,1235],{"class":346},[337,9690,8449],{"class":1453},[337,9692,2714],{"class":346},[337,9694,1041],{"class":454},[337,9696,1044],{"class":346},[337,9698,9699,9701,9703,9705,9707],{"class":339,"line":588},[337,9700,8461],{"class":350},[337,9702,1162],{"class":346},[337,9704,1243],{"class":350},[337,9706,515],{"class":346},[337,9708,8470],{"class":350},[337,9710,9711],{"class":339,"line":594},[337,9712,2898],{"class":346},[337,9714,9715],{"class":339,"line":1252},[337,9716,392],{"emptyLinePlaceholder":39},[337,9718,9719,9721,9723,9725,9727,9729],{"class":339,"line":1279},[337,9720,9418],{"class":454},[337,9722,9421],{"class":398},[337,9724,402],{"class":346},[337,9726,9426],{"class":1453},[337,9728,2714],{"class":346},[337,9730,1044],{"class":346},[337,9732,9733,9735,9737,9739,9741,9743,9745,9747,9749,9751,9753,9755,9757,9759,9761,9763,9765,9767],{"class":339,"line":1301},[337,9734,3766],{"class":350},[337,9736,1162],{"class":346},[337,9738,654],{"class":398},[337,9740,402],{"class":450},[337,9742,9426],{"class":350},[337,9744,1162],{"class":346},[337,9746,6318],{"class":350},[337,9748,507],{"class":346},[337,9750,347],{"class":346},[337,9752,2706],{"class":450},[337,9754,1873],{"class":346},[337,9756,3694],{"class":1275},[337,9758,507],{"class":346},[337,9760,9461],{"class":450},[337,9762,1873],{"class":346},[337,9764,5441],{"class":1275},[337,9766,354],{"class":346},[337,9768,414],{"class":450},[337,9770,9771],{"class":339,"line":1307},[337,9772,2898],{"class":346},[337,9774,9775,9777,9779,9781,9783,9785],{"class":339,"line":1314},[337,9776,9418],{"class":454},[337,9778,9480],{"class":398},[337,9780,402],{"class":346},[337,9782,9426],{"class":1453},[337,9784,2714],{"class":346},[337,9786,1044],{"class":346},[337,9788,9789,9791,9793,9795,9797,9799,9801,9803,9805,9807,9809,9811,9813,9815,9817,9819,9821,9823],{"class":339,"line":1323},[337,9790,3766],{"class":350},[337,9792,1162],{"class":346},[337,9794,3771],{"class":398},[337,9796,402],{"class":450},[337,9798,9426],{"class":350},[337,9800,1162],{"class":346},[337,9802,6318],{"class":350},[337,9804,507],{"class":346},[337,9806,347],{"class":346},[337,9808,2706],{"class":450},[337,9810,1873],{"class":346},[337,9812,9520],{"class":1275},[337,9814,507],{"class":346},[337,9816,9461],{"class":450},[337,9818,1873],{"class":346},[337,9820,5441],{"class":1275},[337,9822,354],{"class":346},[337,9824,414],{"class":450},[337,9826,9827],{"class":339,"line":1328},[337,9828,2898],{"class":346},[337,9830,9831],{"class":339,"line":1337},[337,9832,392],{"emptyLinePlaceholder":39},[337,9834,9835,9837,9839,9841],{"class":339,"line":1369},[337,9836,499],{"class":454},[337,9838,8409],{"class":350},[337,9840,461],{"class":346},[337,9842,1044],{"class":346},[337,9844,9845,9847],{"class":339,"line":1390},[337,9846,8419],{"class":350},[337,9848,3684],{"class":346},[337,9850,9851,9853],{"class":339,"line":1400},[337,9852,8427],{"class":350},[337,9854,3684],{"class":346},[337,9856,9857],{"class":339,"line":1409},[337,9858,2898],{"class":346},[337,9860,9861,9863,9865],{"class":339,"line":2860},[337,9862,526],{"class":346},[337,9864,451],{"class":450},[337,9866,471],{"class":346},[337,9868,9869],{"class":339,"line":2875},[337,9870,392],{"emptyLinePlaceholder":39},[337,9872,9873,9875,9877],{"class":339,"line":2880},[337,9874,447],{"class":346},[337,9876,543],{"class":450},[337,9878,471],{"class":346},[337,9880,9881],{"class":339,"line":2895},[337,9882,9883],{"class":1049},"  \u003C!---->\n",[337,9885,9886,9888,9891],{"class":339,"line":2901},[337,9887,551],{"class":346},[337,9889,9890],{"class":450},"SceneWrapper",[337,9892,471],{"class":346},[337,9894,9895,9897,9899,9901,9903,9905,9907,9909],{"class":339,"line":2906},[337,9896,701],{"class":346},[337,9898,1536],{"class":450},[337,9900,6692],{"class":454},[337,9902,461],{"class":346},[337,9904,464],{"class":346},[337,9906,8671],{"class":363},[337,9908,464],{"class":346},[337,9910,471],{"class":346},[337,9912,9913,9915,9917,9920,9922,9924,9926,9928,9931,9933,9935,9937,9939,9941,9944,9946,9948],{"class":339,"line":2912},[337,9914,3418],{"class":346},[337,9916,8727],{"class":450},[337,9918,9919],{"class":454}," :class",[337,9921,461],{"class":346},[337,9923,464],{"class":346},[337,9925,8694],{"class":363},[337,9927,464],{"class":346},[337,9929,9930],{"class":454}," @click",[337,9932,461],{"class":346},[337,9934,464],{"class":346},[337,9936,8708],{"class":363},[337,9938,464],{"class":346},[337,9940,1174],{"class":346},[337,9942,9943],{"class":350},"Cube",[337,9945,526],{"class":346},[337,9947,8727],{"class":450},[337,9949,471],{"class":346},[337,9951,9952,9954,9956,9958,9960,9962,9964,9966,9968,9970,9972,9974,9976,9978,9980,9982,9984],{"class":339,"line":2929},[337,9953,3418],{"class":346},[337,9955,8727],{"class":450},[337,9957,9919],{"class":454},[337,9959,461],{"class":346},[337,9961,464],{"class":346},[337,9963,8746],{"class":363},[337,9965,464],{"class":346},[337,9967,9930],{"class":454},[337,9969,461],{"class":346},[337,9971,464],{"class":346},[337,9973,8759],{"class":363},[337,9975,464],{"class":346},[337,9977,1174],{"class":346},[337,9979,8643],{"class":350},[337,9981,526],{"class":346},[337,9983,8727],{"class":450},[337,9985,471],{"class":346},[337,9987,9988,9990,9992],{"class":339,"line":2950},[337,9989,3435],{"class":346},[337,9991,1536],{"class":450},[337,9993,471],{"class":346},[337,9995,9996,9998,10000,10002,10004,10006,10008,10010],{"class":339,"line":2955},[337,9997,701],{"class":346},[337,9999,688],{"class":450},[337,10001,6754],{"class":454},[337,10003,461],{"class":346},[337,10005,464],{"class":346},[337,10007,6761],{"class":363},[337,10009,464],{"class":346},[337,10011,471],{"class":346},[337,10013,10014,10016],{"class":339,"line":2960},[337,10015,3418],{"class":346},[337,10017,7553],{"class":450},[337,10019,10020,10022,10024,10026,10028],{"class":339,"line":2976},[337,10021,6828],{"class":454},[337,10023,461],{"class":346},[337,10025,464],{"class":346},[337,10027,7109],{"class":363},[337,10029,570],{"class":346},[337,10031,10032],{"class":339,"line":2996},[337,10033,7570],{"class":346},[337,10035,10036,10038,10040,10042,10044,10046,10048,10050,10052,10054,10056,10058,10060,10062,10064,10066,10068,10070],{"class":339,"line":3001},[337,10037,3418],{"class":346},[337,10039,9192],{"class":450},[337,10041,9195],{"class":454},[337,10043,461],{"class":346},[337,10045,464],{"class":346},[337,10047,9202],{"class":363},[337,10049,464],{"class":346},[337,10051,9275],{"class":454},[337,10053,461],{"class":346},[337,10055,464],{"class":346},[337,10057,9282],{"class":363},[337,10059,464],{"class":346},[337,10061,9287],{"class":454},[337,10063,461],{"class":346},[337,10065,464],{"class":346},[337,10067,9294],{"class":363},[337,10069,464],{"class":346},[337,10071,471],{"class":346},[337,10073,10074,10076,10078,10080,10082,10084,10086,10088],{"class":339,"line":4554},[337,10075,6879],{"class":346},[337,10077,8449],{"class":450},[337,10079,8547],{"class":454},[337,10081,461],{"class":346},[337,10083,464],{"class":346},[337,10085,8554],{"class":363},[337,10087,464],{"class":346},[337,10089,719],{"class":346},[337,10091,10092,10094,10096],{"class":339,"line":4559},[337,10093,7042],{"class":346},[337,10095,9192],{"class":450},[337,10097,471],{"class":346},[337,10099,10100,10102,10104,10106,10108,10110,10112,10114],{"class":339,"line":4565},[337,10101,3418],{"class":346},[337,10103,7078],{"class":450},[337,10105,7081],{"class":454},[337,10107,461],{"class":346},[337,10109,464],{"class":346},[337,10111,7088],{"class":363},[337,10113,464],{"class":346},[337,10115,719],{"class":346},[337,10117,10118,10120],{"class":339,"line":4588},[337,10119,3418],{"class":346},[337,10121,7595],{"class":450},[337,10123,10124,10126,10128,10130,10132],{"class":339,"line":4611},[337,10125,6828],{"class":454},[337,10127,461],{"class":346},[337,10129,464],{"class":346},[337,10131,7606],{"class":363},[337,10133,570],{"class":346},[337,10135,10136,10138,10140,10142,10144],{"class":339,"line":4634},[337,10137,7613],{"class":454},[337,10139,461],{"class":346},[337,10141,464],{"class":346},[337,10143,2845],{"class":363},[337,10145,570],{"class":346},[337,10147,10148],{"class":339,"line":4657},[337,10149,7570],{"class":346},[337,10151,10152,10154,10156],{"class":339,"line":6146},[337,10153,3435],{"class":346},[337,10155,688],{"class":450},[337,10157,471],{"class":346},[337,10159,10160,10162,10164],{"class":339,"line":6185},[337,10161,752],{"class":346},[337,10163,9890],{"class":450},[337,10165,471],{"class":346},[337,10167,10168,10170,10172],{"class":339,"line":6241},[337,10169,526],{"class":346},[337,10171,543],{"class":450},[337,10173,471],{"class":346},[337,10175,10176],{"class":339,"line":6269},[337,10177,392],{"emptyLinePlaceholder":39},[337,10179,10180,10182,10184,10186],{"class":339,"line":6297},[337,10181,447],{"class":346},[337,10183,937],{"class":450},[337,10185,8811],{"class":454},[337,10187,471],{"class":346},[337,10189,10190,10192,10194],{"class":339,"line":6327},[337,10191,1162],{"class":346},[337,10193,8671],{"class":1158},[337,10195,1044],{"class":346},[337,10197,10198,10200,10202,10204],{"class":339,"line":6337},[337,10199,8827],{"class":8826},[337,10201,1873],{"class":346},[337,10203,8832],{"class":350},[337,10205,8835],{"class":346},[337,10207,10208,10210,10212,10214],{"class":339,"line":6353},[337,10209,8840],{"class":8826},[337,10211,1873],{"class":346},[337,10213,5441],{"class":1275},[337,10215,8835],{"class":346},[337,10217,10218,10220,10222,10224],{"class":339,"line":6370},[337,10219,8851],{"class":8826},[337,10221,1873],{"class":346},[337,10223,8856],{"class":1275},[337,10225,8835],{"class":346},[337,10227,10228,10230,10232,10234],{"class":339,"line":6387},[337,10229,8863],{"class":8826},[337,10231,1873],{"class":346},[337,10233,8868],{"class":1275},[337,10235,8835],{"class":346},[337,10237,10238,10240,10242,10244,10246],{"class":339,"line":6392},[337,10239,8875],{"class":8826},[337,10241,1873],{"class":346},[337,10243,8880],{"class":346},[337,10245,8883],{"class":350},[337,10247,8835],{"class":346},[337,10249,10250,10252,10254,10256,10258],{"class":339,"line":6399},[337,10251,5514],{"class":8826},[337,10253,1873],{"class":346},[337,10255,8880],{"class":346},[337,10257,8896],{"class":350},[337,10259,8835],{"class":346},[337,10261,10262,10264,10266,10268],{"class":339,"line":6404},[337,10263,8903],{"class":8826},[337,10265,1873],{"class":346},[337,10267,8908],{"class":1275},[337,10269,8835],{"class":346},[337,10271,10272,10274,10276,10278],{"class":339,"line":6410},[337,10273,8915],{"class":8826},[337,10275,1873],{"class":346},[337,10277,8920],{"class":1275},[337,10279,8835],{"class":346},[337,10281,10282,10284,10286,10288],{"class":339,"line":6465},[337,10283,8927],{"class":8826},[337,10285,1873],{"class":346},[337,10287,8932],{"class":350},[337,10289,8835],{"class":346},[337,10291,10292,10294,10296,10298],{"class":339,"line":6488},[337,10293,8939],{"class":8826},[337,10295,1873],{"class":346},[337,10297,8920],{"class":1275},[337,10299,8835],{"class":346},[337,10301,10302,10304,10306,10308,10310,10312],{"class":339,"line":6518},[337,10303,8950],{"class":8826},[337,10305,1873],{"class":346},[337,10307,8955],{"class":398},[337,10309,402],{"class":346},[337,10311,8960],{"class":1275},[337,10313,8963],{"class":346},[337,10315,10316],{"class":339,"line":6548},[337,10317,8968],{"class":350},[337,10319,10320,10322,10324,10326,10328],{"class":339,"line":6593},[337,10321,8973],{"class":8826},[337,10323,1873],{"class":346},[337,10325,8908],{"class":1275},[337,10327,8980],{"class":1275},[337,10329,8835],{"class":346},[337,10331,10332,10334,10336,10338],{"class":339,"line":6600},[337,10333,8987],{"class":8826},[337,10335,1873],{"class":346},[337,10337,8992],{"class":350},[337,10339,8835],{"class":346},[337,10341,10342,10344,10346,10348,10350],{"class":339,"line":6607},[337,10343,8999],{"class":8826},[337,10345,1873],{"class":346},[337,10347,8880],{"class":346},[337,10349,9006],{"class":350},[337,10351,8835],{"class":346},[337,10353,10354,10356,10358,10360],{"class":339,"line":6614},[337,10355,9013],{"class":8826},[337,10357,1873],{"class":346},[337,10359,9018],{"class":350},[337,10361,8835],{"class":346},[337,10363,10364,10366,10368,10370],{"class":339,"line":6619},[337,10365,9025],{"class":8826},[337,10367,1873],{"class":346},[337,10369,9030],{"class":350},[337,10371,8835],{"class":346},[337,10373,10374,10376,10378,10380],{"class":339,"line":6625},[337,10375,9037],{"class":8826},[337,10377,1873],{"class":346},[337,10379,9042],{"class":1275},[337,10381,8835],{"class":346},[337,10383,10384,10386,10388,10390],{"class":339,"line":6639},[337,10385,9049],{"class":8826},[337,10387,1873],{"class":346},[337,10389,9054],{"class":1275},[337,10391,8835],{"class":346},[337,10393,10394],{"class":339,"line":6655},[337,10395,1304],{"class":346},[337,10397,10398],{"class":339,"line":6662},[337,10399,2898],{"class":350},[337,10401,10402],{"class":339,"line":6671},[337,10403,392],{"emptyLinePlaceholder":39},[337,10405,10406,10408,10410,10412],{"class":339,"line":6676},[337,10407,8727],{"class":1158},[337,10409,1162],{"class":346},[337,10411,9077],{"class":1158},[337,10413,1044],{"class":346},[337,10415,10416,10418,10420,10422,10424],{"class":339,"line":6685},[337,10417,8875],{"class":8826},[337,10419,1873],{"class":346},[337,10421,8880],{"class":346},[337,10423,9090],{"class":350},[337,10425,8835],{"class":346},[337,10427,10428],{"class":339,"line":6706},[337,10429,2898],{"class":346},[337,10431,10432,10434,10436],{"class":339,"line":6712},[337,10433,526],{"class":346},[337,10435,937],{"class":450},[337,10437,471],{"class":346},[937,10439,10440],{},"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 .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}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 .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}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}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sqsOY, html code.shiki .sqsOY{--shiki-light:#8796B0;--shiki-default:#B2CCD6;--shiki-dark:#B2CCD6}",{"title":270,"searchDepth":271,"depth":272,"links":10442},[],"Learn how to use Vue's Transition and dynamic components in TresJS",{"thumbnail":10445},"/recipes/dynamic-transition.png",{"title":219,"description":10443},"xek2Eswwv-iQ-9c4sZZ2Ef-OLVmqn_eGpbvVWlMzZok",1785417168616]