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