[{"data":1,"prerenderedAt":1074},["ShallowReactive",2],{"navigation":3,"/cookbook/basic-animations":256,"/cookbook/basic-animations-surround":1069},[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":203,"body":258,"description":1062,"extension":1063,"links":1064,"meta":1065,"navigation":39,"path":204,"seo":1067,"stem":205,"__hash__":1068},"docs/5.cookbook/2.basic-animations.md",{"type":259,"value":260,"toc":1060},"minimark",[261,264,268,1056],[262,263],"examples-basic-animation",{},[265,266,267],"p",{},"This recipe covers the fundamentals of creating smooth animations in TresJS.",[269,270,271,280,291,401,404,408,423,785,791,799,807,899,905,943,952,959,967,1053],"steps",{},[272,273,275,276,279],"h3",{"id":274},"import-useloop-composable","Import ",[277,278,124],"code",{}," composable",[265,281,282,283,285,286,290],{},"The ",[277,284,124],{}," composable is the core of TresJS updates, which includes: ",[287,288,289],"strong",{},"animations",". It allows you to register a callback that will be called every time the renderer updates the scene with the browser's refresh rate.",[292,293,298],"pre",{"className":294,"code":295,"language":296,"meta":297,"style":297},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { useLoop } from '@tresjs/core'\n\nconst { onBeforeRender } = useLoop()\n\nonBeforeRender(() => {\n  // Animation logic here\n})\n\n","ts","",[277,299,300,333,339,363,368,386,393],{"__ignoreMap":297},[301,302,305,309,313,317,320,323,326,330],"span",{"class":303,"line":304},"line",1,[301,306,308],{"class":307},"s7zQu","import",[301,310,312],{"class":311},"sMK4o"," {",[301,314,316],{"class":315},"sTEyZ"," useLoop",[301,318,319],{"class":311}," }",[301,321,322],{"class":307}," from",[301,324,325],{"class":311}," '",[301,327,329],{"class":328},"sfazB","@tresjs/core",[301,331,332],{"class":311},"'\n",[301,334,336],{"class":303,"line":335},2,[301,337,338],{"emptyLinePlaceholder":39},"\n",[301,340,342,346,348,351,354,357,360],{"class":303,"line":341},3,[301,343,345],{"class":344},"spNyl","const",[301,347,312],{"class":311},[301,349,350],{"class":315}," onBeforeRender ",[301,352,353],{"class":311},"}",[301,355,356],{"class":311}," =",[301,358,316],{"class":359},"s2Zo4",[301,361,362],{"class":315},"()\n",[301,364,366],{"class":303,"line":365},4,[301,367,338],{"emptyLinePlaceholder":39},[301,369,371,374,377,380,383],{"class":303,"line":370},5,[301,372,373],{"class":359},"onBeforeRender",[301,375,376],{"class":315},"(",[301,378,379],{"class":311},"()",[301,381,382],{"class":344}," =>",[301,384,385],{"class":311}," {\n",[301,387,389],{"class":303,"line":388},6,[301,390,392],{"class":391},"sHwdD","  // Animation logic here\n",[301,394,396,398],{"class":303,"line":395},7,[301,397,353],{"class":311},[301,399,400],{"class":315},")\n",[402,403],"read-more",{"to":125},[272,405,407],{"id":406},"get-a-reference-to-the-object-you-want-to-animate","Get a reference to the object you want to animate",[265,409,410,411,418,419,422],{},"Similar to Vue, you can use ",[412,413,417],"a",{"href":414,"rel":415},"https://vuejs.org/guide/essentials/template-refs",[416],"nofollow","template refs"," to access the Three.js object instance and manipulate its properties. If you want to optimize even further, you can use ",[277,420,421],{},"shallowRef"," to avoid unnecessary reactivity.",[292,424,429],{"className":425,"code":426,"filename":427,"language":428,"meta":297,"style":297},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { ref } from 'vue'\nimport { useLoop } from '@tresjs/core'\n\nconst cubeRef = ref\u003CTHREE.Mesh | null>(null)\n// or use shallowRef if you want to avoid reactivity\n// const cubeRef = shallowRef\u003CTHREE.Mesh | null>(null)\n\nconst { onBeforeRender } = useLoop()\n\nonBeforeRender(() => {\n  if (cubeRef.value) {\n    cubeRef.value.rotation.x += 0.01\n    cubeRef.value.rotation.y += 0.01\n  }\n})\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresMesh ref=\"cubeRef\" :position=\"[0, 1, 0]\">\n    \u003CTresBoxGeometry :args=\"[1, 1, 1]\" />\n    \u003CTresMeshNormalMaterial />\n  \u003C/TresMesh>\n\u003C/template>\n","RotatingCube.vue","vue",[277,430,431,459,478,496,500,539,544,549,554,571,576,589,612,639,661,667,674,684,689,699,732,756,766,776],{"__ignoreMap":297},[301,432,433,436,440,443,446,449,452,454,456],{"class":303,"line":304},[301,434,435],{"class":311},"\u003C",[301,437,439],{"class":438},"swJcz","script",[301,441,442],{"class":344}," setup",[301,444,445],{"class":344}," lang",[301,447,448],{"class":311},"=",[301,450,451],{"class":311},"\"",[301,453,296],{"class":328},[301,455,451],{"class":311},[301,457,458],{"class":311},">\n",[301,460,461,463,465,468,470,472,474,476],{"class":303,"line":335},[301,462,308],{"class":307},[301,464,312],{"class":311},[301,466,467],{"class":315}," ref",[301,469,319],{"class":311},[301,471,322],{"class":307},[301,473,325],{"class":311},[301,475,428],{"class":328},[301,477,332],{"class":311},[301,479,480,482,484,486,488,490,492,494],{"class":303,"line":341},[301,481,308],{"class":307},[301,483,312],{"class":311},[301,485,316],{"class":315},[301,487,319],{"class":311},[301,489,322],{"class":307},[301,491,325],{"class":311},[301,493,329],{"class":328},[301,495,332],{"class":311},[301,497,498],{"class":303,"line":365},[301,499,338],{"emptyLinePlaceholder":39},[301,501,502,504,507,509,511,513,517,520,523,526,529,532,534,537],{"class":303,"line":370},[301,503,345],{"class":344},[301,505,506],{"class":315}," cubeRef ",[301,508,448],{"class":311},[301,510,467],{"class":359},[301,512,435],{"class":311},[301,514,516],{"class":515},"sBMFI","THREE",[301,518,519],{"class":311},".",[301,521,522],{"class":515},"Mesh",[301,524,525],{"class":311}," |",[301,527,528],{"class":515}," null",[301,530,531],{"class":311},">",[301,533,376],{"class":315},[301,535,536],{"class":311},"null",[301,538,400],{"class":315},[301,540,541],{"class":303,"line":388},[301,542,543],{"class":391},"// or use shallowRef if you want to avoid reactivity\n",[301,545,546],{"class":303,"line":395},[301,547,548],{"class":391},"// const cubeRef = shallowRef\u003CTHREE.Mesh | null>(null)\n",[301,550,552],{"class":303,"line":551},8,[301,553,338],{"emptyLinePlaceholder":39},[301,555,557,559,561,563,565,567,569],{"class":303,"line":556},9,[301,558,345],{"class":344},[301,560,312],{"class":311},[301,562,350],{"class":315},[301,564,353],{"class":311},[301,566,356],{"class":311},[301,568,316],{"class":359},[301,570,362],{"class":315},[301,572,574],{"class":303,"line":573},10,[301,575,338],{"emptyLinePlaceholder":39},[301,577,579,581,583,585,587],{"class":303,"line":578},11,[301,580,373],{"class":359},[301,582,376],{"class":315},[301,584,379],{"class":311},[301,586,382],{"class":344},[301,588,385],{"class":311},[301,590,592,595,598,601,603,606,609],{"class":303,"line":591},12,[301,593,594],{"class":307},"  if",[301,596,597],{"class":438}," (",[301,599,600],{"class":315},"cubeRef",[301,602,519],{"class":311},[301,604,605],{"class":315},"value",[301,607,608],{"class":438},") ",[301,610,611],{"class":311},"{\n",[301,613,615,618,620,622,624,627,629,632,635],{"class":303,"line":614},13,[301,616,617],{"class":315},"    cubeRef",[301,619,519],{"class":311},[301,621,605],{"class":315},[301,623,519],{"class":311},[301,625,626],{"class":315},"rotation",[301,628,519],{"class":311},[301,630,631],{"class":315},"x",[301,633,634],{"class":311}," +=",[301,636,638],{"class":637},"sbssI"," 0.01\n",[301,640,642,644,646,648,650,652,654,657,659],{"class":303,"line":641},14,[301,643,617],{"class":315},[301,645,519],{"class":311},[301,647,605],{"class":315},[301,649,519],{"class":311},[301,651,626],{"class":315},[301,653,519],{"class":311},[301,655,656],{"class":315},"y",[301,658,634],{"class":311},[301,660,638],{"class":637},[301,662,664],{"class":303,"line":663},15,[301,665,666],{"class":311},"  }\n",[301,668,670,672],{"class":303,"line":669},16,[301,671,353],{"class":311},[301,673,400],{"class":315},[301,675,677,680,682],{"class":303,"line":676},17,[301,678,679],{"class":311},"\u003C/",[301,681,439],{"class":438},[301,683,458],{"class":311},[301,685,687],{"class":303,"line":686},18,[301,688,338],{"emptyLinePlaceholder":39},[301,690,692,694,697],{"class":303,"line":691},19,[301,693,435],{"class":311},[301,695,696],{"class":438},"template",[301,698,458],{"class":311},[301,700,702,705,708,710,712,714,716,718,721,723,725,728,730],{"class":303,"line":701},20,[301,703,704],{"class":311},"  \u003C",[301,706,707],{"class":438},"TresMesh",[301,709,467],{"class":344},[301,711,448],{"class":311},[301,713,451],{"class":311},[301,715,600],{"class":328},[301,717,451],{"class":311},[301,719,720],{"class":344}," :position",[301,722,448],{"class":311},[301,724,451],{"class":311},[301,726,727],{"class":328},"[0, 1, 0]",[301,729,451],{"class":311},[301,731,458],{"class":311},[301,733,735,738,741,744,746,748,751,753],{"class":303,"line":734},21,[301,736,737],{"class":311},"    \u003C",[301,739,740],{"class":438},"TresBoxGeometry",[301,742,743],{"class":344}," :args",[301,745,448],{"class":311},[301,747,451],{"class":311},[301,749,750],{"class":328},"[1, 1, 1]",[301,752,451],{"class":311},[301,754,755],{"class":311}," />\n",[301,757,759,761,764],{"class":303,"line":758},22,[301,760,737],{"class":311},[301,762,763],{"class":438},"TresMeshNormalMaterial",[301,765,755],{"class":311},[301,767,769,772,774],{"class":303,"line":768},23,[301,770,771],{"class":311},"  \u003C/",[301,773,707],{"class":438},[301,775,458],{"class":311},[301,777,779,781,783],{"class":303,"line":778},24,[301,780,679],{"class":311},[301,782,696],{"class":438},[301,784,458],{"class":311},[402,786,788],{"to":787},"/api/advanced/performance#reactivity-and-performance",[265,789,790],{},"To read more about reactivity and performance in TresJS.",[792,793,795,796],"h2",{"id":794},"use-delta","Use ",[277,797,798],{},"delta",[265,800,282,801,803,804,806],{},[277,802,373],{}," callback provides a ",[277,805,798],{}," parameter, which represents the time elapsed since the last frame. This is useful for creating frame rate independent animations.",[292,808,810],{"className":294,"code":809,"language":296,"meta":297,"style":297},"onBeforeRender(({ delta }) => {\n  if (cubeRef.value) {\n    cubeRef.value.rotation.x += delta\n    cubeRef.value.rotation.y += delta\n  }\n})\n",[277,811,812,832,848,869,889,893],{"__ignoreMap":297},[301,813,814,816,818,821,825,828,830],{"class":303,"line":304},[301,815,373],{"class":359},[301,817,376],{"class":315},[301,819,820],{"class":311},"({",[301,822,824],{"class":823},"sHdIc"," delta",[301,826,827],{"class":311}," })",[301,829,382],{"class":344},[301,831,385],{"class":311},[301,833,834,836,838,840,842,844,846],{"class":303,"line":335},[301,835,594],{"class":307},[301,837,597],{"class":438},[301,839,600],{"class":315},[301,841,519],{"class":311},[301,843,605],{"class":315},[301,845,608],{"class":438},[301,847,611],{"class":311},[301,849,850,852,854,856,858,860,862,864,866],{"class":303,"line":341},[301,851,617],{"class":315},[301,853,519],{"class":311},[301,855,605],{"class":315},[301,857,519],{"class":311},[301,859,626],{"class":315},[301,861,519],{"class":311},[301,863,631],{"class":315},[301,865,634],{"class":311},[301,867,868],{"class":315}," delta\n",[301,870,871,873,875,877,879,881,883,885,887],{"class":303,"line":365},[301,872,617],{"class":315},[301,874,519],{"class":311},[301,876,605],{"class":315},[301,878,519],{"class":311},[301,880,626],{"class":315},[301,882,519],{"class":311},[301,884,656],{"class":315},[301,886,634],{"class":311},[301,888,868],{"class":315},[301,890,891],{"class":303,"line":370},[301,892,666],{"class":311},[301,894,895,897],{"class":303,"line":388},[301,896,353],{"class":311},[301,898,400],{"class":315},[265,900,901,902,904],{},"Without using ",[277,903,798],{},", the animation speed would vary depending on the frame rate, leading to inconsistent behavior across different devices, like the example below:",[906,907,915,916,933],"div",{"className":908},[909,910,911,912,913,914],"w-full","flex","border","border-gray-200","rounded-lg","overflow-hidden","\n   ",[906,917,921,922,930],{"className":918},[919,920,912],"w-1/2","border-r","\n      ",[906,923,929],{"className":924},[925,926,927,912,928],"text-center","p-2","border-b","font-bold","\n         60fps\n      ",[931,932],"examples-basic-animation-60fps",{},[906,934,936,940],{"className":935},[919],[906,937,939],{"className":938},[926,925,926,927,912,928],"\n   120fps\n",[941,942],"examples-basic-animation-120fps",{},[906,944,951],{"className":945},[926,946,947,948,949,950,925],"text-xs","text-gray-500","italic","mt-2","block","\nThe value of `delta` is 0.016 for 60fps and 0.008 for 120fps,  this difference ensures that the cube rotates at the same speed on both frame rates.\n",[792,953,955,956],{"id":954},"using-elapsed","Using ",[277,957,958],{},"elapsed",[265,960,282,961,963,964,966],{},[277,962,373],{}," callback also provides an ",[277,965,958],{}," parameter, which represents the total time elapsed since the start of the animation. This can be useful for creating time-based animations like oscillations.",[292,968,970],{"className":294,"code":969,"language":296,"meta":297,"style":297},"onBeforeRender(({ elapsed }) => {\n  if (cubeRef.value) {\n    cubeRef.value.position.y += Math.sin(elapsed) * 0.01\n  }\n})\n",[277,971,972,989,1005,1043,1047],{"__ignoreMap":297},[301,973,974,976,978,980,983,985,987],{"class":303,"line":304},[301,975,373],{"class":359},[301,977,376],{"class":315},[301,979,820],{"class":311},[301,981,982],{"class":823}," elapsed",[301,984,827],{"class":311},[301,986,382],{"class":344},[301,988,385],{"class":311},[301,990,991,993,995,997,999,1001,1003],{"class":303,"line":335},[301,992,594],{"class":307},[301,994,597],{"class":438},[301,996,600],{"class":315},[301,998,519],{"class":311},[301,1000,605],{"class":315},[301,1002,608],{"class":438},[301,1004,611],{"class":311},[301,1006,1007,1009,1011,1013,1015,1018,1020,1022,1024,1027,1029,1032,1034,1036,1038,1041],{"class":303,"line":341},[301,1008,617],{"class":315},[301,1010,519],{"class":311},[301,1012,605],{"class":315},[301,1014,519],{"class":311},[301,1016,1017],{"class":315},"position",[301,1019,519],{"class":311},[301,1021,656],{"class":315},[301,1023,634],{"class":311},[301,1025,1026],{"class":315}," Math",[301,1028,519],{"class":311},[301,1030,1031],{"class":359},"sin",[301,1033,376],{"class":438},[301,1035,958],{"class":315},[301,1037,608],{"class":438},[301,1039,1040],{"class":311},"*",[301,1042,638],{"class":637},[301,1044,1045],{"class":303,"line":365},[301,1046,666],{"class":311},[301,1048,1049,1051],{"class":303,"line":370},[301,1050,353],{"class":311},[301,1052,400],{"class":315},[1054,1055],"examples-basic-animation-elapsed",{},[1057,1058,1059],"style",{},"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 .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}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 .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 .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}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}",{"title":297,"searchDepth":304,"depth":335,"links":1061},[],"Learn how to create basic animations in TresJS","md",null,{"thumbnail":1066},"/recipes/model-n-animations/basic.png",{"title":203,"description":1062},"B2bwvJapI7dixhiYB5lSwQFA1WR9sps5LtjrfAK5fcQ",[1070,1072],{"title":199,"path":200,"stem":201,"description":1071,"children":-1},"Learn how to use OrbitControls in TresJS, including both manual and plug-and-play approaches.",{"title":207,"path":208,"stem":209,"description":1073,"children":-1},"Learn how to animate 3D models in TresJS",1785417175177]