[{"data":1,"prerenderedAt":1313},["ShallowReactive",2],{"navigation":3,"/api/components/tres-objects":239,"/api/components/tres-objects-surround":1308},[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":1302,"extension":1303,"links":1304,"meta":1305,"navigation":39,"path":102,"seo":1306,"stem":103,"__hash__":1307},"docs/3.api/1.components/tres-objects.md",{"type":242,"value":243,"toc":1289},"minimark",[244,249,267,272,374,378,381,433,436,585,591,603,607,610,618,624,734,738,741,744,990,993,996,1003,1080,1090,1093,1096,1103,1282,1285],[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,512,522,533,555,565,575],{"__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,478,482,485,488,491,495,498,500,502,504,507,509],{"class":393,"line":468},3,[391,470,471],{"class":401},"    \u003C",[391,473,474],{"class":450},"TresPerspectiveCamera",[391,476,477],{"class":401}," :",[391,479,481],{"class":480},"spNyl","position",[391,483,484],{"class":401},"=",[391,486,487],{"class":401},"\"",[391,489,490],{"class":401},"[",[391,492,494],{"class":493},"sbssI","5",[391,496,497],{"class":401},", ",[391,499,494],{"class":493},[391,501,497],{"class":401},[391,503,494],{"class":493},[391,505,506],{"class":401},"]",[391,508,487],{"class":401},[391,510,511],{"class":401}," />\n",[391,513,515,517,520],{"class":393,"line":514},4,[391,516,471],{"class":401},[391,518,519],{"class":450},"TresMesh",[391,521,454],{"class":401},[391,523,525,528,531],{"class":393,"line":524},5,[391,526,527],{"class":401},"      \u003C",[391,529,530],{"class":450},"TresBoxGeometry",[391,532,511],{"class":401},[391,534,536,538,541,544,546,548,551,553],{"class":393,"line":535},6,[391,537,527],{"class":401},[391,539,540],{"class":450},"TresMeshBasicMaterial",[391,542,543],{"class":480}," color",[391,545,484],{"class":401},[391,547,487],{"class":401},[391,549,550],{"class":429},"red",[391,552,487],{"class":401},[391,554,511],{"class":401},[391,556,558,561,563],{"class":393,"line":557},7,[391,559,560],{"class":401},"    \u003C/",[391,562,519],{"class":450},[391,564,454],{"class":401},[391,566,568,571,573],{"class":393,"line":567},8,[391,569,570],{"class":401},"  \u003C/",[391,572,463],{"class":450},[391,574,454],{"class":401},[391,576,578,581,583],{"class":393,"line":577},9,[391,579,580],{"class":401},"\u003C/",[391,582,451],{"class":450},[391,584,454],{"class":401},[586,587],"video-accordion",{"start-time":588,"title":589,"video-id":590},"334","Watch this video from Alvarosabu about the TresJS core principles","XsXfF9-qe60",[592,593,594],"tip",{},[250,595,596,597,602],{},"Since TresJS components map directly to Three.js classes, you can use the ",[302,598,601],{"href":599,"rel":600},"https://threejs.org/docs/",[306],"Three.js documentation"," as your API reference for constructor arguments and properties.",[245,604,606],{"id":605},"working-with-tres-components","Working with Tres Components",[250,608,609],{},"TresJS components accept two types of configuration:",[268,611,613,614,617],{"id":612},"constructor-arguments-args","Constructor Arguments (",[259,615,616],{},"args",")",[250,619,620,621,623],{},"Pass arguments to the Three.js constructor using the ",[259,622,616],{}," prop:",[382,625,627],{"className":438,"code":626,"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,628,629,637,643,676,681,686,726],{"__ignoreMap":387},[391,630,631,633,635],{"class":393,"line":394},[391,632,447],{"class":401},[391,634,451],{"class":450},[391,636,454],{"class":401},[391,638,639],{"class":393,"line":457},[391,640,642],{"class":641},"sHwdD","  \u003C!-- Creates: new THREE.BoxGeometry(2, 2, 2) -->\n",[391,644,645,647,649,651,653,655,657,659,662,664,666,668,670,672,674],{"class":393,"line":468},[391,646,460],{"class":401},[391,648,530],{"class":450},[391,650,477],{"class":401},[391,652,616],{"class":480},[391,654,484],{"class":401},[391,656,487],{"class":401},[391,658,490],{"class":401},[391,660,661],{"class":493},"2",[391,663,497],{"class":401},[391,665,661],{"class":493},[391,667,497],{"class":401},[391,669,661],{"class":493},[391,671,506],{"class":401},[391,673,487],{"class":401},[391,675,511],{"class":401},[391,677,678],{"class":393,"line":514},[391,679,680],{"emptyLinePlaceholder":39},"\n",[391,682,683],{"class":393,"line":524},[391,684,685],{"class":641},"  \u003C!-- Creates: new THREE.PerspectiveCamera(75, 1, 0.1, 1000) -->\n",[391,687,688,690,692,694,696,698,700,702,705,707,710,712,715,717,720,722,724],{"class":393,"line":535},[391,689,460],{"class":401},[391,691,474],{"class":450},[391,693,477],{"class":401},[391,695,616],{"class":480},[391,697,484],{"class":401},[391,699,487],{"class":401},[391,701,490],{"class":401},[391,703,704],{"class":493},"75",[391,706,497],{"class":401},[391,708,709],{"class":493},"1",[391,711,497],{"class":401},[391,713,714],{"class":493},"0.1",[391,716,497],{"class":401},[391,718,719],{"class":493},"1000",[391,721,506],{"class":401},[391,723,487],{"class":401},[391,725,511],{"class":401},[391,727,728,730,732],{"class":393,"line":557},[391,729,580],{"class":401},[391,731,451],{"class":450},[391,733,454],{"class":401},[735,736],"read-more",{"title":737,"to":64},"Learn more about constructor arguments",[268,739,67],{"id":740},"declarative-properties",[250,742,743],{},"Set Three.js object properties using Vue props:",[382,745,747],{"className":438,"code":746,"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,748,749,773,812,831,839,847,854,882,897,904,922,928,937,972,981],{"__ignoreMap":387},[391,750,751,753,756,759,762,764,766,769,771],{"class":393,"line":394},[391,752,447],{"class":401},[391,754,755],{"class":450},"script",[391,757,758],{"class":480}," setup",[391,760,761],{"class":480}," lang",[391,763,484],{"class":401},[391,765,487],{"class":401},[391,767,768],{"class":429},"ts",[391,770,487],{"class":401},[391,772,454],{"class":401},[391,774,775,778,781,783,787,790,793,795,798,801,804,806,809],{"class":393,"line":457},[391,776,777],{"class":480},"const",[391,779,780],{"class":405}," rotation ",[391,782,484],{"class":401},[391,784,786],{"class":785},"s2Zo4"," ref",[391,788,789],{"class":405},"([",[391,791,792],{"class":493},"0",[391,794,409],{"class":401},[391,796,797],{"class":405}," Math",[391,799,800],{"class":401},".",[391,802,803],{"class":405},"PI",[391,805,409],{"class":401},[391,807,808],{"class":493}," 0",[391,810,811],{"class":405},"])\n",[391,813,814,816,819,821,823,826,828],{"class":393,"line":468},[391,815,777],{"class":480},[391,817,818],{"class":405}," scale ",[391,820,484],{"class":401},[391,822,786],{"class":785},[391,824,825],{"class":405},"(",[391,827,661],{"class":493},[391,829,830],{"class":405},")\n",[391,832,833,835,837],{"class":393,"line":514},[391,834,580],{"class":401},[391,836,755],{"class":450},[391,838,454],{"class":401},[391,840,841,843,845],{"class":393,"line":524},[391,842,447],{"class":401},[391,844,451],{"class":450},[391,846,454],{"class":401},[391,848,849,851],{"class":393,"line":535},[391,850,460],{"class":401},[391,852,853],{"class":450},"TresMesh\n",[391,855,856,859,861,863,865,867,869,871,873,875,877,879],{"class":393,"line":557},[391,857,858],{"class":401},"    :",[391,860,481],{"class":480},[391,862,484],{"class":401},[391,864,487],{"class":401},[391,866,490],{"class":401},[391,868,792],{"class":493},[391,870,497],{"class":401},[391,872,709],{"class":493},[391,874,497],{"class":401},[391,876,792],{"class":493},[391,878,506],{"class":401},[391,880,881],{"class":401},"\"\n",[391,883,884,886,889,891,893,895],{"class":393,"line":567},[391,885,858],{"class":401},[391,887,888],{"class":480},"rotation",[391,890,484],{"class":401},[391,892,487],{"class":401},[391,894,888],{"class":405},[391,896,881],{"class":401},[391,898,899,901],{"class":393,"line":577},[391,900,858],{"class":401},[391,902,903],{"class":480},"scale\n",[391,905,907,909,912,914,916,920],{"class":393,"line":906},10,[391,908,858],{"class":401},[391,910,911],{"class":480},"cast-shadow",[391,913,484],{"class":401},[391,915,487],{"class":401},[391,917,919],{"class":918},"sfNiH","true",[391,921,881],{"class":401},[391,923,925],{"class":393,"line":924},11,[391,926,927],{"class":401},"  >\n",[391,929,931,933,935],{"class":393,"line":930},12,[391,932,471],{"class":401},[391,934,530],{"class":450},[391,936,511],{"class":401},[391,938,940,942,945,947,949,951,954,956,958,961,963,965,968,970],{"class":393,"line":939},13,[391,941,471],{"class":401},[391,943,944],{"class":450},"TresMeshStandardMaterial",[391,946,543],{"class":480},[391,948,484],{"class":401},[391,950,487],{"class":401},[391,952,953],{"class":429},"blue",[391,955,487],{"class":401},[391,957,477],{"class":401},[391,959,960],{"class":480},"metalness",[391,962,484],{"class":401},[391,964,487],{"class":401},[391,966,967],{"class":493},"0.5",[391,969,487],{"class":401},[391,971,511],{"class":401},[391,973,975,977,979],{"class":393,"line":974},14,[391,976,570],{"class":401},[391,978,519],{"class":450},[391,980,454],{"class":401},[391,982,984,986,988],{"class":393,"line":983},15,[391,985,580],{"class":401},[391,987,451],{"class":450},[391,989,454],{"class":401},[735,991],{"title":992,"to":68},"Learn more about declarative properties",[268,994,75],{"id":995},"child-attachments",[250,997,998,999,1002],{},"Nesting components inside others is how you compose Three.js objects in TresJS. This is ",[254,1000,1001],{},"not"," Vue's slot system — TresJS's custom renderer intercepts children and attaches them as properties of the parent Three.js object:",[382,1004,1006],{"className":438,"code":1005,"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,1007,1008,1016,1024,1029,1037,1041,1046,1064,1072],{"__ignoreMap":387},[391,1009,1010,1012,1014],{"class":393,"line":394},[391,1011,447],{"class":401},[391,1013,451],{"class":450},[391,1015,454],{"class":401},[391,1017,1018,1020,1022],{"class":393,"line":457},[391,1019,460],{"class":401},[391,1021,519],{"class":450},[391,1023,454],{"class":401},[391,1025,1026],{"class":393,"line":468},[391,1027,1028],{"class":641},"    \u003C!-- Becomes: mesh.geometry = new THREE.BoxGeometry() -->\n",[391,1030,1031,1033,1035],{"class":393,"line":514},[391,1032,471],{"class":401},[391,1034,530],{"class":450},[391,1036,511],{"class":401},[391,1038,1039],{"class":393,"line":524},[391,1040,680],{"emptyLinePlaceholder":39},[391,1042,1043],{"class":393,"line":535},[391,1044,1045],{"class":641},"    \u003C!-- Becomes: mesh.material = new THREE.MeshBasicMaterial({ color: 'red' }) -->\n",[391,1047,1048,1050,1052,1054,1056,1058,1060,1062],{"class":393,"line":557},[391,1049,471],{"class":401},[391,1051,540],{"class":450},[391,1053,543],{"class":480},[391,1055,484],{"class":401},[391,1057,487],{"class":401},[391,1059,550],{"class":429},[391,1061,487],{"class":401},[391,1063,511],{"class":401},[391,1065,1066,1068,1070],{"class":393,"line":567},[391,1067,570],{"class":401},[391,1069,519],{"class":450},[391,1071,454],{"class":401},[391,1073,1074,1076,1078],{"class":393,"line":577},[391,1075,580],{"class":401},[391,1077,451],{"class":450},[391,1079,454],{"class":401},[250,1081,1082,1085,1086,1089],{},[259,1083,1084],{},"Object3D"," children (meshes, lights, groups) are added via ",[259,1087,1088],{},".add()"," and become part of the scene graph hierarchy.",[735,1091],{"title":1092,"to":76},"Learn more about child attachments",[268,1094,71],{"id":1095},"extending-the-catalogue",[250,1097,1098,1099,1102],{},"Add Three.js addons or custom classes using ",[259,1100,1101],{},"extend()",":",[382,1104,1107],{"className":438,"code":1105,"highlights":1106,"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,514,524,924],[259,1108,1109,1129,1151,1172,1177,1196,1204,1208,1216,1224,1256,1266,1274],{"__ignoreMap":387},[391,1110,1111,1113,1115,1117,1119,1121,1123,1125,1127],{"class":393,"line":394},[391,1112,447],{"class":401},[391,1114,755],{"class":450},[391,1116,758],{"class":480},[391,1118,761],{"class":480},[391,1120,484],{"class":401},[391,1122,487],{"class":401},[391,1124,768],{"class":429},[391,1126,487],{"class":401},[391,1128,454],{"class":401},[391,1130,1133,1135,1137,1140,1142,1144,1146,1149],{"class":1131,"line":457},[393,1132],"highlight",[391,1134,398],{"class":397},[391,1136,402],{"class":401},[391,1138,1139],{"class":405}," extend",[391,1141,420],{"class":401},[391,1143,423],{"class":397},[391,1145,426],{"class":401},[391,1147,1148],{"class":429},"@tresjs/core",[391,1150,432],{"class":401},[391,1152,1154,1156,1158,1161,1163,1165,1167,1170],{"class":1153,"line":468},[393,1132],[391,1155,398],{"class":397},[391,1157,402],{"class":401},[391,1159,1160],{"class":405}," OrbitControls",[391,1162,420],{"class":401},[391,1164,423],{"class":397},[391,1166,426],{"class":401},[391,1168,1169],{"class":429},"three/addons/controls/OrbitControls",[391,1171,432],{"class":401},[391,1173,1175],{"class":1174,"line":514},[393,1132],[391,1176,680],{"emptyLinePlaceholder":39},[391,1178,1180,1183,1185,1188,1191,1194],{"class":1179,"line":524},[393,1132],[391,1181,1182],{"class":785},"extend",[391,1184,825],{"class":405},[391,1186,1187],{"class":401},"{",[391,1189,1190],{"class":405}," OrbitControls ",[391,1192,1193],{"class":401},"}",[391,1195,830],{"class":405},[391,1197,1198,1200,1202],{"class":393,"line":535},[391,1199,580],{"class":401},[391,1201,755],{"class":450},[391,1203,454],{"class":401},[391,1205,1206],{"class":393,"line":557},[391,1207,680],{"emptyLinePlaceholder":39},[391,1209,1210,1212,1214],{"class":393,"line":567},[391,1211,447],{"class":401},[391,1213,451],{"class":450},[391,1215,454],{"class":401},[391,1217,1218,1220,1222],{"class":393,"line":577},[391,1219,460],{"class":401},[391,1221,463],{"class":450},[391,1223,454],{"class":401},[391,1225,1226,1228,1230,1232,1234,1236,1238,1240,1242,1244,1246,1248,1250,1252,1254],{"class":393,"line":906},[391,1227,471],{"class":401},[391,1229,474],{"class":450},[391,1231,477],{"class":401},[391,1233,481],{"class":480},[391,1235,484],{"class":401},[391,1237,487],{"class":401},[391,1239,490],{"class":401},[391,1241,494],{"class":493},[391,1243,497],{"class":401},[391,1245,494],{"class":493},[391,1247,497],{"class":401},[391,1249,494],{"class":493},[391,1251,506],{"class":401},[391,1253,487],{"class":401},[391,1255,511],{"class":401},[391,1257,1259,1261,1264],{"class":1258,"line":924},[393,1132],[391,1260,471],{"class":401},[391,1262,1263],{"class":450},"TresOrbitControls",[391,1265,511],{"class":401},[391,1267,1268,1270,1272],{"class":393,"line":930},[391,1269,570],{"class":401},[391,1271,463],{"class":450},[391,1273,454],{"class":401},[391,1275,1276,1278,1280],{"class":393,"line":939},[391,1277,580],{"class":401},[391,1279,451],{"class":450},[391,1281,454],{"class":401},[735,1283],{"title":1284,"to":72},"Learn more about extending the catalogue",[1286,1287,1288],"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 .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}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 .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}",{"title":387,"searchDepth":394,"depth":457,"links":1290},[1291,1295],{"id":247,"depth":457,"text":248,"children":1292},[1293,1294],{"id":270,"depth":468,"text":271},{"id":376,"depth":468,"text":377},{"id":605,"depth":457,"text":606,"children":1296},[1297,1299,1300,1301],{"id":612,"depth":468,"text":1298},"Constructor Arguments (args)",{"id":740,"depth":468,"text":67},{"id":995,"depth":468,"text":75},{"id":1095,"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":1302},"1UIDkh6dmjJ9DuIpsbGILrJuwHtWZh6mvhCrN8A-0X8",[1309,1311],{"title":97,"path":98,"stem":99,"description":1310,"children":-1},"Internal context component used by TresCanvas for advanced setups.",{"title":112,"path":113,"stem":114,"description":1312,"children":-1},"useTres provides a convenient access to a simplified TresJS context.",1774953659033]