[{"data":1,"prerenderedAt":1718},["ShallowReactive",2],{"navigation":3,"/cookbook/model-animation":256,"/cookbook/model-animation-surround":1713},[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":207,"body":258,"description":1706,"extension":1707,"links":1708,"meta":1709,"navigation":39,"path":208,"seo":1711,"stem":209,"__hash__":1712},"docs/5.cookbook/3.model-animation.md",{"type":259,"value":260,"toc":1701},"minimark",[261,264,268,273,276,306,323,330,334,751,755,1697],[262,263],"examples-model-animation",{},[265,266,267],"p",{},"Let's bring your 3D models to life with animations in TresJS. This guide covers loading animated models and controlling their playback.",[269,270,272],"h2",{"id":271},"where-to-find-models","Where to find models?",[265,274,275],{},"You can find quality 3D models for your projects in various online repositories. Here are some hand picked sources from the TresJS community:",[277,278,279,290,298],"ul",{},[280,281,282,289],"li",{},[283,284,288],"a",{"href":285,"rel":286},"https://poly.pizza/",[287],"nofollow","poly.pizza"," - A collection of free 3D models.",[280,291,292,297],{},[283,293,296],{"href":294,"rel":295},"https://market.pmnd.rs/",[287],"Pmndrs Marketplace"," - A marketplace for 3D assets. All free",[280,299,300,305],{},[283,301,304],{"href":302,"rel":303},"https://kaylousberg.itch.io/",[287],"KayKit Character Packs"," - Free and paid character packs. Animated, all CC0, a personal favorite of ours.",[265,307,308,309,313,314,322],{},"For this tutorial we will use a simplified version of the ",[310,311,312],"strong",{},"KayKit Knight character",", you can download it directly from ",[315,316,321],"u-button",{"variant":317,"icon":318,"download":39,"external":319,":to":320},"ghost","i-lucide-arrow-down","","/models/knight/Knight.glb","here",".",[265,324,325],{},[326,327],"img",{"alt":328,"src":329},"Knight model","/recipes/model-n-animations/kaykit-simplified-knight.png",[269,331,333],{"id":332},"loading-animated-models","Loading Animated Models",[335,336,337,342,350,374,378,391,519,529,547,551,554,559],"steps",{},[338,339,341],"h3",{"id":340},"install-cientos","Install cientos",[265,343,344,345,349],{},"If you haven't already, install the ",[346,347,348],"code",{},"@tresjs/cientos"," package, which provides components for loading 3D models.",[351,352,356],"pre",{"className":353,"code":354,"language":355,"meta":319,"style":319},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","npm install @tresjs/cientos\n","bash",[346,357,358],{"__ignoreMap":319},[359,360,363,367,371],"span",{"class":361,"line":362},"line",1,[359,364,366],{"class":365},"sBMFI","npm",[359,368,370],{"class":369},"sfazB"," install",[359,372,373],{"class":369}," @tresjs/cientos\n",[338,375,377],{"id":376},"load-the-model","Load the Model",[265,379,380,381,384,385,387,388,322],{},"Use the ",[346,382,383],{},"useGLTF"," composable from ",[346,386,348],{}," to load your animated model. Add the downloaded GLB file to your public directory in a subfolder like ",[346,389,390],{},"/models/knight/",[351,392,397],{"className":393,"code":394,"filename":395,"language":396,"meta":319,"style":319},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { useGLTF } from '@tresjs/cientos'\n\nconst { state: model, nodes } = useGLTF('/models/knight/Knight.glb')\n\u003C/script>\n","Knight.vue","vue",[346,398,399,430,458,464,509],{"__ignoreMap":319},[359,400,401,405,409,413,416,419,422,425,427],{"class":361,"line":362},[359,402,404],{"class":403},"sMK4o","\u003C",[359,406,408],{"class":407},"swJcz","script",[359,410,412],{"class":411},"spNyl"," setup",[359,414,415],{"class":411}," lang",[359,417,418],{"class":403},"=",[359,420,421],{"class":403},"\"",[359,423,424],{"class":369},"ts",[359,426,421],{"class":403},[359,428,429],{"class":403},">\n",[359,431,433,437,440,444,447,450,453,455],{"class":361,"line":432},2,[359,434,436],{"class":435},"s7zQu","import",[359,438,439],{"class":403}," {",[359,441,443],{"class":442},"sTEyZ"," useGLTF",[359,445,446],{"class":403}," }",[359,448,449],{"class":435}," from",[359,451,452],{"class":403}," '",[359,454,348],{"class":369},[359,456,457],{"class":403},"'\n",[359,459,461],{"class":361,"line":460},3,[359,462,463],{"emptyLinePlaceholder":39},"\n",[359,465,467,470,472,475,478,481,484,487,490,493,496,499,502,504,506],{"class":361,"line":466},4,[359,468,469],{"class":411},"const",[359,471,439],{"class":403},[359,473,474],{"class":407}," state",[359,476,477],{"class":403},":",[359,479,480],{"class":442}," model",[359,482,483],{"class":403},",",[359,485,486],{"class":442}," nodes ",[359,488,489],{"class":403},"}",[359,491,492],{"class":403}," =",[359,494,443],{"class":495},"s2Zo4",[359,497,498],{"class":442},"(",[359,500,501],{"class":403},"'",[359,503,320],{"class":369},[359,505,501],{"class":403},[359,507,508],{"class":442},")\n",[359,510,512,515,517],{"class":361,"line":511},5,[359,513,514],{"class":403},"\u003C/",[359,516,408],{"class":407},[359,518,429],{"class":403},[520,521,523],"read-more",{"to":522},"https://cientos.tresjs.org/api/loaders/use-gltf",[265,524,525,526,528],{},"Learn more about the ",[346,527,383],{}," composable.",[530,531,532],"tip",{},[265,533,534,535,538,539,542,543,322],{},"Instead of wiring the model up by hand, you can generate a typed component from it with\n",[346,536,537],{},"npx @tresjs/cli gltf public/models/knight/Knight.glb",". It exposes the clips as\n",[346,540,541],{},"actions",", keyed by a union of their names. See ",[283,544,545],{"href":187},[346,546,186],{},[338,548,550],{"id":549},"add-rig-to-the-scene","Add Rig to the Scene",[265,552,553],{},"The Rig is the root object that contains the entire model and its animations. You can access it from the individual nodes.",[530,555,556],{},[265,557,558],{},"The Rig might be named differently depending on the model. Check the model's structure to find the correct root object.",[351,560,562],{"className":393,"code":561,"filename":395,"language":396,"meta":319,"style":319},"\u003Cscript setup lang=\"ts\">\nimport { useGLTF } from '@tresjs/cientos'\n\nconst { state: model, nodes } = useGLTF('/models/knight/Knight.glb')\n\n// We access the rig from the individual nodes\nconst rig = computed(() => nodes.value.Rig)\n\u003C/script>\n\n\u003Ctemplate>\n   \u003Cprimitive v-if=\"rig\" :object=\"rig\" />\n\u003C/template>\n",[346,563,564,584,602,606,638,642,649,683,692,697,707,742],{"__ignoreMap":319},[359,565,566,568,570,572,574,576,578,580,582],{"class":361,"line":362},[359,567,404],{"class":403},[359,569,408],{"class":407},[359,571,412],{"class":411},[359,573,415],{"class":411},[359,575,418],{"class":403},[359,577,421],{"class":403},[359,579,424],{"class":369},[359,581,421],{"class":403},[359,583,429],{"class":403},[359,585,586,588,590,592,594,596,598,600],{"class":361,"line":432},[359,587,436],{"class":435},[359,589,439],{"class":403},[359,591,443],{"class":442},[359,593,446],{"class":403},[359,595,449],{"class":435},[359,597,452],{"class":403},[359,599,348],{"class":369},[359,601,457],{"class":403},[359,603,604],{"class":361,"line":460},[359,605,463],{"emptyLinePlaceholder":39},[359,607,608,610,612,614,616,618,620,622,624,626,628,630,632,634,636],{"class":361,"line":466},[359,609,469],{"class":411},[359,611,439],{"class":403},[359,613,474],{"class":407},[359,615,477],{"class":403},[359,617,480],{"class":442},[359,619,483],{"class":403},[359,621,486],{"class":442},[359,623,489],{"class":403},[359,625,492],{"class":403},[359,627,443],{"class":495},[359,629,498],{"class":442},[359,631,501],{"class":403},[359,633,320],{"class":369},[359,635,501],{"class":403},[359,637,508],{"class":442},[359,639,640],{"class":361,"line":511},[359,641,463],{"emptyLinePlaceholder":39},[359,643,645],{"class":361,"line":644},6,[359,646,648],{"class":647},"sHwdD","// We access the rig from the individual nodes\n",[359,650,652,654,657,659,662,664,667,670,673,675,678,680],{"class":361,"line":651},7,[359,653,469],{"class":411},[359,655,656],{"class":442}," rig ",[359,658,418],{"class":403},[359,660,661],{"class":495}," computed",[359,663,498],{"class":442},[359,665,666],{"class":403},"()",[359,668,669],{"class":411}," =>",[359,671,672],{"class":442}," nodes",[359,674,322],{"class":403},[359,676,677],{"class":442},"value",[359,679,322],{"class":403},[359,681,682],{"class":442},"Rig)\n",[359,684,686,688,690],{"class":361,"line":685},8,[359,687,514],{"class":403},[359,689,408],{"class":407},[359,691,429],{"class":403},[359,693,695],{"class":361,"line":694},9,[359,696,463],{"emptyLinePlaceholder":39},[359,698,700,702,705],{"class":361,"line":699},10,[359,701,404],{"class":403},[359,703,704],{"class":407},"template",[359,706,429],{"class":403},[359,708,710,713,716,719,721,723,726,728,731,733,735,737,739],{"class":361,"line":709},11,[359,711,712],{"class":403},"   \u003C",[359,714,715],{"class":407},"primitive",[359,717,718],{"class":411}," v-if",[359,720,418],{"class":403},[359,722,421],{"class":403},[359,724,725],{"class":369},"rig",[359,727,421],{"class":403},[359,729,730],{"class":411}," :object",[359,732,418],{"class":403},[359,734,421],{"class":403},[359,736,725],{"class":369},[359,738,421],{"class":403},[359,740,741],{"class":403}," />\n",[359,743,745,747,749],{"class":361,"line":744},12,[359,746,514],{"class":403},[359,748,704],{"class":407},[359,750,429],{"class":403},[269,752,754],{"id":753},"animation-control","Animation Control",[335,756,757,764,774,958,965,969,976,1022,1026,1033,1079,1083,1094,1663,1668],{},[338,758,380,760,763],{"id":759},"use-the-useanimations-composable",[346,761,762],{},"useAnimations"," Composable",[265,765,766,767,769,770,773],{},"The ",[346,768,762],{}," composable helps manage and play animations from your model. It takes the animations array and the rig as parameters and returns the ",[346,771,772],{},"AnimationClips"," (actions).",[351,775,777],{"className":393,"code":776,"filename":395,"language":396,"meta":319,"style":319},"\u003Cscript setup lang=\"ts\">\nimport { useGLTF, useAnimations } from '@tresjs/cientos'\n\nconst { state: model, nodes } = useGLTF('/models/knight/Knight.glb')\n\nconst animations = computed(() => model.value?.animations || [])\nconst rig = computed(() => nodes.value.Rig)\n\nconst { actions } = useAnimations(animations, rig)\n\u003C/script>\n",[346,778,779,799,822,826,858,862,897,923,927,950],{"__ignoreMap":319},[359,780,781,783,785,787,789,791,793,795,797],{"class":361,"line":362},[359,782,404],{"class":403},[359,784,408],{"class":407},[359,786,412],{"class":411},[359,788,415],{"class":411},[359,790,418],{"class":403},[359,792,421],{"class":403},[359,794,424],{"class":369},[359,796,421],{"class":403},[359,798,429],{"class":403},[359,800,801,803,805,807,809,812,814,816,818,820],{"class":361,"line":432},[359,802,436],{"class":435},[359,804,439],{"class":403},[359,806,443],{"class":442},[359,808,483],{"class":403},[359,810,811],{"class":442}," useAnimations",[359,813,446],{"class":403},[359,815,449],{"class":435},[359,817,452],{"class":403},[359,819,348],{"class":369},[359,821,457],{"class":403},[359,823,824],{"class":361,"line":460},[359,825,463],{"emptyLinePlaceholder":39},[359,827,828,830,832,834,836,838,840,842,844,846,848,850,852,854,856],{"class":361,"line":466},[359,829,469],{"class":411},[359,831,439],{"class":403},[359,833,474],{"class":407},[359,835,477],{"class":403},[359,837,480],{"class":442},[359,839,483],{"class":403},[359,841,486],{"class":442},[359,843,489],{"class":403},[359,845,492],{"class":403},[359,847,443],{"class":495},[359,849,498],{"class":442},[359,851,501],{"class":403},[359,853,320],{"class":369},[359,855,501],{"class":403},[359,857,508],{"class":442},[359,859,860],{"class":361,"line":511},[359,861,463],{"emptyLinePlaceholder":39},[359,863,864,866,869,871,873,875,877,879,881,883,885,888,891,894],{"class":361,"line":644},[359,865,469],{"class":411},[359,867,868],{"class":442}," animations ",[359,870,418],{"class":403},[359,872,661],{"class":495},[359,874,498],{"class":442},[359,876,666],{"class":403},[359,878,669],{"class":411},[359,880,480],{"class":442},[359,882,322],{"class":403},[359,884,677],{"class":442},[359,886,887],{"class":403},"?.",[359,889,890],{"class":442},"animations ",[359,892,893],{"class":403},"||",[359,895,896],{"class":442}," [])\n",[359,898,899,901,903,905,907,909,911,913,915,917,919,921],{"class":361,"line":651},[359,900,469],{"class":411},[359,902,656],{"class":442},[359,904,418],{"class":403},[359,906,661],{"class":495},[359,908,498],{"class":442},[359,910,666],{"class":403},[359,912,669],{"class":411},[359,914,672],{"class":442},[359,916,322],{"class":403},[359,918,677],{"class":442},[359,920,322],{"class":403},[359,922,682],{"class":442},[359,924,925],{"class":361,"line":685},[359,926,463],{"emptyLinePlaceholder":39},[359,928,929,931,933,936,938,940,942,945,947],{"class":361,"line":694},[359,930,469],{"class":411},[359,932,439],{"class":403},[359,934,935],{"class":442}," actions ",[359,937,489],{"class":403},[359,939,492],{"class":403},[359,941,811],{"class":495},[359,943,944],{"class":442},"(animations",[359,946,483],{"class":403},[359,948,949],{"class":442}," rig)\n",[359,951,952,954,956],{"class":361,"line":699},[359,953,514],{"class":403},[359,955,408],{"class":407},[359,957,429],{"class":403},[520,959,961],{"to":960},"https://cientos.tresjs.org/api/miscellaneous/use-animations",[265,962,525,963,528],{},[346,964,762],{},[338,966,968],{"id":967},"play-an-animation","Play an Animation",[265,970,971,972,975],{},"You can play an animation by calling the ",[346,973,974],{},"play"," method on the desired action. For example, to play the \"Cheer\" animation:",[351,977,980],{"className":978,"code":979,"language":424,"meta":319,"style":319},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","const { actions } = useAnimations(animations, rig)\n\nactions.Cheer?.play()\n",[346,981,982,1002,1006],{"__ignoreMap":319},[359,983,984,986,988,990,992,994,996,998,1000],{"class":361,"line":362},[359,985,469],{"class":411},[359,987,439],{"class":403},[359,989,935],{"class":442},[359,991,489],{"class":403},[359,993,492],{"class":403},[359,995,811],{"class":495},[359,997,944],{"class":442},[359,999,483],{"class":403},[359,1001,949],{"class":442},[359,1003,1004],{"class":361,"line":432},[359,1005,463],{"emptyLinePlaceholder":39},[359,1007,1008,1010,1012,1015,1017,1019],{"class":361,"line":460},[359,1009,541],{"class":442},[359,1011,322],{"class":403},[359,1013,1014],{"class":442},"Cheer",[359,1016,887],{"class":403},[359,1018,974],{"class":495},[359,1020,1021],{"class":442},"()\n",[338,1023,1025],{"id":1024},"set-animation-loop","Set animation loop",[265,1027,1028,1029,1032],{},"You can set the loop mode of an animation using the ",[346,1030,1031],{},"setLoop"," method. For example, to make the \"Cheer\" animation loop indefinitely:",[351,1034,1036],{"className":978,"code":1035,"language":424,"meta":319,"style":319},"actions.Cheer?.setLoop(THREE.LoopRepeat, Infinity)\nactions.Cheer?.play()\n",[346,1037,1038,1065],{"__ignoreMap":319},[359,1039,1040,1042,1044,1046,1048,1050,1053,1055,1058,1060,1063],{"class":361,"line":362},[359,1041,541],{"class":442},[359,1043,322],{"class":403},[359,1045,1014],{"class":442},[359,1047,887],{"class":403},[359,1049,1031],{"class":495},[359,1051,1052],{"class":442},"(THREE",[359,1054,322],{"class":403},[359,1056,1057],{"class":442},"LoopRepeat",[359,1059,483],{"class":403},[359,1061,1062],{"class":403}," Infinity",[359,1064,508],{"class":442},[359,1066,1067,1069,1071,1073,1075,1077],{"class":361,"line":432},[359,1068,541],{"class":442},[359,1070,322],{"class":403},[359,1072,1014],{"class":442},[359,1074,887],{"class":403},[359,1076,974],{"class":495},[359,1078,1021],{"class":442},[338,1080,1082],{"id":1081},"smooth-animation-transitions","Smooth Animation Transitions",[265,1084,1085,1086,1089,1090,1093],{},"To create smooth transitions between animations, use the ",[346,1087,1088],{},"fadeIn"," and ",[346,1091,1092],{},"fadeOut"," methods. This prevents abrupt changes and creates more natural character movement:",[351,1095,1097],{"className":393,"code":1096,"filename":395,"language":396,"meta":319,"style":319},"\u003Cscript setup lang=\"ts\">\nimport { useGLTF, useAnimations } from '@tresjs/cientos'\nimport type { AnimationAction } from 'three'\n\nconst { state: model, nodes } = useGLTF('/models/knight/Knight.glb')\nconst animations = computed(() => model.value?.animations || [])\nconst rig = computed(() => nodes.value.Rig)\nconst { actions } = useAnimations(animations, rig)\n\nlet currentAction = ref\u003CAnimationAction | null>(null)\n\nconst transitionToAnimation = (animationName: string, duration = 0.5) => {\n  const nextAction = actions.value[animationName]\n  if (!nextAction) return\n\n  // Fade out current animation\n  if (currentAction.value) {\n    currentAction.value.fadeOut(duration)\n  }\n\n  // Fade in new animation\n  nextAction.reset()\n  nextAction.setEffectiveWeight(1)\n  nextAction.play()\n  nextAction.fadeIn(duration)\n\n  currentAction.value = nextAction\n}\n\n// Example: Transition from Idle to Cheer\nconst playCheerAnimation = () => {\n  transitionToAnimation('Cheer', 0.3)\n}\n\nconst playIdleAnimation = () => {\n  transitionToAnimation('Idle', 0.3)\n}\n\u003C/script>\n",[346,1098,1099,1119,1141,1164,1168,1200,1230,1256,1276,1280,1314,1318,1358,1384,1404,1409,1415,1434,1455,1461,1466,1472,1485,1502,1513,1528,1533,1548,1554,1559,1565,1582,1603,1608,1613,1629,1649,1654],{"__ignoreMap":319},[359,1100,1101,1103,1105,1107,1109,1111,1113,1115,1117],{"class":361,"line":362},[359,1102,404],{"class":403},[359,1104,408],{"class":407},[359,1106,412],{"class":411},[359,1108,415],{"class":411},[359,1110,418],{"class":403},[359,1112,421],{"class":403},[359,1114,424],{"class":369},[359,1116,421],{"class":403},[359,1118,429],{"class":403},[359,1120,1121,1123,1125,1127,1129,1131,1133,1135,1137,1139],{"class":361,"line":432},[359,1122,436],{"class":435},[359,1124,439],{"class":403},[359,1126,443],{"class":442},[359,1128,483],{"class":403},[359,1130,811],{"class":442},[359,1132,446],{"class":403},[359,1134,449],{"class":435},[359,1136,452],{"class":403},[359,1138,348],{"class":369},[359,1140,457],{"class":403},[359,1142,1143,1145,1148,1150,1153,1155,1157,1159,1162],{"class":361,"line":460},[359,1144,436],{"class":435},[359,1146,1147],{"class":435}," type",[359,1149,439],{"class":403},[359,1151,1152],{"class":442}," AnimationAction",[359,1154,446],{"class":403},[359,1156,449],{"class":435},[359,1158,452],{"class":403},[359,1160,1161],{"class":369},"three",[359,1163,457],{"class":403},[359,1165,1166],{"class":361,"line":466},[359,1167,463],{"emptyLinePlaceholder":39},[359,1169,1170,1172,1174,1176,1178,1180,1182,1184,1186,1188,1190,1192,1194,1196,1198],{"class":361,"line":511},[359,1171,469],{"class":411},[359,1173,439],{"class":403},[359,1175,474],{"class":407},[359,1177,477],{"class":403},[359,1179,480],{"class":442},[359,1181,483],{"class":403},[359,1183,486],{"class":442},[359,1185,489],{"class":403},[359,1187,492],{"class":403},[359,1189,443],{"class":495},[359,1191,498],{"class":442},[359,1193,501],{"class":403},[359,1195,320],{"class":369},[359,1197,501],{"class":403},[359,1199,508],{"class":442},[359,1201,1202,1204,1206,1208,1210,1212,1214,1216,1218,1220,1222,1224,1226,1228],{"class":361,"line":644},[359,1203,469],{"class":411},[359,1205,868],{"class":442},[359,1207,418],{"class":403},[359,1209,661],{"class":495},[359,1211,498],{"class":442},[359,1213,666],{"class":403},[359,1215,669],{"class":411},[359,1217,480],{"class":442},[359,1219,322],{"class":403},[359,1221,677],{"class":442},[359,1223,887],{"class":403},[359,1225,890],{"class":442},[359,1227,893],{"class":403},[359,1229,896],{"class":442},[359,1231,1232,1234,1236,1238,1240,1242,1244,1246,1248,1250,1252,1254],{"class":361,"line":651},[359,1233,469],{"class":411},[359,1235,656],{"class":442},[359,1237,418],{"class":403},[359,1239,661],{"class":495},[359,1241,498],{"class":442},[359,1243,666],{"class":403},[359,1245,669],{"class":411},[359,1247,672],{"class":442},[359,1249,322],{"class":403},[359,1251,677],{"class":442},[359,1253,322],{"class":403},[359,1255,682],{"class":442},[359,1257,1258,1260,1262,1264,1266,1268,1270,1272,1274],{"class":361,"line":685},[359,1259,469],{"class":411},[359,1261,439],{"class":403},[359,1263,935],{"class":442},[359,1265,489],{"class":403},[359,1267,492],{"class":403},[359,1269,811],{"class":495},[359,1271,944],{"class":442},[359,1273,483],{"class":403},[359,1275,949],{"class":442},[359,1277,1278],{"class":361,"line":694},[359,1279,463],{"emptyLinePlaceholder":39},[359,1281,1282,1285,1288,1290,1293,1295,1298,1301,1304,1307,1309,1312],{"class":361,"line":699},[359,1283,1284],{"class":411},"let",[359,1286,1287],{"class":442}," currentAction ",[359,1289,418],{"class":403},[359,1291,1292],{"class":495}," ref",[359,1294,404],{"class":403},[359,1296,1297],{"class":365},"AnimationAction",[359,1299,1300],{"class":403}," |",[359,1302,1303],{"class":365}," null",[359,1305,1306],{"class":403},">",[359,1308,498],{"class":442},[359,1310,1311],{"class":403},"null",[359,1313,508],{"class":442},[359,1315,1316],{"class":361,"line":709},[359,1317,463],{"emptyLinePlaceholder":39},[359,1319,1320,1322,1325,1327,1330,1334,1336,1339,1341,1344,1346,1350,1353,1355],{"class":361,"line":744},[359,1321,469],{"class":411},[359,1323,1324],{"class":442}," transitionToAnimation ",[359,1326,418],{"class":403},[359,1328,1329],{"class":403}," (",[359,1331,1333],{"class":1332},"sHdIc","animationName",[359,1335,477],{"class":403},[359,1337,1338],{"class":365}," string",[359,1340,483],{"class":403},[359,1342,1343],{"class":1332}," duration",[359,1345,492],{"class":403},[359,1347,1349],{"class":1348},"sbssI"," 0.5",[359,1351,1352],{"class":403},")",[359,1354,669],{"class":411},[359,1356,1357],{"class":403}," {\n",[359,1359,1361,1364,1367,1369,1372,1374,1376,1379,1381],{"class":361,"line":1360},13,[359,1362,1363],{"class":411},"  const",[359,1365,1366],{"class":442}," nextAction",[359,1368,492],{"class":403},[359,1370,1371],{"class":442}," actions",[359,1373,322],{"class":403},[359,1375,677],{"class":442},[359,1377,1378],{"class":407},"[",[359,1380,1333],{"class":442},[359,1382,1383],{"class":407},"]\n",[359,1385,1387,1390,1392,1395,1398,1401],{"class":361,"line":1386},14,[359,1388,1389],{"class":435},"  if",[359,1391,1329],{"class":407},[359,1393,1394],{"class":403},"!",[359,1396,1397],{"class":442},"nextAction",[359,1399,1400],{"class":407},") ",[359,1402,1403],{"class":435},"return\n",[359,1405,1407],{"class":361,"line":1406},15,[359,1408,463],{"emptyLinePlaceholder":39},[359,1410,1412],{"class":361,"line":1411},16,[359,1413,1414],{"class":647},"  // Fade out current animation\n",[359,1416,1418,1420,1422,1425,1427,1429,1431],{"class":361,"line":1417},17,[359,1419,1389],{"class":435},[359,1421,1329],{"class":407},[359,1423,1424],{"class":442},"currentAction",[359,1426,322],{"class":403},[359,1428,677],{"class":442},[359,1430,1400],{"class":407},[359,1432,1433],{"class":403},"{\n",[359,1435,1437,1440,1442,1444,1446,1448,1450,1453],{"class":361,"line":1436},18,[359,1438,1439],{"class":442},"    currentAction",[359,1441,322],{"class":403},[359,1443,677],{"class":442},[359,1445,322],{"class":403},[359,1447,1092],{"class":495},[359,1449,498],{"class":407},[359,1451,1452],{"class":442},"duration",[359,1454,508],{"class":407},[359,1456,1458],{"class":361,"line":1457},19,[359,1459,1460],{"class":403},"  }\n",[359,1462,1464],{"class":361,"line":1463},20,[359,1465,463],{"emptyLinePlaceholder":39},[359,1467,1469],{"class":361,"line":1468},21,[359,1470,1471],{"class":647},"  // Fade in new animation\n",[359,1473,1475,1478,1480,1483],{"class":361,"line":1474},22,[359,1476,1477],{"class":442},"  nextAction",[359,1479,322],{"class":403},[359,1481,1482],{"class":495},"reset",[359,1484,1021],{"class":407},[359,1486,1488,1490,1492,1495,1497,1500],{"class":361,"line":1487},23,[359,1489,1477],{"class":442},[359,1491,322],{"class":403},[359,1493,1494],{"class":495},"setEffectiveWeight",[359,1496,498],{"class":407},[359,1498,1499],{"class":1348},"1",[359,1501,508],{"class":407},[359,1503,1505,1507,1509,1511],{"class":361,"line":1504},24,[359,1506,1477],{"class":442},[359,1508,322],{"class":403},[359,1510,974],{"class":495},[359,1512,1021],{"class":407},[359,1514,1516,1518,1520,1522,1524,1526],{"class":361,"line":1515},25,[359,1517,1477],{"class":442},[359,1519,322],{"class":403},[359,1521,1088],{"class":495},[359,1523,498],{"class":407},[359,1525,1452],{"class":442},[359,1527,508],{"class":407},[359,1529,1531],{"class":361,"line":1530},26,[359,1532,463],{"emptyLinePlaceholder":39},[359,1534,1536,1539,1541,1543,1545],{"class":361,"line":1535},27,[359,1537,1538],{"class":442},"  currentAction",[359,1540,322],{"class":403},[359,1542,677],{"class":442},[359,1544,492],{"class":403},[359,1546,1547],{"class":442}," nextAction\n",[359,1549,1551],{"class":361,"line":1550},28,[359,1552,1553],{"class":403},"}\n",[359,1555,1557],{"class":361,"line":1556},29,[359,1558,463],{"emptyLinePlaceholder":39},[359,1560,1562],{"class":361,"line":1561},30,[359,1563,1564],{"class":647},"// Example: Transition from Idle to Cheer\n",[359,1566,1568,1570,1573,1575,1578,1580],{"class":361,"line":1567},31,[359,1569,469],{"class":411},[359,1571,1572],{"class":442}," playCheerAnimation ",[359,1574,418],{"class":403},[359,1576,1577],{"class":403}," ()",[359,1579,669],{"class":411},[359,1581,1357],{"class":403},[359,1583,1585,1588,1590,1592,1594,1596,1598,1601],{"class":361,"line":1584},32,[359,1586,1587],{"class":495},"  transitionToAnimation",[359,1589,498],{"class":407},[359,1591,501],{"class":403},[359,1593,1014],{"class":369},[359,1595,501],{"class":403},[359,1597,483],{"class":403},[359,1599,1600],{"class":1348}," 0.3",[359,1602,508],{"class":407},[359,1604,1606],{"class":361,"line":1605},33,[359,1607,1553],{"class":403},[359,1609,1611],{"class":361,"line":1610},34,[359,1612,463],{"emptyLinePlaceholder":39},[359,1614,1616,1618,1621,1623,1625,1627],{"class":361,"line":1615},35,[359,1617,469],{"class":411},[359,1619,1620],{"class":442}," playIdleAnimation ",[359,1622,418],{"class":403},[359,1624,1577],{"class":403},[359,1626,669],{"class":411},[359,1628,1357],{"class":403},[359,1630,1632,1634,1636,1638,1641,1643,1645,1647],{"class":361,"line":1631},36,[359,1633,1587],{"class":495},[359,1635,498],{"class":407},[359,1637,501],{"class":403},[359,1639,1640],{"class":369},"Idle",[359,1642,501],{"class":403},[359,1644,483],{"class":403},[359,1646,1600],{"class":1348},[359,1648,508],{"class":407},[359,1650,1652],{"class":361,"line":1651},37,[359,1653,1553],{"class":403},[359,1655,1657,1659,1661],{"class":361,"line":1656},38,[359,1658,514],{"class":403},[359,1660,408],{"class":407},[359,1662,429],{"class":403},[265,1664,1665],{},[310,1666,1667],{},"Key points about animation transitions:",[277,1669,1670,1676,1682,1688,1694],{},[280,1671,1672,1675],{},[346,1673,1674],{},"fadeOut(duration)"," gradually reduces the animation's influence over the specified duration",[280,1677,1678,1681],{},[346,1679,1680],{},"fadeIn(duration)"," gradually increases the animation's influence over the specified duration",[280,1683,1684,1687],{},[346,1685,1686],{},"reset()"," resets the animation to its starting frame",[280,1689,1690,1693],{},[346,1691,1692],{},"setEffectiveWeight(1)"," ensures the animation has full influence when active",[280,1695,1696],{},"Shorter durations (0.1-0.3s) work well for quick actions, longer ones (0.5-1s) for smoother character transitions",[1698,1699,1700],"style",{},"html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}",{"title":319,"searchDepth":362,"depth":432,"links":1702},[1703,1704,1705],{"id":271,"depth":432,"text":272},{"id":332,"depth":432,"text":333},{"id":753,"depth":432,"text":754},"Learn how to animate 3D models in TresJS","md",null,{"thumbnail":1710},"/recipes/model-n-animations/model-n-animations.png",{"title":207,"description":1706},"LqvFMChcIpF4MeE0JUAHf4ENPQMX0-XKmtaAyXy0AQo",[1714,1716],{"title":203,"path":204,"stem":205,"description":1715,"children":-1},"Learn how to create basic animations in TresJS",{"title":211,"path":212,"stem":213,"description":1717,"children":-1},"Learn how to create complex animations using GSAP with TresJS",1785417175358]