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