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