[{"data":1,"prerenderedAt":956},["ShallowReactive",2],{"navigation":3,"/cookbook/orbit-controls":211,"/cookbook/orbit-controls-surround":951},[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":158,"body":213,"description":944,"extension":945,"links":946,"meta":947,"navigation":39,"path":159,"seo":949,"stem":160,"__hash__":950},"docs/4.cookbook/1.orbit-controls.md",{"type":214,"value":215,"toc":939},"minimark",[216,219,223,242,247,253,344,361,746,750,757,771,925,935],[217,218],"examples-orbit-controls",{},[220,221,222],"p",{},"OrbitControls is a camera controller that allows you to orbit around a target. It's a great way to explore your scene interactively.",[224,225,226],"note",{},[220,227,228,229,233,234,237,238,241],{},"The OrbitControls utility, which allows users to easily navigate around a 3D scene, isn't included in the core Three.js library by default. To use it, you need to import it manually from the ",[230,231,232],"code",{},"three/addons/controls/OrbitControls"," module via the ",[230,235,236],{},"three-stdlib"," package. Alternatively, if you're using the TresJS ecosystem, you can opt for a ready-to-use version of OrbitControls available as a component in the ",[230,239,240],{},"@tresjs/cientos"," package.",[243,244,246],"h2",{"id":245},"using-orbitcontrols-manually","Using OrbitControls Manually",[220,248,249,250,252],{},"To use ",[230,251,158],{}," manually, import it and extend the catalog:",[254,255,261],"pre",{"className":256,"code":257,"filename":258,"language":259,"meta":260,"style":260},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { extend } from '@tresjs/core'\nimport { OrbitControls } from 'three/addons/controls/OrbitControls'\n\nextend({ OrbitControls })\n","setup.ts","ts","",[230,262,263,296,316,322],{"__ignoreMap":260},[264,265,268,272,276,280,283,286,289,293],"span",{"class":266,"line":267},"line",1,[264,269,271],{"class":270},"s7zQu","import",[264,273,275],{"class":274},"sMK4o"," {",[264,277,279],{"class":278},"sTEyZ"," extend",[264,281,282],{"class":274}," }",[264,284,285],{"class":270}," from",[264,287,288],{"class":274}," '",[264,290,292],{"class":291},"sfazB","@tresjs/core",[264,294,295],{"class":274},"'\n",[264,297,299,301,303,306,308,310,312,314],{"class":266,"line":298},2,[264,300,271],{"class":270},[264,302,275],{"class":274},[264,304,305],{"class":278}," OrbitControls",[264,307,282],{"class":274},[264,309,285],{"class":270},[264,311,288],{"class":274},[264,313,232],{"class":291},[264,315,295],{"class":274},[264,317,319],{"class":266,"line":318},3,[264,320,321],{"emptyLinePlaceholder":39},"\n",[264,323,325,329,332,335,338,341],{"class":266,"line":324},4,[264,326,328],{"class":327},"s2Zo4","extend",[264,330,331],{"class":278},"(",[264,333,334],{"class":274},"{",[264,336,337],{"class":278}," OrbitControls ",[264,339,340],{"class":274},"}",[264,342,343],{"class":278},")\n",[220,345,346,347,350,351,357,358,360],{},"Now you can use the ",[230,348,349],{},"TresOrbitControls"," component in your scene. Since ",[352,353,158],"a",{"href":354,"rel":355},"https://threejs.org/docs/#examples/en/controls/OrbitControls",[356],"nofollow"," needs a reference to the camera and renderer, you can use the ",[230,359,92],{}," composable:",[362,363,364,550],"code-group",{},[254,365,370],{"className":366,"code":367,"filename":368,"language":369,"meta":260,"style":260},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { useTres } from '@tresjs/core'\n\nconst { camera, renderer } = useTres()\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresOrbitControls\n    v-if=\"camera\"\n    :args=\"[camera, renderer?.domElement]\"\n  />\n\u003C/template>\n","OrbitControls.vue","vue",[230,371,372,401,420,424,450,460,465,475,484,500,535,541],{"__ignoreMap":260},[264,373,374,377,381,385,388,391,394,396,398],{"class":266,"line":267},[264,375,376],{"class":274},"\u003C",[264,378,380],{"class":379},"swJcz","script",[264,382,384],{"class":383},"spNyl"," setup",[264,386,387],{"class":383}," lang",[264,389,390],{"class":274},"=",[264,392,393],{"class":274},"\"",[264,395,259],{"class":291},[264,397,393],{"class":274},[264,399,400],{"class":274},">\n",[264,402,403,405,407,410,412,414,416,418],{"class":266,"line":298},[264,404,271],{"class":270},[264,406,275],{"class":274},[264,408,409],{"class":278}," useTres",[264,411,282],{"class":274},[264,413,285],{"class":270},[264,415,288],{"class":274},[264,417,292],{"class":291},[264,419,295],{"class":274},[264,421,422],{"class":266,"line":318},[264,423,321],{"emptyLinePlaceholder":39},[264,425,426,429,431,434,437,440,442,445,447],{"class":266,"line":324},[264,427,428],{"class":383},"const",[264,430,275],{"class":274},[264,432,433],{"class":278}," camera",[264,435,436],{"class":274},",",[264,438,439],{"class":278}," renderer ",[264,441,340],{"class":274},[264,443,444],{"class":274}," =",[264,446,409],{"class":327},[264,448,449],{"class":278},"()\n",[264,451,453,456,458],{"class":266,"line":452},5,[264,454,455],{"class":274},"\u003C/",[264,457,380],{"class":379},[264,459,400],{"class":274},[264,461,463],{"class":266,"line":462},6,[264,464,321],{"emptyLinePlaceholder":39},[264,466,468,470,473],{"class":266,"line":467},7,[264,469,376],{"class":274},[264,471,472],{"class":379},"template",[264,474,400],{"class":274},[264,476,478,481],{"class":266,"line":477},8,[264,479,480],{"class":274},"  \u003C",[264,482,483],{"class":379},"TresOrbitControls\n",[264,485,487,490,492,494,497],{"class":266,"line":486},9,[264,488,489],{"class":270},"    v-if",[264,491,390],{"class":274},[264,493,393],{"class":274},[264,495,496],{"class":278},"camera",[264,498,499],{"class":274},"\"\n",[264,501,503,506,509,511,513,516,518,521,524,527,530,533],{"class":266,"line":502},10,[264,504,505],{"class":274},"    :",[264,507,508],{"class":383},"args",[264,510,390],{"class":274},[264,512,393],{"class":274},[264,514,515],{"class":274},"[",[264,517,496],{"class":278},[264,519,520],{"class":274},", ",[264,522,523],{"class":278},"renderer",[264,525,526],{"class":274},"?.",[264,528,529],{"class":278},"domElement",[264,531,532],{"class":274},"]",[264,534,499],{"class":274},[264,536,538],{"class":266,"line":537},11,[264,539,540],{"class":274},"  />\n",[264,542,544,546,548],{"class":266,"line":543},12,[264,545,455],{"class":274},[264,547,472],{"class":379},[264,549,400],{"class":274},[254,551,554],{"className":366,"code":552,"filename":553,"language":369,"meta":260,"style":260},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport OrbitControls from './OrbitControls.vue'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas shadows alpha>\n    \u003CTresPerspectiveCamera :args=\"[45, 1, 0.1, 1000]\" />\n    \u003COrbitControls />\n    \u003CTresGridHelper :args=\"[10, 10]\" />\n  \u003C/TresCanvas>\n\u003C/template>\n","App.vue",[230,555,556,576,595,611,619,623,631,646,691,699,729,738],{"__ignoreMap":260},[264,557,558,560,562,564,566,568,570,572,574],{"class":266,"line":267},[264,559,376],{"class":274},[264,561,380],{"class":379},[264,563,384],{"class":383},[264,565,387],{"class":383},[264,567,390],{"class":274},[264,569,393],{"class":274},[264,571,259],{"class":291},[264,573,393],{"class":274},[264,575,400],{"class":274},[264,577,578,580,582,585,587,589,591,593],{"class":266,"line":298},[264,579,271],{"class":270},[264,581,275],{"class":274},[264,583,584],{"class":278}," TresCanvas",[264,586,282],{"class":274},[264,588,285],{"class":270},[264,590,288],{"class":274},[264,592,292],{"class":291},[264,594,295],{"class":274},[264,596,597,599,601,604,606,609],{"class":266,"line":318},[264,598,271],{"class":270},[264,600,337],{"class":278},[264,602,603],{"class":270},"from",[264,605,288],{"class":274},[264,607,608],{"class":291},"./OrbitControls.vue",[264,610,295],{"class":274},[264,612,613,615,617],{"class":266,"line":324},[264,614,455],{"class":274},[264,616,380],{"class":379},[264,618,400],{"class":274},[264,620,621],{"class":266,"line":452},[264,622,321],{"emptyLinePlaceholder":39},[264,624,625,627,629],{"class":266,"line":462},[264,626,376],{"class":274},[264,628,472],{"class":379},[264,630,400],{"class":274},[264,632,633,635,638,641,644],{"class":266,"line":467},[264,634,480],{"class":274},[264,636,637],{"class":379},"TresCanvas",[264,639,640],{"class":383}," shadows",[264,642,643],{"class":383}," alpha",[264,645,400],{"class":274},[264,647,648,651,654,657,659,661,663,665,669,671,674,676,679,681,684,686,688],{"class":266,"line":477},[264,649,650],{"class":274},"    \u003C",[264,652,653],{"class":379},"TresPerspectiveCamera",[264,655,656],{"class":274}," :",[264,658,508],{"class":383},[264,660,390],{"class":274},[264,662,393],{"class":274},[264,664,515],{"class":274},[264,666,668],{"class":667},"sbssI","45",[264,670,520],{"class":274},[264,672,673],{"class":667},"1",[264,675,520],{"class":274},[264,677,678],{"class":667},"0.1",[264,680,520],{"class":274},[264,682,683],{"class":667},"1000",[264,685,532],{"class":274},[264,687,393],{"class":274},[264,689,690],{"class":274}," />\n",[264,692,693,695,697],{"class":266,"line":486},[264,694,650],{"class":274},[264,696,158],{"class":379},[264,698,690],{"class":274},[264,700,701,703,706,708,710,712,714,716,719,721,723,725,727],{"class":266,"line":502},[264,702,650],{"class":274},[264,704,705],{"class":379},"TresGridHelper",[264,707,656],{"class":274},[264,709,508],{"class":383},[264,711,390],{"class":274},[264,713,393],{"class":274},[264,715,515],{"class":274},[264,717,718],{"class":667},"10",[264,720,520],{"class":274},[264,722,718],{"class":667},[264,724,532],{"class":274},[264,726,393],{"class":274},[264,728,690],{"class":274},[264,730,731,734,736],{"class":266,"line":537},[264,732,733],{"class":274},"  \u003C/",[264,735,637],{"class":379},[264,737,400],{"class":274},[264,739,740,742,744],{"class":266,"line":543},[264,741,455],{"class":274},[264,743,472],{"class":379},[264,745,400],{"class":274},[747,748],"read-more",{"to":749},"/api/components/tres-objects#extending-the-catalogue",[243,751,753,754,756],{"id":752},"orbitcontrols-from-tresjscientos-recommended","OrbitControls from ",[230,755,240],{}," (Recommended)",[220,758,759,760,766,767,770],{},"The ",[352,761,764],{"href":762,"rel":763},"https://cientos.tresjs.org/",[356],[230,765,240],{}," package provides a plug-and-play ",[230,768,769],{},"\u003COrbitControls />"," component that wraps the ThreeJS OrbitControls. You don't need to extend the catalog or pass any arguments—it just works!",[254,772,775],{"className":366,"code":773,"filename":774,"language":369,"meta":260,"style":260},"\u003Cscript setup lang=\"ts\">\nimport { OrbitControls } from '@tresjs/cientos'\nimport { TresCanvas } from '@tresjs/core'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas shadows alpha>\n    \u003CTresPerspectiveCamera :args=\"[45, 1, 0.1, 1000]\" />\n    \u003COrbitControls />\n  \u003C/TresCanvas>\n\u003C/template>\n","CientosOrbitControls.vue",[230,776,777,797,815,833,841,845,853,865,901,909,917],{"__ignoreMap":260},[264,778,779,781,783,785,787,789,791,793,795],{"class":266,"line":267},[264,780,376],{"class":274},[264,782,380],{"class":379},[264,784,384],{"class":383},[264,786,387],{"class":383},[264,788,390],{"class":274},[264,790,393],{"class":274},[264,792,259],{"class":291},[264,794,393],{"class":274},[264,796,400],{"class":274},[264,798,799,801,803,805,807,809,811,813],{"class":266,"line":298},[264,800,271],{"class":270},[264,802,275],{"class":274},[264,804,305],{"class":278},[264,806,282],{"class":274},[264,808,285],{"class":270},[264,810,288],{"class":274},[264,812,240],{"class":291},[264,814,295],{"class":274},[264,816,817,819,821,823,825,827,829,831],{"class":266,"line":318},[264,818,271],{"class":270},[264,820,275],{"class":274},[264,822,584],{"class":278},[264,824,282],{"class":274},[264,826,285],{"class":270},[264,828,288],{"class":274},[264,830,292],{"class":291},[264,832,295],{"class":274},[264,834,835,837,839],{"class":266,"line":324},[264,836,455],{"class":274},[264,838,380],{"class":379},[264,840,400],{"class":274},[264,842,843],{"class":266,"line":452},[264,844,321],{"emptyLinePlaceholder":39},[264,846,847,849,851],{"class":266,"line":462},[264,848,376],{"class":274},[264,850,472],{"class":379},[264,852,400],{"class":274},[264,854,855,857,859,861,863],{"class":266,"line":467},[264,856,480],{"class":274},[264,858,637],{"class":379},[264,860,640],{"class":383},[264,862,643],{"class":383},[264,864,400],{"class":274},[264,866,867,869,871,873,875,877,879,881,883,885,887,889,891,893,895,897,899],{"class":266,"line":477},[264,868,650],{"class":274},[264,870,653],{"class":379},[264,872,656],{"class":274},[264,874,508],{"class":383},[264,876,390],{"class":274},[264,878,393],{"class":274},[264,880,515],{"class":274},[264,882,668],{"class":667},[264,884,520],{"class":274},[264,886,673],{"class":667},[264,888,520],{"class":274},[264,890,678],{"class":667},[264,892,520],{"class":274},[264,894,683],{"class":667},[264,896,532],{"class":274},[264,898,393],{"class":274},[264,900,690],{"class":274},[264,902,903,905,907],{"class":266,"line":486},[264,904,650],{"class":274},[264,906,158],{"class":379},[264,908,690],{"class":274},[264,910,911,913,915],{"class":266,"line":502},[264,912,733],{"class":274},[264,914,637],{"class":379},[264,916,400],{"class":274},[264,918,919,921,923],{"class":266,"line":537},[264,920,455],{"class":274},[264,922,472],{"class":379},[264,924,400],{"class":274},[926,927,928],"tip",{},[220,929,930,931,934],{},"Make sure the ",[230,932,933],{},"PerspectiveCamera"," is set first in the canvas, otherwise controls might not work as expected.",[936,937,938],"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 .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}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 .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}",{"title":260,"searchDepth":267,"depth":298,"links":940},[941,942],{"id":245,"depth":298,"text":246},{"id":752,"depth":298,"text":943},"OrbitControls from @tresjs/cientos (Recommended)","Learn how to use OrbitControls in TresJS, including both manual and plug-and-play approaches.","md",null,{"thumbnail":948},"/recipes/orbit-controls.png",{"title":158,"description":944},"PlSdSO5bvNZ3n4ylUgjSY4tWbB1P73bDmozCMUeLzDg",[952,954],{"title":155,"path":151,"stem":156,"description":953,"children":-1},"Discover guided recipes to help you get started with the basics of using Tres. Each recipe is designed to help you understand the core concepts of Tres and how to use them in your projects.",{"title":162,"path":163,"stem":164,"description":955,"children":-1},"Learn how to create basic animations in TresJS",1768600249155]