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