[{"data":1,"prerenderedAt":1227},["ShallowReactive",2],{"navigation":3,"/api/components/tres-objects":239,"/api/components/tres-objects-surround":1222},[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":101,"body":241,"description":1216,"extension":1217,"links":1218,"meta":1219,"navigation":39,"path":102,"seo":1220,"stem":103,"__hash__":1221},"docs/3.api/1.components/tres-objects.md",{"type":242,"value":243,"toc":1203},"minimark",[244,249,267,272,374,378,381,433,436,566,572,584,588,591,599,605,681,685,688,691,918,921,924,931,1008,1018,1021,1024,1031,1196,1199],[245,246,248],"h2",{"id":247},"the-autogenerated-catalogue","The Autogenerated Catalogue",[250,251,252,253,257,258,262,263,266],"p",{},"TresJS provides an ",[254,255,256],"strong",{},"autogenerated catalogue"," of Vue components that map directly to Three.js classes. Any class exported from the ",[259,260,261],"code",{},"three"," package is automatically available as a Vue component with the ",[259,264,265],{},"Tres"," prefix.",[268,269,271],"h3",{"id":270},"naming-convention","Naming Convention",[273,274,275,288],"table",{},[276,277,278],"thead",{},[279,280,281,285],"tr",{},[282,283,284],"th",{},"Vue Component",[282,286,287],{},"Three.js Class",[289,290,291,310,326,342,358],"tbody",{},[279,292,293,299],{},[294,295,296],"td",{},[259,297,298],{},"\u003CTresPerspectiveCamera />",[294,300,301],{},[302,303,307],"a",{"href":304,"rel":305},"https://threejs.org/docs/#api/en/cameras/PerspectiveCamera",[306],"nofollow",[259,308,309],{},"new THREE.PerspectiveCamera()",[279,311,312,317],{},[294,313,314],{},[259,315,316],{},"\u003CTresMesh />",[294,318,319],{},[302,320,323],{"href":321,"rel":322},"https://threejs.org/docs/#api/en/objects/Mesh",[306],[259,324,325],{},"new THREE.Mesh()",[279,327,328,333],{},[294,329,330],{},[259,331,332],{},"\u003CTresBoxGeometry />",[294,334,335],{},[302,336,339],{"href":337,"rel":338},"https://threejs.org/docs/#api/en/geometries/BoxGeometry",[306],[259,340,341],{},"new THREE.BoxGeometry()",[279,343,344,349],{},[294,345,346],{},[259,347,348],{},"\u003CTresMeshBasicMaterial />",[294,350,351],{},[302,352,355],{"href":353,"rel":354},"https://threejs.org/docs/#api/en/materials/MeshBasicMaterial",[306],[259,356,357],{},"new THREE.MeshBasicMaterial()",[279,359,360,365],{},[294,361,362],{},[259,363,364],{},"\u003CTresAmbientLight />",[294,366,367],{},[302,368,371],{"href":369,"rel":370},"https://threejs.org/docs/#api/en/lights/AmbientLight",[306],[259,372,373],{},"new THREE.AmbientLight()",[268,375,377],{"id":376},"no-imports-needed","No Imports Needed",[250,379,380],{},"Unlike vanilla Three.js where you must import each class:",[382,383,388],"pre",{"className":384,"code":385,"language":386,"meta":387,"style":387},"language-js shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { PerspectiveCamera, Mesh, BoxGeometry } from 'three'\n","js","",[259,389,390],{"__ignoreMap":387},[391,392,395,399,403,407,410,413,415,418,421,424,427,430],"span",{"class":393,"line":394},"line",1,[391,396,398],{"class":397},"s7zQu","import",[391,400,402],{"class":401},"sMK4o"," {",[391,404,406],{"class":405},"sTEyZ"," PerspectiveCamera",[391,408,409],{"class":401},",",[391,411,412],{"class":405}," Mesh",[391,414,409],{"class":401},[391,416,417],{"class":405}," BoxGeometry",[391,419,420],{"class":401}," }",[391,422,423],{"class":397}," from",[391,425,426],{"class":401}," '",[391,428,261],{"class":429},"sfazB",[391,431,432],{"class":401},"'\n",[250,434,435],{},"With TresJS, components are available automatically:",[382,437,441],{"className":438,"code":439,"language":440,"meta":387,"style":387},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003CTresPerspectiveCamera :position=\"[5, 5, 5]\" />\n    \u003CTresMesh>\n      \u003CTresBoxGeometry />\n      \u003CTresMeshBasicMaterial color=\"red\" />\n    \u003C/TresMesh>\n  \u003C/TresCanvas>\n\u003C/template>\n","vue",[259,442,443,455,466,493,503,514,536,546,556],{"__ignoreMap":387},[391,444,445,448,452],{"class":393,"line":394},[391,446,447],{"class":401},"\u003C",[391,449,451],{"class":450},"swJcz","template",[391,453,454],{"class":401},">\n",[391,456,458,461,464],{"class":393,"line":457},2,[391,459,460],{"class":401},"  \u003C",[391,462,463],{"class":450},"TresCanvas",[391,465,454],{"class":401},[391,467,469,472,475,479,482,485,488,490],{"class":393,"line":468},3,[391,470,471],{"class":401},"    \u003C",[391,473,474],{"class":450},"TresPerspectiveCamera",[391,476,478],{"class":477},"spNyl"," :position",[391,480,481],{"class":401},"=",[391,483,484],{"class":401},"\"",[391,486,487],{"class":429},"[5, 5, 5]",[391,489,484],{"class":401},[391,491,492],{"class":401}," />\n",[391,494,496,498,501],{"class":393,"line":495},4,[391,497,471],{"class":401},[391,499,500],{"class":450},"TresMesh",[391,502,454],{"class":401},[391,504,506,509,512],{"class":393,"line":505},5,[391,507,508],{"class":401},"      \u003C",[391,510,511],{"class":450},"TresBoxGeometry",[391,513,492],{"class":401},[391,515,517,519,522,525,527,529,532,534],{"class":393,"line":516},6,[391,518,508],{"class":401},[391,520,521],{"class":450},"TresMeshBasicMaterial",[391,523,524],{"class":477}," color",[391,526,481],{"class":401},[391,528,484],{"class":401},[391,530,531],{"class":429},"red",[391,533,484],{"class":401},[391,535,492],{"class":401},[391,537,539,542,544],{"class":393,"line":538},7,[391,540,541],{"class":401},"    \u003C/",[391,543,500],{"class":450},[391,545,454],{"class":401},[391,547,549,552,554],{"class":393,"line":548},8,[391,550,551],{"class":401},"  \u003C/",[391,553,463],{"class":450},[391,555,454],{"class":401},[391,557,559,562,564],{"class":393,"line":558},9,[391,560,561],{"class":401},"\u003C/",[391,563,451],{"class":450},[391,565,454],{"class":401},[567,568],"video-accordion",{"start-time":569,"title":570,"video-id":571},"334","Watch this video from Alvarosabu about the TresJS core principles","XsXfF9-qe60",[573,574,575],"tip",{},[250,576,577,578,583],{},"Since TresJS components map directly to Three.js classes, you can use the ",[302,579,582],{"href":580,"rel":581},"https://threejs.org/docs/",[306],"Three.js documentation"," as your API reference for constructor arguments and properties.",[245,585,587],{"id":586},"working-with-tres-components","Working with Tres Components",[250,589,590],{},"TresJS components accept two types of configuration:",[268,592,594,595,598],{"id":593},"constructor-arguments-args","Constructor Arguments (",[259,596,597],{},"args",")",[250,600,601,602,604],{},"Pass arguments to the Three.js constructor using the ",[259,603,597],{}," prop:",[382,606,608],{"className":438,"code":607,"language":440,"meta":387,"style":387},"\u003Ctemplate>\n  \u003C!-- Creates: new THREE.BoxGeometry(2, 2, 2) -->\n  \u003CTresBoxGeometry :args=\"[2, 2, 2]\" />\n\n  \u003C!-- Creates: new THREE.PerspectiveCamera(75, 1, 0.1, 1000) -->\n  \u003CTresPerspectiveCamera :args=\"[75, 1, 0.1, 1000]\" />\n\u003C/template>\n",[259,609,610,618,624,644,649,654,673],{"__ignoreMap":387},[391,611,612,614,616],{"class":393,"line":394},[391,613,447],{"class":401},[391,615,451],{"class":450},[391,617,454],{"class":401},[391,619,620],{"class":393,"line":457},[391,621,623],{"class":622},"sHwdD","  \u003C!-- Creates: new THREE.BoxGeometry(2, 2, 2) -->\n",[391,625,626,628,630,633,635,637,640,642],{"class":393,"line":468},[391,627,460],{"class":401},[391,629,511],{"class":450},[391,631,632],{"class":477}," :args",[391,634,481],{"class":401},[391,636,484],{"class":401},[391,638,639],{"class":429},"[2, 2, 2]",[391,641,484],{"class":401},[391,643,492],{"class":401},[391,645,646],{"class":393,"line":495},[391,647,648],{"emptyLinePlaceholder":39},"\n",[391,650,651],{"class":393,"line":505},[391,652,653],{"class":622},"  \u003C!-- Creates: new THREE.PerspectiveCamera(75, 1, 0.1, 1000) -->\n",[391,655,656,658,660,662,664,666,669,671],{"class":393,"line":516},[391,657,460],{"class":401},[391,659,474],{"class":450},[391,661,632],{"class":477},[391,663,481],{"class":401},[391,665,484],{"class":401},[391,667,668],{"class":429},"[75, 1, 0.1, 1000]",[391,670,484],{"class":401},[391,672,492],{"class":401},[391,674,675,677,679],{"class":393,"line":538},[391,676,561],{"class":401},[391,678,451],{"class":450},[391,680,454],{"class":401},[682,683],"read-more",{"title":684,"to":64},"Learn more about constructor arguments",[268,686,67],{"id":687},"declarative-properties",[250,689,690],{},"Set Three.js object properties using Vue props:",[382,692,694],{"className":438,"code":693,"language":440,"meta":387,"style":387},"\u003Cscript setup lang=\"ts\">\nconst rotation = ref([0, Math.PI, 0])\nconst scale = ref(2)\n\u003C/script>\n\u003Ctemplate>\n  \u003CTresMesh\n    :position=\"[0, 1, 0]\"\n    :rotation=\"rotation\"\n    :scale\n    :cast-shadow=\"true\"\n  >\n    \u003CTresBoxGeometry />\n    \u003CTresMeshStandardMaterial color=\"blue\" :metalness=\"0.5\" />\n  \u003C/TresMesh>\n\u003C/template>\n",[259,695,696,720,760,780,788,796,803,818,832,837,852,858,867,900,909],{"__ignoreMap":387},[391,697,698,700,703,706,709,711,713,716,718],{"class":393,"line":394},[391,699,447],{"class":401},[391,701,702],{"class":450},"script",[391,704,705],{"class":477}," setup",[391,707,708],{"class":477}," lang",[391,710,481],{"class":401},[391,712,484],{"class":401},[391,714,715],{"class":429},"ts",[391,717,484],{"class":401},[391,719,454],{"class":401},[391,721,722,725,728,730,734,737,741,743,746,749,752,754,757],{"class":393,"line":457},[391,723,724],{"class":477},"const",[391,726,727],{"class":405}," rotation ",[391,729,481],{"class":401},[391,731,733],{"class":732},"s2Zo4"," ref",[391,735,736],{"class":405},"([",[391,738,740],{"class":739},"sbssI","0",[391,742,409],{"class":401},[391,744,745],{"class":405}," Math",[391,747,748],{"class":401},".",[391,750,751],{"class":405},"PI",[391,753,409],{"class":401},[391,755,756],{"class":739}," 0",[391,758,759],{"class":405},"])\n",[391,761,762,764,767,769,771,774,777],{"class":393,"line":468},[391,763,724],{"class":477},[391,765,766],{"class":405}," scale ",[391,768,481],{"class":401},[391,770,733],{"class":732},[391,772,773],{"class":405},"(",[391,775,776],{"class":739},"2",[391,778,779],{"class":405},")\n",[391,781,782,784,786],{"class":393,"line":495},[391,783,561],{"class":401},[391,785,702],{"class":450},[391,787,454],{"class":401},[391,789,790,792,794],{"class":393,"line":505},[391,791,447],{"class":401},[391,793,451],{"class":450},[391,795,454],{"class":401},[391,797,798,800],{"class":393,"line":516},[391,799,460],{"class":401},[391,801,802],{"class":450},"TresMesh\n",[391,804,805,808,810,812,815],{"class":393,"line":538},[391,806,807],{"class":477},"    :position",[391,809,481],{"class":401},[391,811,484],{"class":401},[391,813,814],{"class":429},"[0, 1, 0]",[391,816,817],{"class":401},"\"\n",[391,819,820,823,825,827,830],{"class":393,"line":548},[391,821,822],{"class":477},"    :rotation",[391,824,481],{"class":401},[391,826,484],{"class":401},[391,828,829],{"class":429},"rotation",[391,831,817],{"class":401},[391,833,834],{"class":393,"line":558},[391,835,836],{"class":477},"    :scale\n",[391,838,840,843,845,847,850],{"class":393,"line":839},10,[391,841,842],{"class":477},"    :cast-shadow",[391,844,481],{"class":401},[391,846,484],{"class":401},[391,848,849],{"class":429},"true",[391,851,817],{"class":401},[391,853,855],{"class":393,"line":854},11,[391,856,857],{"class":401},"  >\n",[391,859,861,863,865],{"class":393,"line":860},12,[391,862,471],{"class":401},[391,864,511],{"class":450},[391,866,492],{"class":401},[391,868,870,872,875,877,879,881,884,886,889,891,893,896,898],{"class":393,"line":869},13,[391,871,471],{"class":401},[391,873,874],{"class":450},"TresMeshStandardMaterial",[391,876,524],{"class":477},[391,878,481],{"class":401},[391,880,484],{"class":401},[391,882,883],{"class":429},"blue",[391,885,484],{"class":401},[391,887,888],{"class":477}," :metalness",[391,890,481],{"class":401},[391,892,484],{"class":401},[391,894,895],{"class":429},"0.5",[391,897,484],{"class":401},[391,899,492],{"class":401},[391,901,903,905,907],{"class":393,"line":902},14,[391,904,551],{"class":401},[391,906,500],{"class":450},[391,908,454],{"class":401},[391,910,912,914,916],{"class":393,"line":911},15,[391,913,561],{"class":401},[391,915,451],{"class":450},[391,917,454],{"class":401},[682,919],{"title":920,"to":68},"Learn more about declarative properties",[268,922,75],{"id":923},"child-attachments",[250,925,926,927,930],{},"Nesting components inside others is how you compose Three.js objects in TresJS. This is ",[254,928,929],{},"not"," Vue's slot system — TresJS's custom renderer intercepts children and attaches them as properties of the parent Three.js object:",[382,932,934],{"className":438,"code":933,"language":440,"meta":387,"style":387},"\u003Ctemplate>\n  \u003CTresMesh>\n    \u003C!-- Becomes: mesh.geometry = new THREE.BoxGeometry() -->\n    \u003CTresBoxGeometry />\n\n    \u003C!-- Becomes: mesh.material = new THREE.MeshBasicMaterial({ color: 'red' }) -->\n    \u003CTresMeshBasicMaterial color=\"red\" />\n  \u003C/TresMesh>\n\u003C/template>\n",[259,935,936,944,952,957,965,969,974,992,1000],{"__ignoreMap":387},[391,937,938,940,942],{"class":393,"line":394},[391,939,447],{"class":401},[391,941,451],{"class":450},[391,943,454],{"class":401},[391,945,946,948,950],{"class":393,"line":457},[391,947,460],{"class":401},[391,949,500],{"class":450},[391,951,454],{"class":401},[391,953,954],{"class":393,"line":468},[391,955,956],{"class":622},"    \u003C!-- Becomes: mesh.geometry = new THREE.BoxGeometry() -->\n",[391,958,959,961,963],{"class":393,"line":495},[391,960,471],{"class":401},[391,962,511],{"class":450},[391,964,492],{"class":401},[391,966,967],{"class":393,"line":505},[391,968,648],{"emptyLinePlaceholder":39},[391,970,971],{"class":393,"line":516},[391,972,973],{"class":622},"    \u003C!-- Becomes: mesh.material = new THREE.MeshBasicMaterial({ color: 'red' }) -->\n",[391,975,976,978,980,982,984,986,988,990],{"class":393,"line":538},[391,977,471],{"class":401},[391,979,521],{"class":450},[391,981,524],{"class":477},[391,983,481],{"class":401},[391,985,484],{"class":401},[391,987,531],{"class":429},[391,989,484],{"class":401},[391,991,492],{"class":401},[391,993,994,996,998],{"class":393,"line":548},[391,995,551],{"class":401},[391,997,500],{"class":450},[391,999,454],{"class":401},[391,1001,1002,1004,1006],{"class":393,"line":558},[391,1003,561],{"class":401},[391,1005,451],{"class":450},[391,1007,454],{"class":401},[250,1009,1010,1013,1014,1017],{},[259,1011,1012],{},"Object3D"," children (meshes, lights, groups) are added via ",[259,1015,1016],{},".add()"," and become part of the scene graph hierarchy.",[682,1019],{"title":1020,"to":76},"Learn more about child attachments",[268,1022,71],{"id":1023},"extending-the-catalogue",[250,1025,1026,1027,1030],{},"Add Three.js addons or custom classes using ",[259,1028,1029],{},"extend()",":",[382,1032,1035],{"className":438,"code":1033,"highlights":1034,"language":440,"meta":387,"style":387},"\u003Cscript setup lang=\"ts\">\nimport { extend } from '@tresjs/core'\nimport { OrbitControls } from 'three/addons/controls/OrbitControls'\n\nextend({ OrbitControls })\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003CTresPerspectiveCamera :position=\"[5, 5, 5]\" />\n    \u003CTresOrbitControls />\n  \u003C/TresCanvas>\n\u003C/template>\n",[457,468,495,505,854],[259,1036,1037,1057,1079,1100,1105,1124,1132,1136,1144,1152,1170,1180,1188],{"__ignoreMap":387},[391,1038,1039,1041,1043,1045,1047,1049,1051,1053,1055],{"class":393,"line":394},[391,1040,447],{"class":401},[391,1042,702],{"class":450},[391,1044,705],{"class":477},[391,1046,708],{"class":477},[391,1048,481],{"class":401},[391,1050,484],{"class":401},[391,1052,715],{"class":429},[391,1054,484],{"class":401},[391,1056,454],{"class":401},[391,1058,1061,1063,1065,1068,1070,1072,1074,1077],{"class":1059,"line":457},[393,1060],"highlight",[391,1062,398],{"class":397},[391,1064,402],{"class":401},[391,1066,1067],{"class":405}," extend",[391,1069,420],{"class":401},[391,1071,423],{"class":397},[391,1073,426],{"class":401},[391,1075,1076],{"class":429},"@tresjs/core",[391,1078,432],{"class":401},[391,1080,1082,1084,1086,1089,1091,1093,1095,1098],{"class":1081,"line":468},[393,1060],[391,1083,398],{"class":397},[391,1085,402],{"class":401},[391,1087,1088],{"class":405}," OrbitControls",[391,1090,420],{"class":401},[391,1092,423],{"class":397},[391,1094,426],{"class":401},[391,1096,1097],{"class":429},"three/addons/controls/OrbitControls",[391,1099,432],{"class":401},[391,1101,1103],{"class":1102,"line":495},[393,1060],[391,1104,648],{"emptyLinePlaceholder":39},[391,1106,1108,1111,1113,1116,1119,1122],{"class":1107,"line":505},[393,1060],[391,1109,1110],{"class":732},"extend",[391,1112,773],{"class":405},[391,1114,1115],{"class":401},"{",[391,1117,1118],{"class":405}," OrbitControls ",[391,1120,1121],{"class":401},"}",[391,1123,779],{"class":405},[391,1125,1126,1128,1130],{"class":393,"line":516},[391,1127,561],{"class":401},[391,1129,702],{"class":450},[391,1131,454],{"class":401},[391,1133,1134],{"class":393,"line":538},[391,1135,648],{"emptyLinePlaceholder":39},[391,1137,1138,1140,1142],{"class":393,"line":548},[391,1139,447],{"class":401},[391,1141,451],{"class":450},[391,1143,454],{"class":401},[391,1145,1146,1148,1150],{"class":393,"line":558},[391,1147,460],{"class":401},[391,1149,463],{"class":450},[391,1151,454],{"class":401},[391,1153,1154,1156,1158,1160,1162,1164,1166,1168],{"class":393,"line":839},[391,1155,471],{"class":401},[391,1157,474],{"class":450},[391,1159,478],{"class":477},[391,1161,481],{"class":401},[391,1163,484],{"class":401},[391,1165,487],{"class":429},[391,1167,484],{"class":401},[391,1169,492],{"class":401},[391,1171,1173,1175,1178],{"class":1172,"line":854},[393,1060],[391,1174,471],{"class":401},[391,1176,1177],{"class":450},"TresOrbitControls",[391,1179,492],{"class":401},[391,1181,1182,1184,1186],{"class":393,"line":860},[391,1183,551],{"class":401},[391,1185,463],{"class":450},[391,1187,454],{"class":401},[391,1189,1190,1192,1194],{"class":393,"line":869},[391,1191,561],{"class":401},[391,1193,451],{"class":450},[391,1195,454],{"class":401},[682,1197],{"title":1198,"to":72},"Learn more about extending the catalogue",[1200,1201,1202],"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 .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 .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 pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}",{"title":387,"searchDepth":394,"depth":457,"links":1204},[1205,1209],{"id":247,"depth":457,"text":248,"children":1206},[1207,1208],{"id":270,"depth":468,"text":271},{"id":376,"depth":468,"text":377},{"id":586,"depth":457,"text":587,"children":1210},[1211,1213,1214,1215],{"id":593,"depth":468,"text":1212},"Constructor Arguments (args)",{"id":687,"depth":468,"text":67},{"id":923,"depth":468,"text":75},{"id":1023,"depth":468,"text":71},"Learn how TresJS automatically maps Vue components to Three.js objects using a custom renderer and autogenerated catalogue.","md",null,{},{"title":101,"description":1216},"q-cDrt7dWgRrbxRcCwEss-dWQlnW3FNpTQa6olVaWPA",[1223,1225],{"title":97,"path":98,"stem":99,"description":1224,"children":-1},"Internal context component used by TresCanvas for advanced setups.",{"title":112,"path":113,"stem":114,"description":1226,"children":-1},"useTres provides a convenient access to a simplified TresJS context.",1782052331843]