[{"data":1,"prerenderedAt":3774},["ShallowReactive",2],{"navigation":3,"/cookbook/transition-dynamic":239,"/cookbook/transition-dynamic-surround":3769},[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":202,"body":241,"description":3762,"extension":3763,"links":3764,"meta":3765,"navigation":39,"path":203,"seo":3767,"stem":204,"__hash__":3768},"docs/4.cookbook/6.transition-dynamic.md",{"type":242,"value":243,"toc":3760},"minimark",[244,247,270,2257,3757],[245,246],"examples-dynamic-transition",{},[248,249,250,251,261,262,269],"p",{},"This recipe covers how to use ",[252,253,257],"a",{"href":254,"rel":255},"https://vuejs.org/guide/built-ins/transition.html#transition",[256],"nofollow",[258,259,260],"code",{},"\u003CTransition>"," and ",[252,263,266],{"href":264,"rel":265},"https://vuejs.org/guide/essentials/component-basics.html#dynamic-components",[256],[258,267,268],{},"Dynamic"," Vue built-in components.",[271,272,273,278,281,589,593,596,942,1261,1265,1273,1308,1700,1704,1713,1929,1932,2243,2246],"steps",{},[274,275,277],"h3",{"id":276},"set-up-our-main-scene","Set up our main scene",[248,279,280],{},"Let's start with a simple scene.",[282,283,289],"pre",{"className":284,"code":285,"filename":286,"language":287,"meta":288,"style":288},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\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","vue","",[258,290,291,311,341,348,366,383,389,399,409,437,446,482,488,514,522,549,565,570,580],{"__ignoreMap":288},[292,293,296,300,304,308],"span",{"class":294,"line":295},"line",1,[292,297,299],{"class":298},"sMK4o","\u003C",[292,301,303],{"class":302},"swJcz","script",[292,305,307],{"class":306},"spNyl"," setup",[292,309,310],{"class":298},">\n",[292,312,314,318,321,325,328,331,334,338],{"class":294,"line":313},2,[292,315,317],{"class":316},"s7zQu","import",[292,319,320],{"class":298}," {",[292,322,324],{"class":323},"sTEyZ"," TresCanvas",[292,326,327],{"class":298}," }",[292,329,330],{"class":316}," from",[292,332,333],{"class":298}," '",[292,335,337],{"class":336},"sfazB","@tresjs/core",[292,339,340],{"class":298},"'\n",[292,342,344],{"class":294,"line":343},3,[292,345,347],{"class":346},"sHwdD","// import our two custom components\n",[292,349,351,353,356,359,361,364],{"class":294,"line":350},4,[292,352,317],{"class":316},[292,354,355],{"class":323}," Sphere ",[292,357,358],{"class":316},"from",[292,360,333],{"class":298},[292,362,363],{"class":336},"./Sphere.vue",[292,365,340],{"class":298},[292,367,369,371,374,376,378,381],{"class":294,"line":368},5,[292,370,317],{"class":316},[292,372,373],{"class":323}," Box ",[292,375,358],{"class":316},[292,377,333],{"class":298},[292,379,380],{"class":336},"./Box.vue",[292,382,340],{"class":298},[292,384,386],{"class":294,"line":385},6,[292,387,388],{"emptyLinePlaceholder":39},"\n",[292,390,392,395,397],{"class":294,"line":391},7,[292,393,394],{"class":298},"\u003C/",[292,396,303],{"class":302},[292,398,310],{"class":298},[292,400,402,404,407],{"class":294,"line":401},8,[292,403,299],{"class":298},[292,405,406],{"class":302},"template",[292,408,310],{"class":298},[292,410,412,415,418,421,424,427,430,433,435],{"class":294,"line":411},9,[292,413,414],{"class":298},"    \u003C",[292,416,417],{"class":302},"TresCanvas",[292,419,420],{"class":306}," window-size",[292,422,423],{"class":306}," clear-color",[292,425,426],{"class":298},"=",[292,428,429],{"class":298},"\"",[292,431,432],{"class":336},"#82DBC5",[292,434,429],{"class":298},[292,436,310],{"class":298},[292,438,440,443],{"class":294,"line":439},10,[292,441,442],{"class":298},"      \u003C",[292,444,445],{"class":302},"TresPerspectiveCamera\n",[292,447,449,452,455,457,459,462,466,469,471,473,476,479],{"class":294,"line":448},11,[292,450,451],{"class":298},"        :",[292,453,454],{"class":306},"position",[292,456,426],{"class":298},[292,458,429],{"class":298},[292,460,461],{"class":298},"[",[292,463,465],{"class":464},"sbssI","0",[292,467,468],{"class":298},", ",[292,470,465],{"class":464},[292,472,468],{"class":298},[292,474,475],{"class":464},"5",[292,477,478],{"class":298},"]",[292,480,481],{"class":298},"\"\n",[292,483,485],{"class":294,"line":484},12,[292,486,487],{"class":298},"      />\n",[292,489,491,493,496,499,502,504,506,509,511],{"class":294,"line":490},13,[292,492,442],{"class":298},[292,494,495],{"class":302},"TresAmbientLight",[292,497,498],{"class":298}," :",[292,500,501],{"class":306},"intensity",[292,503,426],{"class":298},[292,505,429],{"class":298},[292,507,508],{"class":464},"0.5",[292,510,429],{"class":298},[292,512,513],{"class":298}," />\n",[292,515,517,519],{"class":294,"line":516},14,[292,518,442],{"class":298},[292,520,521],{"class":302},"TresDirectionalLight\n",[292,523,525,527,529,531,533,535,537,539,541,543,545,547],{"class":294,"line":524},15,[292,526,451],{"class":298},[292,528,454],{"class":306},[292,530,426],{"class":298},[292,532,429],{"class":298},[292,534,461],{"class":298},[292,536,475],{"class":464},[292,538,468],{"class":298},[292,540,475],{"class":464},[292,542,468],{"class":298},[292,544,475],{"class":464},[292,546,478],{"class":298},[292,548,481],{"class":298},[292,550,552,554,556,558,560,563],{"class":294,"line":551},16,[292,553,451],{"class":298},[292,555,501],{"class":306},[292,557,426],{"class":298},[292,559,429],{"class":298},[292,561,562],{"class":464},"1",[292,564,481],{"class":298},[292,566,568],{"class":294,"line":567},17,[292,569,487],{"class":298},[292,571,573,576,578],{"class":294,"line":572},18,[292,574,575],{"class":298},"    \u003C/",[292,577,417],{"class":302},[292,579,310],{"class":298},[292,581,583,585,587],{"class":294,"line":582},19,[292,584,394],{"class":298},[292,586,406],{"class":302},[292,588,310],{"class":298},[274,590,592],{"id":591},"lets-create-two-simple-components","Let's create two simple components",[248,594,595],{},"I'm going to add some simple animation logic just to add a little more life.",[282,597,600],{"className":284,"code":598,"filename":599,"language":287,"meta":288,"style":288},"\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",[258,601,602,612,631,650,654,659,675,679,698,702,726,731,754,783,809,814,821,829,833,841,863,898,923,933],{"__ignoreMap":288},[292,603,604,606,608,610],{"class":294,"line":295},[292,605,299],{"class":298},[292,607,303],{"class":302},[292,609,307],{"class":306},[292,611,310],{"class":298},[292,613,614,616,618,621,623,625,627,629],{"class":294,"line":313},[292,615,317],{"class":316},[292,617,320],{"class":298},[292,619,620],{"class":323}," shallowRef",[292,622,327],{"class":298},[292,624,330],{"class":316},[292,626,333],{"class":298},[292,628,287],{"class":336},[292,630,340],{"class":298},[292,632,633,635,637,640,642,644,646,648],{"class":294,"line":343},[292,634,317],{"class":316},[292,636,320],{"class":298},[292,638,639],{"class":323}," useLoop",[292,641,327],{"class":298},[292,643,330],{"class":316},[292,645,333],{"class":298},[292,647,337],{"class":336},[292,649,340],{"class":298},[292,651,652],{"class":294,"line":350},[292,653,388],{"emptyLinePlaceholder":39},[292,655,656],{"class":294,"line":368},[292,657,658],{"class":346},"// Retrieving the object\n",[292,660,661,664,667,669,672],{"class":294,"line":385},[292,662,663],{"class":306},"const",[292,665,666],{"class":323}," boxRef ",[292,668,426],{"class":298},[292,670,620],{"class":671},"s2Zo4",[292,673,674],{"class":323},"()\n",[292,676,677],{"class":294,"line":391},[292,678,388],{"emptyLinePlaceholder":39},[292,680,681,683,685,688,691,694,696],{"class":294,"line":401},[292,682,663],{"class":306},[292,684,320],{"class":298},[292,686,687],{"class":323}," onBeforeRender ",[292,689,690],{"class":298},"}",[292,692,693],{"class":298}," =",[292,695,639],{"class":671},[292,697,674],{"class":323},[292,699,700],{"class":294,"line":411},[292,701,388],{"emptyLinePlaceholder":39},[292,703,704,707,710,713,717,720,723],{"class":294,"line":439},[292,705,706],{"class":671},"onBeforeRender",[292,708,709],{"class":323},"(",[292,711,712],{"class":298},"({",[292,714,716],{"class":715},"sHdIc"," elapsed",[292,718,719],{"class":298}," })",[292,721,722],{"class":306}," =>",[292,724,725],{"class":298}," {\n",[292,727,728],{"class":294,"line":448},[292,729,730],{"class":346},"  // little animation logic completely optional\n",[292,732,733,736,739,742,745,748,751],{"class":294,"line":484},[292,734,735],{"class":316},"  if",[292,737,738],{"class":302}," (",[292,740,741],{"class":323},"boxRef",[292,743,744],{"class":298},".",[292,746,747],{"class":323},"value",[292,749,750],{"class":302},") ",[292,752,753],{"class":298},"{\n",[292,755,756,759,761,763,765,768,770,773,775,777,780],{"class":294,"line":490},[292,757,758],{"class":323},"    boxRef",[292,760,744],{"class":298},[292,762,747],{"class":323},[292,764,744],{"class":298},[292,766,767],{"class":323},"rotation",[292,769,744],{"class":298},[292,771,772],{"class":323},"y",[292,774,693],{"class":298},[292,776,716],{"class":323},[292,778,779],{"class":298}," *",[292,781,782],{"class":464}," 0.5\n",[292,784,785,787,789,791,793,795,797,800,802,804,806],{"class":294,"line":516},[292,786,758],{"class":323},[292,788,744],{"class":298},[292,790,747],{"class":323},[292,792,744],{"class":298},[292,794,767],{"class":323},[292,796,744],{"class":298},[292,798,799],{"class":323},"x",[292,801,693],{"class":298},[292,803,716],{"class":323},[292,805,779],{"class":298},[292,807,808],{"class":464}," 0.2\n",[292,810,811],{"class":294,"line":524},[292,812,813],{"class":298},"  }\n",[292,815,816,818],{"class":294,"line":551},[292,817,690],{"class":298},[292,819,820],{"class":323},")\n",[292,822,823,825,827],{"class":294,"line":567},[292,824,394],{"class":298},[292,826,303],{"class":302},[292,828,310],{"class":298},[292,830,831],{"class":294,"line":572},[292,832,388],{"emptyLinePlaceholder":39},[292,834,835,837,839],{"class":294,"line":582},[292,836,299],{"class":298},[292,838,406],{"class":302},[292,840,310],{"class":298},[292,842,844,847,850,853,855,857,859,861],{"class":294,"line":843},20,[292,845,846],{"class":298},"  \u003C",[292,848,849],{"class":302},"TresMesh",[292,851,852],{"class":306}," ref",[292,854,426],{"class":298},[292,856,429],{"class":298},[292,858,741],{"class":336},[292,860,429],{"class":298},[292,862,310],{"class":298},[292,864,866,868,871,873,876,878,880,882,884,886,888,890,892,894,896],{"class":294,"line":865},21,[292,867,414],{"class":298},[292,869,870],{"class":302},"TresBoxGeometry",[292,872,498],{"class":298},[292,874,875],{"class":306},"args",[292,877,426],{"class":298},[292,879,429],{"class":298},[292,881,461],{"class":298},[292,883,562],{"class":464},[292,885,468],{"class":298},[292,887,562],{"class":464},[292,889,468],{"class":298},[292,891,562],{"class":464},[292,893,478],{"class":298},[292,895,429],{"class":298},[292,897,513],{"class":298},[292,899,901,903,906,909,911,913,916,918,921],{"class":294,"line":900},22,[292,902,414],{"class":298},[292,904,905],{"class":302},"TresMeshStandardMaterial",[292,907,908],{"class":306}," color",[292,910,426],{"class":298},[292,912,429],{"class":298},[292,914,915],{"class":336},"orange",[292,917,429],{"class":298},[292,919,920],{"class":306}," transparent",[292,922,513],{"class":298},[292,924,926,929,931],{"class":294,"line":925},23,[292,927,928],{"class":298},"  \u003C/",[292,930,849],{"class":302},[292,932,310],{"class":298},[292,934,936,938,940],{"class":294,"line":935},24,[292,937,394],{"class":298},[292,939,406],{"class":302},[292,941,310],{"class":298},[282,943,946],{"className":284,"code":944,"filename":945,"language":287,"meta":288,"style":288},"\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",[258,947,948,958,976,994,998,1011,1015,1031,1035,1051,1068,1073,1112,1147,1151,1157,1165,1169,1177,1195,1225,1245,1253],{"__ignoreMap":288},[292,949,950,952,954,956],{"class":294,"line":295},[292,951,299],{"class":298},[292,953,303],{"class":302},[292,955,307],{"class":306},[292,957,310],{"class":298},[292,959,960,962,964,966,968,970,972,974],{"class":294,"line":313},[292,961,317],{"class":316},[292,963,320],{"class":298},[292,965,620],{"class":323},[292,967,327],{"class":298},[292,969,330],{"class":316},[292,971,333],{"class":298},[292,973,287],{"class":336},[292,975,340],{"class":298},[292,977,978,980,982,984,986,988,990,992],{"class":294,"line":343},[292,979,317],{"class":316},[292,981,320],{"class":298},[292,983,639],{"class":323},[292,985,327],{"class":298},[292,987,330],{"class":316},[292,989,333],{"class":298},[292,991,337],{"class":336},[292,993,340],{"class":298},[292,995,996],{"class":294,"line":350},[292,997,388],{"emptyLinePlaceholder":39},[292,999,1000,1002,1005,1007,1009],{"class":294,"line":368},[292,1001,663],{"class":306},[292,1003,1004],{"class":323}," sphereRef ",[292,1006,426],{"class":298},[292,1008,620],{"class":671},[292,1010,674],{"class":323},[292,1012,1013],{"class":294,"line":385},[292,1014,388],{"emptyLinePlaceholder":39},[292,1016,1017,1019,1021,1023,1025,1027,1029],{"class":294,"line":391},[292,1018,663],{"class":306},[292,1020,320],{"class":298},[292,1022,687],{"class":323},[292,1024,690],{"class":298},[292,1026,693],{"class":298},[292,1028,639],{"class":671},[292,1030,674],{"class":323},[292,1032,1033],{"class":294,"line":401},[292,1034,388],{"emptyLinePlaceholder":39},[292,1036,1037,1039,1041,1043,1045,1047,1049],{"class":294,"line":411},[292,1038,706],{"class":671},[292,1040,709],{"class":323},[292,1042,712],{"class":298},[292,1044,716],{"class":715},[292,1046,719],{"class":298},[292,1048,722],{"class":306},[292,1050,725],{"class":298},[292,1052,1053,1055,1057,1060,1062,1064,1066],{"class":294,"line":439},[292,1054,735],{"class":316},[292,1056,738],{"class":302},[292,1058,1059],{"class":323},"sphereRef",[292,1061,744],{"class":298},[292,1063,747],{"class":323},[292,1065,750],{"class":302},[292,1067,753],{"class":298},[292,1069,1070],{"class":294,"line":448},[292,1071,1072],{"class":346},"    // Moving my sphere instead of rotating\n",[292,1074,1075,1078,1080,1082,1084,1086,1088,1090,1092,1095,1097,1100,1102,1105,1107,1110],{"class":294,"line":484},[292,1076,1077],{"class":323},"    sphereRef",[292,1079,744],{"class":298},[292,1081,747],{"class":323},[292,1083,744],{"class":298},[292,1085,454],{"class":323},[292,1087,744],{"class":298},[292,1089,772],{"class":323},[292,1091,693],{"class":298},[292,1093,1094],{"class":323}," Math",[292,1096,744],{"class":298},[292,1098,1099],{"class":671},"sin",[292,1101,709],{"class":302},[292,1103,1104],{"class":323},"elapsed",[292,1106,750],{"class":302},[292,1108,1109],{"class":298},"*",[292,1111,782],{"class":464},[292,1113,1114,1116,1118,1120,1122,1124,1126,1128,1130,1132,1134,1137,1139,1141,1143,1145],{"class":294,"line":490},[292,1115,1077],{"class":323},[292,1117,744],{"class":298},[292,1119,747],{"class":323},[292,1121,744],{"class":298},[292,1123,454],{"class":323},[292,1125,744],{"class":298},[292,1127,799],{"class":323},[292,1129,693],{"class":298},[292,1131,1094],{"class":323},[292,1133,744],{"class":298},[292,1135,1136],{"class":671},"cos",[292,1138,709],{"class":302},[292,1140,1104],{"class":323},[292,1142,750],{"class":302},[292,1144,1109],{"class":298},[292,1146,808],{"class":464},[292,1148,1149],{"class":294,"line":516},[292,1150,813],{"class":298},[292,1152,1153,1155],{"class":294,"line":524},[292,1154,690],{"class":298},[292,1156,820],{"class":323},[292,1158,1159,1161,1163],{"class":294,"line":551},[292,1160,394],{"class":298},[292,1162,303],{"class":302},[292,1164,310],{"class":298},[292,1166,1167],{"class":294,"line":567},[292,1168,388],{"emptyLinePlaceholder":39},[292,1170,1171,1173,1175],{"class":294,"line":572},[292,1172,299],{"class":298},[292,1174,406],{"class":302},[292,1176,310],{"class":298},[292,1178,1179,1181,1183,1185,1187,1189,1191,1193],{"class":294,"line":582},[292,1180,846],{"class":298},[292,1182,849],{"class":302},[292,1184,852],{"class":306},[292,1186,426],{"class":298},[292,1188,429],{"class":298},[292,1190,1059],{"class":336},[292,1192,429],{"class":298},[292,1194,310],{"class":298},[292,1196,1197,1199,1202,1204,1206,1208,1210,1212,1214,1216,1219,1221,1223],{"class":294,"line":843},[292,1198,414],{"class":298},[292,1200,1201],{"class":302},"TresSphereGeometry",[292,1203,498],{"class":298},[292,1205,875],{"class":306},[292,1207,426],{"class":298},[292,1209,429],{"class":298},[292,1211,461],{"class":298},[292,1213,562],{"class":464},[292,1215,468],{"class":298},[292,1217,1218],{"class":464},"32",[292,1220,478],{"class":298},[292,1222,429],{"class":298},[292,1224,513],{"class":298},[292,1226,1227,1229,1231,1233,1235,1237,1239,1241,1243],{"class":294,"line":865},[292,1228,414],{"class":298},[292,1230,905],{"class":302},[292,1232,908],{"class":306},[292,1234,426],{"class":298},[292,1236,429],{"class":298},[292,1238,915],{"class":336},[292,1240,429],{"class":298},[292,1242,920],{"class":306},[292,1244,513],{"class":298},[292,1246,1247,1249,1251],{"class":294,"line":900},[292,1248,928],{"class":298},[292,1250,849],{"class":302},[292,1252,310],{"class":298},[292,1254,1255,1257,1259],{"class":294,"line":925},[292,1256,394],{"class":298},[292,1258,406],{"class":302},[292,1260,310],{"class":298},[274,1262,1264],{"id":1263},"using-vue-dynamic-components","Using Vue dynamic components",[248,1266,1267,1268,1272],{},"You can use ",[252,1269,1271],{"href":264,"rel":1270},[256],"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.",[1274,1275,1276,1285,1298,1301],"ul",{},[1277,1278,1279,1280,1284],"li",{},"First, we create a ref that contains our ",[1281,1282,1283],"strong",{},"current"," component name.",[1277,1286,1287,1288,744],{},"Then we create another object that will contain ",[1281,1289,1290,1291,1293,1294,1297],{},"all our ",[292,1292,1271],{},".(",[252,1295,264],{"href":264,"rel":1296},[256],")",[1277,1299,1300],{},"After that, we can define a simple function to change our ref to the new component.",[1277,1302,1303,1304,1307],{},"Don't forget to add the ",[258,1305,1306],{},"\u003Ccomponent :is=\"meshes[current]\" />"," to our scene.",[282,1309,1312],{"className":284,"code":1310,"filename":286,"highlights":1311,"language":287,"meta":288,"style":288},"\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",[391,401,411,439,448,484,490,516,925],[258,1313,1314,1324,1342,1360,1374,1388,1392,1398,1422,1434,1443,1451,1457,1478,1493,1497,1505,1513,1533,1539,1565,1569,1574,1603,1607,1628,1635,1662,1677,1682,1691],{"__ignoreMap":288},[292,1315,1316,1318,1320,1322],{"class":294,"line":295},[292,1317,299],{"class":298},[292,1319,303],{"class":302},[292,1321,307],{"class":306},[292,1323,310],{"class":298},[292,1325,1326,1328,1330,1332,1334,1336,1338,1340],{"class":294,"line":313},[292,1327,317],{"class":316},[292,1329,320],{"class":298},[292,1331,852],{"class":323},[292,1333,327],{"class":298},[292,1335,330],{"class":316},[292,1337,333],{"class":298},[292,1339,287],{"class":336},[292,1341,340],{"class":298},[292,1343,1344,1346,1348,1350,1352,1354,1356,1358],{"class":294,"line":343},[292,1345,317],{"class":316},[292,1347,320],{"class":298},[292,1349,324],{"class":323},[292,1351,327],{"class":298},[292,1353,330],{"class":316},[292,1355,333],{"class":298},[292,1357,337],{"class":336},[292,1359,340],{"class":298},[292,1361,1362,1364,1366,1368,1370,1372],{"class":294,"line":350},[292,1363,317],{"class":316},[292,1365,355],{"class":323},[292,1367,358],{"class":316},[292,1369,333],{"class":298},[292,1371,363],{"class":336},[292,1373,340],{"class":298},[292,1375,1376,1378,1380,1382,1384,1386],{"class":294,"line":368},[292,1377,317],{"class":316},[292,1379,373],{"class":323},[292,1381,358],{"class":316},[292,1383,333],{"class":298},[292,1385,380],{"class":336},[292,1387,340],{"class":298},[292,1389,1390],{"class":294,"line":385},[292,1391,388],{"emptyLinePlaceholder":39},[292,1393,1396],{"class":1394,"line":391},[294,1395],"highlight",[292,1397,388],{"emptyLinePlaceholder":39},[292,1399,1401,1403,1406,1408,1410,1412,1415,1418,1420],{"class":1400,"line":401},[294,1395],[292,1402,663],{"class":306},[292,1404,1405],{"class":323}," current ",[292,1407,426],{"class":298},[292,1409,852],{"class":671},[292,1411,709],{"class":323},[292,1413,1414],{"class":298},"'",[292,1416,1417],{"class":336},"Box",[292,1419,1414],{"class":298},[292,1421,820],{"class":323},[292,1423,1425,1427,1430,1432],{"class":1424,"line":411},[294,1395],[292,1426,663],{"class":306},[292,1428,1429],{"class":323}," meshes ",[292,1431,426],{"class":298},[292,1433,725],{"class":298},[292,1435,1437,1440],{"class":1436,"line":439},[294,1395],[292,1438,1439],{"class":323},"  Box",[292,1441,1442],{"class":298},",\n",[292,1444,1446,1449],{"class":1445,"line":448},[294,1395],[292,1447,1448],{"class":323},"  Sphere",[292,1450,1442],{"class":298},[292,1452,1454],{"class":1453,"line":484},[294,1395],[292,1455,1456],{"class":298},"}\n",[292,1458,1460,1462,1465,1467,1469,1472,1474,1476],{"class":1459,"line":490},[294,1395],[292,1461,663],{"class":306},[292,1463,1464],{"class":323}," handleComponents ",[292,1466,426],{"class":298},[292,1468,738],{"class":298},[292,1470,1471],{"class":715},"component",[292,1473,1297],{"class":298},[292,1475,722],{"class":306},[292,1477,725],{"class":298},[292,1479,1481,1484,1486,1488,1490],{"class":1480,"line":516},[294,1395],[292,1482,1483],{"class":323},"  current",[292,1485,744],{"class":298},[292,1487,747],{"class":323},[292,1489,693],{"class":298},[292,1491,1492],{"class":323}," component\n",[292,1494,1495],{"class":294,"line":524},[292,1496,1456],{"class":298},[292,1498,1499,1501,1503],{"class":294,"line":551},[292,1500,394],{"class":298},[292,1502,303],{"class":302},[292,1504,310],{"class":298},[292,1506,1507,1509,1511],{"class":294,"line":567},[292,1508,299],{"class":298},[292,1510,406],{"class":302},[292,1512,310],{"class":298},[292,1514,1515,1517,1519,1521,1523,1525,1527,1529,1531],{"class":294,"line":572},[292,1516,414],{"class":298},[292,1518,417],{"class":302},[292,1520,420],{"class":306},[292,1522,423],{"class":306},[292,1524,426],{"class":298},[292,1526,429],{"class":298},[292,1528,432],{"class":336},[292,1530,429],{"class":298},[292,1532,310],{"class":298},[292,1534,1535,1537],{"class":294,"line":582},[292,1536,442],{"class":298},[292,1538,445],{"class":302},[292,1540,1541,1543,1545,1547,1549,1551,1553,1555,1557,1559,1561,1563],{"class":294,"line":843},[292,1542,451],{"class":298},[292,1544,454],{"class":306},[292,1546,426],{"class":298},[292,1548,429],{"class":298},[292,1550,461],{"class":298},[292,1552,465],{"class":464},[292,1554,468],{"class":298},[292,1556,465],{"class":464},[292,1558,468],{"class":298},[292,1560,475],{"class":464},[292,1562,478],{"class":298},[292,1564,481],{"class":298},[292,1566,1567],{"class":294,"line":865},[292,1568,487],{"class":298},[292,1570,1571],{"class":294,"line":900},[292,1572,1573],{"class":346},"      \u003C!-- Dynamic component -->\n",[292,1575,1577,1579,1581,1583,1586,1588,1590,1593,1595,1597,1599,1601],{"class":1576,"line":925},[294,1395],[292,1578,442],{"class":298},[292,1580,1471],{"class":302},[292,1582,498],{"class":298},[292,1584,1585],{"class":306},"is",[292,1587,426],{"class":298},[292,1589,429],{"class":298},[292,1591,1592],{"class":323},"meshes",[292,1594,461],{"class":298},[292,1596,1283],{"class":323},[292,1598,478],{"class":298},[292,1600,429],{"class":298},[292,1602,513],{"class":298},[292,1604,1605],{"class":294,"line":935},[292,1606,388],{"emptyLinePlaceholder":39},[292,1608,1610,1612,1614,1616,1618,1620,1622,1624,1626],{"class":294,"line":1609},25,[292,1611,442],{"class":298},[292,1613,495],{"class":302},[292,1615,498],{"class":298},[292,1617,501],{"class":306},[292,1619,426],{"class":298},[292,1621,429],{"class":298},[292,1623,508],{"class":464},[292,1625,429],{"class":298},[292,1627,513],{"class":298},[292,1629,1631,1633],{"class":294,"line":1630},26,[292,1632,442],{"class":298},[292,1634,521],{"class":302},[292,1636,1638,1640,1642,1644,1646,1648,1650,1652,1654,1656,1658,1660],{"class":294,"line":1637},27,[292,1639,451],{"class":298},[292,1641,454],{"class":306},[292,1643,426],{"class":298},[292,1645,429],{"class":298},[292,1647,461],{"class":298},[292,1649,475],{"class":464},[292,1651,468],{"class":298},[292,1653,475],{"class":464},[292,1655,468],{"class":298},[292,1657,475],{"class":464},[292,1659,478],{"class":298},[292,1661,481],{"class":298},[292,1663,1665,1667,1669,1671,1673,1675],{"class":294,"line":1664},28,[292,1666,451],{"class":298},[292,1668,501],{"class":306},[292,1670,426],{"class":298},[292,1672,429],{"class":298},[292,1674,562],{"class":464},[292,1676,481],{"class":298},[292,1678,1680],{"class":294,"line":1679},29,[292,1681,487],{"class":298},[292,1683,1685,1687,1689],{"class":294,"line":1684},30,[292,1686,575],{"class":298},[292,1688,417],{"class":302},[292,1690,310],{"class":298},[292,1692,1694,1696,1698],{"class":294,"line":1693},31,[292,1695,394],{"class":298},[292,1697,406],{"class":302},[292,1699,310],{"class":298},[274,1701,1703],{"id":1702},"adding-ui-controls-to-switch-components","Adding UI controls to switch components",[248,1705,1706,1707,1709,1710],{},"To be able to switch between components, lets add a floating UI containing buttons to change between the ",[1281,1708,1417],{}," and the ",[1281,1711,1712],{},"Sphere",[282,1714,1716],{"className":284,"code":1715,"language":287,"meta":288,"style":288},"\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",[258,1717,1718,1726,1747,1754,1790,1817,1822,1827,1836,1842,1872,1896,1900,1905,1913,1921],{"__ignoreMap":288},[292,1719,1720,1722,1724],{"class":294,"line":295},[292,1721,299],{"class":298},[292,1723,406],{"class":302},[292,1725,310],{"class":298},[292,1727,1728,1730,1733,1736,1738,1740,1743,1745],{"class":294,"line":313},[292,1729,846],{"class":298},[292,1731,1732],{"class":302},"div",[292,1734,1735],{"class":306}," class",[292,1737,426],{"class":298},[292,1739,429],{"class":298},[292,1741,1742],{"class":336},"floating-container",[292,1744,429],{"class":298},[292,1746,310],{"class":298},[292,1748,1749,1751],{"class":294,"line":343},[292,1750,414],{"class":298},[292,1752,1753],{"class":302},"button\n",[292,1755,1756,1759,1762,1764,1766,1769,1772,1775,1777,1779,1781,1784,1786,1788],{"class":294,"line":350},[292,1757,1758],{"class":298},"      :",[292,1760,1761],{"class":306},"class",[292,1763,426],{"class":298},[292,1765,429],{"class":298},[292,1767,1768],{"class":298},"{ ",[292,1770,1771],{"class":302},"isActive",[292,1773,1774],{"class":298},": ",[292,1776,1592],{"class":323},[292,1778,461],{"class":298},[292,1780,1283],{"class":323},[292,1782,1783],{"class":298},"] === ",[292,1785,1417],{"class":323},[292,1787,327],{"class":298},[292,1789,481],{"class":298},[292,1791,1792,1795,1798,1800,1802,1805,1807,1809,1811,1813,1815],{"class":294,"line":368},[292,1793,1794],{"class":298},"      @",[292,1796,1797],{"class":306},"click",[292,1799,426],{"class":298},[292,1801,429],{"class":298},[292,1803,1804],{"class":671},"handleComponents",[292,1806,709],{"class":298},[292,1808,1414],{"class":298},[292,1810,1417],{"class":336},[292,1812,1414],{"class":298},[292,1814,1297],{"class":298},[292,1816,481],{"class":298},[292,1818,1819],{"class":294,"line":385},[292,1820,1821],{"class":298},"    >\n",[292,1823,1824],{"class":294,"line":391},[292,1825,1826],{"class":323},"        Cube\n",[292,1828,1829,1831,1834],{"class":294,"line":401},[292,1830,575],{"class":298},[292,1832,1833],{"class":302},"button",[292,1835,310],{"class":298},[292,1837,1838,1840],{"class":294,"line":411},[292,1839,414],{"class":298},[292,1841,1753],{"class":302},[292,1843,1844,1846,1848,1850,1852,1854,1856,1858,1860,1862,1864,1866,1868,1870],{"class":294,"line":439},[292,1845,1758],{"class":298},[292,1847,1761],{"class":306},[292,1849,426],{"class":298},[292,1851,429],{"class":298},[292,1853,1768],{"class":298},[292,1855,1771],{"class":302},[292,1857,1774],{"class":298},[292,1859,1592],{"class":323},[292,1861,461],{"class":298},[292,1863,1283],{"class":323},[292,1865,1783],{"class":298},[292,1867,1712],{"class":323},[292,1869,327],{"class":298},[292,1871,481],{"class":298},[292,1873,1874,1876,1878,1880,1882,1884,1886,1888,1890,1892,1894],{"class":294,"line":448},[292,1875,1794],{"class":298},[292,1877,1797],{"class":306},[292,1879,426],{"class":298},[292,1881,429],{"class":298},[292,1883,1804],{"class":671},[292,1885,709],{"class":298},[292,1887,1414],{"class":298},[292,1889,1712],{"class":336},[292,1891,1414],{"class":298},[292,1893,1297],{"class":298},[292,1895,481],{"class":298},[292,1897,1898],{"class":294,"line":484},[292,1899,1821],{"class":298},[292,1901,1902],{"class":294,"line":490},[292,1903,1904],{"class":323},"       Sphere\n",[292,1906,1907,1909,1911],{"class":294,"line":516},[292,1908,575],{"class":298},[292,1910,1833],{"class":302},[292,1912,310],{"class":298},[292,1914,1915,1917,1919],{"class":294,"line":524},[292,1916,394],{"class":298},[292,1918,1732],{"class":302},[292,1920,310],{"class":298},[292,1922,1923,1925,1927],{"class":294,"line":551},[292,1924,394],{"class":298},[292,1926,406],{"class":302},[292,1928,310],{"class":298},[248,1930,1931],{},"Let's add a little CSS.",[282,1933,1935],{"className":284,"code":1934,"language":287,"meta":288,"style":288},"\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",[258,1936,1937,1949,1958,1973,1985,1997,2009,2024,2038,2050,2062,2074,2085,2103,2108,2122,2134,2148,2160,2172,2184,2196,2200,2204,2208,2218,2231,2235],{"__ignoreMap":288},[292,1938,1939,1941,1944,1947],{"class":294,"line":295},[292,1940,299],{"class":298},[292,1942,1943],{"class":302},"style",[292,1945,1946],{"class":306}," scoped",[292,1948,310],{"class":298},[292,1950,1951,1953,1956],{"class":294,"line":313},[292,1952,744],{"class":298},[292,1954,1742],{"class":1955},"sBMFI",[292,1957,725],{"class":298},[292,1959,1960,1964,1967,1970],{"class":294,"line":343},[292,1961,1963],{"class":1962},"sqsOY","  position",[292,1965,1966],{"class":298},":",[292,1968,1969],{"class":323}," absolute",[292,1971,1972],{"class":298},";\n",[292,1974,1975,1978,1980,1983],{"class":294,"line":350},[292,1976,1977],{"class":1962},"  top",[292,1979,1966],{"class":298},[292,1981,1982],{"class":464}," 0",[292,1984,1972],{"class":298},[292,1986,1987,1990,1992,1995],{"class":294,"line":368},[292,1988,1989],{"class":1962},"  left",[292,1991,1966],{"class":298},[292,1993,1994],{"class":464}," 50%",[292,1996,1972],{"class":298},[292,1998,1999,2002,2004,2007],{"class":294,"line":385},[292,2000,2001],{"class":1962},"  z-index",[292,2003,1966],{"class":298},[292,2005,2006],{"class":464}," 10",[292,2008,1972],{"class":298},[292,2010,2011,2014,2016,2019,2022],{"class":294,"line":391},[292,2012,2013],{"class":1962},"  background-color",[292,2015,1966],{"class":298},[292,2017,2018],{"class":298}," #",[292,2020,2021],{"class":323},"f7f7f7",[292,2023,1972],{"class":298},[292,2025,2026,2029,2031,2033,2036],{"class":294,"line":401},[292,2027,2028],{"class":1962},"  color",[292,2030,1966],{"class":298},[292,2032,2018],{"class":298},[292,2034,2035],{"class":323},"333",[292,2037,1972],{"class":298},[292,2039,2040,2043,2045,2048],{"class":294,"line":411},[292,2041,2042],{"class":1962},"  border-radius",[292,2044,1966],{"class":298},[292,2046,2047],{"class":464}," 8px",[292,2049,1972],{"class":298},[292,2051,2052,2055,2057,2060],{"class":294,"line":439},[292,2053,2054],{"class":1962},"  padding",[292,2056,1966],{"class":298},[292,2058,2059],{"class":464}," 0.25rem",[292,2061,1972],{"class":298},[292,2063,2064,2067,2069,2072],{"class":294,"line":448},[292,2065,2066],{"class":1962},"  display",[292,2068,1966],{"class":298},[292,2070,2071],{"class":323}," flex",[292,2073,1972],{"class":298},[292,2075,2076,2079,2081,2083],{"class":294,"line":484},[292,2077,2078],{"class":1962},"  gap",[292,2080,1966],{"class":298},[292,2082,2059],{"class":464},[292,2084,1972],{"class":298},[292,2086,2087,2090,2092,2095,2097,2100],{"class":294,"line":490},[292,2088,2089],{"class":1962},"  transform",[292,2091,1966],{"class":298},[292,2093,2094],{"class":671}," translateX",[292,2096,709],{"class":298},[292,2098,2099],{"class":464},"-50%",[292,2101,2102],{"class":298},");\n",[292,2104,2105],{"class":294,"line":516},[292,2106,2107],{"class":323},"  button {\n",[292,2109,2110,2113,2115,2117,2120],{"class":294,"line":524},[292,2111,2112],{"class":1962},"    padding",[292,2114,1966],{"class":298},[292,2116,2047],{"class":464},[292,2118,2119],{"class":464}," 16px",[292,2121,1972],{"class":298},[292,2123,2124,2127,2129,2132],{"class":294,"line":551},[292,2125,2126],{"class":1962},"    border",[292,2128,1966],{"class":298},[292,2130,2131],{"class":323}," none",[292,2133,1972],{"class":298},[292,2135,2136,2139,2141,2143,2146],{"class":294,"line":567},[292,2137,2138],{"class":1962},"    background-color",[292,2140,1966],{"class":298},[292,2142,2018],{"class":298},[292,2144,2145],{"class":323},"4caf50",[292,2147,1972],{"class":298},[292,2149,2150,2153,2155,2158],{"class":294,"line":572},[292,2151,2152],{"class":1962},"    color",[292,2154,1966],{"class":298},[292,2156,2157],{"class":323}," white",[292,2159,1972],{"class":298},[292,2161,2162,2165,2167,2170],{"class":294,"line":582},[292,2163,2164],{"class":1962},"    cursor",[292,2166,1966],{"class":298},[292,2168,2169],{"class":323}," pointer",[292,2171,1972],{"class":298},[292,2173,2174,2177,2179,2182],{"class":294,"line":843},[292,2175,2176],{"class":1962},"    border-radius",[292,2178,1966],{"class":298},[292,2180,2181],{"class":464}," 4px",[292,2183,1972],{"class":298},[292,2185,2186,2189,2191,2194],{"class":294,"line":865},[292,2187,2188],{"class":1962},"    font-size",[292,2190,1966],{"class":298},[292,2192,2193],{"class":464}," 14px",[292,2195,1972],{"class":298},[292,2197,2198],{"class":294,"line":900},[292,2199,813],{"class":298},[292,2201,2202],{"class":294,"line":925},[292,2203,1456],{"class":323},[292,2205,2206],{"class":294,"line":935},[292,2207,388],{"emptyLinePlaceholder":39},[292,2209,2210,2212,2214,2216],{"class":294,"line":1609},[292,2211,1833],{"class":1955},[292,2213,744],{"class":298},[292,2215,1771],{"class":1955},[292,2217,725],{"class":298},[292,2219,2220,2222,2224,2226,2229],{"class":294,"line":1630},[292,2221,2013],{"class":1962},[292,2223,1966],{"class":298},[292,2225,2018],{"class":298},[292,2227,2228],{"class":323},"388e3c",[292,2230,1972],{"class":298},[292,2232,2233],{"class":294,"line":1637},[292,2234,1456],{"class":298},[292,2236,2237,2239,2241],{"class":294,"line":1664},[292,2238,394],{"class":298},[292,2240,1943],{"class":302},[292,2242,310],{"class":298},[2244,2245],"examples-dynamic-transition-only-dynamic",{},[2247,2248,2249],"prose-note",{},[248,2250,1267,2251,2256],{},[252,2252,2255],{"href":2253,"rel":2254},"https://vuejs.org/guide/built-ins/keep-alive.html#keepalive",[256],"KeepAlive"," if you want component instances to be cached and preserved between component switches",[271,2258,2259,2264,2274,2290,2298,2313,2318,2374,2378,2393,2466,2470,2477,2527,2535,2698,2711,2715],{},[2260,2261,2263],"h2",{"id":2262},"adding-transitions","Adding transitions",[274,2265,2267,2268],{"id":2266},"wrap-the-component-inside-the-transition","Wrap the component inside the ",[252,2269,2271],{"href":254,"rel":2270},[256],[258,2272,2273],{},"\u003Ctransition>",[248,2275,2276,2277,261,2284,2289],{},"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 ",[252,2278,2281],{"href":2279,"rel":2280},"https://gsap.com/",[256],[258,2282,2283],{},"GSAP",[252,2285,2287],{"href":254,"rel":2286},[256],[258,2288,260],{}," components.",[248,2291,2292,2293,744],{},"For that, the first step is to wrap our dynamic component in a ",[252,2294,2296],{"href":254,"rel":2295},[256],[258,2297,260],{},[248,2299,2300,2301,2304,2305,2308,2309,2312],{},"Very important: we need to tell our component that we're going to handle our animations using ",[258,2302,2303],{},"JS",", not ",[258,2306,2307],{},"CSS",", by using the prop ",[258,2310,2311],{},":css=\"false\"",". Otherwise, the component will search for a DOM element and will fail.",[2247,2314,2315],{},[248,2316,2317],{},"Elements inside Tres.js live inside a canvas, not in the DOM.",[282,2319,2323],{"className":2320,"code":2321,"language":2322,"meta":288,"style":288},"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",[258,2324,2325,2346,2366],{"__ignoreMap":288},[292,2326,2327,2329,2332,2335,2337,2339,2342,2344],{"class":294,"line":295},[292,2328,299],{"class":298},[292,2330,2331],{"class":302},"Transition",[292,2333,2334],{"class":306}," :css",[292,2336,426],{"class":298},[292,2338,429],{"class":298},[292,2340,2341],{"class":336},"false",[292,2343,429],{"class":298},[292,2345,310],{"class":298},[292,2347,2348,2350,2352,2355,2357,2359,2362,2364],{"class":294,"line":313},[292,2349,846],{"class":298},[292,2351,1471],{"class":302},[292,2353,2354],{"class":306}," :is",[292,2356,426],{"class":298},[292,2358,429],{"class":298},[292,2360,2361],{"class":336},"meshes[current]",[292,2363,429],{"class":298},[292,2365,513],{"class":298},[292,2367,2368,2370,2372],{"class":294,"line":343},[292,2369,394],{"class":298},[292,2371,2331],{"class":302},[292,2373,310],{"class":298},[274,2375,2377],{"id":2376},"using-js-hooks","Using JS hooks",[248,2379,2380,2381,2386,2387,261,2390,744],{},"Then we can use the provided ",[252,2382,2385],{"href":2383,"rel":2384},"https://vuejs.org/guide/built-ins/transition.html#javascript-hooks",[256],"JS hooks","; in this demo, we're going to use ",[258,2388,2389],{},"@enter",[258,2391,2392],{},"@leave",[282,2394,2396],{"className":2320,"code":2395,"language":2322,"meta":288,"style":288},"\u003CTransition :css=\"false\" @enter=\"onEnter\" @leave=\"onLeave\">\n  \u003Ccomponent :is=\"meshes[current]\" />\n\u003C/Transition>\n",[258,2397,2398,2440,2458],{"__ignoreMap":288},[292,2399,2400,2402,2404,2406,2408,2410,2412,2414,2417,2419,2421,2424,2426,2429,2431,2433,2436,2438],{"class":294,"line":295},[292,2401,299],{"class":298},[292,2403,2331],{"class":302},[292,2405,2334],{"class":306},[292,2407,426],{"class":298},[292,2409,429],{"class":298},[292,2411,2341],{"class":336},[292,2413,429],{"class":298},[292,2415,2416],{"class":306}," @enter",[292,2418,426],{"class":298},[292,2420,429],{"class":298},[292,2422,2423],{"class":336},"onEnter",[292,2425,429],{"class":298},[292,2427,2428],{"class":306}," @leave",[292,2430,426],{"class":298},[292,2432,429],{"class":298},[292,2434,2435],{"class":336},"onLeave",[292,2437,429],{"class":298},[292,2439,310],{"class":298},[292,2441,2442,2444,2446,2448,2450,2452,2454,2456],{"class":294,"line":313},[292,2443,846],{"class":298},[292,2445,1471],{"class":302},[292,2447,2354],{"class":306},[292,2449,426],{"class":298},[292,2451,429],{"class":298},[292,2453,2361],{"class":336},[292,2455,429],{"class":298},[292,2457,513],{"class":298},[292,2459,2460,2462,2464],{"class":294,"line":343},[292,2461,394],{"class":298},[292,2463,2331],{"class":302},[292,2465,310],{"class":298},[274,2467,2469],{"id":2468},"now-its-time-to-animate","Now it's time to animate!",[248,2471,2472,2473,2476],{},"In case you haven't installed it already, install ",[252,2474,2283],{"href":2279,"rel":2475},[256]," as a dependency in your project:",[2478,2479,2480,2498,2513],"code-group",{},[282,2481,2486],{"className":2482,"code":2483,"filename":2484,"language":2485,"meta":288,"style":288},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","npm install gsap\n","npm","bash",[258,2487,2488],{"__ignoreMap":288},[292,2489,2490,2492,2495],{"class":294,"line":295},[292,2491,2484],{"class":1955},[292,2493,2494],{"class":336}," install",[292,2496,2497],{"class":336}," gsap\n",[282,2499,2502],{"className":2482,"code":2500,"filename":2501,"language":2485,"meta":288,"style":288},"yarn add gsap\n","yarn",[258,2503,2504],{"__ignoreMap":288},[292,2505,2506,2508,2511],{"class":294,"line":295},[292,2507,2501],{"class":1955},[292,2509,2510],{"class":336}," add",[292,2512,2497],{"class":336},[282,2514,2517],{"className":2482,"code":2515,"filename":2516,"language":2485,"meta":288,"style":288},"pnpm install gsap\n","pnpm",[258,2518,2519],{"__ignoreMap":288},[292,2520,2521,2523,2525],{"class":294,"line":295},[292,2522,2516],{"class":1955},[292,2524,2494],{"class":336},[292,2526,2497],{"class":336},[248,2528,2529,2530,261,2532,2534],{},"In our ",[258,2531,2423],{},[258,2533,2435],{}," functions, we put our desired animations. As the names indicate, one controls when the element enters the scene and the other when it leaves.",[282,2536,2540],{"className":2537,"code":2538,"language":2539,"meta":288,"style":288},"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",[258,2541,2542,2565,2569,2586,2630,2634,2654,2694],{"__ignoreMap":288},[292,2543,2544,2546,2548,2551,2553,2555,2557,2560,2562],{"class":294,"line":295},[292,2545,317],{"class":316},[292,2547,320],{"class":298},[292,2549,2550],{"class":323}," gsap",[292,2552,327],{"class":298},[292,2554,330],{"class":316},[292,2556,333],{"class":298},[292,2558,2559],{"class":336},"gsap",[292,2561,1414],{"class":298},[292,2563,2564],{"class":346}," // don't forget to import GSAP\n",[292,2566,2567],{"class":294,"line":313},[292,2568,388],{"emptyLinePlaceholder":39},[292,2570,2571,2574,2577,2579,2582,2584],{"class":294,"line":343},[292,2572,2573],{"class":306},"function",[292,2575,2576],{"class":671}," onEnter",[292,2578,709],{"class":298},[292,2580,2581],{"class":715},"el",[292,2583,1297],{"class":298},[292,2585,725],{"class":298},[292,2587,2588,2591,2593,2595,2597,2599,2601,2604,2607,2609,2612,2614,2617,2619,2622,2624,2626,2628],{"class":294,"line":350},[292,2589,2590],{"class":323},"  gsap",[292,2592,744],{"class":298},[292,2594,358],{"class":671},[292,2596,709],{"class":302},[292,2598,2581],{"class":323},[292,2600,744],{"class":298},[292,2602,2603],{"class":323},"material",[292,2605,2606],{"class":298},",",[292,2608,320],{"class":298},[292,2610,2611],{"class":302}," duration",[292,2613,1966],{"class":298},[292,2615,2616],{"class":464}," 1",[292,2618,2606],{"class":298},[292,2620,2621],{"class":302}," opacity",[292,2623,1966],{"class":298},[292,2625,1982],{"class":464},[292,2627,327],{"class":298},[292,2629,820],{"class":302},[292,2631,2632],{"class":294,"line":368},[292,2633,1456],{"class":298},[292,2635,2636,2638,2641,2643,2645,2647,2650,2652],{"class":294,"line":385},[292,2637,2573],{"class":306},[292,2639,2640],{"class":671}," onLeave",[292,2642,709],{"class":298},[292,2644,2581],{"class":715},[292,2646,2606],{"class":298},[292,2648,2649],{"class":715}," done",[292,2651,1297],{"class":298},[292,2653,725],{"class":298},[292,2655,2656,2658,2660,2663,2665,2667,2669,2671,2673,2675,2677,2679,2682,2684,2686,2688,2690,2692],{"class":294,"line":391},[292,2657,2590],{"class":323},[292,2659,744],{"class":298},[292,2661,2662],{"class":671},"to",[292,2664,709],{"class":302},[292,2666,2581],{"class":323},[292,2668,744],{"class":298},[292,2670,2603],{"class":323},[292,2672,2606],{"class":298},[292,2674,320],{"class":298},[292,2676,2611],{"class":302},[292,2678,1966],{"class":298},[292,2680,2681],{"class":464}," 0.05",[292,2683,2606],{"class":298},[292,2685,2621],{"class":302},[292,2687,1966],{"class":298},[292,2689,1982],{"class":464},[292,2691,327],{"class":298},[292,2693,820],{"class":302},[292,2695,2696],{"class":294,"line":401},[292,2697,1456],{"class":298},[2247,2699,2700],{},[248,2701,2702,2703,2706,2707,2710],{},"Important: note that animating the ",[258,2704,2705],{},"opacity"," works here because we set ",[258,2708,2709],{},"transparent"," in our materials.",[2260,2712,2714],{"id":2713},"full-example-of-our-main-component","Full example of our main component",[282,2716,2718],{"className":284,"code":2717,"language":287,"meta":288,"style":288},"\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",[258,2719,2720,2730,2748,2766,2784,2798,2812,2816,2836,2840,2858,2870,2874,2878,2892,2930,2934,2948,2986,2990,2994,3004,3010,3016,3020,3028,3032,3040,3045,3054,3072,3141,3208,3217,3236,3243,3270,3275,3324,3352,3362,3383,3390,3417,3432,3437,3446,3455,3464,3469,3480,3489,3500,3511,3522,3533,3546,3559,3570,3581,3592,3603,3618,3623,3636,3647,3660,3671,3682,3693,3704,3709,3714,3719,3730,3743,3748],{"__ignoreMap":288},[292,2721,2722,2724,2726,2728],{"class":294,"line":295},[292,2723,299],{"class":298},[292,2725,303],{"class":302},[292,2727,307],{"class":306},[292,2729,310],{"class":298},[292,2731,2732,2734,2736,2738,2740,2742,2744,2746],{"class":294,"line":313},[292,2733,317],{"class":316},[292,2735,320],{"class":298},[292,2737,852],{"class":323},[292,2739,327],{"class":298},[292,2741,330],{"class":316},[292,2743,333],{"class":298},[292,2745,287],{"class":336},[292,2747,340],{"class":298},[292,2749,2750,2752,2754,2756,2758,2760,2762,2764],{"class":294,"line":343},[292,2751,317],{"class":316},[292,2753,320],{"class":298},[292,2755,324],{"class":323},[292,2757,327],{"class":298},[292,2759,330],{"class":316},[292,2761,333],{"class":298},[292,2763,337],{"class":336},[292,2765,340],{"class":298},[292,2767,2768,2770,2772,2774,2776,2778,2780,2782],{"class":294,"line":350},[292,2769,317],{"class":316},[292,2771,320],{"class":298},[292,2773,2550],{"class":323},[292,2775,327],{"class":298},[292,2777,330],{"class":316},[292,2779,333],{"class":298},[292,2781,2559],{"class":336},[292,2783,340],{"class":298},[292,2785,2786,2788,2790,2792,2794,2796],{"class":294,"line":368},[292,2787,317],{"class":316},[292,2789,355],{"class":323},[292,2791,358],{"class":316},[292,2793,333],{"class":298},[292,2795,363],{"class":336},[292,2797,340],{"class":298},[292,2799,2800,2802,2804,2806,2808,2810],{"class":294,"line":385},[292,2801,317],{"class":316},[292,2803,373],{"class":323},[292,2805,358],{"class":316},[292,2807,333],{"class":298},[292,2809,380],{"class":336},[292,2811,340],{"class":298},[292,2813,2814],{"class":294,"line":391},[292,2815,388],{"emptyLinePlaceholder":39},[292,2817,2818,2820,2822,2824,2826,2828,2830,2832,2834],{"class":294,"line":401},[292,2819,663],{"class":306},[292,2821,1405],{"class":323},[292,2823,426],{"class":298},[292,2825,852],{"class":671},[292,2827,709],{"class":323},[292,2829,1414],{"class":298},[292,2831,1417],{"class":336},[292,2833,1414],{"class":298},[292,2835,820],{"class":323},[292,2837,2838],{"class":294,"line":411},[292,2839,388],{"emptyLinePlaceholder":39},[292,2841,2842,2844,2846,2848,2850,2852,2854,2856],{"class":294,"line":439},[292,2843,663],{"class":306},[292,2845,1464],{"class":323},[292,2847,426],{"class":298},[292,2849,738],{"class":298},[292,2851,1471],{"class":715},[292,2853,1297],{"class":298},[292,2855,722],{"class":306},[292,2857,725],{"class":298},[292,2859,2860,2862,2864,2866,2868],{"class":294,"line":448},[292,2861,1483],{"class":323},[292,2863,744],{"class":298},[292,2865,747],{"class":323},[292,2867,693],{"class":298},[292,2869,1492],{"class":323},[292,2871,2872],{"class":294,"line":484},[292,2873,1456],{"class":298},[292,2875,2876],{"class":294,"line":490},[292,2877,388],{"emptyLinePlaceholder":39},[292,2879,2880,2882,2884,2886,2888,2890],{"class":294,"line":516},[292,2881,2573],{"class":306},[292,2883,2576],{"class":671},[292,2885,709],{"class":298},[292,2887,2581],{"class":715},[292,2889,1297],{"class":298},[292,2891,725],{"class":298},[292,2893,2894,2896,2898,2900,2902,2904,2906,2908,2910,2912,2914,2916,2918,2920,2922,2924,2926,2928],{"class":294,"line":524},[292,2895,2590],{"class":323},[292,2897,744],{"class":298},[292,2899,358],{"class":671},[292,2901,709],{"class":302},[292,2903,2581],{"class":323},[292,2905,744],{"class":298},[292,2907,2603],{"class":323},[292,2909,2606],{"class":298},[292,2911,320],{"class":298},[292,2913,2611],{"class":302},[292,2915,1966],{"class":298},[292,2917,2616],{"class":464},[292,2919,2606],{"class":298},[292,2921,2621],{"class":302},[292,2923,1966],{"class":298},[292,2925,1982],{"class":464},[292,2927,327],{"class":298},[292,2929,820],{"class":302},[292,2931,2932],{"class":294,"line":551},[292,2933,1456],{"class":298},[292,2935,2936,2938,2940,2942,2944,2946],{"class":294,"line":567},[292,2937,2573],{"class":306},[292,2939,2640],{"class":671},[292,2941,709],{"class":298},[292,2943,2581],{"class":715},[292,2945,1297],{"class":298},[292,2947,725],{"class":298},[292,2949,2950,2952,2954,2956,2958,2960,2962,2964,2966,2968,2970,2972,2974,2976,2978,2980,2982,2984],{"class":294,"line":572},[292,2951,2590],{"class":323},[292,2953,744],{"class":298},[292,2955,2662],{"class":671},[292,2957,709],{"class":302},[292,2959,2581],{"class":323},[292,2961,744],{"class":298},[292,2963,2603],{"class":323},[292,2965,2606],{"class":298},[292,2967,320],{"class":298},[292,2969,2611],{"class":302},[292,2971,1966],{"class":298},[292,2973,2681],{"class":464},[292,2975,2606],{"class":298},[292,2977,2621],{"class":302},[292,2979,1966],{"class":298},[292,2981,1982],{"class":464},[292,2983,327],{"class":298},[292,2985,820],{"class":302},[292,2987,2988],{"class":294,"line":582},[292,2989,1456],{"class":298},[292,2991,2992],{"class":294,"line":843},[292,2993,388],{"emptyLinePlaceholder":39},[292,2995,2996,2998,3000,3002],{"class":294,"line":865},[292,2997,663],{"class":306},[292,2999,1429],{"class":323},[292,3001,426],{"class":298},[292,3003,725],{"class":298},[292,3005,3006,3008],{"class":294,"line":900},[292,3007,1439],{"class":323},[292,3009,1442],{"class":298},[292,3011,3012,3014],{"class":294,"line":925},[292,3013,1448],{"class":323},[292,3015,1442],{"class":298},[292,3017,3018],{"class":294,"line":935},[292,3019,1456],{"class":298},[292,3021,3022,3024,3026],{"class":294,"line":1609},[292,3023,394],{"class":298},[292,3025,303],{"class":302},[292,3027,310],{"class":298},[292,3029,3030],{"class":294,"line":1630},[292,3031,388],{"emptyLinePlaceholder":39},[292,3033,3034,3036,3038],{"class":294,"line":1637},[292,3035,299],{"class":298},[292,3037,406],{"class":302},[292,3039,310],{"class":298},[292,3041,3042],{"class":294,"line":1664},[292,3043,3044],{"class":346},"  \u003C!---->\n",[292,3046,3047,3049,3052],{"class":294,"line":1679},[292,3048,846],{"class":298},[292,3050,3051],{"class":302},"SceneWrapper",[292,3053,310],{"class":298},[292,3055,3056,3058,3060,3062,3064,3066,3068,3070],{"class":294,"line":1684},[292,3057,414],{"class":298},[292,3059,1732],{"class":302},[292,3061,1735],{"class":306},[292,3063,426],{"class":298},[292,3065,429],{"class":298},[292,3067,1742],{"class":336},[292,3069,429],{"class":298},[292,3071,310],{"class":298},[292,3073,3074,3076,3078,3080,3082,3084,3086,3088,3090,3092,3094,3096,3098,3100,3102,3104,3106,3109,3111,3113,3115,3117,3119,3121,3123,3125,3127,3129,3132,3135,3137,3139],{"class":294,"line":1693},[292,3075,442],{"class":298},[292,3077,1833],{"class":302},[292,3079,498],{"class":298},[292,3081,1761],{"class":306},[292,3083,426],{"class":298},[292,3085,429],{"class":298},[292,3087,1768],{"class":298},[292,3089,1771],{"class":302},[292,3091,1774],{"class":298},[292,3093,1592],{"class":323},[292,3095,461],{"class":298},[292,3097,1283],{"class":323},[292,3099,1783],{"class":298},[292,3101,1417],{"class":323},[292,3103,327],{"class":298},[292,3105,429],{"class":298},[292,3107,3108],{"class":298}," @",[292,3110,1797],{"class":306},[292,3112,426],{"class":298},[292,3114,429],{"class":298},[292,3116,1804],{"class":671},[292,3118,709],{"class":298},[292,3120,1414],{"class":298},[292,3122,1417],{"class":336},[292,3124,1414],{"class":298},[292,3126,1297],{"class":298},[292,3128,429],{"class":298},[292,3130,3131],{"class":298},">",[292,3133,3134],{"class":323},"Cube",[292,3136,394],{"class":298},[292,3138,1833],{"class":302},[292,3140,310],{"class":298},[292,3142,3144,3146,3148,3150,3152,3154,3156,3158,3160,3162,3164,3166,3168,3170,3172,3174,3176,3178,3180,3182,3184,3186,3188,3190,3192,3194,3196,3198,3200,3202,3204,3206],{"class":294,"line":3143},32,[292,3145,442],{"class":298},[292,3147,1833],{"class":302},[292,3149,498],{"class":298},[292,3151,1761],{"class":306},[292,3153,426],{"class":298},[292,3155,429],{"class":298},[292,3157,1768],{"class":298},[292,3159,1771],{"class":302},[292,3161,1774],{"class":298},[292,3163,1592],{"class":323},[292,3165,461],{"class":298},[292,3167,1283],{"class":323},[292,3169,1783],{"class":298},[292,3171,1712],{"class":323},[292,3173,327],{"class":298},[292,3175,429],{"class":298},[292,3177,3108],{"class":298},[292,3179,1797],{"class":306},[292,3181,426],{"class":298},[292,3183,429],{"class":298},[292,3185,1804],{"class":671},[292,3187,709],{"class":298},[292,3189,1414],{"class":298},[292,3191,1712],{"class":336},[292,3193,1414],{"class":298},[292,3195,1297],{"class":298},[292,3197,429],{"class":298},[292,3199,3131],{"class":298},[292,3201,1712],{"class":323},[292,3203,394],{"class":298},[292,3205,1833],{"class":302},[292,3207,310],{"class":298},[292,3209,3211,3213,3215],{"class":294,"line":3210},33,[292,3212,575],{"class":298},[292,3214,1732],{"class":302},[292,3216,310],{"class":298},[292,3218,3220,3222,3224,3226,3228,3230,3232,3234],{"class":294,"line":3219},34,[292,3221,414],{"class":298},[292,3223,417],{"class":302},[292,3225,423],{"class":306},[292,3227,426],{"class":298},[292,3229,429],{"class":298},[292,3231,432],{"class":336},[292,3233,429],{"class":298},[292,3235,310],{"class":298},[292,3237,3239,3241],{"class":294,"line":3238},35,[292,3240,442],{"class":298},[292,3242,445],{"class":302},[292,3244,3246,3248,3250,3252,3254,3256,3258,3260,3262,3264,3266,3268],{"class":294,"line":3245},36,[292,3247,451],{"class":298},[292,3249,454],{"class":306},[292,3251,426],{"class":298},[292,3253,429],{"class":298},[292,3255,461],{"class":298},[292,3257,465],{"class":464},[292,3259,468],{"class":298},[292,3261,465],{"class":464},[292,3263,468],{"class":298},[292,3265,475],{"class":464},[292,3267,478],{"class":298},[292,3269,481],{"class":298},[292,3271,3273],{"class":294,"line":3272},37,[292,3274,487],{"class":298},[292,3276,3278,3280,3282,3284,3287,3289,3291,3294,3296,3298,3301,3303,3305,3307,3309,3311,3314,3316,3318,3320,3322],{"class":294,"line":3277},38,[292,3279,442],{"class":298},[292,3281,2331],{"class":302},[292,3283,498],{"class":298},[292,3285,3286],{"class":306},"css",[292,3288,426],{"class":298},[292,3290,429],{"class":298},[292,3292,2341],{"class":3293},"sfNiH",[292,3295,429],{"class":298},[292,3297,3108],{"class":298},[292,3299,3300],{"class":306},"enter",[292,3302,426],{"class":298},[292,3304,429],{"class":298},[292,3306,2423],{"class":323},[292,3308,429],{"class":298},[292,3310,3108],{"class":298},[292,3312,3313],{"class":306},"leave",[292,3315,426],{"class":298},[292,3317,429],{"class":298},[292,3319,2435],{"class":323},[292,3321,429],{"class":298},[292,3323,310],{"class":298},[292,3325,3327,3330,3332,3334,3336,3338,3340,3342,3344,3346,3348,3350],{"class":294,"line":3326},39,[292,3328,3329],{"class":298},"        \u003C",[292,3331,1471],{"class":302},[292,3333,498],{"class":298},[292,3335,1585],{"class":306},[292,3337,426],{"class":298},[292,3339,429],{"class":298},[292,3341,1592],{"class":323},[292,3343,461],{"class":298},[292,3345,1283],{"class":323},[292,3347,478],{"class":298},[292,3349,429],{"class":298},[292,3351,513],{"class":298},[292,3353,3355,3358,3360],{"class":294,"line":3354},40,[292,3356,3357],{"class":298},"      \u003C/",[292,3359,2331],{"class":302},[292,3361,310],{"class":298},[292,3363,3365,3367,3369,3371,3373,3375,3377,3379,3381],{"class":294,"line":3364},41,[292,3366,442],{"class":298},[292,3368,495],{"class":302},[292,3370,498],{"class":298},[292,3372,501],{"class":306},[292,3374,426],{"class":298},[292,3376,429],{"class":298},[292,3378,508],{"class":464},[292,3380,429],{"class":298},[292,3382,513],{"class":298},[292,3384,3386,3388],{"class":294,"line":3385},42,[292,3387,442],{"class":298},[292,3389,521],{"class":302},[292,3391,3393,3395,3397,3399,3401,3403,3405,3407,3409,3411,3413,3415],{"class":294,"line":3392},43,[292,3394,451],{"class":298},[292,3396,454],{"class":306},[292,3398,426],{"class":298},[292,3400,429],{"class":298},[292,3402,461],{"class":298},[292,3404,475],{"class":464},[292,3406,468],{"class":298},[292,3408,475],{"class":464},[292,3410,468],{"class":298},[292,3412,475],{"class":464},[292,3414,478],{"class":298},[292,3416,481],{"class":298},[292,3418,3420,3422,3424,3426,3428,3430],{"class":294,"line":3419},44,[292,3421,451],{"class":298},[292,3423,501],{"class":306},[292,3425,426],{"class":298},[292,3427,429],{"class":298},[292,3429,562],{"class":464},[292,3431,481],{"class":298},[292,3433,3435],{"class":294,"line":3434},45,[292,3436,487],{"class":298},[292,3438,3440,3442,3444],{"class":294,"line":3439},46,[292,3441,575],{"class":298},[292,3443,417],{"class":302},[292,3445,310],{"class":298},[292,3447,3449,3451,3453],{"class":294,"line":3448},47,[292,3450,928],{"class":298},[292,3452,3051],{"class":302},[292,3454,310],{"class":298},[292,3456,3458,3460,3462],{"class":294,"line":3457},48,[292,3459,394],{"class":298},[292,3461,406],{"class":302},[292,3463,310],{"class":298},[292,3465,3467],{"class":294,"line":3466},49,[292,3468,388],{"emptyLinePlaceholder":39},[292,3470,3472,3474,3476,3478],{"class":294,"line":3471},50,[292,3473,299],{"class":298},[292,3475,1943],{"class":302},[292,3477,1946],{"class":306},[292,3479,310],{"class":298},[292,3481,3483,3485,3487],{"class":294,"line":3482},51,[292,3484,744],{"class":298},[292,3486,1742],{"class":1955},[292,3488,725],{"class":298},[292,3490,3492,3494,3496,3498],{"class":294,"line":3491},52,[292,3493,1963],{"class":1962},[292,3495,1966],{"class":298},[292,3497,1969],{"class":323},[292,3499,1972],{"class":298},[292,3501,3503,3505,3507,3509],{"class":294,"line":3502},53,[292,3504,1977],{"class":1962},[292,3506,1966],{"class":298},[292,3508,1982],{"class":464},[292,3510,1972],{"class":298},[292,3512,3514,3516,3518,3520],{"class":294,"line":3513},54,[292,3515,1989],{"class":1962},[292,3517,1966],{"class":298},[292,3519,1994],{"class":464},[292,3521,1972],{"class":298},[292,3523,3525,3527,3529,3531],{"class":294,"line":3524},55,[292,3526,2001],{"class":1962},[292,3528,1966],{"class":298},[292,3530,2006],{"class":464},[292,3532,1972],{"class":298},[292,3534,3536,3538,3540,3542,3544],{"class":294,"line":3535},56,[292,3537,2013],{"class":1962},[292,3539,1966],{"class":298},[292,3541,2018],{"class":298},[292,3543,2021],{"class":323},[292,3545,1972],{"class":298},[292,3547,3549,3551,3553,3555,3557],{"class":294,"line":3548},57,[292,3550,2028],{"class":1962},[292,3552,1966],{"class":298},[292,3554,2018],{"class":298},[292,3556,2035],{"class":323},[292,3558,1972],{"class":298},[292,3560,3562,3564,3566,3568],{"class":294,"line":3561},58,[292,3563,2042],{"class":1962},[292,3565,1966],{"class":298},[292,3567,2047],{"class":464},[292,3569,1972],{"class":298},[292,3571,3573,3575,3577,3579],{"class":294,"line":3572},59,[292,3574,2054],{"class":1962},[292,3576,1966],{"class":298},[292,3578,2059],{"class":464},[292,3580,1972],{"class":298},[292,3582,3584,3586,3588,3590],{"class":294,"line":3583},60,[292,3585,2066],{"class":1962},[292,3587,1966],{"class":298},[292,3589,2071],{"class":323},[292,3591,1972],{"class":298},[292,3593,3595,3597,3599,3601],{"class":294,"line":3594},61,[292,3596,2078],{"class":1962},[292,3598,1966],{"class":298},[292,3600,2059],{"class":464},[292,3602,1972],{"class":298},[292,3604,3606,3608,3610,3612,3614,3616],{"class":294,"line":3605},62,[292,3607,2089],{"class":1962},[292,3609,1966],{"class":298},[292,3611,2094],{"class":671},[292,3613,709],{"class":298},[292,3615,2099],{"class":464},[292,3617,2102],{"class":298},[292,3619,3621],{"class":294,"line":3620},63,[292,3622,2107],{"class":323},[292,3624,3626,3628,3630,3632,3634],{"class":294,"line":3625},64,[292,3627,2112],{"class":1962},[292,3629,1966],{"class":298},[292,3631,2047],{"class":464},[292,3633,2119],{"class":464},[292,3635,1972],{"class":298},[292,3637,3639,3641,3643,3645],{"class":294,"line":3638},65,[292,3640,2126],{"class":1962},[292,3642,1966],{"class":298},[292,3644,2131],{"class":323},[292,3646,1972],{"class":298},[292,3648,3650,3652,3654,3656,3658],{"class":294,"line":3649},66,[292,3651,2138],{"class":1962},[292,3653,1966],{"class":298},[292,3655,2018],{"class":298},[292,3657,2145],{"class":323},[292,3659,1972],{"class":298},[292,3661,3663,3665,3667,3669],{"class":294,"line":3662},67,[292,3664,2152],{"class":1962},[292,3666,1966],{"class":298},[292,3668,2157],{"class":323},[292,3670,1972],{"class":298},[292,3672,3674,3676,3678,3680],{"class":294,"line":3673},68,[292,3675,2164],{"class":1962},[292,3677,1966],{"class":298},[292,3679,2169],{"class":323},[292,3681,1972],{"class":298},[292,3683,3685,3687,3689,3691],{"class":294,"line":3684},69,[292,3686,2176],{"class":1962},[292,3688,1966],{"class":298},[292,3690,2181],{"class":464},[292,3692,1972],{"class":298},[292,3694,3696,3698,3700,3702],{"class":294,"line":3695},70,[292,3697,2188],{"class":1962},[292,3699,1966],{"class":298},[292,3701,2193],{"class":464},[292,3703,1972],{"class":298},[292,3705,3707],{"class":294,"line":3706},71,[292,3708,813],{"class":298},[292,3710,3712],{"class":294,"line":3711},72,[292,3713,1456],{"class":323},[292,3715,3717],{"class":294,"line":3716},73,[292,3718,388],{"emptyLinePlaceholder":39},[292,3720,3722,3724,3726,3728],{"class":294,"line":3721},74,[292,3723,1833],{"class":1955},[292,3725,744],{"class":298},[292,3727,1771],{"class":1955},[292,3729,725],{"class":298},[292,3731,3733,3735,3737,3739,3741],{"class":294,"line":3732},75,[292,3734,2013],{"class":1962},[292,3736,1966],{"class":298},[292,3738,2018],{"class":298},[292,3740,2228],{"class":323},[292,3742,1972],{"class":298},[292,3744,3746],{"class":294,"line":3745},76,[292,3747,1456],{"class":298},[292,3749,3751,3753,3755],{"class":294,"line":3750},77,[292,3752,394],{"class":298},[292,3754,1943],{"class":302},[292,3756,310],{"class":298},[1943,3758,3759],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sqsOY, html code.shiki .sqsOY{--shiki-light:#8796B0;--shiki-default:#B2CCD6;--shiki-dark:#B2CCD6}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}",{"title":288,"searchDepth":295,"depth":313,"links":3761},[],"Learn how to use Vue's Transition and dynamic components in TresJS","md",null,{"thumbnail":3766},"/recipes/dynamic-transition.png",{"title":202,"description":3762},"TuX8UqZYiiTIqNQFUAysps-4aFJGjWi9DgETy5ebPkg",[3770,3772],{"title":198,"path":199,"stem":200,"description":3771,"children":-1},"Learn how to integrate Tweakpane with TresJS for interactive 3D controls",{"title":206,"path":207,"stem":208,"description":3773,"children":-1},"Find answers and support from the community.",1774953664138]