[{"data":1,"prerenderedAt":10989},["ShallowReactive",2],{"navigation":3,"/cookbook":239,"/cookbook-surround":264,"$Rv2XlAkWKb":269},[4,29,78,173,205,215,219,223,227,231,235],{"title":5,"path":6,"stem":7,"children":8,"icon":27,"titleTemplate":28},"Getting Started","/getting-started","1.getting-started/1.index",[9,12,17,22],{"title":10,"path":6,"stem":7,"icon":11},"Introduction","i-lucide-house",{"title":13,"path":14,"stem":15,"icon":16},"Installation","/getting-started/installation","1.getting-started/2.installation","i-lucide-download",{"title":18,"path":19,"stem":20,"icon":21},"Your First Scene","/getting-started/your-first-scene","1.getting-started/3.your-first-scene","i-lucide-donut",{"title":23,"path":24,"stem":25,"icon":26},"Upgrade Guide","/getting-started/upgrade-guide","1.getting-started/4.upgrade-guide","i-lucide-circle-arrow-up","i-lucide-rocket","%s · Get Started with TresJS",{"title":30,"path":31,"stem":32,"children":33},"Essentials","/essentials","2.essentials",[34,36,48],{"title":30,"path":31,"stem":35},"2.essentials/index",{"title":37,"icon":38,"open":39,"path":40,"stem":41,"children":42,"page":47},"Core Architecture","i-lucide-cpu",true,"/essentials/core-architecture","2.essentials/1.core-architecture",[43],{"title":44,"path":45,"stem":46},"Custom Vue Renderer","/essentials/core-architecture/custom-vue-renderer","2.essentials/1.core-architecture/2.custom-vue-renderer",false,{"title":49,"icon":50,"open":39,"path":51,"stem":52,"children":53,"page":47},"Key Concepts","i-lucide-medal","/essentials/concepts","2.essentials/2.concepts",[54,58,62,66,70,74],{"title":55,"path":56,"stem":57},"Declarative vs Imperative","/essentials/concepts/declarative-vs-imperative","2.essentials/2.concepts/1.declarative-vs-imperative",{"title":59,"path":60,"stem":61},"Reactivity","/essentials/concepts/reactivity","2.essentials/2.concepts/2.reactivity",{"title":63,"path":64,"stem":65},"Constructor Arguments","/essentials/concepts/constructor-arguments","2.essentials/2.concepts/3.constructor-arguments",{"title":67,"path":68,"stem":69},"Declarative Properties","/essentials/concepts/declarative-properties","2.essentials/2.concepts/4.declarative-properties",{"title":71,"path":72,"stem":73},"Extending the Catalogue","/essentials/concepts/extending-catalogue","2.essentials/2.concepts/5.extending-catalogue",{"title":75,"path":76,"stem":77},"Child Attachments","/essentials/concepts/child-attachments","2.essentials/2.concepts/6.child-attachments",{"title":79,"path":80,"stem":81,"children":82},"API","/api","3.api",[83,86,104,131,141,155],{"title":84,"path":80,"stem":85},"TresJS API Reference","3.api/1.index",{"title":87,"icon":88,"open":39,"path":89,"stem":90,"children":91,"page":47},"Components","i-lucide-box","/api/components","3.api/1.components",[92,96,100],{"title":93,"path":94,"stem":95},"\u003CTresCanvas />","/api/components/tres-canvas","3.api/1.components/tres-canvas",{"title":97,"path":98,"stem":99},"\u003CTresCanvasContext />","/api/components/tres-context","3.api/1.components/tres-context",{"title":101,"path":102,"stem":103},"Tres Components","/api/components/tres-objects","3.api/1.components/tres-objects",{"title":105,"titleTemplate":106,"icon":107,"path":108,"stem":109,"children":110,"page":47},"Composables","%s · TresJS Composables","i-lucide-arrow-right-left","/api/composables","3.api/2.composables",[111,115,119,123,127],{"title":112,"path":113,"stem":114},"useTres","/api/composables/use-tres","3.api/2.composables/1.use-tres",{"title":116,"path":117,"stem":118},"useTresContext","/api/composables/use-tres-context","3.api/2.composables/2.use-tres-context",{"title":120,"path":121,"stem":122},"useLoop","/api/composables/use-loop","3.api/2.composables/3.use-loop",{"title":124,"path":125,"stem":126},"useGraph","/api/composables/use-graph","3.api/2.composables/4.use-graph",{"title":128,"path":129,"stem":130},"useLoader","/api/composables/use-loader","3.api/2.composables/5.use-loader",{"title":132,"icon":133,"path":134,"stem":135,"children":136,"page":47},"Event handling","i-lucide-mouse-pointer-2","/api/events","3.api/3.events",[137],{"title":138,"path":139,"stem":140},"Pointer Events","/api/events/pointer-events","3.api/3.events/1.pointer-events",{"title":142,"icon":143,"path":144,"stem":145,"children":146,"page":47},"Utils","i-lucide-wrench","/api/utils","3.api/4.utils",[147,151],{"title":148,"path":149,"stem":150},"Type Guards","/api/utils/type-guards","3.api/4.utils/1.type-guards",{"title":152,"path":153,"stem":154},"Directives","/api/utils/directives","3.api/4.utils/2.directives",{"title":156,"icon":157,"path":158,"stem":159,"children":160,"page":47},"Advanced","i-lucide-brain-circuit","/api/advanced","3.api/5.advanced",[161,165,169],{"title":162,"path":163,"stem":164},"Scaling Performance 🚀","/api/advanced/performance","3.api/5.advanced/performance",{"title":166,"path":167,"stem":168},"Primitives","/api/advanced/primitives","3.api/5.advanced/primitives",{"title":170,"path":171,"stem":172},"WebGPU","/api/advanced/web-gpu","3.api/5.advanced/web-gpu",{"title":174,"path":175,"stem":176,"children":177},"Cookbook","/cookbook","4.cookbook",[178,181,185,189,193,197,201],{"title":179,"path":175,"stem":180},"Cookbook 🍳🧑‍🍳","4.cookbook/index",{"title":182,"path":183,"stem":184},"OrbitControls","/cookbook/orbit-controls","4.cookbook/1.orbit-controls",{"title":186,"path":187,"stem":188},"Basic Animations","/cookbook/basic-animations","4.cookbook/2.basic-animations",{"title":190,"path":191,"stem":192},"Model Animation","/cookbook/model-animation","4.cookbook/3.model-animation",{"title":194,"path":195,"stem":196},"Advanced GSAP Animations","/cookbook/advanced-gsap-animations","4.cookbook/4.advanced-gsap-animations",{"title":198,"path":199,"stem":200},"Tweakpane","/cookbook/tweakpane","4.cookbook/5.tweakpane",{"title":202,"path":203,"stem":204},"Dynamic components","/cookbook/transition-dynamic","4.cookbook/6.transition-dynamic",{"title":206,"path":207,"stem":208,"children":209},"Community","/community","5.community/1.index",[210,211],{"title":206,"path":207,"stem":208},{"title":212,"path":213,"stem":214},"Awesome Resources","/community/awesome-resources","5.community/awesome-resources",{"title":216,"path":217,"stem":218},"German Translation","/de","de",{"title":220,"path":221,"stem":222},"Spanish Translation","/es","es",{"title":224,"path":225,"stem":226},"French Translation","/fr","fr",{"title":228,"path":229,"stem":230},"Italian Translation","/it","it",{"title":232,"path":233,"stem":234},"Japanese Translation","/jp","jp",{"title":236,"path":237,"stem":238},"Chinese Translation","/zh","zh",{"id":240,"title":179,"body":241,"description":258,"extension":259,"links":260,"meta":261,"navigation":39,"path":175,"seo":262,"stem":180,"__hash__":263},"docs/4.cookbook/index.md",{"type":242,"value":243,"toc":252},"minimark",[244,249],[245,246,248],"h2",{"id":247},"recipes","Recipes",[250,251],"recipes-list",{},{"title":253,"searchDepth":254,"depth":255,"links":256},"",1,2,[257],{"id":247,"depth":255,"text":248},"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":179,"description":258},"ojHpQlM1BFiUdtS6dGQxi_kgu3mO_Vj65QWI666YzVg",[265,267],{"title":170,"path":171,"stem":172,"description":266,"children":-1},"Explore experimental WebGPU rendering capabilities in TresJS.",{"title":182,"path":183,"stem":184,"description":268,"children":-1},"Learn how to use OrbitControls in TresJS, including both manual and plug-and-play approaches.",[270,1002,1776,3117,5262,7677],{"id":271,"title":182,"body":272,"description":268,"extension":259,"links":260,"meta":998,"navigation":39,"path":183,"seo":1000,"stem":184,"__hash__":1001},"docs/4.cookbook/1.orbit-controls.md",{"type":242,"value":273,"toc":993},[274,277,281,300,304,310,398,415,800,804,811,825,979,989],[275,276],"examples-orbit-controls",{},[278,279,280],"p",{},"OrbitControls is a camera controller that allows you to orbit around a target. It's a great way to explore your scene interactively.",[282,283,284],"note",{},[278,285,286,287,291,292,295,296,299],{},"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 ",[288,289,290],"code",{},"three/addons/controls/OrbitControls"," module via the ",[288,293,294],{},"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 ",[288,297,298],{},"@tresjs/cientos"," package.",[245,301,303],{"id":302},"using-orbitcontrols-manually","Using OrbitControls Manually",[278,305,306,307,309],{},"To use ",[288,308,182],{}," manually, import it and extend the catalog:",[311,312,317],"pre",{"className":313,"code":314,"filename":315,"language":316,"meta":253,"style":253},"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",[288,318,319,351,370,376],{"__ignoreMap":253},[320,321,323,327,331,335,338,341,344,348],"span",{"class":322,"line":254},"line",[320,324,326],{"class":325},"s7zQu","import",[320,328,330],{"class":329},"sMK4o"," {",[320,332,334],{"class":333},"sTEyZ"," extend",[320,336,337],{"class":329}," }",[320,339,340],{"class":325}," from",[320,342,343],{"class":329}," '",[320,345,347],{"class":346},"sfazB","@tresjs/core",[320,349,350],{"class":329},"'\n",[320,352,353,355,357,360,362,364,366,368],{"class":322,"line":255},[320,354,326],{"class":325},[320,356,330],{"class":329},[320,358,359],{"class":333}," OrbitControls",[320,361,337],{"class":329},[320,363,340],{"class":325},[320,365,343],{"class":329},[320,367,290],{"class":346},[320,369,350],{"class":329},[320,371,373],{"class":322,"line":372},3,[320,374,375],{"emptyLinePlaceholder":39},"\n",[320,377,379,383,386,389,392,395],{"class":322,"line":378},4,[320,380,382],{"class":381},"s2Zo4","extend",[320,384,385],{"class":333},"(",[320,387,388],{"class":329},"{",[320,390,391],{"class":333}," OrbitControls ",[320,393,394],{"class":329},"}",[320,396,397],{"class":333},")\n",[278,399,400,401,404,405,411,412,414],{},"Now you can use the ",[288,402,403],{},"TresOrbitControls"," component in your scene. Since ",[406,407,182],"a",{"href":408,"rel":409},"https://threejs.org/docs/#examples/en/controls/OrbitControls",[410],"nofollow"," needs a reference to the camera and renderer, you can use the ",[288,413,112],{}," composable:",[416,417,418,604],"code-group",{},[311,419,424],{"className":420,"code":421,"filename":422,"language":423,"meta":253,"style":253},"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",[288,425,426,455,474,478,504,514,519,529,538,554,589,595],{"__ignoreMap":253},[320,427,428,431,435,439,442,445,448,450,452],{"class":322,"line":254},[320,429,430],{"class":329},"\u003C",[320,432,434],{"class":433},"swJcz","script",[320,436,438],{"class":437},"spNyl"," setup",[320,440,441],{"class":437}," lang",[320,443,444],{"class":329},"=",[320,446,447],{"class":329},"\"",[320,449,316],{"class":346},[320,451,447],{"class":329},[320,453,454],{"class":329},">\n",[320,456,457,459,461,464,466,468,470,472],{"class":322,"line":255},[320,458,326],{"class":325},[320,460,330],{"class":329},[320,462,463],{"class":333}," useTres",[320,465,337],{"class":329},[320,467,340],{"class":325},[320,469,343],{"class":329},[320,471,347],{"class":346},[320,473,350],{"class":329},[320,475,476],{"class":322,"line":372},[320,477,375],{"emptyLinePlaceholder":39},[320,479,480,483,485,488,491,494,496,499,501],{"class":322,"line":378},[320,481,482],{"class":437},"const",[320,484,330],{"class":329},[320,486,487],{"class":333}," camera",[320,489,490],{"class":329},",",[320,492,493],{"class":333}," renderer ",[320,495,394],{"class":329},[320,497,498],{"class":329}," =",[320,500,463],{"class":381},[320,502,503],{"class":333},"()\n",[320,505,507,510,512],{"class":322,"line":506},5,[320,508,509],{"class":329},"\u003C/",[320,511,434],{"class":433},[320,513,454],{"class":329},[320,515,517],{"class":322,"line":516},6,[320,518,375],{"emptyLinePlaceholder":39},[320,520,522,524,527],{"class":322,"line":521},7,[320,523,430],{"class":329},[320,525,526],{"class":433},"template",[320,528,454],{"class":329},[320,530,532,535],{"class":322,"line":531},8,[320,533,534],{"class":329},"  \u003C",[320,536,537],{"class":433},"TresOrbitControls\n",[320,539,541,544,546,548,551],{"class":322,"line":540},9,[320,542,543],{"class":325},"    v-if",[320,545,444],{"class":329},[320,547,447],{"class":329},[320,549,550],{"class":333},"camera",[320,552,553],{"class":329},"\"\n",[320,555,557,560,563,565,567,570,572,575,578,581,584,587],{"class":322,"line":556},10,[320,558,559],{"class":329},"    :",[320,561,562],{"class":437},"args",[320,564,444],{"class":329},[320,566,447],{"class":329},[320,568,569],{"class":329},"[",[320,571,550],{"class":333},[320,573,574],{"class":329},", ",[320,576,577],{"class":333},"renderer",[320,579,580],{"class":329},"?.",[320,582,583],{"class":333},"domElement",[320,585,586],{"class":329},"]",[320,588,553],{"class":329},[320,590,592],{"class":322,"line":591},11,[320,593,594],{"class":329},"  />\n",[320,596,598,600,602],{"class":322,"line":597},12,[320,599,509],{"class":329},[320,601,526],{"class":433},[320,603,454],{"class":329},[311,605,608],{"className":420,"code":606,"filename":607,"language":423,"meta":253,"style":253},"\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",[288,609,610,630,649,665,673,677,685,700,745,753,783,792],{"__ignoreMap":253},[320,611,612,614,616,618,620,622,624,626,628],{"class":322,"line":254},[320,613,430],{"class":329},[320,615,434],{"class":433},[320,617,438],{"class":437},[320,619,441],{"class":437},[320,621,444],{"class":329},[320,623,447],{"class":329},[320,625,316],{"class":346},[320,627,447],{"class":329},[320,629,454],{"class":329},[320,631,632,634,636,639,641,643,645,647],{"class":322,"line":255},[320,633,326],{"class":325},[320,635,330],{"class":329},[320,637,638],{"class":333}," TresCanvas",[320,640,337],{"class":329},[320,642,340],{"class":325},[320,644,343],{"class":329},[320,646,347],{"class":346},[320,648,350],{"class":329},[320,650,651,653,655,658,660,663],{"class":322,"line":372},[320,652,326],{"class":325},[320,654,391],{"class":333},[320,656,657],{"class":325},"from",[320,659,343],{"class":329},[320,661,662],{"class":346},"./OrbitControls.vue",[320,664,350],{"class":329},[320,666,667,669,671],{"class":322,"line":378},[320,668,509],{"class":329},[320,670,434],{"class":433},[320,672,454],{"class":329},[320,674,675],{"class":322,"line":506},[320,676,375],{"emptyLinePlaceholder":39},[320,678,679,681,683],{"class":322,"line":516},[320,680,430],{"class":329},[320,682,526],{"class":433},[320,684,454],{"class":329},[320,686,687,689,692,695,698],{"class":322,"line":521},[320,688,534],{"class":329},[320,690,691],{"class":433},"TresCanvas",[320,693,694],{"class":437}," shadows",[320,696,697],{"class":437}," alpha",[320,699,454],{"class":329},[320,701,702,705,708,711,713,715,717,719,723,725,728,730,733,735,738,740,742],{"class":322,"line":531},[320,703,704],{"class":329},"    \u003C",[320,706,707],{"class":433},"TresPerspectiveCamera",[320,709,710],{"class":329}," :",[320,712,562],{"class":437},[320,714,444],{"class":329},[320,716,447],{"class":329},[320,718,569],{"class":329},[320,720,722],{"class":721},"sbssI","45",[320,724,574],{"class":329},[320,726,727],{"class":721},"1",[320,729,574],{"class":329},[320,731,732],{"class":721},"0.1",[320,734,574],{"class":329},[320,736,737],{"class":721},"1000",[320,739,586],{"class":329},[320,741,447],{"class":329},[320,743,744],{"class":329}," />\n",[320,746,747,749,751],{"class":322,"line":540},[320,748,704],{"class":329},[320,750,182],{"class":433},[320,752,744],{"class":329},[320,754,755,757,760,762,764,766,768,770,773,775,777,779,781],{"class":322,"line":556},[320,756,704],{"class":329},[320,758,759],{"class":433},"TresGridHelper",[320,761,710],{"class":329},[320,763,562],{"class":437},[320,765,444],{"class":329},[320,767,447],{"class":329},[320,769,569],{"class":329},[320,771,772],{"class":721},"10",[320,774,574],{"class":329},[320,776,772],{"class":721},[320,778,586],{"class":329},[320,780,447],{"class":329},[320,782,744],{"class":329},[320,784,785,788,790],{"class":322,"line":591},[320,786,787],{"class":329},"  \u003C/",[320,789,691],{"class":433},[320,791,454],{"class":329},[320,793,794,796,798],{"class":322,"line":597},[320,795,509],{"class":329},[320,797,526],{"class":433},[320,799,454],{"class":329},[801,802],"read-more",{"to":803},"/api/components/tres-objects#extending-the-catalogue",[245,805,807,808,810],{"id":806},"orbitcontrols-from-tresjscientos-recommended","OrbitControls from ",[288,809,298],{}," (Recommended)",[278,812,813,814,820,821,824],{},"The ",[406,815,818],{"href":816,"rel":817},"https://cientos.tresjs.org/",[410],[288,819,298],{}," package provides a plug-and-play ",[288,822,823],{},"\u003COrbitControls />"," component that wraps the ThreeJS OrbitControls. You don't need to extend the catalog or pass any arguments—it just works!",[311,826,829],{"className":420,"code":827,"filename":828,"language":423,"meta":253,"style":253},"\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",[288,830,831,851,869,887,895,899,907,919,955,963,971],{"__ignoreMap":253},[320,832,833,835,837,839,841,843,845,847,849],{"class":322,"line":254},[320,834,430],{"class":329},[320,836,434],{"class":433},[320,838,438],{"class":437},[320,840,441],{"class":437},[320,842,444],{"class":329},[320,844,447],{"class":329},[320,846,316],{"class":346},[320,848,447],{"class":329},[320,850,454],{"class":329},[320,852,853,855,857,859,861,863,865,867],{"class":322,"line":255},[320,854,326],{"class":325},[320,856,330],{"class":329},[320,858,359],{"class":333},[320,860,337],{"class":329},[320,862,340],{"class":325},[320,864,343],{"class":329},[320,866,298],{"class":346},[320,868,350],{"class":329},[320,870,871,873,875,877,879,881,883,885],{"class":322,"line":372},[320,872,326],{"class":325},[320,874,330],{"class":329},[320,876,638],{"class":333},[320,878,337],{"class":329},[320,880,340],{"class":325},[320,882,343],{"class":329},[320,884,347],{"class":346},[320,886,350],{"class":329},[320,888,889,891,893],{"class":322,"line":378},[320,890,509],{"class":329},[320,892,434],{"class":433},[320,894,454],{"class":329},[320,896,897],{"class":322,"line":506},[320,898,375],{"emptyLinePlaceholder":39},[320,900,901,903,905],{"class":322,"line":516},[320,902,430],{"class":329},[320,904,526],{"class":433},[320,906,454],{"class":329},[320,908,909,911,913,915,917],{"class":322,"line":521},[320,910,534],{"class":329},[320,912,691],{"class":433},[320,914,694],{"class":437},[320,916,697],{"class":437},[320,918,454],{"class":329},[320,920,921,923,925,927,929,931,933,935,937,939,941,943,945,947,949,951,953],{"class":322,"line":531},[320,922,704],{"class":329},[320,924,707],{"class":433},[320,926,710],{"class":329},[320,928,562],{"class":437},[320,930,444],{"class":329},[320,932,447],{"class":329},[320,934,569],{"class":329},[320,936,722],{"class":721},[320,938,574],{"class":329},[320,940,727],{"class":721},[320,942,574],{"class":329},[320,944,732],{"class":721},[320,946,574],{"class":329},[320,948,737],{"class":721},[320,950,586],{"class":329},[320,952,447],{"class":329},[320,954,744],{"class":329},[320,956,957,959,961],{"class":322,"line":540},[320,958,704],{"class":329},[320,960,182],{"class":433},[320,962,744],{"class":329},[320,964,965,967,969],{"class":322,"line":556},[320,966,787],{"class":329},[320,968,691],{"class":433},[320,970,454],{"class":329},[320,972,973,975,977],{"class":322,"line":591},[320,974,509],{"class":329},[320,976,526],{"class":433},[320,978,454],{"class":329},[980,981,982],"tip",{},[278,983,984,985,988],{},"Make sure the ",[288,986,987],{},"PerspectiveCamera"," is set first in the canvas, otherwise controls might not work as expected.",[990,991,992],"style",{},"html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}",{"title":253,"searchDepth":254,"depth":255,"links":994},[995,996],{"id":302,"depth":255,"text":303},{"id":806,"depth":255,"text":997},"OrbitControls from @tresjs/cientos (Recommended)",{"thumbnail":999},"/recipes/orbit-controls.png",{"title":182,"description":268},"PlSdSO5bvNZ3n4ylUgjSY4tWbB1P73bDmozCMUeLzDg",{"id":1003,"title":186,"body":1004,"description":1771,"extension":259,"links":260,"meta":1772,"navigation":39,"path":187,"seo":1774,"stem":188,"__hash__":1775},"docs/4.cookbook/2.basic-animations.md",{"type":242,"value":1005,"toc":1769},[1006,1009,1012,1766],[1007,1008],"examples-basic-animation",{},[278,1010,1011],{},"This recipe covers the fundamentals of creating smooth animations in TresJS.",[1013,1014,1015,1023,1033,1110,1112,1116,1129,1495,1501,1508,1516,1608,1614,1652,1661,1668,1676,1763],"steps",{},[1016,1017,1019,1020,1022],"h3",{"id":1018},"import-useloop-composable","Import ",[288,1021,120],{}," composable",[278,1024,813,1025,1027,1028,1032],{},[288,1026,120],{}," composable is the core of TresJS updates, which includes: ",[1029,1030,1031],"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.",[311,1034,1036],{"className":313,"code":1035,"language":316,"meta":253,"style":253},"import { useLoop } from '@tresjs/core'\n\nconst { onBeforeRender } = useLoop()\n\nonBeforeRender(() => {\n  // Animation logic here\n})\n\n",[288,1037,1038,1057,1061,1078,1082,1098,1104],{"__ignoreMap":253},[320,1039,1040,1042,1044,1047,1049,1051,1053,1055],{"class":322,"line":254},[320,1041,326],{"class":325},[320,1043,330],{"class":329},[320,1045,1046],{"class":333}," useLoop",[320,1048,337],{"class":329},[320,1050,340],{"class":325},[320,1052,343],{"class":329},[320,1054,347],{"class":346},[320,1056,350],{"class":329},[320,1058,1059],{"class":322,"line":255},[320,1060,375],{"emptyLinePlaceholder":39},[320,1062,1063,1065,1067,1070,1072,1074,1076],{"class":322,"line":372},[320,1064,482],{"class":437},[320,1066,330],{"class":329},[320,1068,1069],{"class":333}," onBeforeRender ",[320,1071,394],{"class":329},[320,1073,498],{"class":329},[320,1075,1046],{"class":381},[320,1077,503],{"class":333},[320,1079,1080],{"class":322,"line":378},[320,1081,375],{"emptyLinePlaceholder":39},[320,1083,1084,1087,1089,1092,1095],{"class":322,"line":506},[320,1085,1086],{"class":381},"onBeforeRender",[320,1088,385],{"class":333},[320,1090,1091],{"class":329},"()",[320,1093,1094],{"class":437}," =>",[320,1096,1097],{"class":329}," {\n",[320,1099,1100],{"class":322,"line":516},[320,1101,1103],{"class":1102},"sHwdD","  // Animation logic here\n",[320,1105,1106,1108],{"class":322,"line":521},[320,1107,394],{"class":329},[320,1109,397],{"class":333},[801,1111],{"to":121},[1016,1113,1115],{"id":1114},"get-a-reference-to-the-object-you-want-to-animate","Get a reference to the object you want to animate",[278,1117,1118,1119,1124,1125,1128],{},"Similar to Vue, you can use ",[406,1120,1123],{"href":1121,"rel":1122},"https://vuejs.org/guide/essentials/template-refs",[410],"template refs"," to access the Three.js object instance and manipulate its properties. If you want to optimize even further, you can use ",[288,1126,1127],{},"shallowRef"," to avoid unnecessary reactivity.",[311,1130,1133],{"className":420,"code":1131,"filename":1132,"language":423,"meta":253,"style":253},"\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",[288,1134,1135,1155,1174,1192,1196,1235,1240,1245,1249,1265,1269,1281,1303,1329,1351,1357,1364,1373,1378,1387,1433,1467,1477,1486],{"__ignoreMap":253},[320,1136,1137,1139,1141,1143,1145,1147,1149,1151,1153],{"class":322,"line":254},[320,1138,430],{"class":329},[320,1140,434],{"class":433},[320,1142,438],{"class":437},[320,1144,441],{"class":437},[320,1146,444],{"class":329},[320,1148,447],{"class":329},[320,1150,316],{"class":346},[320,1152,447],{"class":329},[320,1154,454],{"class":329},[320,1156,1157,1159,1161,1164,1166,1168,1170,1172],{"class":322,"line":255},[320,1158,326],{"class":325},[320,1160,330],{"class":329},[320,1162,1163],{"class":333}," ref",[320,1165,337],{"class":329},[320,1167,340],{"class":325},[320,1169,343],{"class":329},[320,1171,423],{"class":346},[320,1173,350],{"class":329},[320,1175,1176,1178,1180,1182,1184,1186,1188,1190],{"class":322,"line":372},[320,1177,326],{"class":325},[320,1179,330],{"class":329},[320,1181,1046],{"class":333},[320,1183,337],{"class":329},[320,1185,340],{"class":325},[320,1187,343],{"class":329},[320,1189,347],{"class":346},[320,1191,350],{"class":329},[320,1193,1194],{"class":322,"line":378},[320,1195,375],{"emptyLinePlaceholder":39},[320,1197,1198,1200,1203,1205,1207,1209,1213,1216,1219,1222,1225,1228,1230,1233],{"class":322,"line":506},[320,1199,482],{"class":437},[320,1201,1202],{"class":333}," cubeRef ",[320,1204,444],{"class":329},[320,1206,1163],{"class":381},[320,1208,430],{"class":329},[320,1210,1212],{"class":1211},"sBMFI","THREE",[320,1214,1215],{"class":329},".",[320,1217,1218],{"class":1211},"Mesh",[320,1220,1221],{"class":329}," |",[320,1223,1224],{"class":1211}," null",[320,1226,1227],{"class":329},">",[320,1229,385],{"class":333},[320,1231,1232],{"class":329},"null",[320,1234,397],{"class":333},[320,1236,1237],{"class":322,"line":516},[320,1238,1239],{"class":1102},"// or use shallowRef if you want to avoid reactivity\n",[320,1241,1242],{"class":322,"line":521},[320,1243,1244],{"class":1102},"// const cubeRef = shallowRef\u003CTHREE.Mesh | null>(null)\n",[320,1246,1247],{"class":322,"line":531},[320,1248,375],{"emptyLinePlaceholder":39},[320,1250,1251,1253,1255,1257,1259,1261,1263],{"class":322,"line":540},[320,1252,482],{"class":437},[320,1254,330],{"class":329},[320,1256,1069],{"class":333},[320,1258,394],{"class":329},[320,1260,498],{"class":329},[320,1262,1046],{"class":381},[320,1264,503],{"class":333},[320,1266,1267],{"class":322,"line":556},[320,1268,375],{"emptyLinePlaceholder":39},[320,1270,1271,1273,1275,1277,1279],{"class":322,"line":591},[320,1272,1086],{"class":381},[320,1274,385],{"class":333},[320,1276,1091],{"class":329},[320,1278,1094],{"class":437},[320,1280,1097],{"class":329},[320,1282,1283,1286,1289,1292,1294,1297,1300],{"class":322,"line":597},[320,1284,1285],{"class":325},"  if",[320,1287,1288],{"class":433}," (",[320,1290,1291],{"class":333},"cubeRef",[320,1293,1215],{"class":329},[320,1295,1296],{"class":333},"value",[320,1298,1299],{"class":433},") ",[320,1301,1302],{"class":329},"{\n",[320,1304,1306,1309,1311,1313,1315,1318,1320,1323,1326],{"class":322,"line":1305},13,[320,1307,1308],{"class":333},"    cubeRef",[320,1310,1215],{"class":329},[320,1312,1296],{"class":333},[320,1314,1215],{"class":329},[320,1316,1317],{"class":333},"rotation",[320,1319,1215],{"class":329},[320,1321,1322],{"class":333},"x",[320,1324,1325],{"class":329}," +=",[320,1327,1328],{"class":721}," 0.01\n",[320,1330,1332,1334,1336,1338,1340,1342,1344,1347,1349],{"class":322,"line":1331},14,[320,1333,1308],{"class":333},[320,1335,1215],{"class":329},[320,1337,1296],{"class":333},[320,1339,1215],{"class":329},[320,1341,1317],{"class":333},[320,1343,1215],{"class":329},[320,1345,1346],{"class":333},"y",[320,1348,1325],{"class":329},[320,1350,1328],{"class":721},[320,1352,1354],{"class":322,"line":1353},15,[320,1355,1356],{"class":329},"  }\n",[320,1358,1360,1362],{"class":322,"line":1359},16,[320,1361,394],{"class":329},[320,1363,397],{"class":333},[320,1365,1367,1369,1371],{"class":322,"line":1366},17,[320,1368,509],{"class":329},[320,1370,434],{"class":433},[320,1372,454],{"class":329},[320,1374,1376],{"class":322,"line":1375},18,[320,1377,375],{"emptyLinePlaceholder":39},[320,1379,1381,1383,1385],{"class":322,"line":1380},19,[320,1382,430],{"class":329},[320,1384,526],{"class":433},[320,1386,454],{"class":329},[320,1388,1390,1392,1395,1397,1399,1401,1403,1405,1407,1410,1412,1414,1416,1419,1421,1423,1425,1427,1429,1431],{"class":322,"line":1389},20,[320,1391,534],{"class":329},[320,1393,1394],{"class":433},"TresMesh",[320,1396,1163],{"class":437},[320,1398,444],{"class":329},[320,1400,447],{"class":329},[320,1402,1291],{"class":346},[320,1404,447],{"class":329},[320,1406,710],{"class":329},[320,1408,1409],{"class":437},"position",[320,1411,444],{"class":329},[320,1413,447],{"class":329},[320,1415,569],{"class":329},[320,1417,1418],{"class":721},"0",[320,1420,574],{"class":329},[320,1422,727],{"class":721},[320,1424,574],{"class":329},[320,1426,1418],{"class":721},[320,1428,586],{"class":329},[320,1430,447],{"class":329},[320,1432,454],{"class":329},[320,1434,1436,1438,1441,1443,1445,1447,1449,1451,1453,1455,1457,1459,1461,1463,1465],{"class":322,"line":1435},21,[320,1437,704],{"class":329},[320,1439,1440],{"class":433},"TresBoxGeometry",[320,1442,710],{"class":329},[320,1444,562],{"class":437},[320,1446,444],{"class":329},[320,1448,447],{"class":329},[320,1450,569],{"class":329},[320,1452,727],{"class":721},[320,1454,574],{"class":329},[320,1456,727],{"class":721},[320,1458,574],{"class":329},[320,1460,727],{"class":721},[320,1462,586],{"class":329},[320,1464,447],{"class":329},[320,1466,744],{"class":329},[320,1468,1470,1472,1475],{"class":322,"line":1469},22,[320,1471,704],{"class":329},[320,1473,1474],{"class":433},"TresMeshNormalMaterial",[320,1476,744],{"class":329},[320,1478,1480,1482,1484],{"class":322,"line":1479},23,[320,1481,787],{"class":329},[320,1483,1394],{"class":433},[320,1485,454],{"class":329},[320,1487,1489,1491,1493],{"class":322,"line":1488},24,[320,1490,509],{"class":329},[320,1492,526],{"class":433},[320,1494,454],{"class":329},[801,1496,1498],{"to":1497},"/api/advanced/performance#reactivity-and-performance",[278,1499,1500],{},"To read more about reactivity and performance in TresJS.",[245,1502,1504,1505],{"id":1503},"use-delta","Use ",[288,1506,1507],{},"delta",[278,1509,813,1510,1512,1513,1515],{},[288,1511,1086],{}," callback provides a ",[288,1514,1507],{}," parameter, which represents the time elapsed since the last frame. This is useful for creating frame rate independent animations.",[311,1517,1519],{"className":313,"code":1518,"language":316,"meta":253,"style":253},"onBeforeRender(({ delta }) => {\n  if (cubeRef.value) {\n    cubeRef.value.rotation.x += delta\n    cubeRef.value.rotation.y += delta\n  }\n})\n",[288,1520,1521,1541,1557,1578,1598,1602],{"__ignoreMap":253},[320,1522,1523,1525,1527,1530,1534,1537,1539],{"class":322,"line":254},[320,1524,1086],{"class":381},[320,1526,385],{"class":333},[320,1528,1529],{"class":329},"({",[320,1531,1533],{"class":1532},"sHdIc"," delta",[320,1535,1536],{"class":329}," })",[320,1538,1094],{"class":437},[320,1540,1097],{"class":329},[320,1542,1543,1545,1547,1549,1551,1553,1555],{"class":322,"line":255},[320,1544,1285],{"class":325},[320,1546,1288],{"class":433},[320,1548,1291],{"class":333},[320,1550,1215],{"class":329},[320,1552,1296],{"class":333},[320,1554,1299],{"class":433},[320,1556,1302],{"class":329},[320,1558,1559,1561,1563,1565,1567,1569,1571,1573,1575],{"class":322,"line":372},[320,1560,1308],{"class":333},[320,1562,1215],{"class":329},[320,1564,1296],{"class":333},[320,1566,1215],{"class":329},[320,1568,1317],{"class":333},[320,1570,1215],{"class":329},[320,1572,1322],{"class":333},[320,1574,1325],{"class":329},[320,1576,1577],{"class":333}," delta\n",[320,1579,1580,1582,1584,1586,1588,1590,1592,1594,1596],{"class":322,"line":378},[320,1581,1308],{"class":333},[320,1583,1215],{"class":329},[320,1585,1296],{"class":333},[320,1587,1215],{"class":329},[320,1589,1317],{"class":333},[320,1591,1215],{"class":329},[320,1593,1346],{"class":333},[320,1595,1325],{"class":329},[320,1597,1577],{"class":333},[320,1599,1600],{"class":322,"line":506},[320,1601,1356],{"class":329},[320,1603,1604,1606],{"class":322,"line":516},[320,1605,394],{"class":329},[320,1607,397],{"class":333},[278,1609,1610,1611,1613],{},"Without using ",[288,1612,1507],{},", the animation speed would vary depending on the frame rate, leading to inconsistent behavior across different devices, like the example below:",[1615,1616,1624,1625,1642],"div",{"className":1617},[1618,1619,1620,1621,1622,1623],"w-full","flex","border","border-gray-200","rounded-lg","overflow-hidden","\n   ",[1615,1626,1630,1631,1639],{"className":1627},[1628,1629,1621],"w-1/2","border-r","\n      ",[1615,1632,1638],{"className":1633},[1634,1635,1636,1621,1637],"text-center","p-2","border-b","font-bold","\n         60fps\n      ",[1640,1641],"examples-basic-animation-60fps",{},[1615,1643,1645,1649],{"className":1644},[1628],[1615,1646,1648],{"className":1647},[1635,1634,1635,1636,1621,1637],"\n   120fps\n",[1650,1651],"examples-basic-animation-120fps",{},[1615,1653,1660],{"className":1654},[1635,1655,1656,1657,1658,1659,1634],"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",[245,1662,1664,1665],{"id":1663},"using-elapsed","Using ",[288,1666,1667],{},"elapsed",[278,1669,813,1670,1672,1673,1675],{},[288,1671,1086],{}," callback also provides an ",[288,1674,1667],{}," parameter, which represents the total time elapsed since the start of the animation. This can be useful for creating time-based animations like oscillations.",[311,1677,1679],{"className":313,"code":1678,"language":316,"meta":253,"style":253},"onBeforeRender(({ elapsed }) => {\nif (cubeRef.value) {\ncubeRef.value.position.y += Math.sin(elapsed) * 0.01\n}\n})\n",[288,1680,1681,1698,1715,1752,1757],{"__ignoreMap":253},[320,1682,1683,1685,1687,1689,1692,1694,1696],{"class":322,"line":254},[320,1684,1086],{"class":381},[320,1686,385],{"class":333},[320,1688,1529],{"class":329},[320,1690,1691],{"class":1532}," elapsed",[320,1693,1536],{"class":329},[320,1695,1094],{"class":437},[320,1697,1097],{"class":329},[320,1699,1700,1703,1705,1707,1709,1711,1713],{"class":322,"line":255},[320,1701,1702],{"class":325},"if",[320,1704,1288],{"class":433},[320,1706,1291],{"class":333},[320,1708,1215],{"class":329},[320,1710,1296],{"class":333},[320,1712,1299],{"class":433},[320,1714,1302],{"class":329},[320,1716,1717,1719,1721,1723,1725,1727,1729,1731,1733,1736,1738,1741,1743,1745,1747,1750],{"class":322,"line":372},[320,1718,1291],{"class":333},[320,1720,1215],{"class":329},[320,1722,1296],{"class":333},[320,1724,1215],{"class":329},[320,1726,1409],{"class":333},[320,1728,1215],{"class":329},[320,1730,1346],{"class":333},[320,1732,1325],{"class":329},[320,1734,1735],{"class":333}," Math",[320,1737,1215],{"class":329},[320,1739,1740],{"class":381},"sin",[320,1742,385],{"class":433},[320,1744,1667],{"class":333},[320,1746,1299],{"class":433},[320,1748,1749],{"class":329},"*",[320,1751,1328],{"class":721},[320,1753,1754],{"class":322,"line":378},[320,1755,1756],{"class":329},"}\n",[320,1758,1759,1761],{"class":322,"line":506},[320,1760,394],{"class":329},[320,1762,397],{"class":333},[1764,1765],"examples-basic-animation-elapsed",{},[990,1767,1768],{},"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":253,"searchDepth":254,"depth":255,"links":1770},[],"Learn how to create basic animations in TresJS",{"thumbnail":1773},"/recipes/model-n-animations/basic.png",{"title":186,"description":1771},"EiW-sVHXIrWLRwJcTOD5a3Y-msJTv1SNBHsLh_669FA",{"id":1777,"title":190,"body":1778,"description":3112,"extension":259,"links":260,"meta":3113,"navigation":39,"path":191,"seo":3115,"stem":192,"__hash__":3116},"docs/4.cookbook/3.model-animation.md",{"type":242,"value":1779,"toc":3107},[1780,1783,1786,1790,1793,1821,1835,1842,1846,2189,2193,3104],[1781,1782],"examples-model-animation",{},[278,1784,1785],{},"Let's bring your 3D models to life with animations in TresJS. This guide covers loading animated models and controlling their playback.",[245,1787,1789],{"id":1788},"where-to-find-models","Where to find models?",[278,1791,1792],{},"You can find quality 3D models for your projects in various online repositories. Here are some hand picked sources from the TresJS community:",[1794,1795,1796,1805,1813],"ul",{},[1797,1798,1799,1804],"li",{},[406,1800,1803],{"href":1801,"rel":1802},"https://poly.pizza/",[410],"poly.pizza"," - A collection of free 3D models.",[1797,1806,1807,1812],{},[406,1808,1811],{"href":1809,"rel":1810},"https://market.pmnd.rs/",[410],"Pmndrs Marketplace"," - A marketplace for 3D assets. All free",[1797,1814,1815,1820],{},[406,1816,1819],{"href":1817,"rel":1818},"https://kaylousberg.itch.io/",[410],"KayKit Character Packs"," - Free and paid character packs. Animated, all CC0, a personal favorite of ours.",[278,1822,1823,1824,1827,1828,1215],{},"For this tutorial we will use a simplified version of the ",[1029,1825,1826],{},"KayKit Knight character",", you can download it directly from ",[1829,1830,1834],"u-button",{"variant":1831,"icon":1832,"download":39,"external":253,":to":1833},"ghost","i-lucide-arrow-down","/models/knight/Knight.glb","here",[278,1836,1837],{},[1838,1839],"img",{"alt":1840,"src":1841},"Knight model","/recipes/model-n-animations/kaykit-simplified-knight.png",[245,1843,1845],{"id":1844},"loading-animated-models","Loading Animated Models",[1013,1847,1848,1852,1858,1876,1880,1893,1987,1996,2000,2003,2008],{},[1016,1849,1851],{"id":1850},"install-cientos","Install cientos",[278,1853,1854,1855,1857],{},"If you haven't already, install the ",[288,1856,298],{}," package, which provides components for loading 3D models.",[311,1859,1863],{"className":1860,"code":1861,"language":1862,"meta":253,"style":253},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","npm install @tresjs/cientos\n","bash",[288,1864,1865],{"__ignoreMap":253},[320,1866,1867,1870,1873],{"class":322,"line":254},[320,1868,1869],{"class":1211},"npm",[320,1871,1872],{"class":346}," install",[320,1874,1875],{"class":346}," @tresjs/cientos\n",[1016,1877,1879],{"id":1878},"load-the-model","Load the Model",[278,1881,1882,1883,1886,1887,1889,1890,1215],{},"Use the ",[288,1884,1885],{},"useGLTF"," composable from ",[288,1888,298],{}," to load your animated model. Add the downloaded GLB file to your public directory in a subfolder like ",[288,1891,1892],{},"/models/knight/",[311,1894,1897],{"className":420,"code":1895,"filename":1896,"language":423,"meta":253,"style":253},"\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",[288,1898,1899,1919,1938,1942,1979],{"__ignoreMap":253},[320,1900,1901,1903,1905,1907,1909,1911,1913,1915,1917],{"class":322,"line":254},[320,1902,430],{"class":329},[320,1904,434],{"class":433},[320,1906,438],{"class":437},[320,1908,441],{"class":437},[320,1910,444],{"class":329},[320,1912,447],{"class":329},[320,1914,316],{"class":346},[320,1916,447],{"class":329},[320,1918,454],{"class":329},[320,1920,1921,1923,1925,1928,1930,1932,1934,1936],{"class":322,"line":255},[320,1922,326],{"class":325},[320,1924,330],{"class":329},[320,1926,1927],{"class":333}," useGLTF",[320,1929,337],{"class":329},[320,1931,340],{"class":325},[320,1933,343],{"class":329},[320,1935,298],{"class":346},[320,1937,350],{"class":329},[320,1939,1940],{"class":322,"line":372},[320,1941,375],{"emptyLinePlaceholder":39},[320,1943,1944,1946,1948,1951,1954,1957,1959,1962,1964,1966,1968,1970,1973,1975,1977],{"class":322,"line":378},[320,1945,482],{"class":437},[320,1947,330],{"class":329},[320,1949,1950],{"class":433}," state",[320,1952,1953],{"class":329},":",[320,1955,1956],{"class":333}," model",[320,1958,490],{"class":329},[320,1960,1961],{"class":333}," nodes ",[320,1963,394],{"class":329},[320,1965,498],{"class":329},[320,1967,1927],{"class":381},[320,1969,385],{"class":333},[320,1971,1972],{"class":329},"'",[320,1974,1833],{"class":346},[320,1976,1972],{"class":329},[320,1978,397],{"class":333},[320,1980,1981,1983,1985],{"class":322,"line":506},[320,1982,509],{"class":329},[320,1984,434],{"class":433},[320,1986,454],{"class":329},[801,1988,1990],{"to":1989},"https://cientos.tresjs.org/guide/loaders/use-gltf.html",[278,1991,1992,1993,1995],{},"Learn more about the ",[288,1994,1885],{}," composable.",[1016,1997,1999],{"id":1998},"add-rig-to-the-scene","Add Rig to the Scene",[278,2001,2002],{},"The Rig is the root object that contains the entire model and its animations. You can access it from the individual nodes.",[980,2004,2005],{},[278,2006,2007],{},"The Rig might be named differently depending on the model. Check the model's structure to find the correct root object.",[311,2009,2011],{"className":420,"code":2010,"filename":1896,"language":423,"meta":253,"style":253},"\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",[288,2012,2013,2033,2051,2055,2087,2091,2096,2126,2134,2138,2146,2181],{"__ignoreMap":253},[320,2014,2015,2017,2019,2021,2023,2025,2027,2029,2031],{"class":322,"line":254},[320,2016,430],{"class":329},[320,2018,434],{"class":433},[320,2020,438],{"class":437},[320,2022,441],{"class":437},[320,2024,444],{"class":329},[320,2026,447],{"class":329},[320,2028,316],{"class":346},[320,2030,447],{"class":329},[320,2032,454],{"class":329},[320,2034,2035,2037,2039,2041,2043,2045,2047,2049],{"class":322,"line":255},[320,2036,326],{"class":325},[320,2038,330],{"class":329},[320,2040,1927],{"class":333},[320,2042,337],{"class":329},[320,2044,340],{"class":325},[320,2046,343],{"class":329},[320,2048,298],{"class":346},[320,2050,350],{"class":329},[320,2052,2053],{"class":322,"line":372},[320,2054,375],{"emptyLinePlaceholder":39},[320,2056,2057,2059,2061,2063,2065,2067,2069,2071,2073,2075,2077,2079,2081,2083,2085],{"class":322,"line":378},[320,2058,482],{"class":437},[320,2060,330],{"class":329},[320,2062,1950],{"class":433},[320,2064,1953],{"class":329},[320,2066,1956],{"class":333},[320,2068,490],{"class":329},[320,2070,1961],{"class":333},[320,2072,394],{"class":329},[320,2074,498],{"class":329},[320,2076,1927],{"class":381},[320,2078,385],{"class":333},[320,2080,1972],{"class":329},[320,2082,1833],{"class":346},[320,2084,1972],{"class":329},[320,2086,397],{"class":333},[320,2088,2089],{"class":322,"line":506},[320,2090,375],{"emptyLinePlaceholder":39},[320,2092,2093],{"class":322,"line":516},[320,2094,2095],{"class":1102},"// We access the rig from the individual nodes\n",[320,2097,2098,2100,2103,2105,2108,2110,2112,2114,2117,2119,2121,2123],{"class":322,"line":521},[320,2099,482],{"class":437},[320,2101,2102],{"class":333}," rig ",[320,2104,444],{"class":329},[320,2106,2107],{"class":381}," computed",[320,2109,385],{"class":333},[320,2111,1091],{"class":329},[320,2113,1094],{"class":437},[320,2115,2116],{"class":333}," nodes",[320,2118,1215],{"class":329},[320,2120,1296],{"class":333},[320,2122,1215],{"class":329},[320,2124,2125],{"class":333},"Rig)\n",[320,2127,2128,2130,2132],{"class":322,"line":531},[320,2129,509],{"class":329},[320,2131,434],{"class":433},[320,2133,454],{"class":329},[320,2135,2136],{"class":322,"line":540},[320,2137,375],{"emptyLinePlaceholder":39},[320,2139,2140,2142,2144],{"class":322,"line":556},[320,2141,430],{"class":329},[320,2143,526],{"class":433},[320,2145,454],{"class":329},[320,2147,2148,2151,2154,2157,2159,2161,2164,2166,2168,2171,2173,2175,2177,2179],{"class":322,"line":591},[320,2149,2150],{"class":329},"   \u003C",[320,2152,2153],{"class":433},"primitive",[320,2155,2156],{"class":325}," v-if",[320,2158,444],{"class":329},[320,2160,447],{"class":329},[320,2162,2163],{"class":333},"rig",[320,2165,447],{"class":329},[320,2167,710],{"class":329},[320,2169,2170],{"class":437},"object",[320,2172,444],{"class":329},[320,2174,447],{"class":329},[320,2176,2163],{"class":333},[320,2178,447],{"class":329},[320,2180,744],{"class":329},[320,2182,2183,2185,2187],{"class":322,"line":597},[320,2184,509],{"class":329},[320,2186,526],{"class":433},[320,2188,454],{"class":329},[245,2190,2192],{"id":2191},"animation-control","Animation Control",[1013,2194,2195,2202,2211,2394,2401,2405,2412,2457,2461,2468,2514,2518,2529,3070,3075],{},[1016,2196,1882,2198,2201],{"id":2197},"use-the-useanimations-composable",[288,2199,2200],{},"useAnimations"," Composable",[278,2203,813,2204,2206,2207,2210],{},[288,2205,2200],{}," composable helps manage and play animations from your model. It takes the animations array and the rig as parameters and returns the ",[288,2208,2209],{},"AnimationClips"," (actions).",[311,2212,2214],{"className":420,"code":2213,"filename":1896,"language":423,"meta":253,"style":253},"\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",[288,2215,2216,2236,2259,2263,2295,2299,2333,2359,2363,2386],{"__ignoreMap":253},[320,2217,2218,2220,2222,2224,2226,2228,2230,2232,2234],{"class":322,"line":254},[320,2219,430],{"class":329},[320,2221,434],{"class":433},[320,2223,438],{"class":437},[320,2225,441],{"class":437},[320,2227,444],{"class":329},[320,2229,447],{"class":329},[320,2231,316],{"class":346},[320,2233,447],{"class":329},[320,2235,454],{"class":329},[320,2237,2238,2240,2242,2244,2246,2249,2251,2253,2255,2257],{"class":322,"line":255},[320,2239,326],{"class":325},[320,2241,330],{"class":329},[320,2243,1927],{"class":333},[320,2245,490],{"class":329},[320,2247,2248],{"class":333}," useAnimations",[320,2250,337],{"class":329},[320,2252,340],{"class":325},[320,2254,343],{"class":329},[320,2256,298],{"class":346},[320,2258,350],{"class":329},[320,2260,2261],{"class":322,"line":372},[320,2262,375],{"emptyLinePlaceholder":39},[320,2264,2265,2267,2269,2271,2273,2275,2277,2279,2281,2283,2285,2287,2289,2291,2293],{"class":322,"line":378},[320,2266,482],{"class":437},[320,2268,330],{"class":329},[320,2270,1950],{"class":433},[320,2272,1953],{"class":329},[320,2274,1956],{"class":333},[320,2276,490],{"class":329},[320,2278,1961],{"class":333},[320,2280,394],{"class":329},[320,2282,498],{"class":329},[320,2284,1927],{"class":381},[320,2286,385],{"class":333},[320,2288,1972],{"class":329},[320,2290,1833],{"class":346},[320,2292,1972],{"class":329},[320,2294,397],{"class":333},[320,2296,2297],{"class":322,"line":506},[320,2298,375],{"emptyLinePlaceholder":39},[320,2300,2301,2303,2306,2308,2310,2312,2314,2316,2318,2320,2322,2324,2327,2330],{"class":322,"line":516},[320,2302,482],{"class":437},[320,2304,2305],{"class":333}," animations ",[320,2307,444],{"class":329},[320,2309,2107],{"class":381},[320,2311,385],{"class":333},[320,2313,1091],{"class":329},[320,2315,1094],{"class":437},[320,2317,1956],{"class":333},[320,2319,1215],{"class":329},[320,2321,1296],{"class":333},[320,2323,580],{"class":329},[320,2325,2326],{"class":333},"animations ",[320,2328,2329],{"class":329},"||",[320,2331,2332],{"class":333}," [])\n",[320,2334,2335,2337,2339,2341,2343,2345,2347,2349,2351,2353,2355,2357],{"class":322,"line":521},[320,2336,482],{"class":437},[320,2338,2102],{"class":333},[320,2340,444],{"class":329},[320,2342,2107],{"class":381},[320,2344,385],{"class":333},[320,2346,1091],{"class":329},[320,2348,1094],{"class":437},[320,2350,2116],{"class":333},[320,2352,1215],{"class":329},[320,2354,1296],{"class":333},[320,2356,1215],{"class":329},[320,2358,2125],{"class":333},[320,2360,2361],{"class":322,"line":531},[320,2362,375],{"emptyLinePlaceholder":39},[320,2364,2365,2367,2369,2372,2374,2376,2378,2381,2383],{"class":322,"line":540},[320,2366,482],{"class":437},[320,2368,330],{"class":329},[320,2370,2371],{"class":333}," actions ",[320,2373,394],{"class":329},[320,2375,498],{"class":329},[320,2377,2248],{"class":381},[320,2379,2380],{"class":333},"(animations",[320,2382,490],{"class":329},[320,2384,2385],{"class":333}," rig)\n",[320,2387,2388,2390,2392],{"class":322,"line":556},[320,2389,509],{"class":329},[320,2391,434],{"class":433},[320,2393,454],{"class":329},[801,2395,2397],{"to":2396},"https://cientos.tresjs.org/guide/abstractions/use-animations.html",[278,2398,1992,2399,1995],{},[288,2400,2200],{},[1016,2402,2404],{"id":2403},"play-an-animation","Play an Animation",[278,2406,2407,2408,2411],{},"You can play an animation by calling the ",[288,2409,2410],{},"play"," method on the desired action. For example, to play the \"Cheer\" animation:",[311,2413,2415],{"className":313,"code":2414,"language":316,"meta":253,"style":253},"const { actions } = useAnimations(animations, rig)\n\nactions.Cheer?.play()\n",[288,2416,2417,2437,2441],{"__ignoreMap":253},[320,2418,2419,2421,2423,2425,2427,2429,2431,2433,2435],{"class":322,"line":254},[320,2420,482],{"class":437},[320,2422,330],{"class":329},[320,2424,2371],{"class":333},[320,2426,394],{"class":329},[320,2428,498],{"class":329},[320,2430,2248],{"class":381},[320,2432,2380],{"class":333},[320,2434,490],{"class":329},[320,2436,2385],{"class":333},[320,2438,2439],{"class":322,"line":255},[320,2440,375],{"emptyLinePlaceholder":39},[320,2442,2443,2446,2448,2451,2453,2455],{"class":322,"line":372},[320,2444,2445],{"class":333},"actions",[320,2447,1215],{"class":329},[320,2449,2450],{"class":333},"Cheer",[320,2452,580],{"class":329},[320,2454,2410],{"class":381},[320,2456,503],{"class":333},[1016,2458,2460],{"id":2459},"set-animation-loop","Set animation loop",[278,2462,2463,2464,2467],{},"You can set the loop mode of an animation using the ",[288,2465,2466],{},"setLoop"," method. For example, to make the \"Cheer\" animation loop indefinitely:",[311,2469,2471],{"className":313,"code":2470,"language":316,"meta":253,"style":253},"actions.Cheer?.setLoop(THREE.LoopRepeat, Infinity)\nactions.Cheer?.play()\n",[288,2472,2473,2500],{"__ignoreMap":253},[320,2474,2475,2477,2479,2481,2483,2485,2488,2490,2493,2495,2498],{"class":322,"line":254},[320,2476,2445],{"class":333},[320,2478,1215],{"class":329},[320,2480,2450],{"class":333},[320,2482,580],{"class":329},[320,2484,2466],{"class":381},[320,2486,2487],{"class":333},"(THREE",[320,2489,1215],{"class":329},[320,2491,2492],{"class":333},"LoopRepeat",[320,2494,490],{"class":329},[320,2496,2497],{"class":329}," Infinity",[320,2499,397],{"class":333},[320,2501,2502,2504,2506,2508,2510,2512],{"class":322,"line":255},[320,2503,2445],{"class":333},[320,2505,1215],{"class":329},[320,2507,2450],{"class":333},[320,2509,580],{"class":329},[320,2511,2410],{"class":381},[320,2513,503],{"class":333},[1016,2515,2517],{"id":2516},"smooth-animation-transitions","Smooth Animation Transitions",[278,2519,2520,2521,2524,2525,2528],{},"To create smooth transitions between animations, use the ",[288,2522,2523],{},"fadeIn"," and ",[288,2526,2527],{},"fadeOut"," methods. This prevents abrupt changes and creates more natural character movement:",[311,2530,2532],{"className":420,"code":2531,"filename":1896,"language":423,"meta":253,"style":253},"\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",[288,2533,2534,2554,2576,2599,2603,2635,2665,2691,2711,2715,2744,2748,2784,2808,2825,2829,2834,2851,2871,2875,2879,2884,2896,2911,2921,2936,2941,2956,2961,2966,2972,2989,3010,3015,3020,3036,3056,3061],{"__ignoreMap":253},[320,2535,2536,2538,2540,2542,2544,2546,2548,2550,2552],{"class":322,"line":254},[320,2537,430],{"class":329},[320,2539,434],{"class":433},[320,2541,438],{"class":437},[320,2543,441],{"class":437},[320,2545,444],{"class":329},[320,2547,447],{"class":329},[320,2549,316],{"class":346},[320,2551,447],{"class":329},[320,2553,454],{"class":329},[320,2555,2556,2558,2560,2562,2564,2566,2568,2570,2572,2574],{"class":322,"line":255},[320,2557,326],{"class":325},[320,2559,330],{"class":329},[320,2561,1927],{"class":333},[320,2563,490],{"class":329},[320,2565,2248],{"class":333},[320,2567,337],{"class":329},[320,2569,340],{"class":325},[320,2571,343],{"class":329},[320,2573,298],{"class":346},[320,2575,350],{"class":329},[320,2577,2578,2580,2583,2585,2588,2590,2592,2594,2597],{"class":322,"line":372},[320,2579,326],{"class":325},[320,2581,2582],{"class":325}," type",[320,2584,330],{"class":329},[320,2586,2587],{"class":333}," AnimationAction",[320,2589,337],{"class":329},[320,2591,340],{"class":325},[320,2593,343],{"class":329},[320,2595,2596],{"class":346},"three",[320,2598,350],{"class":329},[320,2600,2601],{"class":322,"line":378},[320,2602,375],{"emptyLinePlaceholder":39},[320,2604,2605,2607,2609,2611,2613,2615,2617,2619,2621,2623,2625,2627,2629,2631,2633],{"class":322,"line":506},[320,2606,482],{"class":437},[320,2608,330],{"class":329},[320,2610,1950],{"class":433},[320,2612,1953],{"class":329},[320,2614,1956],{"class":333},[320,2616,490],{"class":329},[320,2618,1961],{"class":333},[320,2620,394],{"class":329},[320,2622,498],{"class":329},[320,2624,1927],{"class":381},[320,2626,385],{"class":333},[320,2628,1972],{"class":329},[320,2630,1833],{"class":346},[320,2632,1972],{"class":329},[320,2634,397],{"class":333},[320,2636,2637,2639,2641,2643,2645,2647,2649,2651,2653,2655,2657,2659,2661,2663],{"class":322,"line":516},[320,2638,482],{"class":437},[320,2640,2305],{"class":333},[320,2642,444],{"class":329},[320,2644,2107],{"class":381},[320,2646,385],{"class":333},[320,2648,1091],{"class":329},[320,2650,1094],{"class":437},[320,2652,1956],{"class":333},[320,2654,1215],{"class":329},[320,2656,1296],{"class":333},[320,2658,580],{"class":329},[320,2660,2326],{"class":333},[320,2662,2329],{"class":329},[320,2664,2332],{"class":333},[320,2666,2667,2669,2671,2673,2675,2677,2679,2681,2683,2685,2687,2689],{"class":322,"line":521},[320,2668,482],{"class":437},[320,2670,2102],{"class":333},[320,2672,444],{"class":329},[320,2674,2107],{"class":381},[320,2676,385],{"class":333},[320,2678,1091],{"class":329},[320,2680,1094],{"class":437},[320,2682,2116],{"class":333},[320,2684,1215],{"class":329},[320,2686,1296],{"class":333},[320,2688,1215],{"class":329},[320,2690,2125],{"class":333},[320,2692,2693,2695,2697,2699,2701,2703,2705,2707,2709],{"class":322,"line":531},[320,2694,482],{"class":437},[320,2696,330],{"class":329},[320,2698,2371],{"class":333},[320,2700,394],{"class":329},[320,2702,498],{"class":329},[320,2704,2248],{"class":381},[320,2706,2380],{"class":333},[320,2708,490],{"class":329},[320,2710,2385],{"class":333},[320,2712,2713],{"class":322,"line":540},[320,2714,375],{"emptyLinePlaceholder":39},[320,2716,2717,2720,2723,2725,2727,2729,2732,2734,2736,2738,2740,2742],{"class":322,"line":556},[320,2718,2719],{"class":437},"let",[320,2721,2722],{"class":333}," currentAction ",[320,2724,444],{"class":329},[320,2726,1163],{"class":381},[320,2728,430],{"class":329},[320,2730,2731],{"class":1211},"AnimationAction",[320,2733,1221],{"class":329},[320,2735,1224],{"class":1211},[320,2737,1227],{"class":329},[320,2739,385],{"class":333},[320,2741,1232],{"class":329},[320,2743,397],{"class":333},[320,2745,2746],{"class":322,"line":591},[320,2747,375],{"emptyLinePlaceholder":39},[320,2749,2750,2752,2755,2757,2759,2762,2764,2767,2769,2772,2774,2777,2780,2782],{"class":322,"line":597},[320,2751,482],{"class":437},[320,2753,2754],{"class":333}," transitionToAnimation ",[320,2756,444],{"class":329},[320,2758,1288],{"class":329},[320,2760,2761],{"class":1532},"animationName",[320,2763,1953],{"class":329},[320,2765,2766],{"class":1211}," string",[320,2768,490],{"class":329},[320,2770,2771],{"class":1532}," duration",[320,2773,498],{"class":329},[320,2775,2776],{"class":721}," 0.5",[320,2778,2779],{"class":329},")",[320,2781,1094],{"class":437},[320,2783,1097],{"class":329},[320,2785,2786,2789,2792,2794,2797,2799,2801,2803,2805],{"class":322,"line":1305},[320,2787,2788],{"class":437},"  const",[320,2790,2791],{"class":333}," nextAction",[320,2793,498],{"class":329},[320,2795,2796],{"class":333}," actions",[320,2798,1215],{"class":329},[320,2800,1296],{"class":333},[320,2802,569],{"class":433},[320,2804,2761],{"class":333},[320,2806,2807],{"class":433},"]\n",[320,2809,2810,2812,2814,2817,2820,2822],{"class":322,"line":1331},[320,2811,1285],{"class":325},[320,2813,1288],{"class":433},[320,2815,2816],{"class":329},"!",[320,2818,2819],{"class":333},"nextAction",[320,2821,1299],{"class":433},[320,2823,2824],{"class":325},"return\n",[320,2826,2827],{"class":322,"line":1353},[320,2828,375],{"emptyLinePlaceholder":39},[320,2830,2831],{"class":322,"line":1359},[320,2832,2833],{"class":1102},"  // Fade out current animation\n",[320,2835,2836,2838,2840,2843,2845,2847,2849],{"class":322,"line":1366},[320,2837,1285],{"class":325},[320,2839,1288],{"class":433},[320,2841,2842],{"class":333},"currentAction",[320,2844,1215],{"class":329},[320,2846,1296],{"class":333},[320,2848,1299],{"class":433},[320,2850,1302],{"class":329},[320,2852,2853,2856,2858,2860,2862,2864,2866,2869],{"class":322,"line":1375},[320,2854,2855],{"class":333},"    currentAction",[320,2857,1215],{"class":329},[320,2859,1296],{"class":333},[320,2861,1215],{"class":329},[320,2863,2527],{"class":381},[320,2865,385],{"class":433},[320,2867,2868],{"class":333},"duration",[320,2870,397],{"class":433},[320,2872,2873],{"class":322,"line":1380},[320,2874,1356],{"class":329},[320,2876,2877],{"class":322,"line":1389},[320,2878,375],{"emptyLinePlaceholder":39},[320,2880,2881],{"class":322,"line":1435},[320,2882,2883],{"class":1102},"  // Fade in new animation\n",[320,2885,2886,2889,2891,2894],{"class":322,"line":1469},[320,2887,2888],{"class":333},"  nextAction",[320,2890,1215],{"class":329},[320,2892,2893],{"class":381},"reset",[320,2895,503],{"class":433},[320,2897,2898,2900,2902,2905,2907,2909],{"class":322,"line":1479},[320,2899,2888],{"class":333},[320,2901,1215],{"class":329},[320,2903,2904],{"class":381},"setEffectiveWeight",[320,2906,385],{"class":433},[320,2908,727],{"class":721},[320,2910,397],{"class":433},[320,2912,2913,2915,2917,2919],{"class":322,"line":1488},[320,2914,2888],{"class":333},[320,2916,1215],{"class":329},[320,2918,2410],{"class":381},[320,2920,503],{"class":433},[320,2922,2924,2926,2928,2930,2932,2934],{"class":322,"line":2923},25,[320,2925,2888],{"class":333},[320,2927,1215],{"class":329},[320,2929,2523],{"class":381},[320,2931,385],{"class":433},[320,2933,2868],{"class":333},[320,2935,397],{"class":433},[320,2937,2939],{"class":322,"line":2938},26,[320,2940,375],{"emptyLinePlaceholder":39},[320,2942,2944,2947,2949,2951,2953],{"class":322,"line":2943},27,[320,2945,2946],{"class":333},"  currentAction",[320,2948,1215],{"class":329},[320,2950,1296],{"class":333},[320,2952,498],{"class":329},[320,2954,2955],{"class":333}," nextAction\n",[320,2957,2959],{"class":322,"line":2958},28,[320,2960,1756],{"class":329},[320,2962,2964],{"class":322,"line":2963},29,[320,2965,375],{"emptyLinePlaceholder":39},[320,2967,2969],{"class":322,"line":2968},30,[320,2970,2971],{"class":1102},"// Example: Transition from Idle to Cheer\n",[320,2973,2975,2977,2980,2982,2985,2987],{"class":322,"line":2974},31,[320,2976,482],{"class":437},[320,2978,2979],{"class":333}," playCheerAnimation ",[320,2981,444],{"class":329},[320,2983,2984],{"class":329}," ()",[320,2986,1094],{"class":437},[320,2988,1097],{"class":329},[320,2990,2992,2995,2997,2999,3001,3003,3005,3008],{"class":322,"line":2991},32,[320,2993,2994],{"class":381},"  transitionToAnimation",[320,2996,385],{"class":433},[320,2998,1972],{"class":329},[320,3000,2450],{"class":346},[320,3002,1972],{"class":329},[320,3004,490],{"class":329},[320,3006,3007],{"class":721}," 0.3",[320,3009,397],{"class":433},[320,3011,3013],{"class":322,"line":3012},33,[320,3014,1756],{"class":329},[320,3016,3018],{"class":322,"line":3017},34,[320,3019,375],{"emptyLinePlaceholder":39},[320,3021,3023,3025,3028,3030,3032,3034],{"class":322,"line":3022},35,[320,3024,482],{"class":437},[320,3026,3027],{"class":333}," playIdleAnimation ",[320,3029,444],{"class":329},[320,3031,2984],{"class":329},[320,3033,1094],{"class":437},[320,3035,1097],{"class":329},[320,3037,3039,3041,3043,3045,3048,3050,3052,3054],{"class":322,"line":3038},36,[320,3040,2994],{"class":381},[320,3042,385],{"class":433},[320,3044,1972],{"class":329},[320,3046,3047],{"class":346},"Idle",[320,3049,1972],{"class":329},[320,3051,490],{"class":329},[320,3053,3007],{"class":721},[320,3055,397],{"class":433},[320,3057,3059],{"class":322,"line":3058},37,[320,3060,1756],{"class":329},[320,3062,3064,3066,3068],{"class":322,"line":3063},38,[320,3065,509],{"class":329},[320,3067,434],{"class":433},[320,3069,454],{"class":329},[278,3071,3072],{},[1029,3073,3074],{},"Key points about animation transitions:",[1794,3076,3077,3083,3089,3095,3101],{},[1797,3078,3079,3082],{},[288,3080,3081],{},"fadeOut(duration)"," gradually reduces the animation's influence over the specified duration",[1797,3084,3085,3088],{},[288,3086,3087],{},"fadeIn(duration)"," gradually increases the animation's influence over the specified duration",[1797,3090,3091,3094],{},[288,3092,3093],{},"reset()"," resets the animation to its starting frame",[1797,3096,3097,3100],{},[288,3098,3099],{},"setEffectiveWeight(1)"," ensures the animation has full influence when active",[1797,3102,3103],{},"Shorter durations (0.1-0.3s) work well for quick actions, longer ones (0.5-1s) for smoother character transitions",[990,3105,3106],{},"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":253,"searchDepth":254,"depth":255,"links":3108},[3109,3110,3111],{"id":1788,"depth":255,"text":1789},{"id":1844,"depth":255,"text":1845},{"id":2191,"depth":255,"text":2192},"Learn how to animate 3D models in TresJS",{"thumbnail":3114},"/recipes/model-n-animations/model-n-animations.png",{"title":190,"description":3112},"XVGjV18vQMzy_a8qG_6_0Fb8p7CTg-ON0eb5Nqe-22c",{"id":3118,"title":194,"body":3119,"description":5257,"extension":259,"links":260,"meta":5258,"navigation":39,"path":195,"seo":5260,"stem":196,"__hash__":5261},"docs/4.cookbook/4.advanced-gsap-animations.md",{"type":242,"value":3120,"toc":5250},[3121,3124,3127,4140,4144,4148,4151,4154,4791,4795,4798,4833,5029,5033,5036,5236,5241,5247],[3122,3123],"examples-advanced-gsap-animations",{},[278,3125,3126],{},"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.",[1013,3128,3129,3133,3136,3181,3185,3191,3254,3265,3269,3272,3366,3370,3373,3602,3606,3613,3995,3999,4005,4134],{},[1016,3130,3132],{"id":3131},"install-gsap","Install GSAP",[278,3134,3135],{},"First, install GSAP as a dependency in your project:",[416,3137,3138,3152,3167],{},[311,3139,3141],{"className":1860,"code":3140,"filename":1869,"language":1862,"meta":253,"style":253},"npm install gsap\n",[288,3142,3143],{"__ignoreMap":253},[320,3144,3145,3147,3149],{"class":322,"line":254},[320,3146,1869],{"class":1211},[320,3148,1872],{"class":346},[320,3150,3151],{"class":346}," gsap\n",[311,3153,3156],{"className":1860,"code":3154,"filename":3155,"language":1862,"meta":253,"style":253},"yarn add gsap\n","yarn",[288,3157,3158],{"__ignoreMap":253},[320,3159,3160,3162,3165],{"class":322,"line":254},[320,3161,3155],{"class":1211},[320,3163,3164],{"class":346}," add",[320,3166,3151],{"class":346},[311,3168,3171],{"className":1860,"code":3169,"filename":3170,"language":1862,"meta":253,"style":253},"pnpm install gsap\n","pnpm",[288,3172,3173],{"__ignoreMap":253},[320,3174,3175,3177,3179],{"class":322,"line":254},[320,3176,3170],{"class":1211},[320,3178,1872],{"class":346},[320,3180,3151],{"class":346},[1016,3182,3184],{"id":3183},"import-required-modules","Import required modules",[278,3186,3187,3188,3190],{},"Import GSAP and the necessary Vue composables. Use ",[288,3189,1127],{}," for better performance with Three.js objects:",[311,3192,3194],{"className":313,"code":3193,"language":316,"meta":253,"style":253},"import { shallowRef, watch } from 'vue'\nimport { OrbitControls } from '@tresjs/cientos'\nimport gsap from 'gsap'\n",[288,3195,3196,3220,3238],{"__ignoreMap":253},[320,3197,3198,3200,3202,3205,3207,3210,3212,3214,3216,3218],{"class":322,"line":254},[320,3199,326],{"class":325},[320,3201,330],{"class":329},[320,3203,3204],{"class":333}," shallowRef",[320,3206,490],{"class":329},[320,3208,3209],{"class":333}," watch",[320,3211,337],{"class":329},[320,3213,340],{"class":325},[320,3215,343],{"class":329},[320,3217,423],{"class":346},[320,3219,350],{"class":329},[320,3221,3222,3224,3226,3228,3230,3232,3234,3236],{"class":322,"line":255},[320,3223,326],{"class":325},[320,3225,330],{"class":329},[320,3227,359],{"class":333},[320,3229,337],{"class":329},[320,3231,340],{"class":325},[320,3233,343],{"class":329},[320,3235,298],{"class":346},[320,3237,350],{"class":329},[320,3239,3240,3242,3245,3247,3249,3252],{"class":322,"line":372},[320,3241,326],{"class":325},[320,3243,3244],{"class":333}," gsap ",[320,3246,657],{"class":325},[320,3248,343],{"class":329},[320,3250,3251],{"class":346},"gsap",[320,3253,350],{"class":329},[980,3255,3256],{},[278,3257,1504,3258,3260,3261,3264],{},[288,3259,1127],{}," instead of ",[288,3262,3263],{},"ref"," to avoid unnecessary reactivity on Three.js objects, which improves performance.",[1016,3266,3268],{"id":3267},"create-multiple-objects-to-animate","Create multiple objects to animate",[278,3270,3271],{},"Set up an array of positions for multiple boxes that will be animated with stagger effects:",[311,3273,3275],{"className":313,"code":3274,"language":316,"meta":253,"style":253},"const boxesRef = shallowRef()\nconst zs = []\nfor (let z = -4.5; z \u003C= 4.5; z++) {\n  zs.push(z)\n}\n",[288,3276,3277,3290,3302,3345,3362],{"__ignoreMap":253},[320,3278,3279,3281,3284,3286,3288],{"class":322,"line":254},[320,3280,482],{"class":437},[320,3282,3283],{"class":333}," boxesRef ",[320,3285,444],{"class":329},[320,3287,3204],{"class":381},[320,3289,503],{"class":333},[320,3291,3292,3294,3297,3299],{"class":322,"line":255},[320,3293,482],{"class":437},[320,3295,3296],{"class":333}," zs ",[320,3298,444],{"class":329},[320,3300,3301],{"class":333}," []\n",[320,3303,3304,3307,3309,3311,3314,3316,3319,3322,3325,3327,3330,3333,3335,3338,3341,3343],{"class":322,"line":372},[320,3305,3306],{"class":325},"for",[320,3308,1288],{"class":333},[320,3310,2719],{"class":437},[320,3312,3313],{"class":333}," z ",[320,3315,444],{"class":329},[320,3317,3318],{"class":329}," -",[320,3320,3321],{"class":721},"4.5",[320,3323,3324],{"class":329},";",[320,3326,3313],{"class":333},[320,3328,3329],{"class":329},"\u003C=",[320,3331,3332],{"class":721}," 4.5",[320,3334,3324],{"class":329},[320,3336,3337],{"class":333}," z",[320,3339,3340],{"class":329},"++",[320,3342,1299],{"class":333},[320,3344,1302],{"class":329},[320,3346,3347,3350,3352,3355,3357,3360],{"class":322,"line":378},[320,3348,3349],{"class":333},"  zs",[320,3351,1215],{"class":329},[320,3353,3354],{"class":381},"push",[320,3356,385],{"class":433},[320,3358,3359],{"class":333},"z",[320,3361,397],{"class":433},[320,3363,3364],{"class":322,"line":506},[320,3365,1756],{"class":329},[1016,3367,3369],{"id":3368},"set-up-the-scene-structure","Set up the scene structure",[278,3371,3372],{},"Create a group of meshes that will be animated together:",[311,3374,3376],{"className":420,"code":3375,"language":423,"meta":253,"style":253},"\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",[288,3377,3378,3386,3420,3428,3448,3518,3527,3535,3544,3552,3594],{"__ignoreMap":253},[320,3379,3380,3382,3384],{"class":322,"line":254},[320,3381,430],{"class":329},[320,3383,526],{"class":433},[320,3385,454],{"class":329},[320,3387,3388,3390,3392,3394,3396,3398,3400,3403,3406,3408,3410,3412,3414,3416,3418],{"class":322,"line":255},[320,3389,534],{"class":329},[320,3391,707],{"class":433},[320,3393,710],{"class":329},[320,3395,1409],{"class":437},[320,3397,444],{"class":329},[320,3399,447],{"class":329},[320,3401,3402],{"class":329},"[-",[320,3404,3405],{"class":721},"15",[320,3407,574],{"class":329},[320,3409,772],{"class":721},[320,3411,574],{"class":329},[320,3413,3405],{"class":721},[320,3415,586],{"class":329},[320,3417,447],{"class":329},[320,3419,744],{"class":329},[320,3421,3422,3424,3426],{"class":322,"line":372},[320,3423,534],{"class":329},[320,3425,182],{"class":433},[320,3427,744],{"class":329},[320,3429,3430,3432,3435,3437,3439,3441,3444,3446],{"class":322,"line":378},[320,3431,534],{"class":329},[320,3433,3434],{"class":433},"TresGroup",[320,3436,1163],{"class":437},[320,3438,444],{"class":329},[320,3440,447],{"class":329},[320,3442,3443],{"class":346},"boxesRef",[320,3445,447],{"class":329},[320,3447,454],{"class":329},[320,3449,3450,3452,3454,3457,3459,3461,3463,3465,3467,3470,3473,3476,3478,3480,3483,3485,3487,3489,3491,3493,3495,3497,3499,3501,3503,3505,3508,3510,3512,3514,3516],{"class":322,"line":506},[320,3451,704],{"class":329},[320,3453,1394],{"class":433},[320,3455,3456],{"class":325}," v-for",[320,3458,444],{"class":329},[320,3460,447],{"class":329},[320,3462,385],{"class":329},[320,3464,3359],{"class":333},[320,3466,574],{"class":329},[320,3468,3469],{"class":333},"i",[320,3471,3472],{"class":329},") of ",[320,3474,3475],{"class":333},"zs",[320,3477,447],{"class":329},[320,3479,710],{"class":329},[320,3481,3482],{"class":437},"key",[320,3484,444],{"class":329},[320,3486,447],{"class":329},[320,3488,3469],{"class":333},[320,3490,447],{"class":329},[320,3492,710],{"class":329},[320,3494,1409],{"class":437},[320,3496,444],{"class":329},[320,3498,447],{"class":329},[320,3500,569],{"class":329},[320,3502,1418],{"class":721},[320,3504,574],{"class":329},[320,3506,3507],{"class":721},"0.5",[320,3509,574],{"class":329},[320,3511,3359],{"class":333},[320,3513,586],{"class":329},[320,3515,447],{"class":329},[320,3517,454],{"class":329},[320,3519,3520,3523,3525],{"class":322,"line":516},[320,3521,3522],{"class":329},"      \u003C",[320,3524,1440],{"class":433},[320,3526,744],{"class":329},[320,3528,3529,3531,3533],{"class":322,"line":521},[320,3530,3522],{"class":329},[320,3532,1474],{"class":433},[320,3534,744],{"class":329},[320,3536,3537,3540,3542],{"class":322,"line":531},[320,3538,3539],{"class":329},"    \u003C/",[320,3541,1394],{"class":433},[320,3543,454],{"class":329},[320,3545,3546,3548,3550],{"class":322,"line":540},[320,3547,787],{"class":329},[320,3549,3434],{"class":433},[320,3551,454],{"class":329},[320,3553,3554,3556,3558,3560,3562,3564,3566,3568,3570,3572,3574,3576,3579,3581,3583,3586,3588,3590,3592],{"class":322,"line":556},[320,3555,534],{"class":329},[320,3557,759],{"class":433},[320,3559,710],{"class":329},[320,3561,562],{"class":437},[320,3563,444],{"class":329},[320,3565,447],{"class":329},[320,3567,569],{"class":329},[320,3569,772],{"class":721},[320,3571,574],{"class":329},[320,3573,772],{"class":721},[320,3575,574],{"class":329},[320,3577,3578],{"class":721},"0x444444",[320,3580,574],{"class":329},[320,3582,1972],{"class":329},[320,3584,3585],{"class":346},"teal",[320,3587,1972],{"class":329},[320,3589,586],{"class":329},[320,3591,447],{"class":329},[320,3593,744],{"class":329},[320,3595,3596,3598,3600],{"class":322,"line":591},[320,3597,509],{"class":329},[320,3599,526],{"class":433},[320,3601,454],{"class":329},[1016,3603,3605],{"id":3604},"create-the-gsap-staggered-animation","Create the GSAP staggered animation",[278,3607,3608,3609,3612],{},"Use Vue's ",[288,3610,3611],{},"watch"," to set up the animation when the template ref is available:",[311,3614,3616],{"className":313,"code":3615,"language":316,"meta":253,"style":253},"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",[288,3617,3618,3633,3651,3655,3660,3699,3719,3724,3759,3776,3780,3784,3795,3812,3824,3833,3845,3858,3871,3876,3880,3884,3889,3908,3920,3930,3937,3941,3946,3963,3975,3983,3989],{"__ignoreMap":253},[320,3619,3620,3622,3625,3627,3629,3631],{"class":322,"line":254},[320,3621,3611],{"class":381},[320,3623,3624],{"class":333},"(boxesRef",[320,3626,490],{"class":329},[320,3628,2984],{"class":329},[320,3630,1094],{"class":437},[320,3632,1097],{"class":329},[320,3634,3635,3637,3639,3641,3643,3645,3647,3649],{"class":322,"line":255},[320,3636,1285],{"class":325},[320,3638,1288],{"class":433},[320,3640,2816],{"class":329},[320,3642,3443],{"class":333},[320,3644,1215],{"class":329},[320,3646,1296],{"class":333},[320,3648,1299],{"class":433},[320,3650,2824],{"class":325},[320,3652,3653],{"class":322,"line":372},[320,3654,375],{"emptyLinePlaceholder":39},[320,3656,3657],{"class":322,"line":378},[320,3658,3659],{"class":1102},"  // Get positions and rotations for all boxes\n",[320,3661,3662,3664,3667,3669,3672,3674,3676,3678,3680,3682,3684,3686,3689,3691,3693,3696],{"class":322,"line":506},[320,3663,2788],{"class":437},[320,3665,3666],{"class":333}," positions",[320,3668,498],{"class":329},[320,3670,3671],{"class":333}," Array",[320,3673,1215],{"class":329},[320,3675,657],{"class":381},[320,3677,385],{"class":433},[320,3679,3443],{"class":333},[320,3681,1215],{"class":329},[320,3683,1296],{"class":333},[320,3685,1215],{"class":329},[320,3687,3688],{"class":333},"children",[320,3690,2779],{"class":433},[320,3692,1215],{"class":329},[320,3694,3695],{"class":381},"map",[320,3697,3698],{"class":433},"(\n",[320,3700,3701,3704,3707,3709,3711,3714,3716],{"class":322,"line":516},[320,3702,3703],{"class":329},"    (",[320,3705,3706],{"class":1532},"child",[320,3708,2779],{"class":329},[320,3710,1094],{"class":437},[320,3712,3713],{"class":333}," child",[320,3715,1215],{"class":329},[320,3717,3718],{"class":333},"position\n",[320,3720,3721],{"class":322,"line":521},[320,3722,3723],{"class":433},"  )\n",[320,3725,3726,3728,3731,3733,3735,3737,3739,3741,3743,3745,3747,3749,3751,3753,3755,3757],{"class":322,"line":531},[320,3727,2788],{"class":437},[320,3729,3730],{"class":333}," rotations",[320,3732,498],{"class":329},[320,3734,3671],{"class":333},[320,3736,1215],{"class":329},[320,3738,657],{"class":381},[320,3740,385],{"class":433},[320,3742,3443],{"class":333},[320,3744,1215],{"class":329},[320,3746,1296],{"class":333},[320,3748,1215],{"class":329},[320,3750,3688],{"class":333},[320,3752,2779],{"class":433},[320,3754,1215],{"class":329},[320,3756,3695],{"class":381},[320,3758,3698],{"class":433},[320,3760,3761,3763,3765,3767,3769,3771,3773],{"class":322,"line":540},[320,3762,3703],{"class":329},[320,3764,3706],{"class":1532},[320,3766,2779],{"class":329},[320,3768,1094],{"class":437},[320,3770,3713],{"class":333},[320,3772,1215],{"class":329},[320,3774,3775],{"class":333},"rotation\n",[320,3777,3778],{"class":322,"line":556},[320,3779,3723],{"class":433},[320,3781,3782],{"class":322,"line":591},[320,3783,375],{"emptyLinePlaceholder":39},[320,3785,3786,3788,3791,3793],{"class":322,"line":597},[320,3787,2788],{"class":437},[320,3789,3790],{"class":333}," animProperties",[320,3792,498],{"class":329},[320,3794,1097],{"class":329},[320,3796,3797,3800,3802,3804,3807,3809],{"class":322,"line":1305},[320,3798,3799],{"class":433},"    ease",[320,3801,1953],{"class":329},[320,3803,343],{"class":329},[320,3805,3806],{"class":346},"power1.inOut",[320,3808,1972],{"class":329},[320,3810,3811],{"class":329},",\n",[320,3813,3814,3817,3819,3822],{"class":322,"line":1331},[320,3815,3816],{"class":433},"    duration",[320,3818,1953],{"class":329},[320,3820,3821],{"class":721}," 1",[320,3823,3811],{"class":329},[320,3825,3826,3829,3831],{"class":322,"line":1353},[320,3827,3828],{"class":433},"    stagger",[320,3830,1953],{"class":329},[320,3832,1097],{"class":329},[320,3834,3835,3838,3840,3843],{"class":322,"line":1359},[320,3836,3837],{"class":433},"      each",[320,3839,1953],{"class":329},[320,3841,3842],{"class":721}," 0.25",[320,3844,3811],{"class":329},[320,3846,3847,3850,3852,3854,3856],{"class":322,"line":1366},[320,3848,3849],{"class":433},"      repeat",[320,3851,1953],{"class":329},[320,3853,3318],{"class":329},[320,3855,727],{"class":721},[320,3857,3811],{"class":329},[320,3859,3860,3863,3865,3869],{"class":322,"line":1375},[320,3861,3862],{"class":433},"      yoyo",[320,3864,1953],{"class":329},[320,3866,3868],{"class":3867},"sfNiH"," true",[320,3870,3811],{"class":329},[320,3872,3873],{"class":322,"line":1380},[320,3874,3875],{"class":329},"    },\n",[320,3877,3878],{"class":322,"line":1389},[320,3879,1356],{"class":329},[320,3881,3882],{"class":322,"line":1435},[320,3883,375],{"emptyLinePlaceholder":39},[320,3885,3886],{"class":322,"line":1469},[320,3887,3888],{"class":1102},"  // Animate positions\n",[320,3890,3891,3894,3896,3899,3901,3904,3906],{"class":322,"line":1479},[320,3892,3893],{"class":333},"  gsap",[320,3895,1215],{"class":329},[320,3897,3898],{"class":381},"to",[320,3900,385],{"class":433},[320,3902,3903],{"class":333},"positions",[320,3905,490],{"class":329},[320,3907,1097],{"class":329},[320,3909,3910,3913,3915,3918],{"class":322,"line":1488},[320,3911,3912],{"class":433},"    y",[320,3914,1953],{"class":329},[320,3916,3917],{"class":721}," 2.5",[320,3919,3811],{"class":329},[320,3921,3922,3925,3928],{"class":322,"line":2923},[320,3923,3924],{"class":329},"    ...",[320,3926,3927],{"class":333},"animProperties",[320,3929,3811],{"class":329},[320,3931,3932,3935],{"class":322,"line":2938},[320,3933,3934],{"class":329},"  }",[320,3936,397],{"class":433},[320,3938,3939],{"class":322,"line":2943},[320,3940,375],{"emptyLinePlaceholder":39},[320,3942,3943],{"class":322,"line":2958},[320,3944,3945],{"class":1102},"  // Animate rotations\n",[320,3947,3948,3950,3952,3954,3956,3959,3961],{"class":322,"line":2963},[320,3949,3893],{"class":333},[320,3951,1215],{"class":329},[320,3953,3898],{"class":381},[320,3955,385],{"class":433},[320,3957,3958],{"class":333},"rotations",[320,3960,490],{"class":329},[320,3962,1097],{"class":329},[320,3964,3965,3968,3970,3973],{"class":322,"line":2968},[320,3966,3967],{"class":433},"    x",[320,3969,1953],{"class":329},[320,3971,3972],{"class":721}," 2",[320,3974,3811],{"class":329},[320,3976,3977,3979,3981],{"class":322,"line":2974},[320,3978,3924],{"class":329},[320,3980,3927],{"class":333},[320,3982,3811],{"class":329},[320,3984,3985,3987],{"class":322,"line":2991},[320,3986,3934],{"class":329},[320,3988,397],{"class":433},[320,3990,3991,3993],{"class":322,"line":3012},[320,3992,394],{"class":329},[320,3994,397],{"class":333},[1016,3996,3998],{"id":3997},"understanding-gsap-stagger-options","Understanding GSAP Stagger Options",[278,4000,813,4001,4004],{},[288,4002,4003],{},"stagger"," property provides powerful control over timing:",[311,4006,4008],{"className":313,"code":4007,"language":316,"meta":253,"style":253},"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",[288,4009,4010,4021,4039,4053,4062,4076,4092,4106,4125,4130],{"__ignoreMap":253},[320,4011,4012,4014,4017,4019],{"class":322,"line":254},[320,4013,482],{"class":437},[320,4015,4016],{"class":333}," animProperties ",[320,4018,444],{"class":329},[320,4020,1097],{"class":329},[320,4022,4023,4026,4028,4030,4032,4034,4036],{"class":322,"line":255},[320,4024,4025],{"class":433},"  ease",[320,4027,1953],{"class":329},[320,4029,343],{"class":329},[320,4031,3806],{"class":346},[320,4033,1972],{"class":329},[320,4035,490],{"class":329},[320,4037,4038],{"class":1102},"     // Easing function\n",[320,4040,4041,4044,4046,4048,4050],{"class":322,"line":372},[320,4042,4043],{"class":433},"  duration",[320,4045,1953],{"class":329},[320,4047,3821],{"class":721},[320,4049,490],{"class":329},[320,4051,4052],{"class":1102},"              // Animation duration in seconds\n",[320,4054,4055,4058,4060],{"class":322,"line":378},[320,4056,4057],{"class":433},"  stagger",[320,4059,1953],{"class":329},[320,4061,1097],{"class":329},[320,4063,4064,4067,4069,4071,4073],{"class":322,"line":506},[320,4065,4066],{"class":433},"    each",[320,4068,1953],{"class":329},[320,4070,3842],{"class":721},[320,4072,490],{"class":329},[320,4074,4075],{"class":1102},"            // Delay between each object (0.25s)\n",[320,4077,4078,4081,4083,4085,4087,4089],{"class":322,"line":516},[320,4079,4080],{"class":433},"    repeat",[320,4082,1953],{"class":329},[320,4084,3318],{"class":329},[320,4086,727],{"class":721},[320,4088,490],{"class":329},[320,4090,4091],{"class":1102},"            // Infinite repeat (-1)\n",[320,4093,4094,4097,4099,4101,4103],{"class":322,"line":521},[320,4095,4096],{"class":433},"    yoyo",[320,4098,1953],{"class":329},[320,4100,3868],{"class":3867},[320,4102,490],{"class":329},[320,4104,4105],{"class":1102},"            // Reverse on alternate cycles\n",[320,4107,4108,4111,4113,4115,4118,4120,4122],{"class":322,"line":531},[320,4109,4110],{"class":433},"    from",[320,4112,1953],{"class":329},[320,4114,343],{"class":329},[320,4116,4117],{"class":346},"start",[320,4119,1972],{"class":329},[320,4121,490],{"class":329},[320,4123,4124],{"class":1102},"         // Animation direction (start, center, end)\n",[320,4126,4127],{"class":322,"line":540},[320,4128,4129],{"class":329},"  },\n",[320,4131,4132],{"class":322,"line":556},[320,4133,1756],{"class":329},[801,4135,4137],{"to":4136},"https://gsap.com/docs/v3/Staggers/",[278,4138,4139],{},"Learn more about GSAP stagger options and configurations.",[245,4141,4143],{"id":4142},"advanced-techniques","Advanced Techniques",[1016,4145,4147],{"id":4146},"timeline-control","Timeline Control",[4149,4150],"examples-advanced-gsap-timeline",{},[278,4152,4153],{},"For more complex sequences, use GSAP timelines to coordinate multiple animations:",[311,4155,4158],{"className":420,"code":4156,"filename":4157,"language":423,"meta":253,"style":253},"\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",[288,4159,4160,4180,4207,4221,4225,4238,4270,4274,4289,4308,4312,4341,4345,4350,4362,4366,4371,4376,4409,4421,4432,4448,4458,4465,4497,4517,4527,4542,4550,4567,4600,4612,4622,4633,4643,4658,4667,4673,4679,4684,4690,4713,4736,4759,4782],{"__ignoreMap":253},[320,4161,4162,4164,4166,4168,4170,4172,4174,4176,4178],{"class":322,"line":254},[320,4163,430],{"class":329},[320,4165,434],{"class":433},[320,4167,438],{"class":437},[320,4169,441],{"class":437},[320,4171,444],{"class":329},[320,4173,447],{"class":329},[320,4175,316],{"class":346},[320,4177,447],{"class":329},[320,4179,454],{"class":329},[320,4181,4182,4184,4186,4188,4190,4192,4194,4197,4199,4201,4203,4205],{"class":322,"line":255},[320,4183,326],{"class":325},[320,4185,330],{"class":329},[320,4187,3204],{"class":333},[320,4189,490],{"class":329},[320,4191,3209],{"class":333},[320,4193,490],{"class":329},[320,4195,4196],{"class":333}," onMounted",[320,4198,337],{"class":329},[320,4200,340],{"class":325},[320,4202,343],{"class":329},[320,4204,423],{"class":346},[320,4206,350],{"class":329},[320,4208,4209,4211,4213,4215,4217,4219],{"class":322,"line":372},[320,4210,326],{"class":325},[320,4212,3244],{"class":333},[320,4214,657],{"class":325},[320,4216,343],{"class":329},[320,4218,3251],{"class":346},[320,4220,350],{"class":329},[320,4222,4223],{"class":322,"line":378},[320,4224,375],{"emptyLinePlaceholder":39},[320,4226,4227,4229,4232,4234,4236],{"class":322,"line":506},[320,4228,482],{"class":437},[320,4230,4231],{"class":333}," groupRef ",[320,4233,444],{"class":329},[320,4235,3204],{"class":381},[320,4237,503],{"class":333},[320,4239,4240,4242,4245,4247,4250,4252,4255,4257,4259,4262,4264,4266,4268],{"class":322,"line":516},[320,4241,482],{"class":437},[320,4243,4244],{"class":333}," timeline ",[320,4246,444],{"class":329},[320,4248,4249],{"class":333}," gsap",[320,4251,1215],{"class":329},[320,4253,4254],{"class":381},"timeline",[320,4256,385],{"class":333},[320,4258,388],{"class":329},[320,4260,4261],{"class":433}," paused",[320,4263,1953],{"class":329},[320,4265,3868],{"class":3867},[320,4267,337],{"class":329},[320,4269,397],{"class":333},[320,4271,4272],{"class":322,"line":521},[320,4273,375],{"emptyLinePlaceholder":39},[320,4275,4276,4278,4281,4283,4285,4287],{"class":322,"line":531},[320,4277,3611],{"class":381},[320,4279,4280],{"class":333},"(groupRef",[320,4282,490],{"class":329},[320,4284,2984],{"class":329},[320,4286,1094],{"class":437},[320,4288,1097],{"class":329},[320,4290,4291,4293,4295,4297,4300,4302,4304,4306],{"class":322,"line":540},[320,4292,1285],{"class":325},[320,4294,1288],{"class":433},[320,4296,2816],{"class":329},[320,4298,4299],{"class":333},"groupRef",[320,4301,1215],{"class":329},[320,4303,1296],{"class":333},[320,4305,1299],{"class":433},[320,4307,2824],{"class":325},[320,4309,4310],{"class":322,"line":556},[320,4311,375],{"emptyLinePlaceholder":39},[320,4313,4314,4316,4319,4321,4323,4325,4327,4329,4331,4333,4335,4337,4339],{"class":322,"line":591},[320,4315,2788],{"class":437},[320,4317,4318],{"class":333}," children",[320,4320,498],{"class":329},[320,4322,3671],{"class":333},[320,4324,1215],{"class":329},[320,4326,657],{"class":381},[320,4328,385],{"class":433},[320,4330,4299],{"class":333},[320,4332,1215],{"class":329},[320,4334,1296],{"class":333},[320,4336,1215],{"class":329},[320,4338,3688],{"class":333},[320,4340,397],{"class":433},[320,4342,4343],{"class":322,"line":597},[320,4344,375],{"emptyLinePlaceholder":39},[320,4346,4347],{"class":322,"line":1305},[320,4348,4349],{"class":1102},"  // Clear existing timeline\n",[320,4351,4352,4355,4357,4360],{"class":322,"line":1331},[320,4353,4354],{"class":333},"  timeline",[320,4356,1215],{"class":329},[320,4358,4359],{"class":381},"clear",[320,4361,503],{"class":433},[320,4363,4364],{"class":322,"line":1353},[320,4365,375],{"emptyLinePlaceholder":39},[320,4367,4368],{"class":322,"line":1359},[320,4369,4370],{"class":1102},"  // Add multiple animations to timeline\n",[320,4372,4373],{"class":322,"line":1366},[320,4374,4375],{"class":333},"  timeline\n",[320,4377,4378,4381,4383,4385,4387,4389,4391,4393,4395,4397,4399,4401,4403,4405,4407],{"class":322,"line":1375},[320,4379,4380],{"class":329},"    .",[320,4382,3898],{"class":381},[320,4384,385],{"class":433},[320,4386,3688],{"class":333},[320,4388,1215],{"class":329},[320,4390,3695],{"class":381},[320,4392,385],{"class":433},[320,4394,3706],{"class":1532},[320,4396,1094],{"class":437},[320,4398,3713],{"class":333},[320,4400,1215],{"class":329},[320,4402,1409],{"class":333},[320,4404,2779],{"class":433},[320,4406,490],{"class":329},[320,4408,1097],{"class":329},[320,4410,4411,4414,4416,4419],{"class":322,"line":1380},[320,4412,4413],{"class":433},"      y",[320,4415,1953],{"class":329},[320,4417,4418],{"class":721}," 3",[320,4420,3811],{"class":329},[320,4422,4423,4426,4428,4430],{"class":322,"line":1389},[320,4424,4425],{"class":433},"      duration",[320,4427,1953],{"class":329},[320,4429,3821],{"class":721},[320,4431,3811],{"class":329},[320,4433,4434,4437,4439,4441,4444,4446],{"class":322,"line":1435},[320,4435,4436],{"class":433},"      ease",[320,4438,1953],{"class":329},[320,4440,343],{"class":329},[320,4442,4443],{"class":346},"back.out(1.7)",[320,4445,1972],{"class":329},[320,4447,3811],{"class":329},[320,4449,4450,4453,4455],{"class":322,"line":1469},[320,4451,4452],{"class":433},"      stagger",[320,4454,1953],{"class":329},[320,4456,4457],{"class":721}," 0.1\n",[320,4459,4460,4463],{"class":322,"line":1479},[320,4461,4462],{"class":329},"    }",[320,4464,397],{"class":433},[320,4466,4467,4469,4471,4473,4475,4477,4479,4481,4483,4485,4487,4489,4491,4493,4495],{"class":322,"line":1488},[320,4468,4380],{"class":329},[320,4470,3898],{"class":381},[320,4472,385],{"class":433},[320,4474,3688],{"class":333},[320,4476,1215],{"class":329},[320,4478,3695],{"class":381},[320,4480,385],{"class":433},[320,4482,3706],{"class":1532},[320,4484,1094],{"class":437},[320,4486,3713],{"class":333},[320,4488,1215],{"class":329},[320,4490,1317],{"class":333},[320,4492,2779],{"class":433},[320,4494,490],{"class":329},[320,4496,1097],{"class":329},[320,4498,4499,4501,4503,4505,4507,4510,4513,4515],{"class":322,"line":2923},[320,4500,4413],{"class":433},[320,4502,1953],{"class":329},[320,4504,1735],{"class":333},[320,4506,1215],{"class":329},[320,4508,4509],{"class":333},"PI",[320,4511,4512],{"class":329}," *",[320,4514,3972],{"class":721},[320,4516,3811],{"class":329},[320,4518,4519,4521,4523,4525],{"class":322,"line":2938},[320,4520,4425],{"class":433},[320,4522,1953],{"class":329},[320,4524,3972],{"class":721},[320,4526,3811],{"class":329},[320,4528,4529,4531,4533,4535,4538,4540],{"class":322,"line":2943},[320,4530,4436],{"class":433},[320,4532,1953],{"class":329},[320,4534,343],{"class":329},[320,4536,4537],{"class":346},"power2.inOut",[320,4539,1972],{"class":329},[320,4541,3811],{"class":329},[320,4543,4544,4546,4548],{"class":322,"line":2958},[320,4545,4452],{"class":433},[320,4547,1953],{"class":329},[320,4549,4457],{"class":721},[320,4551,4552,4555,4557,4560,4562,4564],{"class":322,"line":2963},[320,4553,4554],{"class":329},"    },",[320,4556,343],{"class":329},[320,4558,4559],{"class":346},"-=0.5",[320,4561,1972],{"class":329},[320,4563,1299],{"class":433},[320,4565,4566],{"class":1102},"// Start 0.5s before previous animation ends\n",[320,4568,4569,4571,4573,4575,4577,4579,4581,4583,4585,4587,4589,4591,4594,4596,4598],{"class":322,"line":2968},[320,4570,4380],{"class":329},[320,4572,3898],{"class":381},[320,4574,385],{"class":433},[320,4576,3688],{"class":333},[320,4578,1215],{"class":329},[320,4580,3695],{"class":381},[320,4582,385],{"class":433},[320,4584,3706],{"class":1532},[320,4586,1094],{"class":437},[320,4588,3713],{"class":333},[320,4590,1215],{"class":329},[320,4592,4593],{"class":333},"scale",[320,4595,2779],{"class":433},[320,4597,490],{"class":329},[320,4599,1097],{"class":329},[320,4601,4602,4605,4607,4610],{"class":322,"line":2974},[320,4603,4604],{"class":433},"      x",[320,4606,1953],{"class":329},[320,4608,4609],{"class":721}," 1.5",[320,4611,3811],{"class":329},[320,4613,4614,4616,4618,4620],{"class":322,"line":2991},[320,4615,4413],{"class":433},[320,4617,1953],{"class":329},[320,4619,4609],{"class":721},[320,4621,3811],{"class":329},[320,4623,4624,4627,4629,4631],{"class":322,"line":3012},[320,4625,4626],{"class":433},"      z",[320,4628,1953],{"class":329},[320,4630,4609],{"class":721},[320,4632,3811],{"class":329},[320,4634,4635,4637,4639,4641],{"class":322,"line":3017},[320,4636,4425],{"class":433},[320,4638,1953],{"class":329},[320,4640,2776],{"class":721},[320,4642,3811],{"class":329},[320,4644,4645,4647,4649,4651,4654,4656],{"class":322,"line":3022},[320,4646,4436],{"class":433},[320,4648,1953],{"class":329},[320,4650,343],{"class":329},[320,4652,4653],{"class":346},"elastic.out(1, 0.3)",[320,4655,1972],{"class":329},[320,4657,3811],{"class":329},[320,4659,4660,4662,4664],{"class":322,"line":3038},[320,4661,4452],{"class":433},[320,4663,1953],{"class":329},[320,4665,4666],{"class":721}," 0.05\n",[320,4668,4669,4671],{"class":322,"line":3058},[320,4670,4462],{"class":329},[320,4672,397],{"class":433},[320,4674,4675,4677],{"class":322,"line":3063},[320,4676,394],{"class":329},[320,4678,397],{"class":333},[320,4680,4682],{"class":322,"line":4681},39,[320,4683,375],{"emptyLinePlaceholder":39},[320,4685,4687],{"class":322,"line":4686},40,[320,4688,4689],{"class":1102},"// Control functions\n",[320,4691,4693,4695,4698,4700,4702,4704,4707,4709,4711],{"class":322,"line":4692},41,[320,4694,482],{"class":437},[320,4696,4697],{"class":333}," playAnimation ",[320,4699,444],{"class":329},[320,4701,2984],{"class":329},[320,4703,1094],{"class":437},[320,4705,4706],{"class":333}," timeline",[320,4708,1215],{"class":329},[320,4710,2410],{"class":381},[320,4712,503],{"class":333},[320,4714,4716,4718,4721,4723,4725,4727,4729,4731,4734],{"class":322,"line":4715},42,[320,4717,482],{"class":437},[320,4719,4720],{"class":333}," pauseAnimation ",[320,4722,444],{"class":329},[320,4724,2984],{"class":329},[320,4726,1094],{"class":437},[320,4728,4706],{"class":333},[320,4730,1215],{"class":329},[320,4732,4733],{"class":381},"pause",[320,4735,503],{"class":333},[320,4737,4739,4741,4744,4746,4748,4750,4752,4754,4757],{"class":322,"line":4738},43,[320,4740,482],{"class":437},[320,4742,4743],{"class":333}," reverseAnimation ",[320,4745,444],{"class":329},[320,4747,2984],{"class":329},[320,4749,1094],{"class":437},[320,4751,4706],{"class":333},[320,4753,1215],{"class":329},[320,4755,4756],{"class":381},"reverse",[320,4758,503],{"class":333},[320,4760,4762,4764,4767,4769,4771,4773,4775,4777,4780],{"class":322,"line":4761},44,[320,4763,482],{"class":437},[320,4765,4766],{"class":333}," restartAnimation ",[320,4768,444],{"class":329},[320,4770,2984],{"class":329},[320,4772,1094],{"class":437},[320,4774,4706],{"class":333},[320,4776,1215],{"class":329},[320,4778,4779],{"class":381},"restart",[320,4781,503],{"class":333},[320,4783,4785,4787,4789],{"class":322,"line":4784},45,[320,4786,509],{"class":329},[320,4788,434],{"class":433},[320,4790,454],{"class":329},[1016,4792,4794],{"id":4793},"performance-optimization","Performance Optimization",[278,4796,4797],{},"When animating many objects, optimize performance by:",[4799,4800,4801,4808,4814,4824],"ol",{},[1797,4802,4803,4807],{},[1029,4804,1504,4805],{},[288,4806,1127],{}," for Three.js object references",[1797,4809,4810,4813],{},[1029,4811,4812],{},"Batch property access"," to avoid repeated DOM queries",[1797,4815,4816,4823],{},[1029,4817,4818,4819,4822],{},"Use GSAP's ",[288,4820,4821],{},"set()"," method"," for immediate property changes",[1797,4825,4826,4829,4830],{},[1029,4827,4828],{},"Leverage hardware acceleration"," with ",[288,4831,4832],{},"force3D: true",[311,4834,4836],{"className":313,"code":4835,"language":316,"meta":253,"style":253},"// 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",[288,4837,4838,4843,4858,4863,4892,4922,4950,4954,4959,4975,4985,4995,5006,5019,5025],{"__ignoreMap":253},[320,4839,4840],{"class":322,"line":254},[320,4841,4842],{"class":1102},"// Optimized animation setup\n",[320,4844,4845,4847,4850,4852,4854,4856],{"class":322,"line":255},[320,4846,482],{"class":437},[320,4848,4849],{"class":333}," optimizedAnimation ",[320,4851,444],{"class":329},[320,4853,2984],{"class":329},[320,4855,1094],{"class":437},[320,4857,1097],{"class":329},[320,4859,4860],{"class":322,"line":372},[320,4861,4862],{"class":1102},"  // Get all properties at once\n",[320,4864,4865,4867,4870,4872,4874,4876,4878,4880,4882,4884,4886,4888,4890],{"class":322,"line":378},[320,4866,2788],{"class":437},[320,4868,4869],{"class":333}," meshes",[320,4871,498],{"class":329},[320,4873,3671],{"class":333},[320,4875,1215],{"class":329},[320,4877,657],{"class":381},[320,4879,385],{"class":433},[320,4881,3443],{"class":333},[320,4883,1215],{"class":329},[320,4885,1296],{"class":333},[320,4887,1215],{"class":329},[320,4889,3688],{"class":333},[320,4891,397],{"class":433},[320,4893,4894,4896,4898,4900,4902,4904,4906,4908,4911,4913,4916,4918,4920],{"class":322,"line":506},[320,4895,2788],{"class":437},[320,4897,3666],{"class":333},[320,4899,498],{"class":329},[320,4901,4869],{"class":333},[320,4903,1215],{"class":329},[320,4905,3695],{"class":381},[320,4907,385],{"class":433},[320,4909,4910],{"class":1532},"mesh",[320,4912,1094],{"class":437},[320,4914,4915],{"class":333}," mesh",[320,4917,1215],{"class":329},[320,4919,1409],{"class":333},[320,4921,397],{"class":433},[320,4923,4924,4926,4928,4930,4932,4934,4936,4938,4940,4942,4944,4946,4948],{"class":322,"line":516},[320,4925,2788],{"class":437},[320,4927,3730],{"class":333},[320,4929,498],{"class":329},[320,4931,4869],{"class":333},[320,4933,1215],{"class":329},[320,4935,3695],{"class":381},[320,4937,385],{"class":433},[320,4939,4910],{"class":1532},[320,4941,1094],{"class":437},[320,4943,4915],{"class":333},[320,4945,1215],{"class":329},[320,4947,1317],{"class":333},[320,4949,397],{"class":433},[320,4951,4952],{"class":322,"line":521},[320,4953,375],{"emptyLinePlaceholder":39},[320,4955,4956],{"class":322,"line":531},[320,4957,4958],{"class":1102},"  // Use force3D for hardware acceleration\n",[320,4960,4961,4963,4965,4967,4969,4971,4973],{"class":322,"line":540},[320,4962,3893],{"class":333},[320,4964,1215],{"class":329},[320,4966,3898],{"class":381},[320,4968,385],{"class":433},[320,4970,3903],{"class":333},[320,4972,490],{"class":329},[320,4974,1097],{"class":329},[320,4976,4977,4979,4981,4983],{"class":322,"line":556},[320,4978,3912],{"class":433},[320,4980,1953],{"class":329},[320,4982,3972],{"class":721},[320,4984,3811],{"class":329},[320,4986,4987,4989,4991,4993],{"class":322,"line":591},[320,4988,3816],{"class":433},[320,4990,1953],{"class":329},[320,4992,3821],{"class":721},[320,4994,3811],{"class":329},[320,4996,4997,5000,5002,5004],{"class":322,"line":597},[320,4998,4999],{"class":433},"    force3D",[320,5001,1953],{"class":329},[320,5003,3868],{"class":3867},[320,5005,3811],{"class":329},[320,5007,5008,5010,5012,5014,5017],{"class":322,"line":1305},[320,5009,3799],{"class":433},[320,5011,1953],{"class":329},[320,5013,343],{"class":329},[320,5015,5016],{"class":346},"power2.out",[320,5018,350],{"class":329},[320,5020,5021,5023],{"class":322,"line":1331},[320,5022,3934],{"class":329},[320,5024,397],{"class":433},[320,5026,5027],{"class":322,"line":1353},[320,5028,1756],{"class":329},[1016,5030,5032],{"id":5031},"animation-events","Animation Events",[278,5034,5035],{},"GSAP provides powerful callback events to sync with your application state:",[311,5037,5039],{"className":313,"code":5038,"language":316,"meta":253,"style":253},"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",[288,5040,5041,5056,5067,5077,5088,5120,5150,5164,5169,5198,5202,5230],{"__ignoreMap":253},[320,5042,5043,5045,5047,5049,5052,5054],{"class":322,"line":254},[320,5044,3251],{"class":333},[320,5046,1215],{"class":329},[320,5048,3898],{"class":381},[320,5050,5051],{"class":333},"(positions",[320,5053,490],{"class":329},[320,5055,1097],{"class":329},[320,5057,5058,5061,5063,5065],{"class":322,"line":255},[320,5059,5060],{"class":433},"  y",[320,5062,1953],{"class":329},[320,5064,3972],{"class":721},[320,5066,3811],{"class":329},[320,5068,5069,5071,5073,5075],{"class":322,"line":372},[320,5070,4043],{"class":433},[320,5072,1953],{"class":329},[320,5074,3821],{"class":721},[320,5076,3811],{"class":329},[320,5078,5079,5081,5083,5086],{"class":322,"line":378},[320,5080,4057],{"class":433},[320,5082,1953],{"class":329},[320,5084,5085],{"class":721}," 0.1",[320,5087,3811],{"class":329},[320,5089,5090,5093,5095,5097,5099,5102,5104,5107,5109,5111,5114,5116,5118],{"class":322,"line":506},[320,5091,5092],{"class":381},"  onStart",[320,5094,1953],{"class":329},[320,5096,2984],{"class":329},[320,5098,1094],{"class":437},[320,5100,5101],{"class":333}," console",[320,5103,1215],{"class":329},[320,5105,5106],{"class":381},"log",[320,5108,385],{"class":333},[320,5110,1972],{"class":329},[320,5112,5113],{"class":346},"Animation started",[320,5115,1972],{"class":329},[320,5117,2779],{"class":333},[320,5119,3811],{"class":329},[320,5121,5122,5125,5127,5129,5131,5133,5135,5137,5139,5141,5144,5146,5148],{"class":322,"line":516},[320,5123,5124],{"class":381},"  onComplete",[320,5126,1953],{"class":329},[320,5128,2984],{"class":329},[320,5130,1094],{"class":437},[320,5132,5101],{"class":333},[320,5134,1215],{"class":329},[320,5136,5106],{"class":381},[320,5138,385],{"class":333},[320,5140,1972],{"class":329},[320,5142,5143],{"class":346},"Animation completed",[320,5145,1972],{"class":329},[320,5147,2779],{"class":333},[320,5149,3811],{"class":329},[320,5151,5152,5155,5157,5160,5162],{"class":322,"line":521},[320,5153,5154],{"class":381},"  onUpdate",[320,5156,1953],{"class":329},[320,5158,5159],{"class":437}," function",[320,5161,1091],{"class":329},[320,5163,1097],{"class":329},[320,5165,5166],{"class":322,"line":531},[320,5167,5168],{"class":1102},"    // Called on every frame\n",[320,5170,5171,5174,5176,5178,5180,5182,5185,5187,5189,5192,5195],{"class":322,"line":540},[320,5172,5173],{"class":333},"    console",[320,5175,1215],{"class":329},[320,5177,5106],{"class":381},[320,5179,385],{"class":433},[320,5181,1972],{"class":329},[320,5183,5184],{"class":346},"Progress:",[320,5186,1972],{"class":329},[320,5188,490],{"class":329},[320,5190,5191],{"class":329}," this.",[320,5193,5194],{"class":381},"progress",[320,5196,5197],{"class":433},"())\n",[320,5199,5200],{"class":322,"line":556},[320,5201,4129],{"class":329},[320,5203,5204,5207,5209,5211,5213,5215,5217,5219,5221,5223,5226,5228],{"class":322,"line":591},[320,5205,5206],{"class":381},"  onRepeat",[320,5208,1953],{"class":329},[320,5210,2984],{"class":329},[320,5212,1094],{"class":437},[320,5214,5101],{"class":333},[320,5216,1215],{"class":329},[320,5218,5106],{"class":381},[320,5220,385],{"class":333},[320,5222,1972],{"class":329},[320,5224,5225],{"class":346},"Animation repeated",[320,5227,1972],{"class":329},[320,5229,397],{"class":333},[320,5231,5232,5234],{"class":322,"line":597},[320,5233,394],{"class":329},[320,5235,397],{"class":333},[980,5237,5238],{},[278,5239,5240],{},"GSAP automatically handles frame rate optimization and provides better performance than manual animations for complex sequences.",[801,5242,5244],{"to":5243},"https://gsap.com/docs/v3/",[278,5245,5246],{},"Explore the full GSAP documentation for advanced features and techniques.",[990,5248,5249],{},"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":253,"searchDepth":254,"depth":255,"links":5251},[5252],{"id":4142,"depth":255,"text":4143,"children":5253},[5254,5255,5256],{"id":4146,"depth":372,"text":4147},{"id":4793,"depth":372,"text":4794},{"id":5031,"depth":372,"text":5032},"Learn how to create complex animations using GSAP with TresJS",{"thumbnail":5259},"/recipes/advance-animations-gsap.png",{"title":194,"description":5257},"3SsVddI0maZDZ05jTMj-So4PD9O9cwdAvNBE9yoPnIw",{"id":5263,"title":198,"body":5264,"description":7672,"extension":259,"links":260,"meta":7673,"navigation":39,"path":199,"seo":7675,"stem":200,"__hash__":7676},"docs/4.cookbook/5.tweakpane.md",{"type":242,"value":5265,"toc":7665},[5266,5273,5276,5279,5282,5324,5327,5376,5381,5385,5388,7427,7431,7434,7591,7595,7598,7657,7662],[278,5267,5268,5272],{},[406,5269,198],{"href":5270,"rel":5271},"https://tweakpane.github.io/docs/",[410]," 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.",[5274,5275],"examples-tweakpane",{},[245,5277,13],{"id":5278},"installation",[278,5280,5281],{},"First, install Tweakpane v4 in your project:",[416,5283,5284,5298,5311],{},[311,5285,5287],{"className":1860,"code":5286,"filename":1869,"language":1862,"meta":253,"style":253},"npm install tweakpane@^4.0.0\n",[288,5288,5289],{"__ignoreMap":253},[320,5290,5291,5293,5295],{"class":322,"line":254},[320,5292,1869],{"class":1211},[320,5294,1872],{"class":346},[320,5296,5297],{"class":346}," tweakpane@^4.0.0\n",[311,5299,5301],{"className":1860,"code":5300,"filename":3155,"language":1862,"meta":253,"style":253},"yarn add tweakpane@^4.0.0\n",[288,5302,5303],{"__ignoreMap":253},[320,5304,5305,5307,5309],{"class":322,"line":254},[320,5306,3155],{"class":1211},[320,5308,3164],{"class":346},[320,5310,5297],{"class":346},[311,5312,5314],{"className":1860,"code":5313,"filename":3170,"language":1862,"meta":253,"style":253},"pnpm add tweakpane@^4.0.0\n",[288,5315,5316],{"__ignoreMap":253},[320,5317,5318,5320,5322],{"class":322,"line":254},[320,5319,3170],{"class":1211},[320,5321,3164],{"class":346},[320,5323,5297],{"class":346},[278,5325,5326],{},"Additionally, if you are working with TypeScript:",[416,5328,5329,5346,5361],{},[311,5330,5332],{"className":1860,"code":5331,"filename":1869,"language":1862,"meta":253,"style":253},"npm install --save-dev @tweakpane/core\n",[288,5333,5334],{"__ignoreMap":253},[320,5335,5336,5338,5340,5343],{"class":322,"line":254},[320,5337,1869],{"class":1211},[320,5339,1872],{"class":346},[320,5341,5342],{"class":346}," --save-dev",[320,5344,5345],{"class":346}," @tweakpane/core\n",[311,5347,5349],{"className":1860,"code":5348,"filename":3155,"language":1862,"meta":253,"style":253},"yarn add --save-dev @tweakpane/core\n",[288,5350,5351],{"__ignoreMap":253},[320,5352,5353,5355,5357,5359],{"class":322,"line":254},[320,5354,3155],{"class":1211},[320,5356,3164],{"class":346},[320,5358,5342],{"class":346},[320,5360,5345],{"class":346},[311,5362,5364],{"className":1860,"code":5363,"filename":3170,"language":1862,"meta":253,"style":253},"pnpm add --save-dev @tweakpane/core\n",[288,5365,5366],{"__ignoreMap":253},[320,5367,5368,5370,5372,5374],{"class":322,"line":254},[320,5369,3170],{"class":1211},[320,5371,3164],{"class":346},[320,5373,5342],{"class":346},[320,5375,5345],{"class":346},[980,5377,5378],{},[278,5379,5380],{},"Make sure to use Tweakpane v4 or higher, as this recipe uses the latest API which has breaking changes from v3.",[245,5382,5384],{"id":5383},"basic-setup","Basic Setup",[278,5386,5387],{},"Here's how to set up Tweakpane with a basic TresJS scene:",[311,5389,5391],{"className":420,"code":5390,"language":423,"meta":253,"style":253},"\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",[288,5392,5393,5413,5440,5460,5478,5482,5495,5515,5535,5539,5544,5559,5571,5582,5593,5604,5615,5626,5637,5653,5665,5681,5687,5691,5704,5723,5727,5732,5752,5768,5783,5789,5793,5798,5839,5903,5960,6017,6021,6026,6064,6132,6197,6262,6266,6271,6310,6366,6394,6422,6452,6462,6478,6495,6512,6517,6524,6529,6535,6590,6613,6643,6673,6718,6725,6732,6739,6744,6750,6764,6780,6787,6796,6801,6810,6831,6837,6867,6872,6893,6926,6935,6940,6948,6963,7003,7042,7061,7067,7077,7085,7111,7131,7150,7156,7164,7188,7207,7212,7220,7243,7262,7281,7286,7296,7301,7330,7353,7400,7409,7418],{"__ignoreMap":253},[320,5394,5395,5397,5399,5401,5403,5405,5407,5409,5411],{"class":322,"line":254},[320,5396,430],{"class":329},[320,5398,434],{"class":433},[320,5400,438],{"class":437},[320,5402,441],{"class":437},[320,5404,444],{"class":329},[320,5406,447],{"class":329},[320,5408,316],{"class":346},[320,5410,447],{"class":329},[320,5412,454],{"class":329},[320,5414,5415,5417,5419,5421,5423,5425,5427,5430,5432,5434,5436,5438],{"class":322,"line":255},[320,5416,326],{"class":325},[320,5418,330],{"class":329},[320,5420,1163],{"class":333},[320,5422,490],{"class":329},[320,5424,4196],{"class":333},[320,5426,490],{"class":329},[320,5428,5429],{"class":333}," onUnmounted",[320,5431,337],{"class":329},[320,5433,340],{"class":325},[320,5435,343],{"class":329},[320,5437,423],{"class":346},[320,5439,350],{"class":329},[320,5441,5442,5444,5446,5449,5451,5453,5455,5458],{"class":322,"line":372},[320,5443,326],{"class":325},[320,5445,330],{"class":329},[320,5447,5448],{"class":333}," Pane",[320,5450,337],{"class":329},[320,5452,340],{"class":325},[320,5454,343],{"class":329},[320,5456,5457],{"class":346},"tweakpane",[320,5459,350],{"class":329},[320,5461,5462,5464,5466,5468,5470,5472,5474,5476],{"class":322,"line":378},[320,5463,326],{"class":325},[320,5465,330],{"class":329},[320,5467,359],{"class":333},[320,5469,337],{"class":329},[320,5471,340],{"class":325},[320,5473,343],{"class":329},[320,5475,298],{"class":346},[320,5477,350],{"class":329},[320,5479,5480],{"class":322,"line":506},[320,5481,375],{"emptyLinePlaceholder":39},[320,5483,5484,5486,5489,5491,5493],{"class":322,"line":516},[320,5485,482],{"class":437},[320,5487,5488],{"class":333}," meshRef ",[320,5490,444],{"class":329},[320,5492,1163],{"class":381},[320,5494,503],{"class":333},[320,5496,5497,5499,5502,5504,5506,5508,5511,5513],{"class":322,"line":521},[320,5498,482],{"class":437},[320,5500,5501],{"class":333}," pane ",[320,5503,444],{"class":329},[320,5505,1163],{"class":381},[320,5507,430],{"class":329},[320,5509,5510],{"class":1211},"Pane",[320,5512,1227],{"class":329},[320,5514,503],{"class":333},[320,5516,5517,5519,5522,5524,5526,5528,5531,5533],{"class":322,"line":531},[320,5518,482],{"class":437},[320,5520,5521],{"class":333}," paneContainer ",[320,5523,444],{"class":329},[320,5525,1163],{"class":381},[320,5527,430],{"class":329},[320,5529,5530],{"class":1211},"HTMLElement",[320,5532,1227],{"class":329},[320,5534,503],{"class":333},[320,5536,5537],{"class":322,"line":540},[320,5538,375],{"emptyLinePlaceholder":39},[320,5540,5541],{"class":322,"line":556},[320,5542,5543],{"class":1102},"// Reactive properties that will be controlled by Tweakpane\n",[320,5545,5546,5548,5551,5553,5555,5557],{"class":322,"line":591},[320,5547,482],{"class":437},[320,5549,5550],{"class":333}," controls ",[320,5552,444],{"class":329},[320,5554,1163],{"class":381},[320,5556,385],{"class":333},[320,5558,1302],{"class":329},[320,5560,5561,5564,5566,5569],{"class":322,"line":597},[320,5562,5563],{"class":433},"  positionX",[320,5565,1953],{"class":329},[320,5567,5568],{"class":721}," 0",[320,5570,3811],{"class":329},[320,5572,5573,5576,5578,5580],{"class":322,"line":1305},[320,5574,5575],{"class":433},"  positionY",[320,5577,1953],{"class":329},[320,5579,5568],{"class":721},[320,5581,3811],{"class":329},[320,5583,5584,5587,5589,5591],{"class":322,"line":1331},[320,5585,5586],{"class":433},"  positionZ",[320,5588,1953],{"class":329},[320,5590,5568],{"class":721},[320,5592,3811],{"class":329},[320,5594,5595,5598,5600,5602],{"class":322,"line":1353},[320,5596,5597],{"class":433},"  rotationX",[320,5599,1953],{"class":329},[320,5601,5568],{"class":721},[320,5603,3811],{"class":329},[320,5605,5606,5609,5611,5613],{"class":322,"line":1359},[320,5607,5608],{"class":433},"  rotationY",[320,5610,1953],{"class":329},[320,5612,5568],{"class":721},[320,5614,3811],{"class":329},[320,5616,5617,5620,5622,5624],{"class":322,"line":1366},[320,5618,5619],{"class":433},"  rotationZ",[320,5621,1953],{"class":329},[320,5623,5568],{"class":721},[320,5625,3811],{"class":329},[320,5627,5628,5631,5633,5635],{"class":322,"line":1375},[320,5629,5630],{"class":433},"  scale",[320,5632,1953],{"class":329},[320,5634,3821],{"class":721},[320,5636,3811],{"class":329},[320,5638,5639,5642,5644,5646,5649,5651],{"class":322,"line":1380},[320,5640,5641],{"class":433},"  color",[320,5643,1953],{"class":329},[320,5645,343],{"class":329},[320,5647,5648],{"class":346},"#ff6b6b",[320,5650,1972],{"class":329},[320,5652,3811],{"class":329},[320,5654,5655,5658,5660,5663],{"class":322,"line":1389},[320,5656,5657],{"class":433},"  wireframe",[320,5659,1953],{"class":329},[320,5661,5662],{"class":3867}," false",[320,5664,3811],{"class":329},[320,5666,5667,5670,5672,5674,5677,5679],{"class":322,"line":1435},[320,5668,5669],{"class":433},"  material",[320,5671,1953],{"class":329},[320,5673,343],{"class":329},[320,5675,5676],{"class":346},"basic",[320,5678,1972],{"class":329},[320,5680,3811],{"class":329},[320,5682,5683,5685],{"class":322,"line":1469},[320,5684,394],{"class":329},[320,5686,397],{"class":333},[320,5688,5689],{"class":322,"line":1479},[320,5690,375],{"emptyLinePlaceholder":39},[320,5692,5693,5696,5698,5700,5702],{"class":322,"line":1488},[320,5694,5695],{"class":381},"onMounted",[320,5697,385],{"class":333},[320,5699,1091],{"class":329},[320,5701,1094],{"class":437},[320,5703,1097],{"class":329},[320,5705,5706,5708,5710,5712,5715,5717,5719,5721],{"class":322,"line":2923},[320,5707,1285],{"class":325},[320,5709,1288],{"class":433},[320,5711,2816],{"class":329},[320,5713,5714],{"class":333},"paneContainer",[320,5716,1215],{"class":329},[320,5718,1296],{"class":333},[320,5720,1299],{"class":433},[320,5722,2824],{"class":325},[320,5724,5725],{"class":322,"line":2938},[320,5726,375],{"emptyLinePlaceholder":39},[320,5728,5729],{"class":322,"line":2943},[320,5730,5731],{"class":1102},"  // Create Tweakpane instance with container\n",[320,5733,5734,5737,5739,5741,5743,5746,5748,5750],{"class":322,"line":2958},[320,5735,5736],{"class":333},"  pane",[320,5738,1215],{"class":329},[320,5740,1296],{"class":333},[320,5742,498],{"class":329},[320,5744,5745],{"class":329}," new",[320,5747,5448],{"class":381},[320,5749,385],{"class":433},[320,5751,1302],{"class":329},[320,5753,5754,5757,5759,5761,5764,5766],{"class":322,"line":2963},[320,5755,5756],{"class":433},"    title",[320,5758,1953],{"class":329},[320,5760,343],{"class":329},[320,5762,5763],{"class":346},"Scene Controls",[320,5765,1972],{"class":329},[320,5767,3811],{"class":329},[320,5769,5770,5773,5775,5778,5780],{"class":322,"line":2968},[320,5771,5772],{"class":433},"    container",[320,5774,1953],{"class":329},[320,5776,5777],{"class":333}," paneContainer",[320,5779,1215],{"class":329},[320,5781,5782],{"class":333},"value\n",[320,5784,5785,5787],{"class":322,"line":2974},[320,5786,3934],{"class":329},[320,5788,397],{"class":433},[320,5790,5791],{"class":322,"line":2991},[320,5792,375],{"emptyLinePlaceholder":39},[320,5794,5795],{"class":322,"line":3012},[320,5796,5797],{"class":1102},"  // Add position controls\n",[320,5799,5800,5802,5805,5807,5810,5812,5814,5816,5819,5821,5823,5826,5828,5830,5833,5835,5837],{"class":322,"line":3017},[320,5801,2788],{"class":437},[320,5803,5804],{"class":333}," positionFolder",[320,5806,498],{"class":329},[320,5808,5809],{"class":333}," pane",[320,5811,1215],{"class":329},[320,5813,1296],{"class":333},[320,5815,1215],{"class":329},[320,5817,5818],{"class":381},"addFolder",[320,5820,385],{"class":433},[320,5822,388],{"class":329},[320,5824,5825],{"class":433}," title",[320,5827,1953],{"class":329},[320,5829,343],{"class":329},[320,5831,5832],{"class":346},"Position",[320,5834,1972],{"class":329},[320,5836,337],{"class":329},[320,5838,397],{"class":433},[320,5840,5841,5844,5846,5849,5851,5854,5856,5858,5860,5862,5865,5867,5869,5871,5874,5876,5878,5881,5883,5886,5888,5890,5892,5895,5897,5899,5901],{"class":322,"line":3022},[320,5842,5843],{"class":333},"  positionFolder",[320,5845,1215],{"class":329},[320,5847,5848],{"class":381},"addBinding",[320,5850,385],{"class":433},[320,5852,5853],{"class":333},"controls",[320,5855,1215],{"class":329},[320,5857,1296],{"class":333},[320,5859,490],{"class":329},[320,5861,343],{"class":329},[320,5863,5864],{"class":346},"positionX",[320,5866,1972],{"class":329},[320,5868,490],{"class":329},[320,5870,330],{"class":329},[320,5872,5873],{"class":433}," min",[320,5875,1953],{"class":329},[320,5877,3318],{"class":329},[320,5879,5880],{"class":721},"3",[320,5882,490],{"class":329},[320,5884,5885],{"class":433}," max",[320,5887,1953],{"class":329},[320,5889,4418],{"class":721},[320,5891,490],{"class":329},[320,5893,5894],{"class":433}," step",[320,5896,1953],{"class":329},[320,5898,5085],{"class":721},[320,5900,337],{"class":329},[320,5902,397],{"class":433},[320,5904,5905,5907,5909,5911,5913,5915,5917,5919,5921,5923,5926,5928,5930,5932,5934,5936,5938,5940,5942,5944,5946,5948,5950,5952,5954,5956,5958],{"class":322,"line":3038},[320,5906,5843],{"class":333},[320,5908,1215],{"class":329},[320,5910,5848],{"class":381},[320,5912,385],{"class":433},[320,5914,5853],{"class":333},[320,5916,1215],{"class":329},[320,5918,1296],{"class":333},[320,5920,490],{"class":329},[320,5922,343],{"class":329},[320,5924,5925],{"class":346},"positionY",[320,5927,1972],{"class":329},[320,5929,490],{"class":329},[320,5931,330],{"class":329},[320,5933,5873],{"class":433},[320,5935,1953],{"class":329},[320,5937,3318],{"class":329},[320,5939,5880],{"class":721},[320,5941,490],{"class":329},[320,5943,5885],{"class":433},[320,5945,1953],{"class":329},[320,5947,4418],{"class":721},[320,5949,490],{"class":329},[320,5951,5894],{"class":433},[320,5953,1953],{"class":329},[320,5955,5085],{"class":721},[320,5957,337],{"class":329},[320,5959,397],{"class":433},[320,5961,5962,5964,5966,5968,5970,5972,5974,5976,5978,5980,5983,5985,5987,5989,5991,5993,5995,5997,5999,6001,6003,6005,6007,6009,6011,6013,6015],{"class":322,"line":3058},[320,5963,5843],{"class":333},[320,5965,1215],{"class":329},[320,5967,5848],{"class":381},[320,5969,385],{"class":433},[320,5971,5853],{"class":333},[320,5973,1215],{"class":329},[320,5975,1296],{"class":333},[320,5977,490],{"class":329},[320,5979,343],{"class":329},[320,5981,5982],{"class":346},"positionZ",[320,5984,1972],{"class":329},[320,5986,490],{"class":329},[320,5988,330],{"class":329},[320,5990,5873],{"class":433},[320,5992,1953],{"class":329},[320,5994,3318],{"class":329},[320,5996,5880],{"class":721},[320,5998,490],{"class":329},[320,6000,5885],{"class":433},[320,6002,1953],{"class":329},[320,6004,4418],{"class":721},[320,6006,490],{"class":329},[320,6008,5894],{"class":433},[320,6010,1953],{"class":329},[320,6012,5085],{"class":721},[320,6014,337],{"class":329},[320,6016,397],{"class":433},[320,6018,6019],{"class":322,"line":3063},[320,6020,375],{"emptyLinePlaceholder":39},[320,6022,6023],{"class":322,"line":4681},[320,6024,6025],{"class":1102},"  // Add rotation controls\n",[320,6027,6028,6030,6033,6035,6037,6039,6041,6043,6045,6047,6049,6051,6053,6055,6058,6060,6062],{"class":322,"line":4686},[320,6029,2788],{"class":437},[320,6031,6032],{"class":333}," rotationFolder",[320,6034,498],{"class":329},[320,6036,5809],{"class":333},[320,6038,1215],{"class":329},[320,6040,1296],{"class":333},[320,6042,1215],{"class":329},[320,6044,5818],{"class":381},[320,6046,385],{"class":433},[320,6048,388],{"class":329},[320,6050,5825],{"class":433},[320,6052,1953],{"class":329},[320,6054,343],{"class":329},[320,6056,6057],{"class":346},"Rotation",[320,6059,1972],{"class":329},[320,6061,337],{"class":329},[320,6063,397],{"class":433},[320,6065,6066,6069,6071,6073,6075,6077,6079,6081,6083,6085,6088,6090,6092,6094,6096,6098,6100,6103,6105,6107,6109,6111,6113,6115,6117,6119,6121,6123,6125,6128,6130],{"class":322,"line":4692},[320,6067,6068],{"class":333},"  rotationFolder",[320,6070,1215],{"class":329},[320,6072,5848],{"class":381},[320,6074,385],{"class":433},[320,6076,5853],{"class":333},[320,6078,1215],{"class":329},[320,6080,1296],{"class":333},[320,6082,490],{"class":329},[320,6084,343],{"class":329},[320,6086,6087],{"class":346},"rotationX",[320,6089,1972],{"class":329},[320,6091,490],{"class":329},[320,6093,330],{"class":329},[320,6095,5873],{"class":433},[320,6097,1953],{"class":329},[320,6099,3318],{"class":329},[320,6101,6102],{"class":333},"Math",[320,6104,1215],{"class":329},[320,6106,4509],{"class":333},[320,6108,490],{"class":329},[320,6110,5885],{"class":433},[320,6112,1953],{"class":329},[320,6114,1735],{"class":333},[320,6116,1215],{"class":329},[320,6118,4509],{"class":333},[320,6120,490],{"class":329},[320,6122,5894],{"class":433},[320,6124,1953],{"class":329},[320,6126,6127],{"class":721}," 0.01",[320,6129,337],{"class":329},[320,6131,397],{"class":433},[320,6133,6134,6136,6138,6140,6142,6144,6146,6148,6150,6152,6155,6157,6159,6161,6163,6165,6167,6169,6171,6173,6175,6177,6179,6181,6183,6185,6187,6189,6191,6193,6195],{"class":322,"line":4715},[320,6135,6068],{"class":333},[320,6137,1215],{"class":329},[320,6139,5848],{"class":381},[320,6141,385],{"class":433},[320,6143,5853],{"class":333},[320,6145,1215],{"class":329},[320,6147,1296],{"class":333},[320,6149,490],{"class":329},[320,6151,343],{"class":329},[320,6153,6154],{"class":346},"rotationY",[320,6156,1972],{"class":329},[320,6158,490],{"class":329},[320,6160,330],{"class":329},[320,6162,5873],{"class":433},[320,6164,1953],{"class":329},[320,6166,3318],{"class":329},[320,6168,6102],{"class":333},[320,6170,1215],{"class":329},[320,6172,4509],{"class":333},[320,6174,490],{"class":329},[320,6176,5885],{"class":433},[320,6178,1953],{"class":329},[320,6180,1735],{"class":333},[320,6182,1215],{"class":329},[320,6184,4509],{"class":333},[320,6186,490],{"class":329},[320,6188,5894],{"class":433},[320,6190,1953],{"class":329},[320,6192,6127],{"class":721},[320,6194,337],{"class":329},[320,6196,397],{"class":433},[320,6198,6199,6201,6203,6205,6207,6209,6211,6213,6215,6217,6220,6222,6224,6226,6228,6230,6232,6234,6236,6238,6240,6242,6244,6246,6248,6250,6252,6254,6256,6258,6260],{"class":322,"line":4738},[320,6200,6068],{"class":333},[320,6202,1215],{"class":329},[320,6204,5848],{"class":381},[320,6206,385],{"class":433},[320,6208,5853],{"class":333},[320,6210,1215],{"class":329},[320,6212,1296],{"class":333},[320,6214,490],{"class":329},[320,6216,343],{"class":329},[320,6218,6219],{"class":346},"rotationZ",[320,6221,1972],{"class":329},[320,6223,490],{"class":329},[320,6225,330],{"class":329},[320,6227,5873],{"class":433},[320,6229,1953],{"class":329},[320,6231,3318],{"class":329},[320,6233,6102],{"class":333},[320,6235,1215],{"class":329},[320,6237,4509],{"class":333},[320,6239,490],{"class":329},[320,6241,5885],{"class":433},[320,6243,1953],{"class":329},[320,6245,1735],{"class":333},[320,6247,1215],{"class":329},[320,6249,4509],{"class":333},[320,6251,490],{"class":329},[320,6253,5894],{"class":433},[320,6255,1953],{"class":329},[320,6257,6127],{"class":721},[320,6259,337],{"class":329},[320,6261,397],{"class":433},[320,6263,6264],{"class":322,"line":4761},[320,6265,375],{"emptyLinePlaceholder":39},[320,6267,6268],{"class":322,"line":4784},[320,6269,6270],{"class":1102},"  // Add material controls\n",[320,6272,6274,6276,6279,6281,6283,6285,6287,6289,6291,6293,6295,6297,6299,6301,6304,6306,6308],{"class":322,"line":6273},46,[320,6275,2788],{"class":437},[320,6277,6278],{"class":333}," materialFolder",[320,6280,498],{"class":329},[320,6282,5809],{"class":333},[320,6284,1215],{"class":329},[320,6286,1296],{"class":333},[320,6288,1215],{"class":329},[320,6290,5818],{"class":381},[320,6292,385],{"class":433},[320,6294,388],{"class":329},[320,6296,5825],{"class":433},[320,6298,1953],{"class":329},[320,6300,343],{"class":329},[320,6302,6303],{"class":346},"Material",[320,6305,1972],{"class":329},[320,6307,337],{"class":329},[320,6309,397],{"class":433},[320,6311,6313,6316,6318,6320,6322,6324,6326,6328,6330,6332,6334,6336,6338,6340,6342,6344,6346,6348,6350,6352,6354,6356,6358,6360,6362,6364],{"class":322,"line":6312},47,[320,6314,6315],{"class":333},"  materialFolder",[320,6317,1215],{"class":329},[320,6319,5848],{"class":381},[320,6321,385],{"class":433},[320,6323,5853],{"class":333},[320,6325,1215],{"class":329},[320,6327,1296],{"class":333},[320,6329,490],{"class":329},[320,6331,343],{"class":329},[320,6333,4593],{"class":346},[320,6335,1972],{"class":329},[320,6337,490],{"class":329},[320,6339,330],{"class":329},[320,6341,5873],{"class":433},[320,6343,1953],{"class":329},[320,6345,5085],{"class":721},[320,6347,490],{"class":329},[320,6349,5885],{"class":433},[320,6351,1953],{"class":329},[320,6353,4418],{"class":721},[320,6355,490],{"class":329},[320,6357,5894],{"class":433},[320,6359,1953],{"class":329},[320,6361,5085],{"class":721},[320,6363,337],{"class":329},[320,6365,397],{"class":433},[320,6367,6369,6371,6373,6375,6377,6379,6381,6383,6385,6387,6390,6392],{"class":322,"line":6368},48,[320,6370,6315],{"class":333},[320,6372,1215],{"class":329},[320,6374,5848],{"class":381},[320,6376,385],{"class":433},[320,6378,5853],{"class":333},[320,6380,1215],{"class":329},[320,6382,1296],{"class":333},[320,6384,490],{"class":329},[320,6386,343],{"class":329},[320,6388,6389],{"class":346},"color",[320,6391,1972],{"class":329},[320,6393,397],{"class":433},[320,6395,6397,6399,6401,6403,6405,6407,6409,6411,6413,6415,6418,6420],{"class":322,"line":6396},49,[320,6398,6315],{"class":333},[320,6400,1215],{"class":329},[320,6402,5848],{"class":381},[320,6404,385],{"class":433},[320,6406,5853],{"class":333},[320,6408,1215],{"class":329},[320,6410,1296],{"class":333},[320,6412,490],{"class":329},[320,6414,343],{"class":329},[320,6416,6417],{"class":346},"wireframe",[320,6419,1972],{"class":329},[320,6421,397],{"class":433},[320,6423,6425,6427,6429,6431,6433,6435,6437,6439,6441,6443,6446,6448,6450],{"class":322,"line":6424},50,[320,6426,6315],{"class":333},[320,6428,1215],{"class":329},[320,6430,5848],{"class":381},[320,6432,385],{"class":433},[320,6434,5853],{"class":333},[320,6436,1215],{"class":329},[320,6438,1296],{"class":333},[320,6440,490],{"class":329},[320,6442,343],{"class":329},[320,6444,6445],{"class":346},"material",[320,6447,1972],{"class":329},[320,6449,490],{"class":329},[320,6451,1097],{"class":329},[320,6453,6455,6458,6460],{"class":322,"line":6454},51,[320,6456,6457],{"class":433},"    options",[320,6459,1953],{"class":329},[320,6461,1097],{"class":329},[320,6463,6465,6468,6470,6472,6474,6476],{"class":322,"line":6464},52,[320,6466,6467],{"class":433},"      Basic",[320,6469,1953],{"class":329},[320,6471,343],{"class":329},[320,6473,5676],{"class":346},[320,6475,1972],{"class":329},[320,6477,3811],{"class":329},[320,6479,6481,6484,6486,6488,6491,6493],{"class":322,"line":6480},53,[320,6482,6483],{"class":433},"      Normal",[320,6485,1953],{"class":329},[320,6487,343],{"class":329},[320,6489,6490],{"class":346},"normal",[320,6492,1972],{"class":329},[320,6494,3811],{"class":329},[320,6496,6498,6501,6503,6505,6508,6510],{"class":322,"line":6497},54,[320,6499,6500],{"class":433},"      Standard",[320,6502,1953],{"class":329},[320,6504,343],{"class":329},[320,6506,6507],{"class":346},"standard",[320,6509,1972],{"class":329},[320,6511,3811],{"class":329},[320,6513,6515],{"class":322,"line":6514},55,[320,6516,3875],{"class":329},[320,6518,6520,6522],{"class":322,"line":6519},56,[320,6521,3934],{"class":329},[320,6523,397],{"class":433},[320,6525,6527],{"class":322,"line":6526},57,[320,6528,375],{"emptyLinePlaceholder":39},[320,6530,6532],{"class":322,"line":6531},58,[320,6533,6534],{"class":1102},"  // Add reset button\n",[320,6536,6538,6540,6542,6544,6546,6549,6551,6553,6555,6557,6559,6562,6564,6566,6568,6570,6573,6575,6577,6580,6582,6584,6586,6588],{"class":322,"line":6537},59,[320,6539,5736],{"class":333},[320,6541,1215],{"class":329},[320,6543,1296],{"class":333},[320,6545,1215],{"class":329},[320,6547,6548],{"class":381},"addButton",[320,6550,385],{"class":433},[320,6552,388],{"class":329},[320,6554,5825],{"class":433},[320,6556,1953],{"class":329},[320,6558,343],{"class":329},[320,6560,6561],{"class":346},"Reset All",[320,6563,1972],{"class":329},[320,6565,337],{"class":329},[320,6567,2779],{"class":433},[320,6569,1215],{"class":329},[320,6571,6572],{"class":381},"on",[320,6574,385],{"class":433},[320,6576,1972],{"class":329},[320,6578,6579],{"class":346},"click",[320,6581,1972],{"class":329},[320,6583,490],{"class":329},[320,6585,2984],{"class":329},[320,6587,1094],{"class":437},[320,6589,1097],{"class":329},[320,6591,6593,6596,6598,6601,6603,6605,6607,6609,6611],{"class":322,"line":6592},60,[320,6594,6595],{"class":333},"    Object",[320,6597,1215],{"class":329},[320,6599,6600],{"class":381},"assign",[320,6602,385],{"class":433},[320,6604,5853],{"class":333},[320,6606,1215],{"class":329},[320,6608,1296],{"class":333},[320,6610,490],{"class":329},[320,6612,1097],{"class":329},[320,6614,6616,6619,6621,6623,6625,6628,6630,6632,6634,6637,6639,6641],{"class":322,"line":6615},61,[320,6617,6618],{"class":433},"      positionX",[320,6620,1953],{"class":329},[320,6622,5568],{"class":721},[320,6624,490],{"class":329},[320,6626,6627],{"class":433}," positionY",[320,6629,1953],{"class":329},[320,6631,5568],{"class":721},[320,6633,490],{"class":329},[320,6635,6636],{"class":433}," positionZ",[320,6638,1953],{"class":329},[320,6640,5568],{"class":721},[320,6642,3811],{"class":329},[320,6644,6646,6649,6651,6653,6655,6658,6660,6662,6664,6667,6669,6671],{"class":322,"line":6645},62,[320,6647,6648],{"class":433},"      rotationX",[320,6650,1953],{"class":329},[320,6652,5568],{"class":721},[320,6654,490],{"class":329},[320,6656,6657],{"class":433}," rotationY",[320,6659,1953],{"class":329},[320,6661,5568],{"class":721},[320,6663,490],{"class":329},[320,6665,6666],{"class":433}," rotationZ",[320,6668,1953],{"class":329},[320,6670,5568],{"class":721},[320,6672,3811],{"class":329},[320,6674,6676,6679,6681,6683,6685,6688,6690,6692,6694,6696,6698,6701,6703,6705,6707,6710,6712,6714,6716],{"class":322,"line":6675},63,[320,6677,6678],{"class":433},"      scale",[320,6680,1953],{"class":329},[320,6682,3821],{"class":721},[320,6684,490],{"class":329},[320,6686,6687],{"class":433}," color",[320,6689,1953],{"class":329},[320,6691,343],{"class":329},[320,6693,5648],{"class":346},[320,6695,1972],{"class":329},[320,6697,490],{"class":329},[320,6699,6700],{"class":433}," wireframe",[320,6702,1953],{"class":329},[320,6704,5662],{"class":3867},[320,6706,490],{"class":329},[320,6708,6709],{"class":433}," material",[320,6711,1953],{"class":329},[320,6713,343],{"class":329},[320,6715,5676],{"class":346},[320,6717,350],{"class":329},[320,6719,6721,6723],{"class":322,"line":6720},64,[320,6722,4462],{"class":329},[320,6724,397],{"class":433},[320,6726,6728,6730],{"class":322,"line":6727},65,[320,6729,3934],{"class":329},[320,6731,397],{"class":433},[320,6733,6735,6737],{"class":322,"line":6734},66,[320,6736,394],{"class":329},[320,6738,397],{"class":333},[320,6740,6742],{"class":322,"line":6741},67,[320,6743,375],{"emptyLinePlaceholder":39},[320,6745,6747],{"class":322,"line":6746},68,[320,6748,6749],{"class":1102},"// Clean up on unmount\n",[320,6751,6753,6756,6758,6760,6762],{"class":322,"line":6752},69,[320,6754,6755],{"class":381},"onUnmounted",[320,6757,385],{"class":333},[320,6759,1091],{"class":329},[320,6761,1094],{"class":437},[320,6763,1097],{"class":329},[320,6765,6767,6769,6771,6773,6775,6778],{"class":322,"line":6766},70,[320,6768,5736],{"class":333},[320,6770,1215],{"class":329},[320,6772,1296],{"class":333},[320,6774,580],{"class":329},[320,6776,6777],{"class":381},"dispose",[320,6779,503],{"class":433},[320,6781,6783,6785],{"class":322,"line":6782},71,[320,6784,394],{"class":329},[320,6786,397],{"class":333},[320,6788,6790,6792,6794],{"class":322,"line":6789},72,[320,6791,509],{"class":329},[320,6793,434],{"class":433},[320,6795,454],{"class":329},[320,6797,6799],{"class":322,"line":6798},73,[320,6800,375],{"emptyLinePlaceholder":39},[320,6802,6804,6806,6808],{"class":322,"line":6803},74,[320,6805,430],{"class":329},[320,6807,526],{"class":433},[320,6809,454],{"class":329},[320,6811,6813,6815,6817,6820,6822,6824,6827,6829],{"class":322,"line":6812},75,[320,6814,534],{"class":329},[320,6816,1615],{"class":433},[320,6818,6819],{"class":437}," class",[320,6821,444],{"class":329},[320,6823,447],{"class":329},[320,6825,6826],{"class":346},"relative w-full h-full",[320,6828,447],{"class":329},[320,6830,454],{"class":329},[320,6832,6834],{"class":322,"line":6833},76,[320,6835,6836],{"class":1102},"    \u003C!-- Tweakpane container positioned outside canvas -->\n",[320,6838,6840,6842,6844,6846,6848,6850,6852,6854,6856,6858,6860,6863,6865],{"class":322,"line":6839},77,[320,6841,704],{"class":329},[320,6843,1615],{"class":433},[320,6845,1163],{"class":437},[320,6847,444],{"class":329},[320,6849,447],{"class":329},[320,6851,5714],{"class":346},[320,6853,447],{"class":329},[320,6855,6819],{"class":437},[320,6857,444],{"class":329},[320,6859,447],{"class":329},[320,6861,6862],{"class":346},"absolute top-4 right-4 z-10",[320,6864,447],{"class":329},[320,6866,744],{"class":329},[320,6868,6870],{"class":322,"line":6869},78,[320,6871,375],{"emptyLinePlaceholder":39},[320,6873,6875,6877,6879,6882,6884,6886,6889,6891],{"class":322,"line":6874},79,[320,6876,704],{"class":329},[320,6878,691],{"class":433},[320,6880,6881],{"class":437}," clear-color",[320,6883,444],{"class":329},[320,6885,447],{"class":329},[320,6887,6888],{"class":346},"#82DBC5",[320,6890,447],{"class":329},[320,6892,454],{"class":329},[320,6894,6896,6898,6900,6902,6904,6906,6908,6910,6912,6914,6916,6918,6920,6922,6924],{"class":322,"line":6895},80,[320,6897,3522],{"class":329},[320,6899,707],{"class":433},[320,6901,710],{"class":329},[320,6903,1409],{"class":437},[320,6905,444],{"class":329},[320,6907,447],{"class":329},[320,6909,569],{"class":329},[320,6911,5880],{"class":721},[320,6913,574],{"class":329},[320,6915,5880],{"class":721},[320,6917,574],{"class":329},[320,6919,5880],{"class":721},[320,6921,586],{"class":329},[320,6923,447],{"class":329},[320,6925,744],{"class":329},[320,6927,6929,6931,6933],{"class":322,"line":6928},81,[320,6930,3522],{"class":329},[320,6932,182],{"class":433},[320,6934,744],{"class":329},[320,6936,6938],{"class":322,"line":6937},82,[320,6939,375],{"emptyLinePlaceholder":39},[320,6941,6943,6945],{"class":322,"line":6942},83,[320,6944,3522],{"class":329},[320,6946,6947],{"class":433},"TresMesh\n",[320,6949,6951,6954,6956,6958,6961],{"class":322,"line":6950},84,[320,6952,6953],{"class":437},"        ref",[320,6955,444],{"class":329},[320,6957,447],{"class":329},[320,6959,6960],{"class":346},"meshRef",[320,6962,553],{"class":329},[320,6964,6966,6969,6971,6973,6975,6977,6979,6981,6983,6985,6987,6989,6991,6993,6995,6997,6999,7001],{"class":322,"line":6965},85,[320,6967,6968],{"class":329},"        :",[320,6970,1409],{"class":437},[320,6972,444],{"class":329},[320,6974,447],{"class":329},[320,6976,569],{"class":329},[320,6978,5853],{"class":333},[320,6980,1215],{"class":329},[320,6982,5864],{"class":333},[320,6984,574],{"class":329},[320,6986,5853],{"class":333},[320,6988,1215],{"class":329},[320,6990,5925],{"class":333},[320,6992,574],{"class":329},[320,6994,5853],{"class":333},[320,6996,1215],{"class":329},[320,6998,5982],{"class":333},[320,7000,586],{"class":329},[320,7002,553],{"class":329},[320,7004,7006,7008,7010,7012,7014,7016,7018,7020,7022,7024,7026,7028,7030,7032,7034,7036,7038,7040],{"class":322,"line":7005},86,[320,7007,6968],{"class":329},[320,7009,1317],{"class":437},[320,7011,444],{"class":329},[320,7013,447],{"class":329},[320,7015,569],{"class":329},[320,7017,5853],{"class":333},[320,7019,1215],{"class":329},[320,7021,6087],{"class":333},[320,7023,574],{"class":329},[320,7025,5853],{"class":333},[320,7027,1215],{"class":329},[320,7029,6154],{"class":333},[320,7031,574],{"class":329},[320,7033,5853],{"class":333},[320,7035,1215],{"class":329},[320,7037,6219],{"class":333},[320,7039,586],{"class":329},[320,7041,553],{"class":329},[320,7043,7045,7047,7049,7051,7053,7055,7057,7059],{"class":322,"line":7044},87,[320,7046,6968],{"class":329},[320,7048,4593],{"class":437},[320,7050,444],{"class":329},[320,7052,447],{"class":329},[320,7054,5853],{"class":333},[320,7056,1215],{"class":329},[320,7058,4593],{"class":333},[320,7060,553],{"class":329},[320,7062,7064],{"class":322,"line":7063},88,[320,7065,7066],{"class":329},"      >\n",[320,7068,7070,7073,7075],{"class":322,"line":7069},89,[320,7071,7072],{"class":329},"        \u003C",[320,7074,1440],{"class":433},[320,7076,744],{"class":329},[320,7078,7080,7082],{"class":322,"line":7079},90,[320,7081,7072],{"class":329},[320,7083,7084],{"class":433},"TresMeshBasicMaterial\n",[320,7086,7088,7091,7093,7095,7097,7099,7101,7104,7106,7108],{"class":322,"line":7087},91,[320,7089,7090],{"class":325},"          v-if",[320,7092,444],{"class":329},[320,7094,447],{"class":329},[320,7096,5853],{"class":333},[320,7098,1215],{"class":329},[320,7100,6445],{"class":333},[320,7102,7103],{"class":329}," === ",[320,7105,1972],{"class":329},[320,7107,5676],{"class":346},[320,7109,7110],{"class":329},"'\"\n",[320,7112,7114,7117,7119,7121,7123,7125,7127,7129],{"class":322,"line":7113},92,[320,7115,7116],{"class":329},"          :",[320,7118,6389],{"class":437},[320,7120,444],{"class":329},[320,7122,447],{"class":329},[320,7124,5853],{"class":333},[320,7126,1215],{"class":329},[320,7128,6389],{"class":333},[320,7130,553],{"class":329},[320,7132,7134,7136,7138,7140,7142,7144,7146,7148],{"class":322,"line":7133},93,[320,7135,7116],{"class":329},[320,7137,6417],{"class":437},[320,7139,444],{"class":329},[320,7141,447],{"class":329},[320,7143,5853],{"class":333},[320,7145,1215],{"class":329},[320,7147,6417],{"class":333},[320,7149,553],{"class":329},[320,7151,7153],{"class":322,"line":7152},94,[320,7154,7155],{"class":329},"        />\n",[320,7157,7159,7161],{"class":322,"line":7158},95,[320,7160,7072],{"class":329},[320,7162,7163],{"class":433},"TresMeshNormalMaterial\n",[320,7165,7167,7170,7172,7174,7176,7178,7180,7182,7184,7186],{"class":322,"line":7166},96,[320,7168,7169],{"class":325},"          v-else-if",[320,7171,444],{"class":329},[320,7173,447],{"class":329},[320,7175,5853],{"class":333},[320,7177,1215],{"class":329},[320,7179,6445],{"class":333},[320,7181,7103],{"class":329},[320,7183,1972],{"class":329},[320,7185,6490],{"class":346},[320,7187,7110],{"class":329},[320,7189,7191,7193,7195,7197,7199,7201,7203,7205],{"class":322,"line":7190},97,[320,7192,7116],{"class":329},[320,7194,6417],{"class":437},[320,7196,444],{"class":329},[320,7198,447],{"class":329},[320,7200,5853],{"class":333},[320,7202,1215],{"class":329},[320,7204,6417],{"class":333},[320,7206,553],{"class":329},[320,7208,7210],{"class":322,"line":7209},98,[320,7211,7155],{"class":329},[320,7213,7215,7217],{"class":322,"line":7214},99,[320,7216,7072],{"class":329},[320,7218,7219],{"class":433},"TresMeshStandardMaterial\n",[320,7221,7223,7225,7227,7229,7231,7233,7235,7237,7239,7241],{"class":322,"line":7222},100,[320,7224,7169],{"class":325},[320,7226,444],{"class":329},[320,7228,447],{"class":329},[320,7230,5853],{"class":333},[320,7232,1215],{"class":329},[320,7234,6445],{"class":333},[320,7236,7103],{"class":329},[320,7238,1972],{"class":329},[320,7240,6507],{"class":346},[320,7242,7110],{"class":329},[320,7244,7246,7248,7250,7252,7254,7256,7258,7260],{"class":322,"line":7245},101,[320,7247,7116],{"class":329},[320,7249,6389],{"class":437},[320,7251,444],{"class":329},[320,7253,447],{"class":329},[320,7255,5853],{"class":333},[320,7257,1215],{"class":329},[320,7259,6389],{"class":333},[320,7261,553],{"class":329},[320,7263,7265,7267,7269,7271,7273,7275,7277,7279],{"class":322,"line":7264},102,[320,7266,7116],{"class":329},[320,7268,6417],{"class":437},[320,7270,444],{"class":329},[320,7272,447],{"class":329},[320,7274,5853],{"class":333},[320,7276,1215],{"class":329},[320,7278,6417],{"class":333},[320,7280,553],{"class":329},[320,7282,7284],{"class":322,"line":7283},103,[320,7285,7155],{"class":329},[320,7287,7289,7292,7294],{"class":322,"line":7288},104,[320,7290,7291],{"class":329},"      \u003C/",[320,7293,1394],{"class":433},[320,7295,454],{"class":329},[320,7297,7299],{"class":322,"line":7298},105,[320,7300,375],{"emptyLinePlaceholder":39},[320,7302,7304,7306,7308,7310,7312,7314,7316,7318,7320,7322,7324,7326,7328],{"class":322,"line":7303},106,[320,7305,3522],{"class":329},[320,7307,759],{"class":433},[320,7309,710],{"class":329},[320,7311,562],{"class":437},[320,7313,444],{"class":329},[320,7315,447],{"class":329},[320,7317,569],{"class":329},[320,7319,772],{"class":721},[320,7321,574],{"class":329},[320,7323,772],{"class":721},[320,7325,586],{"class":329},[320,7327,447],{"class":329},[320,7329,744],{"class":329},[320,7331,7333,7335,7338,7340,7343,7345,7347,7349,7351],{"class":322,"line":7332},107,[320,7334,3522],{"class":329},[320,7336,7337],{"class":433},"TresAmbientLight",[320,7339,710],{"class":329},[320,7341,7342],{"class":437},"intensity",[320,7344,444],{"class":329},[320,7346,447],{"class":329},[320,7348,3507],{"class":721},[320,7350,447],{"class":329},[320,7352,744],{"class":329},[320,7354,7356,7358,7361,7363,7365,7367,7369,7371,7373,7375,7377,7379,7382,7384,7386,7388,7390,7392,7394,7396,7398],{"class":322,"line":7355},108,[320,7357,3522],{"class":329},[320,7359,7360],{"class":433},"TresDirectionalLight",[320,7362,710],{"class":329},[320,7364,1409],{"class":437},[320,7366,444],{"class":329},[320,7368,447],{"class":329},[320,7370,569],{"class":329},[320,7372,1418],{"class":721},[320,7374,574],{"class":329},[320,7376,1418],{"class":721},[320,7378,574],{"class":329},[320,7380,7381],{"class":721},"5",[320,7383,586],{"class":329},[320,7385,447],{"class":329},[320,7387,710],{"class":329},[320,7389,7342],{"class":437},[320,7391,444],{"class":329},[320,7393,447],{"class":329},[320,7395,3507],{"class":721},[320,7397,447],{"class":329},[320,7399,744],{"class":329},[320,7401,7403,7405,7407],{"class":322,"line":7402},109,[320,7404,3539],{"class":329},[320,7406,691],{"class":433},[320,7408,454],{"class":329},[320,7410,7412,7414,7416],{"class":322,"line":7411},110,[320,7413,787],{"class":329},[320,7415,1615],{"class":433},[320,7417,454],{"class":329},[320,7419,7421,7423,7425],{"class":322,"line":7420},111,[320,7422,509],{"class":329},[320,7424,526],{"class":433},[320,7426,454],{"class":329},[1016,7428,7430],{"id":7429},"monitoring-values","Monitoring Values",[278,7432,7433],{},"You can also monitor values without making them editable:",[311,7435,7437],{"className":313,"code":7436,"language":316,"meta":253,"style":253},"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",[288,7438,7439,7454,7465,7476,7482,7486,7524,7552],{"__ignoreMap":253},[320,7440,7441,7443,7446,7448,7450,7452],{"class":322,"line":254},[320,7442,482],{"class":437},[320,7444,7445],{"class":333}," stats ",[320,7447,444],{"class":329},[320,7449,1163],{"class":381},[320,7451,385],{"class":333},[320,7453,1302],{"class":329},[320,7455,7456,7459,7461,7463],{"class":322,"line":255},[320,7457,7458],{"class":433},"  triangles",[320,7460,1953],{"class":329},[320,7462,5568],{"class":721},[320,7464,3811],{"class":329},[320,7466,7467,7470,7472,7474],{"class":322,"line":372},[320,7468,7469],{"class":433},"  fps",[320,7471,1953],{"class":329},[320,7473,5568],{"class":721},[320,7475,3811],{"class":329},[320,7477,7478,7480],{"class":322,"line":378},[320,7479,394],{"class":329},[320,7481,397],{"class":333},[320,7483,7484],{"class":322,"line":506},[320,7485,375],{"emptyLinePlaceholder":39},[320,7487,7488,7490,7493,7495,7497,7499,7501,7503,7505,7507,7509,7511,7513,7515,7518,7520,7522],{"class":322,"line":516},[320,7489,482],{"class":437},[320,7491,7492],{"class":333}," statsFolder ",[320,7494,444],{"class":329},[320,7496,5809],{"class":333},[320,7498,1215],{"class":329},[320,7500,1296],{"class":333},[320,7502,1215],{"class":329},[320,7504,5818],{"class":381},[320,7506,385],{"class":333},[320,7508,388],{"class":329},[320,7510,5825],{"class":433},[320,7512,1953],{"class":329},[320,7514,343],{"class":329},[320,7516,7517],{"class":346},"Statistics",[320,7519,1972],{"class":329},[320,7521,337],{"class":329},[320,7523,397],{"class":333},[320,7525,7526,7529,7531,7534,7537,7539,7541,7543,7545,7548,7550],{"class":322,"line":521},[320,7527,7528],{"class":333},"statsFolder",[320,7530,1215],{"class":329},[320,7532,7533],{"class":381},"addMonitor",[320,7535,7536],{"class":333},"(stats",[320,7538,1215],{"class":329},[320,7540,1296],{"class":333},[320,7542,490],{"class":329},[320,7544,343],{"class":329},[320,7546,7547],{"class":346},"triangles",[320,7549,1972],{"class":329},[320,7551,397],{"class":333},[320,7553,7554,7556,7558,7560,7562,7564,7566,7568,7570,7573,7575,7577,7579,7582,7584,7587,7589],{"class":322,"line":531},[320,7555,7528],{"class":333},[320,7557,1215],{"class":329},[320,7559,7533],{"class":381},[320,7561,7536],{"class":333},[320,7563,1215],{"class":329},[320,7565,1296],{"class":333},[320,7567,490],{"class":329},[320,7569,343],{"class":329},[320,7571,7572],{"class":346},"fps",[320,7574,1972],{"class":329},[320,7576,490],{"class":329},[320,7578,330],{"class":329},[320,7580,7581],{"class":433}," interval",[320,7583,1953],{"class":329},[320,7585,7586],{"class":721}," 100",[320,7588,337],{"class":329},[320,7590,397],{"class":333},[245,7592,7594],{"id":7593},"cleanup","Cleanup",[278,7596,7597],{},"Don't forget to dispose of the pane when the component unmounts:",[311,7599,7601],{"className":313,"code":7600,"language":316,"meta":253,"style":253},"import { onUnmounted } from 'vue'\n\nonUnmounted(() => {\n  pane.value?.dispose()\n})\n",[288,7602,7603,7621,7625,7637,7651],{"__ignoreMap":253},[320,7604,7605,7607,7609,7611,7613,7615,7617,7619],{"class":322,"line":254},[320,7606,326],{"class":325},[320,7608,330],{"class":329},[320,7610,5429],{"class":333},[320,7612,337],{"class":329},[320,7614,340],{"class":325},[320,7616,343],{"class":329},[320,7618,423],{"class":346},[320,7620,350],{"class":329},[320,7622,7623],{"class":322,"line":255},[320,7624,375],{"emptyLinePlaceholder":39},[320,7626,7627,7629,7631,7633,7635],{"class":322,"line":372},[320,7628,6755],{"class":381},[320,7630,385],{"class":333},[320,7632,1091],{"class":329},[320,7634,1094],{"class":437},[320,7636,1097],{"class":329},[320,7638,7639,7641,7643,7645,7647,7649],{"class":322,"line":378},[320,7640,5736],{"class":333},[320,7642,1215],{"class":329},[320,7644,1296],{"class":333},[320,7646,580],{"class":329},[320,7648,6777],{"class":381},[320,7650,503],{"class":433},[320,7652,7653,7655],{"class":322,"line":506},[320,7654,394],{"class":329},[320,7656,397],{"class":333},[980,7658,7659],{},[278,7660,7661],{},"Always dispose of the pane instance to prevent memory leaks, especially in SPAs where components are frequently mounted/unmounted.",[990,7663,7664],{},"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":253,"searchDepth":254,"depth":255,"links":7666},[7667,7668,7671],{"id":5278,"depth":255,"text":13},{"id":5383,"depth":255,"text":5384,"children":7669},[7670],{"id":7429,"depth":372,"text":7430},{"id":7593,"depth":255,"text":7594},"Learn how to integrate Tweakpane with TresJS for interactive 3D controls",{"thumbnail":7674},"/recipes/tweakpane.png",{"title":198,"description":7672},"suCCHSWMshvjVAPUx0r5Xcx_akl-XuzHczWZNutNSWs",{"id":7678,"title":202,"body":7679,"description":10984,"extension":259,"links":260,"meta":10985,"navigation":39,"path":203,"seo":10987,"stem":204,"__hash__":10988},"docs/4.cookbook/6.transition-dynamic.md",{"type":242,"value":7680,"toc":10982},[7681,7684,7702,9550,10979],[7682,7683],"examples-dynamic-transition",{},[278,7685,7686,7687,2524,7694,7701],{},"This recipe covers how to use ",[406,7688,7691],{"href":7689,"rel":7690},"https://vuejs.org/guide/built-ins/transition.html#transition",[410],[288,7692,7693],{},"\u003CTransition>",[406,7695,7698],{"href":7696,"rel":7697},"https://vuejs.org/guide/essentials/component-basics.html#dynamic-components",[410],[288,7699,7700],{},"Dynamic"," Vue built-in components.",[1013,7703,7704,7708,7711,7948,7952,7955,8261,8576,8580,8588,8619,9001,9005,9014,9227,9230,9536,9539],{},[1016,7705,7707],{"id":7706},"set-up-our-main-scene","Set up our main scene",[278,7709,7710],{},"Let's start with a simple scene.",[311,7712,7715],{"className":420,"code":7713,"filename":7714,"language":423,"meta":253,"style":253},"\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",[288,7716,7717,7727,7745,7750,7766,7782,7786,7794,7802,7823,7830,7856,7861,7881,7888,7914,7928,7932,7940],{"__ignoreMap":253},[320,7718,7719,7721,7723,7725],{"class":322,"line":254},[320,7720,430],{"class":329},[320,7722,434],{"class":433},[320,7724,438],{"class":437},[320,7726,454],{"class":329},[320,7728,7729,7731,7733,7735,7737,7739,7741,7743],{"class":322,"line":255},[320,7730,326],{"class":325},[320,7732,330],{"class":329},[320,7734,638],{"class":333},[320,7736,337],{"class":329},[320,7738,340],{"class":325},[320,7740,343],{"class":329},[320,7742,347],{"class":346},[320,7744,350],{"class":329},[320,7746,7747],{"class":322,"line":372},[320,7748,7749],{"class":1102},"// import our two custom components\n",[320,7751,7752,7754,7757,7759,7761,7764],{"class":322,"line":378},[320,7753,326],{"class":325},[320,7755,7756],{"class":333}," Sphere ",[320,7758,657],{"class":325},[320,7760,343],{"class":329},[320,7762,7763],{"class":346},"./Sphere.vue",[320,7765,350],{"class":329},[320,7767,7768,7770,7773,7775,7777,7780],{"class":322,"line":506},[320,7769,326],{"class":325},[320,7771,7772],{"class":333}," Box ",[320,7774,657],{"class":325},[320,7776,343],{"class":329},[320,7778,7779],{"class":346},"./Box.vue",[320,7781,350],{"class":329},[320,7783,7784],{"class":322,"line":516},[320,7785,375],{"emptyLinePlaceholder":39},[320,7787,7788,7790,7792],{"class":322,"line":521},[320,7789,509],{"class":329},[320,7791,434],{"class":433},[320,7793,454],{"class":329},[320,7795,7796,7798,7800],{"class":322,"line":531},[320,7797,430],{"class":329},[320,7799,526],{"class":433},[320,7801,454],{"class":329},[320,7803,7804,7806,7808,7811,7813,7815,7817,7819,7821],{"class":322,"line":540},[320,7805,704],{"class":329},[320,7807,691],{"class":433},[320,7809,7810],{"class":437}," window-size",[320,7812,6881],{"class":437},[320,7814,444],{"class":329},[320,7816,447],{"class":329},[320,7818,6888],{"class":346},[320,7820,447],{"class":329},[320,7822,454],{"class":329},[320,7824,7825,7827],{"class":322,"line":556},[320,7826,3522],{"class":329},[320,7828,7829],{"class":433},"TresPerspectiveCamera\n",[320,7831,7832,7834,7836,7838,7840,7842,7844,7846,7848,7850,7852,7854],{"class":322,"line":591},[320,7833,6968],{"class":329},[320,7835,1409],{"class":437},[320,7837,444],{"class":329},[320,7839,447],{"class":329},[320,7841,569],{"class":329},[320,7843,1418],{"class":721},[320,7845,574],{"class":329},[320,7847,1418],{"class":721},[320,7849,574],{"class":329},[320,7851,7381],{"class":721},[320,7853,586],{"class":329},[320,7855,553],{"class":329},[320,7857,7858],{"class":322,"line":597},[320,7859,7860],{"class":329},"      />\n",[320,7862,7863,7865,7867,7869,7871,7873,7875,7877,7879],{"class":322,"line":1305},[320,7864,3522],{"class":329},[320,7866,7337],{"class":433},[320,7868,710],{"class":329},[320,7870,7342],{"class":437},[320,7872,444],{"class":329},[320,7874,447],{"class":329},[320,7876,3507],{"class":721},[320,7878,447],{"class":329},[320,7880,744],{"class":329},[320,7882,7883,7885],{"class":322,"line":1331},[320,7884,3522],{"class":329},[320,7886,7887],{"class":433},"TresDirectionalLight\n",[320,7889,7890,7892,7894,7896,7898,7900,7902,7904,7906,7908,7910,7912],{"class":322,"line":1353},[320,7891,6968],{"class":329},[320,7893,1409],{"class":437},[320,7895,444],{"class":329},[320,7897,447],{"class":329},[320,7899,569],{"class":329},[320,7901,7381],{"class":721},[320,7903,574],{"class":329},[320,7905,7381],{"class":721},[320,7907,574],{"class":329},[320,7909,7381],{"class":721},[320,7911,586],{"class":329},[320,7913,553],{"class":329},[320,7915,7916,7918,7920,7922,7924,7926],{"class":322,"line":1359},[320,7917,6968],{"class":329},[320,7919,7342],{"class":437},[320,7921,444],{"class":329},[320,7923,447],{"class":329},[320,7925,727],{"class":721},[320,7927,553],{"class":329},[320,7929,7930],{"class":322,"line":1366},[320,7931,7860],{"class":329},[320,7933,7934,7936,7938],{"class":322,"line":1375},[320,7935,3539],{"class":329},[320,7937,691],{"class":433},[320,7939,454],{"class":329},[320,7941,7942,7944,7946],{"class":322,"line":1380},[320,7943,509],{"class":329},[320,7945,526],{"class":433},[320,7947,454],{"class":329},[1016,7949,7951],{"id":7950},"lets-create-two-simple-components","Let's create two simple components",[278,7953,7954],{},"I'm going to add some simple animation logic just to add a little more life.",[311,7956,7959],{"className":420,"code":7957,"filename":7958,"language":423,"meta":253,"style":253},"\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",[288,7960,7961,7971,7989,8007,8011,8016,8029,8033,8049,8053,8069,8074,8091,8117,8142,8146,8152,8160,8164,8172,8190,8222,8245,8253],{"__ignoreMap":253},[320,7962,7963,7965,7967,7969],{"class":322,"line":254},[320,7964,430],{"class":329},[320,7966,434],{"class":433},[320,7968,438],{"class":437},[320,7970,454],{"class":329},[320,7972,7973,7975,7977,7979,7981,7983,7985,7987],{"class":322,"line":255},[320,7974,326],{"class":325},[320,7976,330],{"class":329},[320,7978,3204],{"class":333},[320,7980,337],{"class":329},[320,7982,340],{"class":325},[320,7984,343],{"class":329},[320,7986,423],{"class":346},[320,7988,350],{"class":329},[320,7990,7991,7993,7995,7997,7999,8001,8003,8005],{"class":322,"line":372},[320,7992,326],{"class":325},[320,7994,330],{"class":329},[320,7996,1046],{"class":333},[320,7998,337],{"class":329},[320,8000,340],{"class":325},[320,8002,343],{"class":329},[320,8004,347],{"class":346},[320,8006,350],{"class":329},[320,8008,8009],{"class":322,"line":378},[320,8010,375],{"emptyLinePlaceholder":39},[320,8012,8013],{"class":322,"line":506},[320,8014,8015],{"class":1102},"// Retrieving the object\n",[320,8017,8018,8020,8023,8025,8027],{"class":322,"line":516},[320,8019,482],{"class":437},[320,8021,8022],{"class":333}," boxRef ",[320,8024,444],{"class":329},[320,8026,3204],{"class":381},[320,8028,503],{"class":333},[320,8030,8031],{"class":322,"line":521},[320,8032,375],{"emptyLinePlaceholder":39},[320,8034,8035,8037,8039,8041,8043,8045,8047],{"class":322,"line":531},[320,8036,482],{"class":437},[320,8038,330],{"class":329},[320,8040,1069],{"class":333},[320,8042,394],{"class":329},[320,8044,498],{"class":329},[320,8046,1046],{"class":381},[320,8048,503],{"class":333},[320,8050,8051],{"class":322,"line":540},[320,8052,375],{"emptyLinePlaceholder":39},[320,8054,8055,8057,8059,8061,8063,8065,8067],{"class":322,"line":556},[320,8056,1086],{"class":381},[320,8058,385],{"class":333},[320,8060,1529],{"class":329},[320,8062,1691],{"class":1532},[320,8064,1536],{"class":329},[320,8066,1094],{"class":437},[320,8068,1097],{"class":329},[320,8070,8071],{"class":322,"line":591},[320,8072,8073],{"class":1102},"  // little animation logic completely optional\n",[320,8075,8076,8078,8080,8083,8085,8087,8089],{"class":322,"line":597},[320,8077,1285],{"class":325},[320,8079,1288],{"class":433},[320,8081,8082],{"class":333},"boxRef",[320,8084,1215],{"class":329},[320,8086,1296],{"class":333},[320,8088,1299],{"class":433},[320,8090,1302],{"class":329},[320,8092,8093,8096,8098,8100,8102,8104,8106,8108,8110,8112,8114],{"class":322,"line":1305},[320,8094,8095],{"class":333},"    boxRef",[320,8097,1215],{"class":329},[320,8099,1296],{"class":333},[320,8101,1215],{"class":329},[320,8103,1317],{"class":333},[320,8105,1215],{"class":329},[320,8107,1346],{"class":333},[320,8109,498],{"class":329},[320,8111,1691],{"class":333},[320,8113,4512],{"class":329},[320,8115,8116],{"class":721}," 0.5\n",[320,8118,8119,8121,8123,8125,8127,8129,8131,8133,8135,8137,8139],{"class":322,"line":1331},[320,8120,8095],{"class":333},[320,8122,1215],{"class":329},[320,8124,1296],{"class":333},[320,8126,1215],{"class":329},[320,8128,1317],{"class":333},[320,8130,1215],{"class":329},[320,8132,1322],{"class":333},[320,8134,498],{"class":329},[320,8136,1691],{"class":333},[320,8138,4512],{"class":329},[320,8140,8141],{"class":721}," 0.2\n",[320,8143,8144],{"class":322,"line":1353},[320,8145,1356],{"class":329},[320,8147,8148,8150],{"class":322,"line":1359},[320,8149,394],{"class":329},[320,8151,397],{"class":333},[320,8153,8154,8156,8158],{"class":322,"line":1366},[320,8155,509],{"class":329},[320,8157,434],{"class":433},[320,8159,454],{"class":329},[320,8161,8162],{"class":322,"line":1375},[320,8163,375],{"emptyLinePlaceholder":39},[320,8165,8166,8168,8170],{"class":322,"line":1380},[320,8167,430],{"class":329},[320,8169,526],{"class":433},[320,8171,454],{"class":329},[320,8173,8174,8176,8178,8180,8182,8184,8186,8188],{"class":322,"line":1389},[320,8175,534],{"class":329},[320,8177,1394],{"class":433},[320,8179,1163],{"class":437},[320,8181,444],{"class":329},[320,8183,447],{"class":329},[320,8185,8082],{"class":346},[320,8187,447],{"class":329},[320,8189,454],{"class":329},[320,8191,8192,8194,8196,8198,8200,8202,8204,8206,8208,8210,8212,8214,8216,8218,8220],{"class":322,"line":1435},[320,8193,704],{"class":329},[320,8195,1440],{"class":433},[320,8197,710],{"class":329},[320,8199,562],{"class":437},[320,8201,444],{"class":329},[320,8203,447],{"class":329},[320,8205,569],{"class":329},[320,8207,727],{"class":721},[320,8209,574],{"class":329},[320,8211,727],{"class":721},[320,8213,574],{"class":329},[320,8215,727],{"class":721},[320,8217,586],{"class":329},[320,8219,447],{"class":329},[320,8221,744],{"class":329},[320,8223,8224,8226,8229,8231,8233,8235,8238,8240,8243],{"class":322,"line":1469},[320,8225,704],{"class":329},[320,8227,8228],{"class":433},"TresMeshStandardMaterial",[320,8230,6687],{"class":437},[320,8232,444],{"class":329},[320,8234,447],{"class":329},[320,8236,8237],{"class":346},"orange",[320,8239,447],{"class":329},[320,8241,8242],{"class":437}," transparent",[320,8244,744],{"class":329},[320,8246,8247,8249,8251],{"class":322,"line":1479},[320,8248,787],{"class":329},[320,8250,1394],{"class":433},[320,8252,454],{"class":329},[320,8254,8255,8257,8259],{"class":322,"line":1488},[320,8256,509],{"class":329},[320,8258,526],{"class":433},[320,8260,454],{"class":329},[311,8262,8265],{"className":420,"code":8263,"filename":8264,"language":423,"meta":253,"style":253},"\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",[288,8266,8267,8277,8295,8313,8317,8330,8334,8350,8354,8370,8387,8392,8427,8462,8466,8472,8480,8484,8492,8510,8540,8560,8568],{"__ignoreMap":253},[320,8268,8269,8271,8273,8275],{"class":322,"line":254},[320,8270,430],{"class":329},[320,8272,434],{"class":433},[320,8274,438],{"class":437},[320,8276,454],{"class":329},[320,8278,8279,8281,8283,8285,8287,8289,8291,8293],{"class":322,"line":255},[320,8280,326],{"class":325},[320,8282,330],{"class":329},[320,8284,3204],{"class":333},[320,8286,337],{"class":329},[320,8288,340],{"class":325},[320,8290,343],{"class":329},[320,8292,423],{"class":346},[320,8294,350],{"class":329},[320,8296,8297,8299,8301,8303,8305,8307,8309,8311],{"class":322,"line":372},[320,8298,326],{"class":325},[320,8300,330],{"class":329},[320,8302,1046],{"class":333},[320,8304,337],{"class":329},[320,8306,340],{"class":325},[320,8308,343],{"class":329},[320,8310,347],{"class":346},[320,8312,350],{"class":329},[320,8314,8315],{"class":322,"line":378},[320,8316,375],{"emptyLinePlaceholder":39},[320,8318,8319,8321,8324,8326,8328],{"class":322,"line":506},[320,8320,482],{"class":437},[320,8322,8323],{"class":333}," sphereRef ",[320,8325,444],{"class":329},[320,8327,3204],{"class":381},[320,8329,503],{"class":333},[320,8331,8332],{"class":322,"line":516},[320,8333,375],{"emptyLinePlaceholder":39},[320,8335,8336,8338,8340,8342,8344,8346,8348],{"class":322,"line":521},[320,8337,482],{"class":437},[320,8339,330],{"class":329},[320,8341,1069],{"class":333},[320,8343,394],{"class":329},[320,8345,498],{"class":329},[320,8347,1046],{"class":381},[320,8349,503],{"class":333},[320,8351,8352],{"class":322,"line":531},[320,8353,375],{"emptyLinePlaceholder":39},[320,8355,8356,8358,8360,8362,8364,8366,8368],{"class":322,"line":540},[320,8357,1086],{"class":381},[320,8359,385],{"class":333},[320,8361,1529],{"class":329},[320,8363,1691],{"class":1532},[320,8365,1536],{"class":329},[320,8367,1094],{"class":437},[320,8369,1097],{"class":329},[320,8371,8372,8374,8376,8379,8381,8383,8385],{"class":322,"line":556},[320,8373,1285],{"class":325},[320,8375,1288],{"class":433},[320,8377,8378],{"class":333},"sphereRef",[320,8380,1215],{"class":329},[320,8382,1296],{"class":333},[320,8384,1299],{"class":433},[320,8386,1302],{"class":329},[320,8388,8389],{"class":322,"line":591},[320,8390,8391],{"class":1102},"    // Moving my sphere instead of rotating\n",[320,8393,8394,8397,8399,8401,8403,8405,8407,8409,8411,8413,8415,8417,8419,8421,8423,8425],{"class":322,"line":597},[320,8395,8396],{"class":333},"    sphereRef",[320,8398,1215],{"class":329},[320,8400,1296],{"class":333},[320,8402,1215],{"class":329},[320,8404,1409],{"class":333},[320,8406,1215],{"class":329},[320,8408,1346],{"class":333},[320,8410,498],{"class":329},[320,8412,1735],{"class":333},[320,8414,1215],{"class":329},[320,8416,1740],{"class":381},[320,8418,385],{"class":433},[320,8420,1667],{"class":333},[320,8422,1299],{"class":433},[320,8424,1749],{"class":329},[320,8426,8116],{"class":721},[320,8428,8429,8431,8433,8435,8437,8439,8441,8443,8445,8447,8449,8452,8454,8456,8458,8460],{"class":322,"line":1305},[320,8430,8396],{"class":333},[320,8432,1215],{"class":329},[320,8434,1296],{"class":333},[320,8436,1215],{"class":329},[320,8438,1409],{"class":333},[320,8440,1215],{"class":329},[320,8442,1322],{"class":333},[320,8444,498],{"class":329},[320,8446,1735],{"class":333},[320,8448,1215],{"class":329},[320,8450,8451],{"class":381},"cos",[320,8453,385],{"class":433},[320,8455,1667],{"class":333},[320,8457,1299],{"class":433},[320,8459,1749],{"class":329},[320,8461,8141],{"class":721},[320,8463,8464],{"class":322,"line":1331},[320,8465,1356],{"class":329},[320,8467,8468,8470],{"class":322,"line":1353},[320,8469,394],{"class":329},[320,8471,397],{"class":333},[320,8473,8474,8476,8478],{"class":322,"line":1359},[320,8475,509],{"class":329},[320,8477,434],{"class":433},[320,8479,454],{"class":329},[320,8481,8482],{"class":322,"line":1366},[320,8483,375],{"emptyLinePlaceholder":39},[320,8485,8486,8488,8490],{"class":322,"line":1375},[320,8487,430],{"class":329},[320,8489,526],{"class":433},[320,8491,454],{"class":329},[320,8493,8494,8496,8498,8500,8502,8504,8506,8508],{"class":322,"line":1380},[320,8495,534],{"class":329},[320,8497,1394],{"class":433},[320,8499,1163],{"class":437},[320,8501,444],{"class":329},[320,8503,447],{"class":329},[320,8505,8378],{"class":346},[320,8507,447],{"class":329},[320,8509,454],{"class":329},[320,8511,8512,8514,8517,8519,8521,8523,8525,8527,8529,8531,8534,8536,8538],{"class":322,"line":1389},[320,8513,704],{"class":329},[320,8515,8516],{"class":433},"TresSphereGeometry",[320,8518,710],{"class":329},[320,8520,562],{"class":437},[320,8522,444],{"class":329},[320,8524,447],{"class":329},[320,8526,569],{"class":329},[320,8528,727],{"class":721},[320,8530,574],{"class":329},[320,8532,8533],{"class":721},"32",[320,8535,586],{"class":329},[320,8537,447],{"class":329},[320,8539,744],{"class":329},[320,8541,8542,8544,8546,8548,8550,8552,8554,8556,8558],{"class":322,"line":1435},[320,8543,704],{"class":329},[320,8545,8228],{"class":433},[320,8547,6687],{"class":437},[320,8549,444],{"class":329},[320,8551,447],{"class":329},[320,8553,8237],{"class":346},[320,8555,447],{"class":329},[320,8557,8242],{"class":437},[320,8559,744],{"class":329},[320,8561,8562,8564,8566],{"class":322,"line":1469},[320,8563,787],{"class":329},[320,8565,1394],{"class":433},[320,8567,454],{"class":329},[320,8569,8570,8572,8574],{"class":322,"line":1479},[320,8571,509],{"class":329},[320,8573,526],{"class":433},[320,8575,454],{"class":329},[1016,8577,8579],{"id":8578},"using-vue-dynamic-components","Using Vue dynamic components",[278,8581,8582,8583,8587],{},"You can use ",[406,8584,8586],{"href":7696,"rel":8585},[410],"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.",[1794,8589,8590,8597,8609,8612],{},[1797,8591,8592,8593,8596],{},"First, we create a ref that contains our ",[1029,8594,8595],{},"current"," component name.",[1797,8598,8599,8600,1215],{},"Then we create another object that will contain ",[1029,8601,8602,8603,8605,8606,2779],{},"all our ",[320,8604,8586],{},".(",[406,8607,7696],{"href":7696,"rel":8608},[410],[1797,8610,8611],{},"After that, we can define a simple function to change our ref to the new component.",[1797,8613,8614,8615,8618],{},"Don't forget to add the ",[288,8616,8617],{},"\u003Ccomponent :is=\"meshes[current]\" />"," to our scene.",[311,8620,8623],{"className":420,"code":8621,"filename":7714,"highlights":8622,"language":423,"meta":253,"style":253},"\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",[521,531,540,556,591,597,1305,1331,1479],[288,8624,8625,8635,8653,8671,8685,8699,8703,8709,8732,8744,8752,8760,8765,8786,8801,8805,8813,8821,8841,8847,8873,8877,8882,8911,8915,8935,8941,8967,8981,8985,8993],{"__ignoreMap":253},[320,8626,8627,8629,8631,8633],{"class":322,"line":254},[320,8628,430],{"class":329},[320,8630,434],{"class":433},[320,8632,438],{"class":437},[320,8634,454],{"class":329},[320,8636,8637,8639,8641,8643,8645,8647,8649,8651],{"class":322,"line":255},[320,8638,326],{"class":325},[320,8640,330],{"class":329},[320,8642,1163],{"class":333},[320,8644,337],{"class":329},[320,8646,340],{"class":325},[320,8648,343],{"class":329},[320,8650,423],{"class":346},[320,8652,350],{"class":329},[320,8654,8655,8657,8659,8661,8663,8665,8667,8669],{"class":322,"line":372},[320,8656,326],{"class":325},[320,8658,330],{"class":329},[320,8660,638],{"class":333},[320,8662,337],{"class":329},[320,8664,340],{"class":325},[320,8666,343],{"class":329},[320,8668,347],{"class":346},[320,8670,350],{"class":329},[320,8672,8673,8675,8677,8679,8681,8683],{"class":322,"line":378},[320,8674,326],{"class":325},[320,8676,7756],{"class":333},[320,8678,657],{"class":325},[320,8680,343],{"class":329},[320,8682,7763],{"class":346},[320,8684,350],{"class":329},[320,8686,8687,8689,8691,8693,8695,8697],{"class":322,"line":506},[320,8688,326],{"class":325},[320,8690,7772],{"class":333},[320,8692,657],{"class":325},[320,8694,343],{"class":329},[320,8696,7779],{"class":346},[320,8698,350],{"class":329},[320,8700,8701],{"class":322,"line":516},[320,8702,375],{"emptyLinePlaceholder":39},[320,8704,8707],{"class":8705,"line":521},[322,8706],"highlight",[320,8708,375],{"emptyLinePlaceholder":39},[320,8710,8712,8714,8717,8719,8721,8723,8725,8728,8730],{"class":8711,"line":531},[322,8706],[320,8713,482],{"class":437},[320,8715,8716],{"class":333}," current ",[320,8718,444],{"class":329},[320,8720,1163],{"class":381},[320,8722,385],{"class":333},[320,8724,1972],{"class":329},[320,8726,8727],{"class":346},"Box",[320,8729,1972],{"class":329},[320,8731,397],{"class":333},[320,8733,8735,8737,8740,8742],{"class":8734,"line":540},[322,8706],[320,8736,482],{"class":437},[320,8738,8739],{"class":333}," meshes ",[320,8741,444],{"class":329},[320,8743,1097],{"class":329},[320,8745,8747,8750],{"class":8746,"line":556},[322,8706],[320,8748,8749],{"class":333},"  Box",[320,8751,3811],{"class":329},[320,8753,8755,8758],{"class":8754,"line":591},[322,8706],[320,8756,8757],{"class":333},"  Sphere",[320,8759,3811],{"class":329},[320,8761,8763],{"class":8762,"line":597},[322,8706],[320,8764,1756],{"class":329},[320,8766,8768,8770,8773,8775,8777,8780,8782,8784],{"class":8767,"line":1305},[322,8706],[320,8769,482],{"class":437},[320,8771,8772],{"class":333}," handleComponents ",[320,8774,444],{"class":329},[320,8776,1288],{"class":329},[320,8778,8779],{"class":1532},"component",[320,8781,2779],{"class":329},[320,8783,1094],{"class":437},[320,8785,1097],{"class":329},[320,8787,8789,8792,8794,8796,8798],{"class":8788,"line":1331},[322,8706],[320,8790,8791],{"class":333},"  current",[320,8793,1215],{"class":329},[320,8795,1296],{"class":333},[320,8797,498],{"class":329},[320,8799,8800],{"class":333}," component\n",[320,8802,8803],{"class":322,"line":1353},[320,8804,1756],{"class":329},[320,8806,8807,8809,8811],{"class":322,"line":1359},[320,8808,509],{"class":329},[320,8810,434],{"class":433},[320,8812,454],{"class":329},[320,8814,8815,8817,8819],{"class":322,"line":1366},[320,8816,430],{"class":329},[320,8818,526],{"class":433},[320,8820,454],{"class":329},[320,8822,8823,8825,8827,8829,8831,8833,8835,8837,8839],{"class":322,"line":1375},[320,8824,704],{"class":329},[320,8826,691],{"class":433},[320,8828,7810],{"class":437},[320,8830,6881],{"class":437},[320,8832,444],{"class":329},[320,8834,447],{"class":329},[320,8836,6888],{"class":346},[320,8838,447],{"class":329},[320,8840,454],{"class":329},[320,8842,8843,8845],{"class":322,"line":1380},[320,8844,3522],{"class":329},[320,8846,7829],{"class":433},[320,8848,8849,8851,8853,8855,8857,8859,8861,8863,8865,8867,8869,8871],{"class":322,"line":1389},[320,8850,6968],{"class":329},[320,8852,1409],{"class":437},[320,8854,444],{"class":329},[320,8856,447],{"class":329},[320,8858,569],{"class":329},[320,8860,1418],{"class":721},[320,8862,574],{"class":329},[320,8864,1418],{"class":721},[320,8866,574],{"class":329},[320,8868,7381],{"class":721},[320,8870,586],{"class":329},[320,8872,553],{"class":329},[320,8874,8875],{"class":322,"line":1435},[320,8876,7860],{"class":329},[320,8878,8879],{"class":322,"line":1469},[320,8880,8881],{"class":1102},"      \u003C!-- Dynamic component -->\n",[320,8883,8885,8887,8889,8891,8894,8896,8898,8901,8903,8905,8907,8909],{"class":8884,"line":1479},[322,8706],[320,8886,3522],{"class":329},[320,8888,8779],{"class":433},[320,8890,710],{"class":329},[320,8892,8893],{"class":437},"is",[320,8895,444],{"class":329},[320,8897,447],{"class":329},[320,8899,8900],{"class":333},"meshes",[320,8902,569],{"class":329},[320,8904,8595],{"class":333},[320,8906,586],{"class":329},[320,8908,447],{"class":329},[320,8910,744],{"class":329},[320,8912,8913],{"class":322,"line":1488},[320,8914,375],{"emptyLinePlaceholder":39},[320,8916,8917,8919,8921,8923,8925,8927,8929,8931,8933],{"class":322,"line":2923},[320,8918,3522],{"class":329},[320,8920,7337],{"class":433},[320,8922,710],{"class":329},[320,8924,7342],{"class":437},[320,8926,444],{"class":329},[320,8928,447],{"class":329},[320,8930,3507],{"class":721},[320,8932,447],{"class":329},[320,8934,744],{"class":329},[320,8936,8937,8939],{"class":322,"line":2938},[320,8938,3522],{"class":329},[320,8940,7887],{"class":433},[320,8942,8943,8945,8947,8949,8951,8953,8955,8957,8959,8961,8963,8965],{"class":322,"line":2943},[320,8944,6968],{"class":329},[320,8946,1409],{"class":437},[320,8948,444],{"class":329},[320,8950,447],{"class":329},[320,8952,569],{"class":329},[320,8954,7381],{"class":721},[320,8956,574],{"class":329},[320,8958,7381],{"class":721},[320,8960,574],{"class":329},[320,8962,7381],{"class":721},[320,8964,586],{"class":329},[320,8966,553],{"class":329},[320,8968,8969,8971,8973,8975,8977,8979],{"class":322,"line":2958},[320,8970,6968],{"class":329},[320,8972,7342],{"class":437},[320,8974,444],{"class":329},[320,8976,447],{"class":329},[320,8978,727],{"class":721},[320,8980,553],{"class":329},[320,8982,8983],{"class":322,"line":2963},[320,8984,7860],{"class":329},[320,8986,8987,8989,8991],{"class":322,"line":2968},[320,8988,3539],{"class":329},[320,8990,691],{"class":433},[320,8992,454],{"class":329},[320,8994,8995,8997,8999],{"class":322,"line":2974},[320,8996,509],{"class":329},[320,8998,526],{"class":433},[320,9000,454],{"class":329},[1016,9002,9004],{"id":9003},"adding-ui-controls-to-switch-components","Adding UI controls to switch components",[278,9006,9007,9008,9010,9011],{},"To be able to switch between components, lets add a floating UI containing buttons to change between the ",[1029,9009,8727],{}," and the ",[1029,9012,9013],{},"Sphere",[311,9015,9017],{"className":420,"code":9016,"language":423,"meta":253,"style":253},"\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",[288,9018,9019,9027,9046,9053,9089,9115,9120,9125,9134,9140,9170,9194,9198,9203,9211,9219],{"__ignoreMap":253},[320,9020,9021,9023,9025],{"class":322,"line":254},[320,9022,430],{"class":329},[320,9024,526],{"class":433},[320,9026,454],{"class":329},[320,9028,9029,9031,9033,9035,9037,9039,9042,9044],{"class":322,"line":255},[320,9030,534],{"class":329},[320,9032,1615],{"class":433},[320,9034,6819],{"class":437},[320,9036,444],{"class":329},[320,9038,447],{"class":329},[320,9040,9041],{"class":346},"floating-container",[320,9043,447],{"class":329},[320,9045,454],{"class":329},[320,9047,9048,9050],{"class":322,"line":372},[320,9049,704],{"class":329},[320,9051,9052],{"class":433},"button\n",[320,9054,9055,9058,9061,9063,9065,9068,9071,9074,9076,9078,9080,9083,9085,9087],{"class":322,"line":378},[320,9056,9057],{"class":329},"      :",[320,9059,9060],{"class":437},"class",[320,9062,444],{"class":329},[320,9064,447],{"class":329},[320,9066,9067],{"class":329},"{ ",[320,9069,9070],{"class":433},"isActive",[320,9072,9073],{"class":329},": ",[320,9075,8900],{"class":333},[320,9077,569],{"class":329},[320,9079,8595],{"class":333},[320,9081,9082],{"class":329},"] === ",[320,9084,8727],{"class":333},[320,9086,337],{"class":329},[320,9088,553],{"class":329},[320,9090,9091,9094,9096,9098,9100,9103,9105,9107,9109,9111,9113],{"class":322,"line":506},[320,9092,9093],{"class":329},"      @",[320,9095,6579],{"class":437},[320,9097,444],{"class":329},[320,9099,447],{"class":329},[320,9101,9102],{"class":381},"handleComponents",[320,9104,385],{"class":329},[320,9106,1972],{"class":329},[320,9108,8727],{"class":346},[320,9110,1972],{"class":329},[320,9112,2779],{"class":329},[320,9114,553],{"class":329},[320,9116,9117],{"class":322,"line":516},[320,9118,9119],{"class":329},"    >\n",[320,9121,9122],{"class":322,"line":521},[320,9123,9124],{"class":333},"        Cube\n",[320,9126,9127,9129,9132],{"class":322,"line":531},[320,9128,3539],{"class":329},[320,9130,9131],{"class":433},"button",[320,9133,454],{"class":329},[320,9135,9136,9138],{"class":322,"line":540},[320,9137,704],{"class":329},[320,9139,9052],{"class":433},[320,9141,9142,9144,9146,9148,9150,9152,9154,9156,9158,9160,9162,9164,9166,9168],{"class":322,"line":556},[320,9143,9057],{"class":329},[320,9145,9060],{"class":437},[320,9147,444],{"class":329},[320,9149,447],{"class":329},[320,9151,9067],{"class":329},[320,9153,9070],{"class":433},[320,9155,9073],{"class":329},[320,9157,8900],{"class":333},[320,9159,569],{"class":329},[320,9161,8595],{"class":333},[320,9163,9082],{"class":329},[320,9165,9013],{"class":333},[320,9167,337],{"class":329},[320,9169,553],{"class":329},[320,9171,9172,9174,9176,9178,9180,9182,9184,9186,9188,9190,9192],{"class":322,"line":591},[320,9173,9093],{"class":329},[320,9175,6579],{"class":437},[320,9177,444],{"class":329},[320,9179,447],{"class":329},[320,9181,9102],{"class":381},[320,9183,385],{"class":329},[320,9185,1972],{"class":329},[320,9187,9013],{"class":346},[320,9189,1972],{"class":329},[320,9191,2779],{"class":329},[320,9193,553],{"class":329},[320,9195,9196],{"class":322,"line":597},[320,9197,9119],{"class":329},[320,9199,9200],{"class":322,"line":1305},[320,9201,9202],{"class":333},"       Sphere\n",[320,9204,9205,9207,9209],{"class":322,"line":1331},[320,9206,3539],{"class":329},[320,9208,9131],{"class":433},[320,9210,454],{"class":329},[320,9212,9213,9215,9217],{"class":322,"line":1353},[320,9214,509],{"class":329},[320,9216,1615],{"class":433},[320,9218,454],{"class":329},[320,9220,9221,9223,9225],{"class":322,"line":1359},[320,9222,509],{"class":329},[320,9224,526],{"class":433},[320,9226,454],{"class":329},[278,9228,9229],{},"Let's add a little CSS.",[311,9231,9233],{"className":420,"code":9232,"language":423,"meta":253,"style":253},"\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",[288,9234,9235,9246,9254,9268,9279,9291,9303,9318,9331,9343,9355,9367,9378,9396,9401,9415,9427,9441,9453,9465,9477,9489,9493,9497,9501,9511,9524,9528],{"__ignoreMap":253},[320,9236,9237,9239,9241,9244],{"class":322,"line":254},[320,9238,430],{"class":329},[320,9240,990],{"class":433},[320,9242,9243],{"class":437}," scoped",[320,9245,454],{"class":329},[320,9247,9248,9250,9252],{"class":322,"line":255},[320,9249,1215],{"class":329},[320,9251,9041],{"class":1211},[320,9253,1097],{"class":329},[320,9255,9256,9260,9262,9265],{"class":322,"line":372},[320,9257,9259],{"class":9258},"sqsOY","  position",[320,9261,1953],{"class":329},[320,9263,9264],{"class":333}," absolute",[320,9266,9267],{"class":329},";\n",[320,9269,9270,9273,9275,9277],{"class":322,"line":378},[320,9271,9272],{"class":9258},"  top",[320,9274,1953],{"class":329},[320,9276,5568],{"class":721},[320,9278,9267],{"class":329},[320,9280,9281,9284,9286,9289],{"class":322,"line":506},[320,9282,9283],{"class":9258},"  left",[320,9285,1953],{"class":329},[320,9287,9288],{"class":721}," 50%",[320,9290,9267],{"class":329},[320,9292,9293,9296,9298,9301],{"class":322,"line":516},[320,9294,9295],{"class":9258},"  z-index",[320,9297,1953],{"class":329},[320,9299,9300],{"class":721}," 10",[320,9302,9267],{"class":329},[320,9304,9305,9308,9310,9313,9316],{"class":322,"line":521},[320,9306,9307],{"class":9258},"  background-color",[320,9309,1953],{"class":329},[320,9311,9312],{"class":329}," #",[320,9314,9315],{"class":333},"f7f7f7",[320,9317,9267],{"class":329},[320,9319,9320,9322,9324,9326,9329],{"class":322,"line":531},[320,9321,5641],{"class":9258},[320,9323,1953],{"class":329},[320,9325,9312],{"class":329},[320,9327,9328],{"class":333},"333",[320,9330,9267],{"class":329},[320,9332,9333,9336,9338,9341],{"class":322,"line":540},[320,9334,9335],{"class":9258},"  border-radius",[320,9337,1953],{"class":329},[320,9339,9340],{"class":721}," 8px",[320,9342,9267],{"class":329},[320,9344,9345,9348,9350,9353],{"class":322,"line":556},[320,9346,9347],{"class":9258},"  padding",[320,9349,1953],{"class":329},[320,9351,9352],{"class":721}," 0.25rem",[320,9354,9267],{"class":329},[320,9356,9357,9360,9362,9365],{"class":322,"line":591},[320,9358,9359],{"class":9258},"  display",[320,9361,1953],{"class":329},[320,9363,9364],{"class":333}," flex",[320,9366,9267],{"class":329},[320,9368,9369,9372,9374,9376],{"class":322,"line":597},[320,9370,9371],{"class":9258},"  gap",[320,9373,1953],{"class":329},[320,9375,9352],{"class":721},[320,9377,9267],{"class":329},[320,9379,9380,9383,9385,9388,9390,9393],{"class":322,"line":1305},[320,9381,9382],{"class":9258},"  transform",[320,9384,1953],{"class":329},[320,9386,9387],{"class":381}," translateX",[320,9389,385],{"class":329},[320,9391,9392],{"class":721},"-50%",[320,9394,9395],{"class":329},");\n",[320,9397,9398],{"class":322,"line":1331},[320,9399,9400],{"class":333},"  button {\n",[320,9402,9403,9406,9408,9410,9413],{"class":322,"line":1353},[320,9404,9405],{"class":9258},"    padding",[320,9407,1953],{"class":329},[320,9409,9340],{"class":721},[320,9411,9412],{"class":721}," 16px",[320,9414,9267],{"class":329},[320,9416,9417,9420,9422,9425],{"class":322,"line":1359},[320,9418,9419],{"class":9258},"    border",[320,9421,1953],{"class":329},[320,9423,9424],{"class":333}," none",[320,9426,9267],{"class":329},[320,9428,9429,9432,9434,9436,9439],{"class":322,"line":1366},[320,9430,9431],{"class":9258},"    background-color",[320,9433,1953],{"class":329},[320,9435,9312],{"class":329},[320,9437,9438],{"class":333},"4caf50",[320,9440,9267],{"class":329},[320,9442,9443,9446,9448,9451],{"class":322,"line":1375},[320,9444,9445],{"class":9258},"    color",[320,9447,1953],{"class":329},[320,9449,9450],{"class":333}," white",[320,9452,9267],{"class":329},[320,9454,9455,9458,9460,9463],{"class":322,"line":1380},[320,9456,9457],{"class":9258},"    cursor",[320,9459,1953],{"class":329},[320,9461,9462],{"class":333}," pointer",[320,9464,9267],{"class":329},[320,9466,9467,9470,9472,9475],{"class":322,"line":1389},[320,9468,9469],{"class":9258},"    border-radius",[320,9471,1953],{"class":329},[320,9473,9474],{"class":721}," 4px",[320,9476,9267],{"class":329},[320,9478,9479,9482,9484,9487],{"class":322,"line":1435},[320,9480,9481],{"class":9258},"    font-size",[320,9483,1953],{"class":329},[320,9485,9486],{"class":721}," 14px",[320,9488,9267],{"class":329},[320,9490,9491],{"class":322,"line":1469},[320,9492,1356],{"class":329},[320,9494,9495],{"class":322,"line":1479},[320,9496,1756],{"class":333},[320,9498,9499],{"class":322,"line":1488},[320,9500,375],{"emptyLinePlaceholder":39},[320,9502,9503,9505,9507,9509],{"class":322,"line":2923},[320,9504,9131],{"class":1211},[320,9506,1215],{"class":329},[320,9508,9070],{"class":1211},[320,9510,1097],{"class":329},[320,9512,9513,9515,9517,9519,9522],{"class":322,"line":2938},[320,9514,9307],{"class":9258},[320,9516,1953],{"class":329},[320,9518,9312],{"class":329},[320,9520,9521],{"class":333},"388e3c",[320,9523,9267],{"class":329},[320,9525,9526],{"class":322,"line":2943},[320,9527,1756],{"class":329},[320,9529,9530,9532,9534],{"class":322,"line":2958},[320,9531,509],{"class":329},[320,9533,990],{"class":433},[320,9535,454],{"class":329},[9537,9538],"examples-dynamic-transition-only-dynamic",{},[9540,9541,9542],"prose-note",{},[278,9543,8582,9544,9549],{},[406,9545,9548],{"href":9546,"rel":9547},"https://vuejs.org/guide/built-ins/keep-alive.html#keepalive",[410],"KeepAlive"," if you want component instances to be cached and preserved between component switches",[1013,9551,9552,9556,9566,9582,9590,9605,9610,9666,9670,9685,9758,9762,9769,9807,9815,9970,9983,9987],{},[245,9553,9555],{"id":9554},"adding-transitions","Adding transitions",[1016,9557,9559,9560],{"id":9558},"wrap-the-component-inside-the-transition","Wrap the component inside the ",[406,9561,9563],{"href":7689,"rel":9562},[410],[288,9564,9565],{},"\u003Ctransition>",[278,9567,9568,9569,2524,9576,9581],{},"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 ",[406,9570,9573],{"href":9571,"rel":9572},"https://gsap.com/",[410],[288,9574,9575],{},"GSAP",[406,9577,9579],{"href":7689,"rel":9578},[410],[288,9580,7693],{}," components.",[278,9583,9584,9585,1215],{},"For that, the first step is to wrap our dynamic component in a ",[406,9586,9588],{"href":7689,"rel":9587},[410],[288,9589,7693],{},[278,9591,9592,9593,9596,9597,9600,9601,9604],{},"Very important: we need to tell our component that we're going to handle our animations using ",[288,9594,9595],{},"JS",", not ",[288,9598,9599],{},"CSS",", by using the prop ",[288,9602,9603],{},":css=\"false\"",". Otherwise, the component will search for a DOM element and will fail.",[9540,9606,9607],{},[278,9608,9609],{},"Elements inside Tres.js live inside a canvas, not in the DOM.",[311,9611,9615],{"className":9612,"code":9613,"language":9614,"meta":253,"style":253},"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",[288,9616,9617,9638,9658],{"__ignoreMap":253},[320,9618,9619,9621,9624,9627,9629,9631,9634,9636],{"class":322,"line":254},[320,9620,430],{"class":329},[320,9622,9623],{"class":433},"Transition",[320,9625,9626],{"class":437}," :css",[320,9628,444],{"class":329},[320,9630,447],{"class":329},[320,9632,9633],{"class":346},"false",[320,9635,447],{"class":329},[320,9637,454],{"class":329},[320,9639,9640,9642,9644,9647,9649,9651,9654,9656],{"class":322,"line":255},[320,9641,534],{"class":329},[320,9643,8779],{"class":433},[320,9645,9646],{"class":437}," :is",[320,9648,444],{"class":329},[320,9650,447],{"class":329},[320,9652,9653],{"class":346},"meshes[current]",[320,9655,447],{"class":329},[320,9657,744],{"class":329},[320,9659,9660,9662,9664],{"class":322,"line":372},[320,9661,509],{"class":329},[320,9663,9623],{"class":433},[320,9665,454],{"class":329},[1016,9667,9669],{"id":9668},"using-js-hooks","Using JS hooks",[278,9671,9672,9673,9678,9679,2524,9682,1215],{},"Then we can use the provided ",[406,9674,9677],{"href":9675,"rel":9676},"https://vuejs.org/guide/built-ins/transition.html#javascript-hooks",[410],"JS hooks","; in this demo, we're going to use ",[288,9680,9681],{},"@enter",[288,9683,9684],{},"@leave",[311,9686,9688],{"className":9612,"code":9687,"language":9614,"meta":253,"style":253},"\u003CTransition :css=\"false\" @enter=\"onEnter\" @leave=\"onLeave\">\n  \u003Ccomponent :is=\"meshes[current]\" />\n\u003C/Transition>\n",[288,9689,9690,9732,9750],{"__ignoreMap":253},[320,9691,9692,9694,9696,9698,9700,9702,9704,9706,9709,9711,9713,9716,9718,9721,9723,9725,9728,9730],{"class":322,"line":254},[320,9693,430],{"class":329},[320,9695,9623],{"class":433},[320,9697,9626],{"class":437},[320,9699,444],{"class":329},[320,9701,447],{"class":329},[320,9703,9633],{"class":346},[320,9705,447],{"class":329},[320,9707,9708],{"class":437}," @enter",[320,9710,444],{"class":329},[320,9712,447],{"class":329},[320,9714,9715],{"class":346},"onEnter",[320,9717,447],{"class":329},[320,9719,9720],{"class":437}," @leave",[320,9722,444],{"class":329},[320,9724,447],{"class":329},[320,9726,9727],{"class":346},"onLeave",[320,9729,447],{"class":329},[320,9731,454],{"class":329},[320,9733,9734,9736,9738,9740,9742,9744,9746,9748],{"class":322,"line":255},[320,9735,534],{"class":329},[320,9737,8779],{"class":433},[320,9739,9646],{"class":437},[320,9741,444],{"class":329},[320,9743,447],{"class":329},[320,9745,9653],{"class":346},[320,9747,447],{"class":329},[320,9749,744],{"class":329},[320,9751,9752,9754,9756],{"class":322,"line":372},[320,9753,509],{"class":329},[320,9755,9623],{"class":433},[320,9757,454],{"class":329},[1016,9759,9761],{"id":9760},"now-its-time-to-animate","Now it's time to animate!",[278,9763,9764,9765,9768],{},"In case you haven't installed it already, install ",[406,9766,9575],{"href":9571,"rel":9767},[410]," as a dependency in your project:",[416,9770,9771,9783,9795],{},[311,9772,9773],{"className":1860,"code":3140,"filename":1869,"language":1862,"meta":253,"style":253},[288,9774,9775],{"__ignoreMap":253},[320,9776,9777,9779,9781],{"class":322,"line":254},[320,9778,1869],{"class":1211},[320,9780,1872],{"class":346},[320,9782,3151],{"class":346},[311,9784,9785],{"className":1860,"code":3154,"filename":3155,"language":1862,"meta":253,"style":253},[288,9786,9787],{"__ignoreMap":253},[320,9788,9789,9791,9793],{"class":322,"line":254},[320,9790,3155],{"class":1211},[320,9792,3164],{"class":346},[320,9794,3151],{"class":346},[311,9796,9797],{"className":1860,"code":3169,"filename":3170,"language":1862,"meta":253,"style":253},[288,9798,9799],{"__ignoreMap":253},[320,9800,9801,9803,9805],{"class":322,"line":254},[320,9802,3170],{"class":1211},[320,9804,1872],{"class":346},[320,9806,3151],{"class":346},[278,9808,9809,9810,2524,9812,9814],{},"In our ",[288,9811,9715],{},[288,9813,9727],{}," functions, we put our desired animations. As the names indicate, one controls when the element enters the scene and the other when it leaves.",[311,9816,9820],{"className":9817,"code":9818,"language":9819,"meta":253,"style":253},"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",[288,9821,9822,9843,9847,9864,9903,9907,9927,9966],{"__ignoreMap":253},[320,9823,9824,9826,9828,9830,9832,9834,9836,9838,9840],{"class":322,"line":254},[320,9825,326],{"class":325},[320,9827,330],{"class":329},[320,9829,4249],{"class":333},[320,9831,337],{"class":329},[320,9833,340],{"class":325},[320,9835,343],{"class":329},[320,9837,3251],{"class":346},[320,9839,1972],{"class":329},[320,9841,9842],{"class":1102}," // don't forget to import GSAP\n",[320,9844,9845],{"class":322,"line":255},[320,9846,375],{"emptyLinePlaceholder":39},[320,9848,9849,9852,9855,9857,9860,9862],{"class":322,"line":372},[320,9850,9851],{"class":437},"function",[320,9853,9854],{"class":381}," onEnter",[320,9856,385],{"class":329},[320,9858,9859],{"class":1532},"el",[320,9861,2779],{"class":329},[320,9863,1097],{"class":329},[320,9865,9866,9868,9870,9872,9874,9876,9878,9880,9882,9884,9886,9888,9890,9892,9895,9897,9899,9901],{"class":322,"line":378},[320,9867,3893],{"class":333},[320,9869,1215],{"class":329},[320,9871,657],{"class":381},[320,9873,385],{"class":433},[320,9875,9859],{"class":333},[320,9877,1215],{"class":329},[320,9879,6445],{"class":333},[320,9881,490],{"class":329},[320,9883,330],{"class":329},[320,9885,2771],{"class":433},[320,9887,1953],{"class":329},[320,9889,3821],{"class":721},[320,9891,490],{"class":329},[320,9893,9894],{"class":433}," opacity",[320,9896,1953],{"class":329},[320,9898,5568],{"class":721},[320,9900,337],{"class":329},[320,9902,397],{"class":433},[320,9904,9905],{"class":322,"line":506},[320,9906,1756],{"class":329},[320,9908,9909,9911,9914,9916,9918,9920,9923,9925],{"class":322,"line":516},[320,9910,9851],{"class":437},[320,9912,9913],{"class":381}," onLeave",[320,9915,385],{"class":329},[320,9917,9859],{"class":1532},[320,9919,490],{"class":329},[320,9921,9922],{"class":1532}," done",[320,9924,2779],{"class":329},[320,9926,1097],{"class":329},[320,9928,9929,9931,9933,9935,9937,9939,9941,9943,9945,9947,9949,9951,9954,9956,9958,9960,9962,9964],{"class":322,"line":521},[320,9930,3893],{"class":333},[320,9932,1215],{"class":329},[320,9934,3898],{"class":381},[320,9936,385],{"class":433},[320,9938,9859],{"class":333},[320,9940,1215],{"class":329},[320,9942,6445],{"class":333},[320,9944,490],{"class":329},[320,9946,330],{"class":329},[320,9948,2771],{"class":433},[320,9950,1953],{"class":329},[320,9952,9953],{"class":721}," 0.05",[320,9955,490],{"class":329},[320,9957,9894],{"class":433},[320,9959,1953],{"class":329},[320,9961,5568],{"class":721},[320,9963,337],{"class":329},[320,9965,397],{"class":433},[320,9967,9968],{"class":322,"line":531},[320,9969,1756],{"class":329},[9540,9971,9972],{},[278,9973,9974,9975,9978,9979,9982],{},"Important: note that animating the ",[288,9976,9977],{},"opacity"," works here because we set ",[288,9980,9981],{},"transparent"," in our materials.",[245,9984,9986],{"id":9985},"full-example-of-our-main-component","Full example of our main component",[311,9988,9990],{"className":420,"code":9989,"language":423,"meta":253,"style":253},"\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",[288,9991,9992,10002,10020,10038,10056,10070,10084,10088,10108,10112,10130,10142,10146,10150,10164,10202,10206,10220,10258,10262,10266,10276,10282,10288,10292,10300,10304,10312,10317,10326,10344,10412,10478,10486,10504,10510,10536,10540,10587,10613,10621,10641,10647,10673,10687,10691,10699,10707,10715,10719,10729,10737,10747,10757,10767,10777,10789,10801,10811,10821,10831,10841,10855,10859,10871,10881,10893,10903,10913,10923,10933,10937,10941,10945,10955,10967,10971],{"__ignoreMap":253},[320,9993,9994,9996,9998,10000],{"class":322,"line":254},[320,9995,430],{"class":329},[320,9997,434],{"class":433},[320,9999,438],{"class":437},[320,10001,454],{"class":329},[320,10003,10004,10006,10008,10010,10012,10014,10016,10018],{"class":322,"line":255},[320,10005,326],{"class":325},[320,10007,330],{"class":329},[320,10009,1163],{"class":333},[320,10011,337],{"class":329},[320,10013,340],{"class":325},[320,10015,343],{"class":329},[320,10017,423],{"class":346},[320,10019,350],{"class":329},[320,10021,10022,10024,10026,10028,10030,10032,10034,10036],{"class":322,"line":372},[320,10023,326],{"class":325},[320,10025,330],{"class":329},[320,10027,638],{"class":333},[320,10029,337],{"class":329},[320,10031,340],{"class":325},[320,10033,343],{"class":329},[320,10035,347],{"class":346},[320,10037,350],{"class":329},[320,10039,10040,10042,10044,10046,10048,10050,10052,10054],{"class":322,"line":378},[320,10041,326],{"class":325},[320,10043,330],{"class":329},[320,10045,4249],{"class":333},[320,10047,337],{"class":329},[320,10049,340],{"class":325},[320,10051,343],{"class":329},[320,10053,3251],{"class":346},[320,10055,350],{"class":329},[320,10057,10058,10060,10062,10064,10066,10068],{"class":322,"line":506},[320,10059,326],{"class":325},[320,10061,7756],{"class":333},[320,10063,657],{"class":325},[320,10065,343],{"class":329},[320,10067,7763],{"class":346},[320,10069,350],{"class":329},[320,10071,10072,10074,10076,10078,10080,10082],{"class":322,"line":516},[320,10073,326],{"class":325},[320,10075,7772],{"class":333},[320,10077,657],{"class":325},[320,10079,343],{"class":329},[320,10081,7779],{"class":346},[320,10083,350],{"class":329},[320,10085,10086],{"class":322,"line":521},[320,10087,375],{"emptyLinePlaceholder":39},[320,10089,10090,10092,10094,10096,10098,10100,10102,10104,10106],{"class":322,"line":531},[320,10091,482],{"class":437},[320,10093,8716],{"class":333},[320,10095,444],{"class":329},[320,10097,1163],{"class":381},[320,10099,385],{"class":333},[320,10101,1972],{"class":329},[320,10103,8727],{"class":346},[320,10105,1972],{"class":329},[320,10107,397],{"class":333},[320,10109,10110],{"class":322,"line":540},[320,10111,375],{"emptyLinePlaceholder":39},[320,10113,10114,10116,10118,10120,10122,10124,10126,10128],{"class":322,"line":556},[320,10115,482],{"class":437},[320,10117,8772],{"class":333},[320,10119,444],{"class":329},[320,10121,1288],{"class":329},[320,10123,8779],{"class":1532},[320,10125,2779],{"class":329},[320,10127,1094],{"class":437},[320,10129,1097],{"class":329},[320,10131,10132,10134,10136,10138,10140],{"class":322,"line":591},[320,10133,8791],{"class":333},[320,10135,1215],{"class":329},[320,10137,1296],{"class":333},[320,10139,498],{"class":329},[320,10141,8800],{"class":333},[320,10143,10144],{"class":322,"line":597},[320,10145,1756],{"class":329},[320,10147,10148],{"class":322,"line":1305},[320,10149,375],{"emptyLinePlaceholder":39},[320,10151,10152,10154,10156,10158,10160,10162],{"class":322,"line":1331},[320,10153,9851],{"class":437},[320,10155,9854],{"class":381},[320,10157,385],{"class":329},[320,10159,9859],{"class":1532},[320,10161,2779],{"class":329},[320,10163,1097],{"class":329},[320,10165,10166,10168,10170,10172,10174,10176,10178,10180,10182,10184,10186,10188,10190,10192,10194,10196,10198,10200],{"class":322,"line":1353},[320,10167,3893],{"class":333},[320,10169,1215],{"class":329},[320,10171,657],{"class":381},[320,10173,385],{"class":433},[320,10175,9859],{"class":333},[320,10177,1215],{"class":329},[320,10179,6445],{"class":333},[320,10181,490],{"class":329},[320,10183,330],{"class":329},[320,10185,2771],{"class":433},[320,10187,1953],{"class":329},[320,10189,3821],{"class":721},[320,10191,490],{"class":329},[320,10193,9894],{"class":433},[320,10195,1953],{"class":329},[320,10197,5568],{"class":721},[320,10199,337],{"class":329},[320,10201,397],{"class":433},[320,10203,10204],{"class":322,"line":1359},[320,10205,1756],{"class":329},[320,10207,10208,10210,10212,10214,10216,10218],{"class":322,"line":1366},[320,10209,9851],{"class":437},[320,10211,9913],{"class":381},[320,10213,385],{"class":329},[320,10215,9859],{"class":1532},[320,10217,2779],{"class":329},[320,10219,1097],{"class":329},[320,10221,10222,10224,10226,10228,10230,10232,10234,10236,10238,10240,10242,10244,10246,10248,10250,10252,10254,10256],{"class":322,"line":1375},[320,10223,3893],{"class":333},[320,10225,1215],{"class":329},[320,10227,3898],{"class":381},[320,10229,385],{"class":433},[320,10231,9859],{"class":333},[320,10233,1215],{"class":329},[320,10235,6445],{"class":333},[320,10237,490],{"class":329},[320,10239,330],{"class":329},[320,10241,2771],{"class":433},[320,10243,1953],{"class":329},[320,10245,9953],{"class":721},[320,10247,490],{"class":329},[320,10249,9894],{"class":433},[320,10251,1953],{"class":329},[320,10253,5568],{"class":721},[320,10255,337],{"class":329},[320,10257,397],{"class":433},[320,10259,10260],{"class":322,"line":1380},[320,10261,1756],{"class":329},[320,10263,10264],{"class":322,"line":1389},[320,10265,375],{"emptyLinePlaceholder":39},[320,10267,10268,10270,10272,10274],{"class":322,"line":1435},[320,10269,482],{"class":437},[320,10271,8739],{"class":333},[320,10273,444],{"class":329},[320,10275,1097],{"class":329},[320,10277,10278,10280],{"class":322,"line":1469},[320,10279,8749],{"class":333},[320,10281,3811],{"class":329},[320,10283,10284,10286],{"class":322,"line":1479},[320,10285,8757],{"class":333},[320,10287,3811],{"class":329},[320,10289,10290],{"class":322,"line":1488},[320,10291,1756],{"class":329},[320,10293,10294,10296,10298],{"class":322,"line":2923},[320,10295,509],{"class":329},[320,10297,434],{"class":433},[320,10299,454],{"class":329},[320,10301,10302],{"class":322,"line":2938},[320,10303,375],{"emptyLinePlaceholder":39},[320,10305,10306,10308,10310],{"class":322,"line":2943},[320,10307,430],{"class":329},[320,10309,526],{"class":433},[320,10311,454],{"class":329},[320,10313,10314],{"class":322,"line":2958},[320,10315,10316],{"class":1102},"  \u003C!---->\n",[320,10318,10319,10321,10324],{"class":322,"line":2963},[320,10320,534],{"class":329},[320,10322,10323],{"class":433},"SceneWrapper",[320,10325,454],{"class":329},[320,10327,10328,10330,10332,10334,10336,10338,10340,10342],{"class":322,"line":2968},[320,10329,704],{"class":329},[320,10331,1615],{"class":433},[320,10333,6819],{"class":437},[320,10335,444],{"class":329},[320,10337,447],{"class":329},[320,10339,9041],{"class":346},[320,10341,447],{"class":329},[320,10343,454],{"class":329},[320,10345,10346,10348,10350,10352,10354,10356,10358,10360,10362,10364,10366,10368,10370,10372,10374,10376,10378,10381,10383,10385,10387,10389,10391,10393,10395,10397,10399,10401,10403,10406,10408,10410],{"class":322,"line":2974},[320,10347,3522],{"class":329},[320,10349,9131],{"class":433},[320,10351,710],{"class":329},[320,10353,9060],{"class":437},[320,10355,444],{"class":329},[320,10357,447],{"class":329},[320,10359,9067],{"class":329},[320,10361,9070],{"class":433},[320,10363,9073],{"class":329},[320,10365,8900],{"class":333},[320,10367,569],{"class":329},[320,10369,8595],{"class":333},[320,10371,9082],{"class":329},[320,10373,8727],{"class":333},[320,10375,337],{"class":329},[320,10377,447],{"class":329},[320,10379,10380],{"class":329}," @",[320,10382,6579],{"class":437},[320,10384,444],{"class":329},[320,10386,447],{"class":329},[320,10388,9102],{"class":381},[320,10390,385],{"class":329},[320,10392,1972],{"class":329},[320,10394,8727],{"class":346},[320,10396,1972],{"class":329},[320,10398,2779],{"class":329},[320,10400,447],{"class":329},[320,10402,1227],{"class":329},[320,10404,10405],{"class":333},"Cube",[320,10407,509],{"class":329},[320,10409,9131],{"class":433},[320,10411,454],{"class":329},[320,10413,10414,10416,10418,10420,10422,10424,10426,10428,10430,10432,10434,10436,10438,10440,10442,10444,10446,10448,10450,10452,10454,10456,10458,10460,10462,10464,10466,10468,10470,10472,10474,10476],{"class":322,"line":2991},[320,10415,3522],{"class":329},[320,10417,9131],{"class":433},[320,10419,710],{"class":329},[320,10421,9060],{"class":437},[320,10423,444],{"class":329},[320,10425,447],{"class":329},[320,10427,9067],{"class":329},[320,10429,9070],{"class":433},[320,10431,9073],{"class":329},[320,10433,8900],{"class":333},[320,10435,569],{"class":329},[320,10437,8595],{"class":333},[320,10439,9082],{"class":329},[320,10441,9013],{"class":333},[320,10443,337],{"class":329},[320,10445,447],{"class":329},[320,10447,10380],{"class":329},[320,10449,6579],{"class":437},[320,10451,444],{"class":329},[320,10453,447],{"class":329},[320,10455,9102],{"class":381},[320,10457,385],{"class":329},[320,10459,1972],{"class":329},[320,10461,9013],{"class":346},[320,10463,1972],{"class":329},[320,10465,2779],{"class":329},[320,10467,447],{"class":329},[320,10469,1227],{"class":329},[320,10471,9013],{"class":333},[320,10473,509],{"class":329},[320,10475,9131],{"class":433},[320,10477,454],{"class":329},[320,10479,10480,10482,10484],{"class":322,"line":3012},[320,10481,3539],{"class":329},[320,10483,1615],{"class":433},[320,10485,454],{"class":329},[320,10487,10488,10490,10492,10494,10496,10498,10500,10502],{"class":322,"line":3017},[320,10489,704],{"class":329},[320,10491,691],{"class":433},[320,10493,6881],{"class":437},[320,10495,444],{"class":329},[320,10497,447],{"class":329},[320,10499,6888],{"class":346},[320,10501,447],{"class":329},[320,10503,454],{"class":329},[320,10505,10506,10508],{"class":322,"line":3022},[320,10507,3522],{"class":329},[320,10509,7829],{"class":433},[320,10511,10512,10514,10516,10518,10520,10522,10524,10526,10528,10530,10532,10534],{"class":322,"line":3038},[320,10513,6968],{"class":329},[320,10515,1409],{"class":437},[320,10517,444],{"class":329},[320,10519,447],{"class":329},[320,10521,569],{"class":329},[320,10523,1418],{"class":721},[320,10525,574],{"class":329},[320,10527,1418],{"class":721},[320,10529,574],{"class":329},[320,10531,7381],{"class":721},[320,10533,586],{"class":329},[320,10535,553],{"class":329},[320,10537,10538],{"class":322,"line":3058},[320,10539,7860],{"class":329},[320,10541,10542,10544,10546,10548,10551,10553,10555,10557,10559,10561,10564,10566,10568,10570,10572,10574,10577,10579,10581,10583,10585],{"class":322,"line":3063},[320,10543,3522],{"class":329},[320,10545,9623],{"class":433},[320,10547,710],{"class":329},[320,10549,10550],{"class":437},"css",[320,10552,444],{"class":329},[320,10554,447],{"class":329},[320,10556,9633],{"class":3867},[320,10558,447],{"class":329},[320,10560,10380],{"class":329},[320,10562,10563],{"class":437},"enter",[320,10565,444],{"class":329},[320,10567,447],{"class":329},[320,10569,9715],{"class":333},[320,10571,447],{"class":329},[320,10573,10380],{"class":329},[320,10575,10576],{"class":437},"leave",[320,10578,444],{"class":329},[320,10580,447],{"class":329},[320,10582,9727],{"class":333},[320,10584,447],{"class":329},[320,10586,454],{"class":329},[320,10588,10589,10591,10593,10595,10597,10599,10601,10603,10605,10607,10609,10611],{"class":322,"line":4681},[320,10590,7072],{"class":329},[320,10592,8779],{"class":433},[320,10594,710],{"class":329},[320,10596,8893],{"class":437},[320,10598,444],{"class":329},[320,10600,447],{"class":329},[320,10602,8900],{"class":333},[320,10604,569],{"class":329},[320,10606,8595],{"class":333},[320,10608,586],{"class":329},[320,10610,447],{"class":329},[320,10612,744],{"class":329},[320,10614,10615,10617,10619],{"class":322,"line":4686},[320,10616,7291],{"class":329},[320,10618,9623],{"class":433},[320,10620,454],{"class":329},[320,10622,10623,10625,10627,10629,10631,10633,10635,10637,10639],{"class":322,"line":4692},[320,10624,3522],{"class":329},[320,10626,7337],{"class":433},[320,10628,710],{"class":329},[320,10630,7342],{"class":437},[320,10632,444],{"class":329},[320,10634,447],{"class":329},[320,10636,3507],{"class":721},[320,10638,447],{"class":329},[320,10640,744],{"class":329},[320,10642,10643,10645],{"class":322,"line":4715},[320,10644,3522],{"class":329},[320,10646,7887],{"class":433},[320,10648,10649,10651,10653,10655,10657,10659,10661,10663,10665,10667,10669,10671],{"class":322,"line":4738},[320,10650,6968],{"class":329},[320,10652,1409],{"class":437},[320,10654,444],{"class":329},[320,10656,447],{"class":329},[320,10658,569],{"class":329},[320,10660,7381],{"class":721},[320,10662,574],{"class":329},[320,10664,7381],{"class":721},[320,10666,574],{"class":329},[320,10668,7381],{"class":721},[320,10670,586],{"class":329},[320,10672,553],{"class":329},[320,10674,10675,10677,10679,10681,10683,10685],{"class":322,"line":4761},[320,10676,6968],{"class":329},[320,10678,7342],{"class":437},[320,10680,444],{"class":329},[320,10682,447],{"class":329},[320,10684,727],{"class":721},[320,10686,553],{"class":329},[320,10688,10689],{"class":322,"line":4784},[320,10690,7860],{"class":329},[320,10692,10693,10695,10697],{"class":322,"line":6273},[320,10694,3539],{"class":329},[320,10696,691],{"class":433},[320,10698,454],{"class":329},[320,10700,10701,10703,10705],{"class":322,"line":6312},[320,10702,787],{"class":329},[320,10704,10323],{"class":433},[320,10706,454],{"class":329},[320,10708,10709,10711,10713],{"class":322,"line":6368},[320,10710,509],{"class":329},[320,10712,526],{"class":433},[320,10714,454],{"class":329},[320,10716,10717],{"class":322,"line":6396},[320,10718,375],{"emptyLinePlaceholder":39},[320,10720,10721,10723,10725,10727],{"class":322,"line":6424},[320,10722,430],{"class":329},[320,10724,990],{"class":433},[320,10726,9243],{"class":437},[320,10728,454],{"class":329},[320,10730,10731,10733,10735],{"class":322,"line":6454},[320,10732,1215],{"class":329},[320,10734,9041],{"class":1211},[320,10736,1097],{"class":329},[320,10738,10739,10741,10743,10745],{"class":322,"line":6464},[320,10740,9259],{"class":9258},[320,10742,1953],{"class":329},[320,10744,9264],{"class":333},[320,10746,9267],{"class":329},[320,10748,10749,10751,10753,10755],{"class":322,"line":6480},[320,10750,9272],{"class":9258},[320,10752,1953],{"class":329},[320,10754,5568],{"class":721},[320,10756,9267],{"class":329},[320,10758,10759,10761,10763,10765],{"class":322,"line":6497},[320,10760,9283],{"class":9258},[320,10762,1953],{"class":329},[320,10764,9288],{"class":721},[320,10766,9267],{"class":329},[320,10768,10769,10771,10773,10775],{"class":322,"line":6514},[320,10770,9295],{"class":9258},[320,10772,1953],{"class":329},[320,10774,9300],{"class":721},[320,10776,9267],{"class":329},[320,10778,10779,10781,10783,10785,10787],{"class":322,"line":6519},[320,10780,9307],{"class":9258},[320,10782,1953],{"class":329},[320,10784,9312],{"class":329},[320,10786,9315],{"class":333},[320,10788,9267],{"class":329},[320,10790,10791,10793,10795,10797,10799],{"class":322,"line":6526},[320,10792,5641],{"class":9258},[320,10794,1953],{"class":329},[320,10796,9312],{"class":329},[320,10798,9328],{"class":333},[320,10800,9267],{"class":329},[320,10802,10803,10805,10807,10809],{"class":322,"line":6531},[320,10804,9335],{"class":9258},[320,10806,1953],{"class":329},[320,10808,9340],{"class":721},[320,10810,9267],{"class":329},[320,10812,10813,10815,10817,10819],{"class":322,"line":6537},[320,10814,9347],{"class":9258},[320,10816,1953],{"class":329},[320,10818,9352],{"class":721},[320,10820,9267],{"class":329},[320,10822,10823,10825,10827,10829],{"class":322,"line":6592},[320,10824,9359],{"class":9258},[320,10826,1953],{"class":329},[320,10828,9364],{"class":333},[320,10830,9267],{"class":329},[320,10832,10833,10835,10837,10839],{"class":322,"line":6615},[320,10834,9371],{"class":9258},[320,10836,1953],{"class":329},[320,10838,9352],{"class":721},[320,10840,9267],{"class":329},[320,10842,10843,10845,10847,10849,10851,10853],{"class":322,"line":6645},[320,10844,9382],{"class":9258},[320,10846,1953],{"class":329},[320,10848,9387],{"class":381},[320,10850,385],{"class":329},[320,10852,9392],{"class":721},[320,10854,9395],{"class":329},[320,10856,10857],{"class":322,"line":6675},[320,10858,9400],{"class":333},[320,10860,10861,10863,10865,10867,10869],{"class":322,"line":6720},[320,10862,9405],{"class":9258},[320,10864,1953],{"class":329},[320,10866,9340],{"class":721},[320,10868,9412],{"class":721},[320,10870,9267],{"class":329},[320,10872,10873,10875,10877,10879],{"class":322,"line":6727},[320,10874,9419],{"class":9258},[320,10876,1953],{"class":329},[320,10878,9424],{"class":333},[320,10880,9267],{"class":329},[320,10882,10883,10885,10887,10889,10891],{"class":322,"line":6734},[320,10884,9431],{"class":9258},[320,10886,1953],{"class":329},[320,10888,9312],{"class":329},[320,10890,9438],{"class":333},[320,10892,9267],{"class":329},[320,10894,10895,10897,10899,10901],{"class":322,"line":6741},[320,10896,9445],{"class":9258},[320,10898,1953],{"class":329},[320,10900,9450],{"class":333},[320,10902,9267],{"class":329},[320,10904,10905,10907,10909,10911],{"class":322,"line":6746},[320,10906,9457],{"class":9258},[320,10908,1953],{"class":329},[320,10910,9462],{"class":333},[320,10912,9267],{"class":329},[320,10914,10915,10917,10919,10921],{"class":322,"line":6752},[320,10916,9469],{"class":9258},[320,10918,1953],{"class":329},[320,10920,9474],{"class":721},[320,10922,9267],{"class":329},[320,10924,10925,10927,10929,10931],{"class":322,"line":6766},[320,10926,9481],{"class":9258},[320,10928,1953],{"class":329},[320,10930,9486],{"class":721},[320,10932,9267],{"class":329},[320,10934,10935],{"class":322,"line":6782},[320,10936,1356],{"class":329},[320,10938,10939],{"class":322,"line":6789},[320,10940,1756],{"class":333},[320,10942,10943],{"class":322,"line":6798},[320,10944,375],{"emptyLinePlaceholder":39},[320,10946,10947,10949,10951,10953],{"class":322,"line":6803},[320,10948,9131],{"class":1211},[320,10950,1215],{"class":329},[320,10952,9070],{"class":1211},[320,10954,1097],{"class":329},[320,10956,10957,10959,10961,10963,10965],{"class":322,"line":6812},[320,10958,9307],{"class":9258},[320,10960,1953],{"class":329},[320,10962,9312],{"class":329},[320,10964,9521],{"class":333},[320,10966,9267],{"class":329},[320,10968,10969],{"class":322,"line":6833},[320,10970,1756],{"class":329},[320,10972,10973,10975,10977],{"class":322,"line":6839},[320,10974,509],{"class":329},[320,10976,990],{"class":433},[320,10978,454],{"class":329},[990,10980,10981],{},"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 pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}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 .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}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}",{"title":253,"searchDepth":254,"depth":255,"links":10983},[],"Learn how to use Vue's Transition and dynamic components in TresJS",{"thumbnail":10986},"/recipes/dynamic-transition.png",{"title":202,"description":10984},"TuX8UqZYiiTIqNQFUAysps-4aFJGjWi9DgETy5ebPkg",1774953657573]