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