[{"data":1,"prerenderedAt":1062},["ShallowReactive",2],{"navigation":3,"/cookbook/basic-animations":211,"/cookbook/basic-animations-surround":1057},[4,29,62,149,177,187,191,195,199,203,207],{"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],{"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,"children":66},"API","/api","3.api",[67,70,84,111,121,131],{"title":68,"path":64,"stem":69},"TresJS API Reference","3.api/1.index",{"title":71,"icon":72,"open":39,"path":73,"stem":74,"children":75,"page":47},"Components","i-lucide-box","/api/components","3.api/1.components",[76,80],{"title":77,"path":78,"stem":79},"\u003CTresCanvas />","/api/components/tres-canvas","3.api/1.components/tres-canvas",{"title":81,"path":82,"stem":83},"Tres Components","/api/components/tres-objects","3.api/1.components/tres-objects",{"title":85,"titleTemplate":86,"icon":87,"path":88,"stem":89,"children":90,"page":47},"Composables","%s · TresJS Composables","i-lucide-arrow-right-left","/api/composables","3.api/2.composables",[91,95,99,103,107],{"title":92,"path":93,"stem":94},"useTres","/api/composables/use-tres","3.api/2.composables/1.use-tres",{"title":96,"path":97,"stem":98},"useTresContext","/api/composables/use-tres-context","3.api/2.composables/2.use-tres-context",{"title":100,"path":101,"stem":102},"useLoop","/api/composables/use-loop","3.api/2.composables/3.use-loop",{"title":104,"path":105,"stem":106},"useGraph","/api/composables/use-graph","3.api/2.composables/4.use-graph",{"title":108,"path":109,"stem":110},"useLoader","/api/composables/use-loader","3.api/2.composables/5.use-loader",{"title":112,"icon":113,"path":114,"stem":115,"children":116,"page":47},"Event handling","i-lucide-mouse-pointer-2","/api/events","3.api/3.events",[117],{"title":118,"path":119,"stem":120},"Pointer Events","/api/events/pointer-events","3.api/3.events/1.pointer-events",{"title":122,"icon":123,"path":124,"stem":125,"children":126,"page":47},"Utils","i-lucide-wrench","/api/utils","3.api/4.utils",[127],{"title":128,"path":129,"stem":130},"Type Guards","/api/utils/type-guards","3.api/4.utils/1.type-guards",{"title":132,"icon":133,"path":134,"stem":135,"children":136,"page":47},"Advanced","i-lucide-brain-circuit","/api/advanced","3.api/5.advanced",[137,141,145],{"title":138,"path":139,"stem":140},"Scaling Performance 🚀","/api/advanced/performance","3.api/5.advanced/performance",{"title":142,"path":143,"stem":144},"Primitives","/api/advanced/primitives","3.api/5.advanced/primitives",{"title":146,"path":147,"stem":148},"WebGPU","/api/advanced/web-gpu","3.api/5.advanced/web-gpu",{"title":150,"path":151,"stem":152,"children":153},"Cookbook","/cookbook","4.cookbook",[154,157,161,165,169,173],{"title":155,"path":151,"stem":156},"Cookbook 🍳🧑‍🍳","4.cookbook/index",{"title":158,"path":159,"stem":160},"OrbitControls","/cookbook/orbit-controls","4.cookbook/1.orbit-controls",{"title":162,"path":163,"stem":164},"Basic Animations","/cookbook/basic-animations","4.cookbook/2.basic-animations",{"title":166,"path":167,"stem":168},"Model Animation","/cookbook/model-animation","4.cookbook/3.model-animation",{"title":170,"path":171,"stem":172},"Advanced GSAP Animations","/cookbook/advanced-gsap-animations","4.cookbook/4.advanced-gsap-animations",{"title":174,"path":175,"stem":176},"Tweakpane","/cookbook/tweakpane","4.cookbook/5.tweakpane",{"title":178,"path":179,"stem":180,"children":181},"Community","/community","5.community/1.index",[182,183],{"title":178,"path":179,"stem":180},{"title":184,"path":185,"stem":186},"Awesome Resources","/community/awesome-resources","5.community/awesome-resources",{"title":188,"path":189,"stem":190},"German Translation","/de","de",{"title":192,"path":193,"stem":194},"Spanish Translation","/es","es",{"title":196,"path":197,"stem":198},"French Translation","/fr","fr",{"title":200,"path":201,"stem":202},"Italian Translation","/it","it",{"title":204,"path":205,"stem":206},"Japanese Translation","/jp","jp",{"title":208,"path":209,"stem":210},"Chinese Translation","/zh","zh",{"id":212,"title":162,"body":213,"description":1050,"extension":1051,"links":1052,"meta":1053,"navigation":39,"path":163,"seo":1055,"stem":164,"__hash__":1056},"docs/4.cookbook/2.basic-animations.md",{"type":214,"value":215,"toc":1048},"minimark",[216,219,223,1044],[217,218],"examples-basic-animation",{},[220,221,222],"p",{},"This recipe covers the fundamentals of creating smooth animations in TresJS.",[224,225,226,235,246,356,359,363,378,772,778,786,794,886,892,930,939,946,954,1041],"steps",{},[227,228,230,231,234],"h3",{"id":229},"import-useloop-composable","Import ",[232,233,100],"code",{}," composable",[220,236,237,238,240,241,245],{},"The ",[232,239,100],{}," composable is the core of TresJS updates, which includes: ",[242,243,244],"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.",[247,248,253],"pre",{"className":249,"code":250,"language":251,"meta":252,"style":252},"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","",[232,254,255,288,294,318,323,341,348],{"__ignoreMap":252},[256,257,260,264,268,272,275,278,281,285],"span",{"class":258,"line":259},"line",1,[256,261,263],{"class":262},"s7zQu","import",[256,265,267],{"class":266},"sMK4o"," {",[256,269,271],{"class":270},"sTEyZ"," useLoop",[256,273,274],{"class":266}," }",[256,276,277],{"class":262}," from",[256,279,280],{"class":266}," '",[256,282,284],{"class":283},"sfazB","@tresjs/core",[256,286,287],{"class":266},"'\n",[256,289,291],{"class":258,"line":290},2,[256,292,293],{"emptyLinePlaceholder":39},"\n",[256,295,297,301,303,306,309,312,315],{"class":258,"line":296},3,[256,298,300],{"class":299},"spNyl","const",[256,302,267],{"class":266},[256,304,305],{"class":270}," onBeforeRender ",[256,307,308],{"class":266},"}",[256,310,311],{"class":266}," =",[256,313,271],{"class":314},"s2Zo4",[256,316,317],{"class":270},"()\n",[256,319,321],{"class":258,"line":320},4,[256,322,293],{"emptyLinePlaceholder":39},[256,324,326,329,332,335,338],{"class":258,"line":325},5,[256,327,328],{"class":314},"onBeforeRender",[256,330,331],{"class":270},"(",[256,333,334],{"class":266},"()",[256,336,337],{"class":299}," =>",[256,339,340],{"class":266}," {\n",[256,342,344],{"class":258,"line":343},6,[256,345,347],{"class":346},"sHwdD","  // Animation logic here\n",[256,349,351,353],{"class":258,"line":350},7,[256,352,308],{"class":266},[256,354,355],{"class":270},")\n",[357,358],"read-more",{"to":101},[227,360,362],{"id":361},"get-a-reference-to-the-object-you-want-to-animate","Get a reference to the object you want to animate",[220,364,365,366,373,374,377],{},"Similar to Vue, you can use ",[367,368,372],"a",{"href":369,"rel":370},"https://vuejs.org/guide/essentials/template-refs",[371],"nofollow","template refs"," to access the Three.js object instance and manipulate its properties. If you want to optimize even further, you can use ",[232,375,376],{},"shallowRef"," to avoid unnecessary reactivity.",[247,379,384],{"className":380,"code":381,"filename":382,"language":383,"meta":252,"style":252},"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",[232,385,386,414,433,451,455,494,499,504,509,526,531,544,567,594,616,622,629,639,644,654,706,743,753,763],{"__ignoreMap":252},[256,387,388,391,395,398,401,404,407,409,411],{"class":258,"line":259},[256,389,390],{"class":266},"\u003C",[256,392,394],{"class":393},"swJcz","script",[256,396,397],{"class":299}," setup",[256,399,400],{"class":299}," lang",[256,402,403],{"class":266},"=",[256,405,406],{"class":266},"\"",[256,408,251],{"class":283},[256,410,406],{"class":266},[256,412,413],{"class":266},">\n",[256,415,416,418,420,423,425,427,429,431],{"class":258,"line":290},[256,417,263],{"class":262},[256,419,267],{"class":266},[256,421,422],{"class":270}," ref",[256,424,274],{"class":266},[256,426,277],{"class":262},[256,428,280],{"class":266},[256,430,383],{"class":283},[256,432,287],{"class":266},[256,434,435,437,439,441,443,445,447,449],{"class":258,"line":296},[256,436,263],{"class":262},[256,438,267],{"class":266},[256,440,271],{"class":270},[256,442,274],{"class":266},[256,444,277],{"class":262},[256,446,280],{"class":266},[256,448,284],{"class":283},[256,450,287],{"class":266},[256,452,453],{"class":258,"line":320},[256,454,293],{"emptyLinePlaceholder":39},[256,456,457,459,462,464,466,468,472,475,478,481,484,487,489,492],{"class":258,"line":325},[256,458,300],{"class":299},[256,460,461],{"class":270}," cubeRef ",[256,463,403],{"class":266},[256,465,422],{"class":314},[256,467,390],{"class":266},[256,469,471],{"class":470},"sBMFI","THREE",[256,473,474],{"class":266},".",[256,476,477],{"class":470},"Mesh",[256,479,480],{"class":266}," |",[256,482,483],{"class":470}," null",[256,485,486],{"class":266},">",[256,488,331],{"class":270},[256,490,491],{"class":266},"null",[256,493,355],{"class":270},[256,495,496],{"class":258,"line":343},[256,497,498],{"class":346},"// or use shallowRef if you want to avoid reactivity\n",[256,500,501],{"class":258,"line":350},[256,502,503],{"class":346},"// const cubeRef = shallowRef\u003CTHREE.Mesh | null>(null)\n",[256,505,507],{"class":258,"line":506},8,[256,508,293],{"emptyLinePlaceholder":39},[256,510,512,514,516,518,520,522,524],{"class":258,"line":511},9,[256,513,300],{"class":299},[256,515,267],{"class":266},[256,517,305],{"class":270},[256,519,308],{"class":266},[256,521,311],{"class":266},[256,523,271],{"class":314},[256,525,317],{"class":270},[256,527,529],{"class":258,"line":528},10,[256,530,293],{"emptyLinePlaceholder":39},[256,532,534,536,538,540,542],{"class":258,"line":533},11,[256,535,328],{"class":314},[256,537,331],{"class":270},[256,539,334],{"class":266},[256,541,337],{"class":299},[256,543,340],{"class":266},[256,545,547,550,553,556,558,561,564],{"class":258,"line":546},12,[256,548,549],{"class":262},"  if",[256,551,552],{"class":393}," (",[256,554,555],{"class":270},"cubeRef",[256,557,474],{"class":266},[256,559,560],{"class":270},"value",[256,562,563],{"class":393},") ",[256,565,566],{"class":266},"{\n",[256,568,570,573,575,577,579,582,584,587,590],{"class":258,"line":569},13,[256,571,572],{"class":270},"    cubeRef",[256,574,474],{"class":266},[256,576,560],{"class":270},[256,578,474],{"class":266},[256,580,581],{"class":270},"rotation",[256,583,474],{"class":266},[256,585,586],{"class":270},"x",[256,588,589],{"class":266}," +=",[256,591,593],{"class":592},"sbssI"," 0.01\n",[256,595,597,599,601,603,605,607,609,612,614],{"class":258,"line":596},14,[256,598,572],{"class":270},[256,600,474],{"class":266},[256,602,560],{"class":270},[256,604,474],{"class":266},[256,606,581],{"class":270},[256,608,474],{"class":266},[256,610,611],{"class":270},"y",[256,613,589],{"class":266},[256,615,593],{"class":592},[256,617,619],{"class":258,"line":618},15,[256,620,621],{"class":266},"  }\n",[256,623,625,627],{"class":258,"line":624},16,[256,626,308],{"class":266},[256,628,355],{"class":270},[256,630,632,635,637],{"class":258,"line":631},17,[256,633,634],{"class":266},"\u003C/",[256,636,394],{"class":393},[256,638,413],{"class":266},[256,640,642],{"class":258,"line":641},18,[256,643,293],{"emptyLinePlaceholder":39},[256,645,647,649,652],{"class":258,"line":646},19,[256,648,390],{"class":266},[256,650,651],{"class":393},"template",[256,653,413],{"class":266},[256,655,657,660,663,665,667,669,671,673,676,679,681,683,686,689,692,695,697,699,702,704],{"class":258,"line":656},20,[256,658,659],{"class":266},"  \u003C",[256,661,662],{"class":393},"TresMesh",[256,664,422],{"class":299},[256,666,403],{"class":266},[256,668,406],{"class":266},[256,670,555],{"class":283},[256,672,406],{"class":266},[256,674,675],{"class":266}," :",[256,677,678],{"class":299},"position",[256,680,403],{"class":266},[256,682,406],{"class":266},[256,684,685],{"class":266},"[",[256,687,688],{"class":592},"0",[256,690,691],{"class":266},", ",[256,693,694],{"class":592},"1",[256,696,691],{"class":266},[256,698,688],{"class":592},[256,700,701],{"class":266},"]",[256,703,406],{"class":266},[256,705,413],{"class":266},[256,707,709,712,715,717,720,722,724,726,728,730,732,734,736,738,740],{"class":258,"line":708},21,[256,710,711],{"class":266},"    \u003C",[256,713,714],{"class":393},"TresBoxGeometry",[256,716,675],{"class":266},[256,718,719],{"class":299},"args",[256,721,403],{"class":266},[256,723,406],{"class":266},[256,725,685],{"class":266},[256,727,694],{"class":592},[256,729,691],{"class":266},[256,731,694],{"class":592},[256,733,691],{"class":266},[256,735,694],{"class":592},[256,737,701],{"class":266},[256,739,406],{"class":266},[256,741,742],{"class":266}," />\n",[256,744,746,748,751],{"class":258,"line":745},22,[256,747,711],{"class":266},[256,749,750],{"class":393},"TresMeshNormalMaterial",[256,752,742],{"class":266},[256,754,756,759,761],{"class":258,"line":755},23,[256,757,758],{"class":266},"  \u003C/",[256,760,662],{"class":393},[256,762,413],{"class":266},[256,764,766,768,770],{"class":258,"line":765},24,[256,767,634],{"class":266},[256,769,651],{"class":393},[256,771,413],{"class":266},[357,773,775],{"to":774},"/api/advanced/performance#reactivity-and-performance",[220,776,777],{},"To read more about reactivity and performance in TresJS.",[779,780,782,783],"h2",{"id":781},"use-delta","Use ",[232,784,785],{},"delta",[220,787,237,788,790,791,793],{},[232,789,328],{}," callback provides a ",[232,792,785],{}," parameter, which represents the time elapsed since the last frame. This is useful for creating frame rate independent animations.",[247,795,797],{"className":249,"code":796,"language":251,"meta":252,"style":252},"onBeforeRender(({ delta }) => {\n  if (cubeRef.value) {\n    cubeRef.value.rotation.x += delta\n    cubeRef.value.rotation.y += delta\n  }\n})\n",[232,798,799,819,835,856,876,880],{"__ignoreMap":252},[256,800,801,803,805,808,812,815,817],{"class":258,"line":259},[256,802,328],{"class":314},[256,804,331],{"class":270},[256,806,807],{"class":266},"({",[256,809,811],{"class":810},"sHdIc"," delta",[256,813,814],{"class":266}," })",[256,816,337],{"class":299},[256,818,340],{"class":266},[256,820,821,823,825,827,829,831,833],{"class":258,"line":290},[256,822,549],{"class":262},[256,824,552],{"class":393},[256,826,555],{"class":270},[256,828,474],{"class":266},[256,830,560],{"class":270},[256,832,563],{"class":393},[256,834,566],{"class":266},[256,836,837,839,841,843,845,847,849,851,853],{"class":258,"line":296},[256,838,572],{"class":270},[256,840,474],{"class":266},[256,842,560],{"class":270},[256,844,474],{"class":266},[256,846,581],{"class":270},[256,848,474],{"class":266},[256,850,586],{"class":270},[256,852,589],{"class":266},[256,854,855],{"class":270}," delta\n",[256,857,858,860,862,864,866,868,870,872,874],{"class":258,"line":320},[256,859,572],{"class":270},[256,861,474],{"class":266},[256,863,560],{"class":270},[256,865,474],{"class":266},[256,867,581],{"class":270},[256,869,474],{"class":266},[256,871,611],{"class":270},[256,873,589],{"class":266},[256,875,855],{"class":270},[256,877,878],{"class":258,"line":325},[256,879,621],{"class":266},[256,881,882,884],{"class":258,"line":343},[256,883,308],{"class":266},[256,885,355],{"class":270},[220,887,888,889,891],{},"Without using ",[232,890,785],{},", the animation speed would vary depending on the frame rate, leading to inconsistent behavior across different devices, like the example below:",[893,894,902,903,920],"div",{"className":895},[896,897,898,899,900,901],"w-full","flex","border","border-gray-200","rounded-lg","overflow-hidden","\n   ",[893,904,908,909,917],{"className":905},[906,907,899],"w-1/2","border-r","\n      ",[893,910,916],{"className":911},[912,913,914,899,915],"text-center","p-2","border-b","font-bold","\n         60fps\n      ",[918,919],"examples-basic-animation-60fps",{},[893,921,923,927],{"className":922},[906],[893,924,926],{"className":925},[913,912,913,914,899,915],"\n   120fps\n",[928,929],"examples-basic-animation-120fps",{},[893,931,938],{"className":932},[913,933,934,935,936,937,912],"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",[779,940,942,943],{"id":941},"using-elapsed","Using ",[232,944,945],{},"elapsed",[220,947,237,948,950,951,953],{},[232,949,328],{}," callback also provides an ",[232,952,945],{}," parameter, which represents the total time elapsed since the start of the animation. This can be useful for creating time-based animations like oscillations.",[247,955,957],{"className":249,"code":956,"language":251,"meta":252,"style":252},"onBeforeRender(({ elapsed }) => {\nif (cubeRef.value) {\ncubeRef.value.position.y += Math.sin(elapsed) * 0.01\n}\n})\n",[232,958,959,976,993,1030,1035],{"__ignoreMap":252},[256,960,961,963,965,967,970,972,974],{"class":258,"line":259},[256,962,328],{"class":314},[256,964,331],{"class":270},[256,966,807],{"class":266},[256,968,969],{"class":810}," elapsed",[256,971,814],{"class":266},[256,973,337],{"class":299},[256,975,340],{"class":266},[256,977,978,981,983,985,987,989,991],{"class":258,"line":290},[256,979,980],{"class":262},"if",[256,982,552],{"class":393},[256,984,555],{"class":270},[256,986,474],{"class":266},[256,988,560],{"class":270},[256,990,563],{"class":393},[256,992,566],{"class":266},[256,994,995,997,999,1001,1003,1005,1007,1009,1011,1014,1016,1019,1021,1023,1025,1028],{"class":258,"line":296},[256,996,555],{"class":270},[256,998,474],{"class":266},[256,1000,560],{"class":270},[256,1002,474],{"class":266},[256,1004,678],{"class":270},[256,1006,474],{"class":266},[256,1008,611],{"class":270},[256,1010,589],{"class":266},[256,1012,1013],{"class":270}," Math",[256,1015,474],{"class":266},[256,1017,1018],{"class":314},"sin",[256,1020,331],{"class":393},[256,1022,945],{"class":270},[256,1024,563],{"class":393},[256,1026,1027],{"class":266},"*",[256,1029,593],{"class":592},[256,1031,1032],{"class":258,"line":320},[256,1033,1034],{"class":266},"}\n",[256,1036,1037,1039],{"class":258,"line":325},[256,1038,308],{"class":266},[256,1040,355],{"class":270},[1042,1043],"examples-basic-animation-elapsed",{},[1045,1046,1047],"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":252,"searchDepth":259,"depth":290,"links":1049},[],"Learn how to create basic animations in TresJS","md",null,{"thumbnail":1054},"/recipes/model-n-animations/basic.png",{"title":162,"description":1050},"EiW-sVHXIrWLRwJcTOD5a3Y-msJTv1SNBHsLh_669FA",[1058,1060],{"title":158,"path":159,"stem":160,"description":1059,"children":-1},"Learn how to use OrbitControls in TresJS, including both manual and plug-and-play approaches.",{"title":166,"path":167,"stem":168,"description":1061,"children":-1},"Learn how to animate 3D models in TresJS",1768600249296]