[{"data":1,"prerenderedAt":1685},["ShallowReactive",2],{"navigation":3,"/cookbook/model-animation":239,"/cookbook/model-animation-surround":1680},[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":1673,"extension":1674,"links":1675,"meta":1676,"navigation":39,"path":191,"seo":1678,"stem":192,"__hash__":1679},"docs/4.cookbook/3.model-animation.md",{"type":242,"value":243,"toc":1668},"minimark",[244,247,251,256,259,289,306,313,317,717,721,1664],[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,708],{"__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,699,701,703,705],{"class":344,"line":675},11,[342,677,678],{"class":386},"   \u003C",[342,680,681],{"class":390},"primitive",[342,683,684],{"class":394}," v-if",[342,686,401],{"class":386},[342,688,404],{"class":386},[342,690,691],{"class":352},"rig",[342,693,404],{"class":386},[342,695,696],{"class":394}," :object",[342,698,401],{"class":386},[342,700,404],{"class":386},[342,702,691],{"class":352},[342,704,404],{"class":386},[342,706,707],{"class":386}," />\n",[342,709,711,713,715],{"class":344,"line":710},12,[342,712,497],{"class":386},[342,714,670],{"class":390},[342,716,412],{"class":386},[252,718,720],{"id":719},"animation-control","Animation Control",[318,722,723,730,740,924,931,935,942,989,993,1000,1046,1050,1061,1630,1635],{},[321,724,363,726,729],{"id":725},"use-the-useanimations-composable",[329,727,728],{},"useAnimations"," Composable",[248,731,732,733,735,736,739],{},"The ",[329,734,728],{}," composable helps manage and play animations from your model. It takes the animations array and the rig as parameters and returns the ",[329,737,738],{},"AnimationClips"," (actions).",[334,741,743],{"className":376,"code":742,"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,744,745,765,788,792,824,828,863,889,893,916],{"__ignoreMap":302},[342,746,747,749,751,753,755,757,759,761,763],{"class":344,"line":345},[342,748,387],{"class":386},[342,750,391],{"class":390},[342,752,395],{"class":394},[342,754,398],{"class":394},[342,756,401],{"class":386},[342,758,404],{"class":386},[342,760,407],{"class":352},[342,762,404],{"class":386},[342,764,412],{"class":386},[342,766,767,769,771,773,775,778,780,782,784,786],{"class":344,"line":415},[342,768,419],{"class":418},[342,770,422],{"class":386},[342,772,426],{"class":425},[342,774,466],{"class":386},[342,776,777],{"class":425}," useAnimations",[342,779,429],{"class":386},[342,781,432],{"class":418},[342,783,435],{"class":386},[342,785,331],{"class":352},[342,787,440],{"class":386},[342,789,790],{"class":344,"line":443},[342,791,446],{"emptyLinePlaceholder":39},[342,793,794,796,798,800,802,804,806,808,810,812,814,816,818,820,822],{"class":344,"line":449},[342,795,452],{"class":394},[342,797,422],{"class":386},[342,799,457],{"class":390},[342,801,460],{"class":386},[342,803,463],{"class":425},[342,805,466],{"class":386},[342,807,469],{"class":425},[342,809,472],{"class":386},[342,811,475],{"class":386},[342,813,426],{"class":478},[342,815,481],{"class":425},[342,817,484],{"class":386},[342,819,303],{"class":352},[342,821,484],{"class":386},[342,823,491],{"class":425},[342,825,826],{"class":344,"line":494},[342,827,446],{"emptyLinePlaceholder":39},[342,829,830,832,835,837,839,841,843,845,847,849,851,854,857,860],{"class":344,"line":610},[342,831,452],{"class":394},[342,833,834],{"class":425}," animations ",[342,836,401],{"class":386},[342,838,627],{"class":478},[342,840,481],{"class":425},[342,842,632],{"class":386},[342,844,635],{"class":394},[342,846,463],{"class":425},[342,848,305],{"class":386},[342,850,643],{"class":425},[342,852,853],{"class":386},"?.",[342,855,856],{"class":425},"animations ",[342,858,859],{"class":386},"||",[342,861,862],{"class":425}," [])\n",[342,864,865,867,869,871,873,875,877,879,881,883,885,887],{"class":344,"line":617},[342,866,452],{"class":394},[342,868,622],{"class":425},[342,870,401],{"class":386},[342,872,627],{"class":478},[342,874,481],{"class":425},[342,876,632],{"class":386},[342,878,635],{"class":394},[342,880,638],{"class":425},[342,882,305],{"class":386},[342,884,643],{"class":425},[342,886,305],{"class":386},[342,888,648],{"class":425},[342,890,891],{"class":344,"line":651},[342,892,446],{"emptyLinePlaceholder":39},[342,894,895,897,899,902,904,906,908,911,913],{"class":344,"line":660},[342,896,452],{"class":394},[342,898,422],{"class":386},[342,900,901],{"class":425}," actions ",[342,903,472],{"class":386},[342,905,475],{"class":386},[342,907,777],{"class":478},[342,909,910],{"class":425},"(animations",[342,912,466],{"class":386},[342,914,915],{"class":425}," rig)\n",[342,917,918,920,922],{"class":344,"line":665},[342,919,497],{"class":386},[342,921,391],{"class":390},[342,923,412],{"class":386},[503,925,927],{"to":926},"https://cientos.tresjs.org/guide/abstractions/use-animations.html",[248,928,508,929,511],{},[329,930,728],{},[321,932,934],{"id":933},"play-an-animation","Play an Animation",[248,936,937,938,941],{},"You can play an animation by calling the ",[329,939,940],{},"play"," method on the desired action. For example, to play the \"Cheer\" animation:",[334,943,946],{"className":944,"code":945,"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,947,948,968,972],{"__ignoreMap":302},[342,949,950,952,954,956,958,960,962,964,966],{"class":344,"line":345},[342,951,452],{"class":394},[342,953,422],{"class":386},[342,955,901],{"class":425},[342,957,472],{"class":386},[342,959,475],{"class":386},[342,961,777],{"class":478},[342,963,910],{"class":425},[342,965,466],{"class":386},[342,967,915],{"class":425},[342,969,970],{"class":344,"line":415},[342,971,446],{"emptyLinePlaceholder":39},[342,973,974,977,979,982,984,986],{"class":344,"line":443},[342,975,976],{"class":425},"actions",[342,978,305],{"class":386},[342,980,981],{"class":425},"Cheer",[342,983,853],{"class":386},[342,985,940],{"class":478},[342,987,988],{"class":425},"()\n",[321,990,992],{"id":991},"set-animation-loop","Set animation loop",[248,994,995,996,999],{},"You can set the loop mode of an animation using the ",[329,997,998],{},"setLoop"," method. For example, to make the \"Cheer\" animation loop indefinitely:",[334,1001,1003],{"className":944,"code":1002,"language":407,"meta":302,"style":302},"actions.Cheer?.setLoop(THREE.LoopRepeat, Infinity)\nactions.Cheer?.play()\n",[329,1004,1005,1032],{"__ignoreMap":302},[342,1006,1007,1009,1011,1013,1015,1017,1020,1022,1025,1027,1030],{"class":344,"line":345},[342,1008,976],{"class":425},[342,1010,305],{"class":386},[342,1012,981],{"class":425},[342,1014,853],{"class":386},[342,1016,998],{"class":478},[342,1018,1019],{"class":425},"(THREE",[342,1021,305],{"class":386},[342,1023,1024],{"class":425},"LoopRepeat",[342,1026,466],{"class":386},[342,1028,1029],{"class":386}," Infinity",[342,1031,491],{"class":425},[342,1033,1034,1036,1038,1040,1042,1044],{"class":344,"line":415},[342,1035,976],{"class":425},[342,1037,305],{"class":386},[342,1039,981],{"class":425},[342,1041,853],{"class":386},[342,1043,940],{"class":478},[342,1045,988],{"class":425},[321,1047,1049],{"id":1048},"smooth-animation-transitions","Smooth Animation Transitions",[248,1051,1052,1053,1056,1057,1060],{},"To create smooth transitions between animations, use the ",[329,1054,1055],{},"fadeIn"," and ",[329,1058,1059],{},"fadeOut"," methods. This prevents abrupt changes and creates more natural character movement:",[334,1062,1064],{"className":376,"code":1063,"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,1065,1066,1086,1108,1131,1135,1167,1197,1223,1243,1247,1281,1285,1325,1351,1371,1376,1382,1401,1422,1428,1433,1439,1452,1469,1480,1495,1500,1515,1521,1526,1532,1549,1570,1575,1580,1596,1616,1621],{"__ignoreMap":302},[342,1067,1068,1070,1072,1074,1076,1078,1080,1082,1084],{"class":344,"line":345},[342,1069,387],{"class":386},[342,1071,391],{"class":390},[342,1073,395],{"class":394},[342,1075,398],{"class":394},[342,1077,401],{"class":386},[342,1079,404],{"class":386},[342,1081,407],{"class":352},[342,1083,404],{"class":386},[342,1085,412],{"class":386},[342,1087,1088,1090,1092,1094,1096,1098,1100,1102,1104,1106],{"class":344,"line":415},[342,1089,419],{"class":418},[342,1091,422],{"class":386},[342,1093,426],{"class":425},[342,1095,466],{"class":386},[342,1097,777],{"class":425},[342,1099,429],{"class":386},[342,1101,432],{"class":418},[342,1103,435],{"class":386},[342,1105,331],{"class":352},[342,1107,440],{"class":386},[342,1109,1110,1112,1115,1117,1120,1122,1124,1126,1129],{"class":344,"line":443},[342,1111,419],{"class":418},[342,1113,1114],{"class":418}," type",[342,1116,422],{"class":386},[342,1118,1119],{"class":425}," AnimationAction",[342,1121,429],{"class":386},[342,1123,432],{"class":418},[342,1125,435],{"class":386},[342,1127,1128],{"class":352},"three",[342,1130,440],{"class":386},[342,1132,1133],{"class":344,"line":449},[342,1134,446],{"emptyLinePlaceholder":39},[342,1136,1137,1139,1141,1143,1145,1147,1149,1151,1153,1155,1157,1159,1161,1163,1165],{"class":344,"line":494},[342,1138,452],{"class":394},[342,1140,422],{"class":386},[342,1142,457],{"class":390},[342,1144,460],{"class":386},[342,1146,463],{"class":425},[342,1148,466],{"class":386},[342,1150,469],{"class":425},[342,1152,472],{"class":386},[342,1154,475],{"class":386},[342,1156,426],{"class":478},[342,1158,481],{"class":425},[342,1160,484],{"class":386},[342,1162,303],{"class":352},[342,1164,484],{"class":386},[342,1166,491],{"class":425},[342,1168,1169,1171,1173,1175,1177,1179,1181,1183,1185,1187,1189,1191,1193,1195],{"class":344,"line":610},[342,1170,452],{"class":394},[342,1172,834],{"class":425},[342,1174,401],{"class":386},[342,1176,627],{"class":478},[342,1178,481],{"class":425},[342,1180,632],{"class":386},[342,1182,635],{"class":394},[342,1184,463],{"class":425},[342,1186,305],{"class":386},[342,1188,643],{"class":425},[342,1190,853],{"class":386},[342,1192,856],{"class":425},[342,1194,859],{"class":386},[342,1196,862],{"class":425},[342,1198,1199,1201,1203,1205,1207,1209,1211,1213,1215,1217,1219,1221],{"class":344,"line":617},[342,1200,452],{"class":394},[342,1202,622],{"class":425},[342,1204,401],{"class":386},[342,1206,627],{"class":478},[342,1208,481],{"class":425},[342,1210,632],{"class":386},[342,1212,635],{"class":394},[342,1214,638],{"class":425},[342,1216,305],{"class":386},[342,1218,643],{"class":425},[342,1220,305],{"class":386},[342,1222,648],{"class":425},[342,1224,1225,1227,1229,1231,1233,1235,1237,1239,1241],{"class":344,"line":651},[342,1226,452],{"class":394},[342,1228,422],{"class":386},[342,1230,901],{"class":425},[342,1232,472],{"class":386},[342,1234,475],{"class":386},[342,1236,777],{"class":478},[342,1238,910],{"class":425},[342,1240,466],{"class":386},[342,1242,915],{"class":425},[342,1244,1245],{"class":344,"line":660},[342,1246,446],{"emptyLinePlaceholder":39},[342,1248,1249,1252,1255,1257,1260,1262,1265,1268,1271,1274,1276,1279],{"class":344,"line":665},[342,1250,1251],{"class":394},"let",[342,1253,1254],{"class":425}," currentAction ",[342,1256,401],{"class":386},[342,1258,1259],{"class":478}," ref",[342,1261,387],{"class":386},[342,1263,1264],{"class":348},"AnimationAction",[342,1266,1267],{"class":386}," |",[342,1269,1270],{"class":348}," null",[342,1272,1273],{"class":386},">",[342,1275,481],{"class":425},[342,1277,1278],{"class":386},"null",[342,1280,491],{"class":425},[342,1282,1283],{"class":344,"line":675},[342,1284,446],{"emptyLinePlaceholder":39},[342,1286,1287,1289,1292,1294,1297,1301,1303,1306,1308,1311,1313,1317,1320,1322],{"class":344,"line":710},[342,1288,452],{"class":394},[342,1290,1291],{"class":425}," transitionToAnimation ",[342,1293,401],{"class":386},[342,1295,1296],{"class":386}," (",[342,1298,1300],{"class":1299},"sHdIc","animationName",[342,1302,460],{"class":386},[342,1304,1305],{"class":348}," string",[342,1307,466],{"class":386},[342,1309,1310],{"class":1299}," duration",[342,1312,475],{"class":386},[342,1314,1316],{"class":1315},"sbssI"," 0.5",[342,1318,1319],{"class":386},")",[342,1321,635],{"class":394},[342,1323,1324],{"class":386}," {\n",[342,1326,1328,1331,1334,1336,1339,1341,1343,1346,1348],{"class":344,"line":1327},13,[342,1329,1330],{"class":394},"  const",[342,1332,1333],{"class":425}," nextAction",[342,1335,475],{"class":386},[342,1337,1338],{"class":425}," actions",[342,1340,305],{"class":386},[342,1342,643],{"class":425},[342,1344,1345],{"class":390},"[",[342,1347,1300],{"class":425},[342,1349,1350],{"class":390},"]\n",[342,1352,1354,1357,1359,1362,1365,1368],{"class":344,"line":1353},14,[342,1355,1356],{"class":418},"  if",[342,1358,1296],{"class":390},[342,1360,1361],{"class":386},"!",[342,1363,1364],{"class":425},"nextAction",[342,1366,1367],{"class":390},") ",[342,1369,1370],{"class":418},"return\n",[342,1372,1374],{"class":344,"line":1373},15,[342,1375,446],{"emptyLinePlaceholder":39},[342,1377,1379],{"class":344,"line":1378},16,[342,1380,1381],{"class":613},"  // Fade out current animation\n",[342,1383,1385,1387,1389,1392,1394,1396,1398],{"class":344,"line":1384},17,[342,1386,1356],{"class":418},[342,1388,1296],{"class":390},[342,1390,1391],{"class":425},"currentAction",[342,1393,305],{"class":386},[342,1395,643],{"class":425},[342,1397,1367],{"class":390},[342,1399,1400],{"class":386},"{\n",[342,1402,1404,1407,1409,1411,1413,1415,1417,1420],{"class":344,"line":1403},18,[342,1405,1406],{"class":425},"    currentAction",[342,1408,305],{"class":386},[342,1410,643],{"class":425},[342,1412,305],{"class":386},[342,1414,1059],{"class":478},[342,1416,481],{"class":390},[342,1418,1419],{"class":425},"duration",[342,1421,491],{"class":390},[342,1423,1425],{"class":344,"line":1424},19,[342,1426,1427],{"class":386},"  }\n",[342,1429,1431],{"class":344,"line":1430},20,[342,1432,446],{"emptyLinePlaceholder":39},[342,1434,1436],{"class":344,"line":1435},21,[342,1437,1438],{"class":613},"  // Fade in new animation\n",[342,1440,1442,1445,1447,1450],{"class":344,"line":1441},22,[342,1443,1444],{"class":425},"  nextAction",[342,1446,305],{"class":386},[342,1448,1449],{"class":478},"reset",[342,1451,988],{"class":390},[342,1453,1455,1457,1459,1462,1464,1467],{"class":344,"line":1454},23,[342,1456,1444],{"class":425},[342,1458,305],{"class":386},[342,1460,1461],{"class":478},"setEffectiveWeight",[342,1463,481],{"class":390},[342,1465,1466],{"class":1315},"1",[342,1468,491],{"class":390},[342,1470,1472,1474,1476,1478],{"class":344,"line":1471},24,[342,1473,1444],{"class":425},[342,1475,305],{"class":386},[342,1477,940],{"class":478},[342,1479,988],{"class":390},[342,1481,1483,1485,1487,1489,1491,1493],{"class":344,"line":1482},25,[342,1484,1444],{"class":425},[342,1486,305],{"class":386},[342,1488,1055],{"class":478},[342,1490,481],{"class":390},[342,1492,1419],{"class":425},[342,1494,491],{"class":390},[342,1496,1498],{"class":344,"line":1497},26,[342,1499,446],{"emptyLinePlaceholder":39},[342,1501,1503,1506,1508,1510,1512],{"class":344,"line":1502},27,[342,1504,1505],{"class":425},"  currentAction",[342,1507,305],{"class":386},[342,1509,643],{"class":425},[342,1511,475],{"class":386},[342,1513,1514],{"class":425}," nextAction\n",[342,1516,1518],{"class":344,"line":1517},28,[342,1519,1520],{"class":386},"}\n",[342,1522,1524],{"class":344,"line":1523},29,[342,1525,446],{"emptyLinePlaceholder":39},[342,1527,1529],{"class":344,"line":1528},30,[342,1530,1531],{"class":613},"// Example: Transition from Idle to Cheer\n",[342,1533,1535,1537,1540,1542,1545,1547],{"class":344,"line":1534},31,[342,1536,452],{"class":394},[342,1538,1539],{"class":425}," playCheerAnimation ",[342,1541,401],{"class":386},[342,1543,1544],{"class":386}," ()",[342,1546,635],{"class":394},[342,1548,1324],{"class":386},[342,1550,1552,1555,1557,1559,1561,1563,1565,1568],{"class":344,"line":1551},32,[342,1553,1554],{"class":478},"  transitionToAnimation",[342,1556,481],{"class":390},[342,1558,484],{"class":386},[342,1560,981],{"class":352},[342,1562,484],{"class":386},[342,1564,466],{"class":386},[342,1566,1567],{"class":1315}," 0.3",[342,1569,491],{"class":390},[342,1571,1573],{"class":344,"line":1572},33,[342,1574,1520],{"class":386},[342,1576,1578],{"class":344,"line":1577},34,[342,1579,446],{"emptyLinePlaceholder":39},[342,1581,1583,1585,1588,1590,1592,1594],{"class":344,"line":1582},35,[342,1584,452],{"class":394},[342,1586,1587],{"class":425}," playIdleAnimation ",[342,1589,401],{"class":386},[342,1591,1544],{"class":386},[342,1593,635],{"class":394},[342,1595,1324],{"class":386},[342,1597,1599,1601,1603,1605,1608,1610,1612,1614],{"class":344,"line":1598},36,[342,1600,1554],{"class":478},[342,1602,481],{"class":390},[342,1604,484],{"class":386},[342,1606,1607],{"class":352},"Idle",[342,1609,484],{"class":386},[342,1611,466],{"class":386},[342,1613,1567],{"class":1315},[342,1615,491],{"class":390},[342,1617,1619],{"class":344,"line":1618},37,[342,1620,1520],{"class":386},[342,1622,1624,1626,1628],{"class":344,"line":1623},38,[342,1625,497],{"class":386},[342,1627,391],{"class":390},[342,1629,412],{"class":386},[248,1631,1632],{},[293,1633,1634],{},"Key points about animation transitions:",[260,1636,1637,1643,1649,1655,1661],{},[263,1638,1639,1642],{},[329,1640,1641],{},"fadeOut(duration)"," gradually reduces the animation's influence over the specified duration",[263,1644,1645,1648],{},[329,1646,1647],{},"fadeIn(duration)"," gradually increases the animation's influence over the specified duration",[263,1650,1651,1654],{},[329,1652,1653],{},"reset()"," resets the animation to its starting frame",[263,1656,1657,1660],{},[329,1658,1659],{},"setEffectiveWeight(1)"," ensures the animation has full influence when active",[263,1662,1663],{},"Shorter durations (0.1-0.3s) work well for quick actions, longer ones (0.5-1s) for smoother character transitions",[1665,1666,1667],"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":1669},[1670,1671,1672],{"id":254,"depth":415,"text":255},{"id":315,"depth":415,"text":316},{"id":719,"depth":415,"text":720},"Learn how to animate 3D models in TresJS","md",null,{"thumbnail":1677},"/recipes/model-n-animations/model-n-animations.png",{"title":190,"description":1673},"8h3v5rOoGPDDcGPgNyNcXaGxCBK_dfFiuhXss4nGSgA",[1681,1683],{"title":186,"path":187,"stem":188,"description":1682,"children":-1},"Learn how to create basic animations in TresJS",{"title":194,"path":195,"stem":196,"description":1684,"children":-1},"Learn how to create complex animations using GSAP with TresJS",1782052336409]