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