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