[{"data":1,"prerenderedAt":2779},["ShallowReactive",2],{"navigation":3,"/essentials/concepts/extending-catalogue":256,"/essentials/concepts/extending-catalogue-surround":2774},[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":71,"body":258,"description":2768,"extension":2769,"links":2770,"meta":2771,"navigation":39,"path":72,"seo":2772,"stem":73,"__hash__":2773},"docs/2.essentials/2.concepts/5.extending-catalogue.md",{"type":259,"value":260,"toc":2745},"minimark",[261,266,280,336,343,351,356,464,468,473,618,642,649,838,848,852,1050,1054,1168,1172,1310,1323,1327,1331,1527,1531,1534,1820,1824,1829,1889,1892,1924,1928,1932,1935,2021,2025,2028,2123,2127,2130,2213,2217,2688,2692,2741],[262,263,265],"h2",{"id":264},"the-tresjs-catalogue","The TresJS Catalogue",[267,268,269,270,274,275,279],"p",{},"TresJS automatically generates Vue components for all classes exported from the ",[271,272,273],"code",{},"three"," package. This ",[276,277,278],"strong",{},"catalogue"," maps component names to Three.js constructors:",[281,282,283,296],"table",{},[284,285,286],"thead",{},[287,288,289,293],"tr",{},[290,291,292],"th",{},"Component",[290,294,295],{},"Three.js Class",[297,298,299,312,324],"tbody",{},[287,300,301,307],{},[302,303,304],"td",{},[271,305,306],{},"\u003CTresMesh />",[302,308,309],{},[271,310,311],{},"THREE.Mesh",[287,313,314,319],{},[302,315,316],{},[271,317,318],{},"\u003CTresBoxGeometry />",[302,320,321],{},[271,322,323],{},"THREE.BoxGeometry",[287,325,326,331],{},[302,327,328],{},[271,329,330],{},"\u003CTresPerspectiveCamera />",[302,332,333],{},[271,334,335],{},"THREE.PerspectiveCamera",[267,337,338,339,342],{},"But Three.js has many useful classes in ",[271,340,341],{},"three/addons/"," that aren't included by default, plus third-party libraries you might want to use.",[262,344,346,347,350],{"id":345},"the-extend-function","The ",[271,348,349],{},"extend"," Function",[267,352,346,353,355],{},[271,354,349],{}," function adds new classes to the catalogue, making them available as Tres components:",[357,358,363],"pre",{"className":359,"code":360,"language":361,"meta":362,"style":362},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { extend } from '@tresjs/core'\nimport { TextGeometry } from 'three/addons/geometries/TextGeometry'\n\n// Add to catalogue\nextend({ TextGeometry })\n\n// Now available as \u003CTresTextGeometry />\n","ts","",[271,364,365,398,419,425,432,453,458],{"__ignoreMap":362},[366,367,370,374,378,382,385,388,391,395],"span",{"class":368,"line":369},"line",1,[366,371,373],{"class":372},"s7zQu","import",[366,375,377],{"class":376},"sMK4o"," {",[366,379,381],{"class":380},"sTEyZ"," extend",[366,383,384],{"class":376}," }",[366,386,387],{"class":372}," from",[366,389,390],{"class":376}," '",[366,392,394],{"class":393},"sfazB","@tresjs/core",[366,396,397],{"class":376},"'\n",[366,399,401,403,405,408,410,412,414,417],{"class":368,"line":400},2,[366,402,373],{"class":372},[366,404,377],{"class":376},[366,406,407],{"class":380}," TextGeometry",[366,409,384],{"class":376},[366,411,387],{"class":372},[366,413,390],{"class":376},[366,415,416],{"class":393},"three/addons/geometries/TextGeometry",[366,418,397],{"class":376},[366,420,422],{"class":368,"line":421},3,[366,423,424],{"emptyLinePlaceholder":39},"\n",[366,426,428],{"class":368,"line":427},4,[366,429,431],{"class":430},"sHwdD","// Add to catalogue\n",[366,433,435,438,441,444,447,450],{"class":368,"line":434},5,[366,436,349],{"class":437},"s2Zo4",[366,439,440],{"class":380},"(",[366,442,443],{"class":376},"{",[366,445,446],{"class":380}," TextGeometry ",[366,448,449],{"class":376},"}",[366,451,452],{"class":380},")\n",[366,454,456],{"class":368,"line":455},6,[366,457,424],{"emptyLinePlaceholder":39},[366,459,461],{"class":368,"line":460},7,[366,462,463],{"class":430},"// Now available as \u003CTresTextGeometry />\n",[262,465,467],{"id":466},"common-extensions","Common Extensions",[469,470,472],"h3",{"id":471},"controls","Controls",[357,474,478],{"className":475,"code":476,"language":477,"meta":362,"style":362},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { OrbitControls } from '@tresjs/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003CTresPerspectiveCamera :position=\"[5, 5, 5]\" />\n    \u003COrbitControls />\n    \u003C!-- ... -->\n  \u003C/TresCanvas>\n\u003C/template>\n","vue",[271,479,480,509,529,538,542,551,561,584,593,599,609],{"__ignoreMap":362},[366,481,482,485,489,493,496,499,502,504,506],{"class":368,"line":369},[366,483,484],{"class":376},"\u003C",[366,486,488],{"class":487},"swJcz","script",[366,490,492],{"class":491},"spNyl"," setup",[366,494,495],{"class":491}," lang",[366,497,498],{"class":376},"=",[366,500,501],{"class":376},"\"",[366,503,361],{"class":393},[366,505,501],{"class":376},[366,507,508],{"class":376},">\n",[366,510,511,513,515,518,520,522,524,527],{"class":368,"line":400},[366,512,373],{"class":372},[366,514,377],{"class":376},[366,516,517],{"class":380}," OrbitControls",[366,519,384],{"class":376},[366,521,387],{"class":372},[366,523,390],{"class":376},[366,525,526],{"class":393},"@tresjs/cientos",[366,528,397],{"class":376},[366,530,531,534,536],{"class":368,"line":421},[366,532,533],{"class":376},"\u003C/",[366,535,488],{"class":487},[366,537,508],{"class":376},[366,539,540],{"class":368,"line":427},[366,541,424],{"emptyLinePlaceholder":39},[366,543,544,546,549],{"class":368,"line":434},[366,545,484],{"class":376},[366,547,548],{"class":487},"template",[366,550,508],{"class":376},[366,552,553,556,559],{"class":368,"line":455},[366,554,555],{"class":376},"  \u003C",[366,557,558],{"class":487},"TresCanvas",[366,560,508],{"class":376},[366,562,563,566,569,572,574,576,579,581],{"class":368,"line":460},[366,564,565],{"class":376},"    \u003C",[366,567,568],{"class":487},"TresPerspectiveCamera",[366,570,571],{"class":491}," :position",[366,573,498],{"class":376},[366,575,501],{"class":376},[366,577,578],{"class":393},"[5, 5, 5]",[366,580,501],{"class":376},[366,582,583],{"class":376}," />\n",[366,585,587,589,591],{"class":368,"line":586},8,[366,588,565],{"class":376},[366,590,199],{"class":487},[366,592,583],{"class":376},[366,594,596],{"class":368,"line":595},9,[366,597,598],{"class":430},"    \u003C!-- ... -->\n",[366,600,602,605,607],{"class":368,"line":601},10,[366,603,604],{"class":376},"  \u003C/",[366,606,558],{"class":487},[366,608,508],{"class":376},[366,610,612,614,616],{"class":368,"line":611},11,[366,613,533],{"class":376},[366,615,548],{"class":487},[366,617,508],{"class":376},[619,620,621],"note",{},[267,622,623,624,626,627,629,630,633,634,641],{},"Controls such as Three.js' ",[271,625,199],{}," require the active camera and renderer DOM element as constructor arguments. Prefer the ",[271,628,526],{}," component shown above, which reads both from the canvas context. If you extend a control class directly, wrap it in a component rendered inside ",[271,631,632],{},"\u003CTresCanvas>"," and pass those values through the ",[635,636,637,640],"a",{"href":64},[271,638,639],{},"args"," prop",".",[267,643,644,645,648],{},"To extend the Three.js class directly, create a child component such as ",[271,646,647],{},"ExtendedOrbitControls.vue",":",[357,650,652],{"className":475,"code":651,"language":477,"meta":362,"style":362},"\u003Cscript setup lang=\"ts\">\nimport { extend, useTres } from '@tresjs/core'\nimport { OrbitControls } from 'three/addons/controls/OrbitControls'\n\nconst { camera, renderer } = useTres()\n\nextend({ OrbitControls })\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresOrbitControls\n    v-if=\"camera\"\n    :args=\"[camera, renderer.domElement]\"\n  />\n\u003C/template>\n",[271,653,654,674,698,717,721,746,750,765,773,777,785,792,808,823,829],{"__ignoreMap":362},[366,655,656,658,660,662,664,666,668,670,672],{"class":368,"line":369},[366,657,484],{"class":376},[366,659,488],{"class":487},[366,661,492],{"class":491},[366,663,495],{"class":491},[366,665,498],{"class":376},[366,667,501],{"class":376},[366,669,361],{"class":393},[366,671,501],{"class":376},[366,673,508],{"class":376},[366,675,676,678,680,682,685,688,690,692,694,696],{"class":368,"line":400},[366,677,373],{"class":372},[366,679,377],{"class":376},[366,681,381],{"class":380},[366,683,684],{"class":376},",",[366,686,687],{"class":380}," useTres",[366,689,384],{"class":376},[366,691,387],{"class":372},[366,693,390],{"class":376},[366,695,394],{"class":393},[366,697,397],{"class":376},[366,699,700,702,704,706,708,710,712,715],{"class":368,"line":421},[366,701,373],{"class":372},[366,703,377],{"class":376},[366,705,517],{"class":380},[366,707,384],{"class":376},[366,709,387],{"class":372},[366,711,390],{"class":376},[366,713,714],{"class":393},"three/addons/controls/OrbitControls",[366,716,397],{"class":376},[366,718,719],{"class":368,"line":427},[366,720,424],{"emptyLinePlaceholder":39},[366,722,723,726,728,731,733,736,738,741,743],{"class":368,"line":434},[366,724,725],{"class":491},"const",[366,727,377],{"class":376},[366,729,730],{"class":380}," camera",[366,732,684],{"class":376},[366,734,735],{"class":380}," renderer ",[366,737,449],{"class":376},[366,739,740],{"class":376}," =",[366,742,687],{"class":437},[366,744,745],{"class":380},"()\n",[366,747,748],{"class":368,"line":455},[366,749,424],{"emptyLinePlaceholder":39},[366,751,752,754,756,758,761,763],{"class":368,"line":460},[366,753,349],{"class":437},[366,755,440],{"class":380},[366,757,443],{"class":376},[366,759,760],{"class":380}," OrbitControls ",[366,762,449],{"class":376},[366,764,452],{"class":380},[366,766,767,769,771],{"class":368,"line":586},[366,768,533],{"class":376},[366,770,488],{"class":487},[366,772,508],{"class":376},[366,774,775],{"class":368,"line":595},[366,776,424],{"emptyLinePlaceholder":39},[366,778,779,781,783],{"class":368,"line":601},[366,780,484],{"class":376},[366,782,548],{"class":487},[366,784,508],{"class":376},[366,786,787,789],{"class":368,"line":611},[366,788,555],{"class":376},[366,790,791],{"class":487},"TresOrbitControls\n",[366,793,795,798,800,802,805],{"class":368,"line":794},12,[366,796,797],{"class":491},"    v-if",[366,799,498],{"class":376},[366,801,501],{"class":376},[366,803,804],{"class":393},"camera",[366,806,807],{"class":376},"\"\n",[366,809,811,814,816,818,821],{"class":368,"line":810},13,[366,812,813],{"class":491},"    :args",[366,815,498],{"class":376},[366,817,501],{"class":376},[366,819,820],{"class":393},"[camera, renderer.domElement]",[366,822,807],{"class":376},[366,824,826],{"class":368,"line":825},14,[366,827,828],{"class":376},"  />\n",[366,830,832,834,836],{"class":368,"line":831},15,[366,833,533],{"class":376},[366,835,548],{"class":487},[366,837,508],{"class":376},[267,839,840,841,843,844,847],{},"Render that component as a child of ",[271,842,632],{}," so ",[271,845,846],{},"useTres()"," can access the canvas context.",[469,849,851],{"id":850},"geometries","Geometries",[357,853,855],{"className":475,"code":854,"language":477,"meta":362,"style":362},"\u003Cscript setup lang=\"ts\">\nimport { extend } from '@tresjs/core'\nimport { TextGeometry } from 'three/addons/geometries/TextGeometry'\nimport { RoundedBoxGeometry } from 'three/addons/geometries/RoundedBoxGeometry'\n\nextend({ TextGeometry, RoundedBoxGeometry })\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003CTresMesh>\n      \u003CTresRoundedBoxGeometry :args=\"[1, 1, 1, 4, 0.1]\" />\n      \u003CTresMeshStandardMaterial />\n    \u003C/TresMesh>\n  \u003C/TresCanvas>\n\u003C/template>\n",[271,856,857,877,895,913,933,937,956,964,968,976,984,993,1015,1024,1033,1041],{"__ignoreMap":362},[366,858,859,861,863,865,867,869,871,873,875],{"class":368,"line":369},[366,860,484],{"class":376},[366,862,488],{"class":487},[366,864,492],{"class":491},[366,866,495],{"class":491},[366,868,498],{"class":376},[366,870,501],{"class":376},[366,872,361],{"class":393},[366,874,501],{"class":376},[366,876,508],{"class":376},[366,878,879,881,883,885,887,889,891,893],{"class":368,"line":400},[366,880,373],{"class":372},[366,882,377],{"class":376},[366,884,381],{"class":380},[366,886,384],{"class":376},[366,888,387],{"class":372},[366,890,390],{"class":376},[366,892,394],{"class":393},[366,894,397],{"class":376},[366,896,897,899,901,903,905,907,909,911],{"class":368,"line":421},[366,898,373],{"class":372},[366,900,377],{"class":376},[366,902,407],{"class":380},[366,904,384],{"class":376},[366,906,387],{"class":372},[366,908,390],{"class":376},[366,910,416],{"class":393},[366,912,397],{"class":376},[366,914,915,917,919,922,924,926,928,931],{"class":368,"line":427},[366,916,373],{"class":372},[366,918,377],{"class":376},[366,920,921],{"class":380}," RoundedBoxGeometry",[366,923,384],{"class":376},[366,925,387],{"class":372},[366,927,390],{"class":376},[366,929,930],{"class":393},"three/addons/geometries/RoundedBoxGeometry",[366,932,397],{"class":376},[366,934,935],{"class":368,"line":434},[366,936,424],{"emptyLinePlaceholder":39},[366,938,939,941,943,945,947,949,952,954],{"class":368,"line":455},[366,940,349],{"class":437},[366,942,440],{"class":380},[366,944,443],{"class":376},[366,946,407],{"class":380},[366,948,684],{"class":376},[366,950,951],{"class":380}," RoundedBoxGeometry ",[366,953,449],{"class":376},[366,955,452],{"class":380},[366,957,958,960,962],{"class":368,"line":460},[366,959,533],{"class":376},[366,961,488],{"class":487},[366,963,508],{"class":376},[366,965,966],{"class":368,"line":586},[366,967,424],{"emptyLinePlaceholder":39},[366,969,970,972,974],{"class":368,"line":595},[366,971,484],{"class":376},[366,973,548],{"class":487},[366,975,508],{"class":376},[366,977,978,980,982],{"class":368,"line":601},[366,979,555],{"class":376},[366,981,558],{"class":487},[366,983,508],{"class":376},[366,985,986,988,991],{"class":368,"line":611},[366,987,565],{"class":376},[366,989,990],{"class":487},"TresMesh",[366,992,508],{"class":376},[366,994,995,998,1001,1004,1006,1008,1011,1013],{"class":368,"line":794},[366,996,997],{"class":376},"      \u003C",[366,999,1000],{"class":487},"TresRoundedBoxGeometry",[366,1002,1003],{"class":491}," :args",[366,1005,498],{"class":376},[366,1007,501],{"class":376},[366,1009,1010],{"class":393},"[1, 1, 1, 4, 0.1]",[366,1012,501],{"class":376},[366,1014,583],{"class":376},[366,1016,1017,1019,1022],{"class":368,"line":810},[366,1018,997],{"class":376},[366,1020,1021],{"class":487},"TresMeshStandardMaterial",[366,1023,583],{"class":376},[366,1025,1026,1029,1031],{"class":368,"line":825},[366,1027,1028],{"class":376},"    \u003C/",[366,1030,990],{"class":487},[366,1032,508],{"class":376},[366,1034,1035,1037,1039],{"class":368,"line":831},[366,1036,604],{"class":376},[366,1038,558],{"class":487},[366,1040,508],{"class":376},[366,1042,1044,1046,1048],{"class":368,"line":1043},16,[366,1045,533],{"class":376},[366,1047,548],{"class":487},[366,1049,508],{"class":376},[469,1051,1053],{"id":1052},"loaders","Loaders",[357,1055,1057],{"className":475,"code":1056,"language":477,"meta":362,"style":362},"\u003Cscript setup lang=\"ts\">\nimport { extend } from '@tresjs/core'\nimport { GLTFLoader } from 'three/addons/loaders/GLTFLoader'\nimport { DRACOLoader } from 'three/addons/loaders/DRACOLoader'\n\nextend({ GLTFLoader, DRACOLoader })\n\u003C/script>\n",[271,1058,1059,1079,1097,1117,1137,1141,1160],{"__ignoreMap":362},[366,1060,1061,1063,1065,1067,1069,1071,1073,1075,1077],{"class":368,"line":369},[366,1062,484],{"class":376},[366,1064,488],{"class":487},[366,1066,492],{"class":491},[366,1068,495],{"class":491},[366,1070,498],{"class":376},[366,1072,501],{"class":376},[366,1074,361],{"class":393},[366,1076,501],{"class":376},[366,1078,508],{"class":376},[366,1080,1081,1083,1085,1087,1089,1091,1093,1095],{"class":368,"line":400},[366,1082,373],{"class":372},[366,1084,377],{"class":376},[366,1086,381],{"class":380},[366,1088,384],{"class":376},[366,1090,387],{"class":372},[366,1092,390],{"class":376},[366,1094,394],{"class":393},[366,1096,397],{"class":376},[366,1098,1099,1101,1103,1106,1108,1110,1112,1115],{"class":368,"line":421},[366,1100,373],{"class":372},[366,1102,377],{"class":376},[366,1104,1105],{"class":380}," GLTFLoader",[366,1107,384],{"class":376},[366,1109,387],{"class":372},[366,1111,390],{"class":376},[366,1113,1114],{"class":393},"three/addons/loaders/GLTFLoader",[366,1116,397],{"class":376},[366,1118,1119,1121,1123,1126,1128,1130,1132,1135],{"class":368,"line":427},[366,1120,373],{"class":372},[366,1122,377],{"class":376},[366,1124,1125],{"class":380}," DRACOLoader",[366,1127,384],{"class":376},[366,1129,387],{"class":372},[366,1131,390],{"class":376},[366,1133,1134],{"class":393},"three/addons/loaders/DRACOLoader",[366,1136,397],{"class":376},[366,1138,1139],{"class":368,"line":434},[366,1140,424],{"emptyLinePlaceholder":39},[366,1142,1143,1145,1147,1149,1151,1153,1156,1158],{"class":368,"line":455},[366,1144,349],{"class":437},[366,1146,440],{"class":380},[366,1148,443],{"class":376},[366,1150,1105],{"class":380},[366,1152,684],{"class":376},[366,1154,1155],{"class":380}," DRACOLoader ",[366,1157,449],{"class":376},[366,1159,452],{"class":380},[366,1161,1162,1164,1166],{"class":368,"line":460},[366,1163,533],{"class":376},[366,1165,488],{"class":487},[366,1167,508],{"class":376},[469,1169,1171],{"id":1170},"post-processing","Post-Processing",[357,1173,1175],{"className":475,"code":1174,"language":477,"meta":362,"style":362},"\u003Cscript setup lang=\"ts\">\nimport { extend } from '@tresjs/core'\nimport { EffectComposer } from 'three/addons/postprocessing/EffectComposer'\nimport { RenderPass } from 'three/addons/postprocessing/RenderPass'\nimport { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass'\n\nextend({ EffectComposer, RenderPass, UnrealBloomPass })\n\u003C/script>\n",[271,1176,1177,1197,1215,1235,1255,1275,1279,1302],{"__ignoreMap":362},[366,1178,1179,1181,1183,1185,1187,1189,1191,1193,1195],{"class":368,"line":369},[366,1180,484],{"class":376},[366,1182,488],{"class":487},[366,1184,492],{"class":491},[366,1186,495],{"class":491},[366,1188,498],{"class":376},[366,1190,501],{"class":376},[366,1192,361],{"class":393},[366,1194,501],{"class":376},[366,1196,508],{"class":376},[366,1198,1199,1201,1203,1205,1207,1209,1211,1213],{"class":368,"line":400},[366,1200,373],{"class":372},[366,1202,377],{"class":376},[366,1204,381],{"class":380},[366,1206,384],{"class":376},[366,1208,387],{"class":372},[366,1210,390],{"class":376},[366,1212,394],{"class":393},[366,1214,397],{"class":376},[366,1216,1217,1219,1221,1224,1226,1228,1230,1233],{"class":368,"line":421},[366,1218,373],{"class":372},[366,1220,377],{"class":376},[366,1222,1223],{"class":380}," EffectComposer",[366,1225,384],{"class":376},[366,1227,387],{"class":372},[366,1229,390],{"class":376},[366,1231,1232],{"class":393},"three/addons/postprocessing/EffectComposer",[366,1234,397],{"class":376},[366,1236,1237,1239,1241,1244,1246,1248,1250,1253],{"class":368,"line":427},[366,1238,373],{"class":372},[366,1240,377],{"class":376},[366,1242,1243],{"class":380}," RenderPass",[366,1245,384],{"class":376},[366,1247,387],{"class":372},[366,1249,390],{"class":376},[366,1251,1252],{"class":393},"three/addons/postprocessing/RenderPass",[366,1254,397],{"class":376},[366,1256,1257,1259,1261,1264,1266,1268,1270,1273],{"class":368,"line":434},[366,1258,373],{"class":372},[366,1260,377],{"class":376},[366,1262,1263],{"class":380}," UnrealBloomPass",[366,1265,384],{"class":376},[366,1267,387],{"class":372},[366,1269,390],{"class":376},[366,1271,1272],{"class":393},"three/addons/postprocessing/UnrealBloomPass",[366,1274,397],{"class":376},[366,1276,1277],{"class":368,"line":455},[366,1278,424],{"emptyLinePlaceholder":39},[366,1280,1281,1283,1285,1287,1289,1291,1293,1295,1298,1300],{"class":368,"line":460},[366,1282,349],{"class":437},[366,1284,440],{"class":380},[366,1286,443],{"class":376},[366,1288,1223],{"class":380},[366,1290,684],{"class":376},[366,1292,1243],{"class":380},[366,1294,684],{"class":376},[366,1296,1297],{"class":380}," UnrealBloomPass ",[366,1299,449],{"class":376},[366,1301,452],{"class":380},[366,1303,1304,1306,1308],{"class":368,"line":586},[366,1305,533],{"class":376},[366,1307,488],{"class":487},[366,1309,508],{"class":376},[1311,1312,1313],"tip",{},[267,1314,1315,1316,1322],{},"For post-processing, consider using ",[635,1317,1321],{"href":1318,"rel":1319},"https://github.com/Tresjs/post-processing",[1320],"nofollow","@tresjs/post-processing"," which provides ready-to-use effect components.",[262,1324,1326],{"id":1325},"third-party-libraries","Third-Party Libraries",[469,1328,1330],{"id":1329},"using-drei-style-libraries","Using drei-style Libraries",[357,1332,1334],{"className":475,"code":1333,"language":477,"meta":362,"style":362},"\u003Cscript setup lang=\"ts\">\nimport { extend } from '@tresjs/core'\nimport { MeshWobbleMaterial } from 'some-threejs-library'\n\nextend({ MeshWobbleMaterial })\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003CTresMesh>\n      \u003CTresBoxGeometry />\n      \u003CTresMeshWobbleMaterial color=\"hotpink\" :factor=\"1\" :speed=\"2\" />\n    \u003C/TresMesh>\n  \u003C/TresCanvas>\n\u003C/template>\n",[271,1335,1336,1356,1374,1394,1398,1413,1421,1425,1433,1441,1449,1458,1503,1511,1519],{"__ignoreMap":362},[366,1337,1338,1340,1342,1344,1346,1348,1350,1352,1354],{"class":368,"line":369},[366,1339,484],{"class":376},[366,1341,488],{"class":487},[366,1343,492],{"class":491},[366,1345,495],{"class":491},[366,1347,498],{"class":376},[366,1349,501],{"class":376},[366,1351,361],{"class":393},[366,1353,501],{"class":376},[366,1355,508],{"class":376},[366,1357,1358,1360,1362,1364,1366,1368,1370,1372],{"class":368,"line":400},[366,1359,373],{"class":372},[366,1361,377],{"class":376},[366,1363,381],{"class":380},[366,1365,384],{"class":376},[366,1367,387],{"class":372},[366,1369,390],{"class":376},[366,1371,394],{"class":393},[366,1373,397],{"class":376},[366,1375,1376,1378,1380,1383,1385,1387,1389,1392],{"class":368,"line":421},[366,1377,373],{"class":372},[366,1379,377],{"class":376},[366,1381,1382],{"class":380}," MeshWobbleMaterial",[366,1384,384],{"class":376},[366,1386,387],{"class":372},[366,1388,390],{"class":376},[366,1390,1391],{"class":393},"some-threejs-library",[366,1393,397],{"class":376},[366,1395,1396],{"class":368,"line":427},[366,1397,424],{"emptyLinePlaceholder":39},[366,1399,1400,1402,1404,1406,1409,1411],{"class":368,"line":434},[366,1401,349],{"class":437},[366,1403,440],{"class":380},[366,1405,443],{"class":376},[366,1407,1408],{"class":380}," MeshWobbleMaterial ",[366,1410,449],{"class":376},[366,1412,452],{"class":380},[366,1414,1415,1417,1419],{"class":368,"line":455},[366,1416,533],{"class":376},[366,1418,488],{"class":487},[366,1420,508],{"class":376},[366,1422,1423],{"class":368,"line":460},[366,1424,424],{"emptyLinePlaceholder":39},[366,1426,1427,1429,1431],{"class":368,"line":586},[366,1428,484],{"class":376},[366,1430,548],{"class":487},[366,1432,508],{"class":376},[366,1434,1435,1437,1439],{"class":368,"line":595},[366,1436,555],{"class":376},[366,1438,558],{"class":487},[366,1440,508],{"class":376},[366,1442,1443,1445,1447],{"class":368,"line":601},[366,1444,565],{"class":376},[366,1446,990],{"class":487},[366,1448,508],{"class":376},[366,1450,1451,1453,1456],{"class":368,"line":611},[366,1452,997],{"class":376},[366,1454,1455],{"class":487},"TresBoxGeometry",[366,1457,583],{"class":376},[366,1459,1460,1462,1465,1468,1470,1472,1475,1477,1480,1482,1484,1487,1489,1492,1494,1496,1499,1501],{"class":368,"line":794},[366,1461,997],{"class":376},[366,1463,1464],{"class":487},"TresMeshWobbleMaterial",[366,1466,1467],{"class":491}," color",[366,1469,498],{"class":376},[366,1471,501],{"class":376},[366,1473,1474],{"class":393},"hotpink",[366,1476,501],{"class":376},[366,1478,1479],{"class":491}," :factor",[366,1481,498],{"class":376},[366,1483,501],{"class":376},[366,1485,1486],{"class":393},"1",[366,1488,501],{"class":376},[366,1490,1491],{"class":491}," :speed",[366,1493,498],{"class":376},[366,1495,501],{"class":376},[366,1497,1498],{"class":393},"2",[366,1500,501],{"class":376},[366,1502,583],{"class":376},[366,1504,1505,1507,1509],{"class":368,"line":810},[366,1506,1028],{"class":376},[366,1508,990],{"class":487},[366,1510,508],{"class":376},[366,1512,1513,1515,1517],{"class":368,"line":825},[366,1514,604],{"class":376},[366,1516,558],{"class":487},[366,1518,508],{"class":376},[366,1520,1521,1523,1525],{"class":368,"line":831},[366,1522,533],{"class":376},[366,1524,548],{"class":487},[366,1526,508],{"class":376},[469,1528,1530],{"id":1529},"custom-classes","Custom Classes",[267,1532,1533],{},"You can extend with your own Three.js classes:",[357,1535,1537],{"className":475,"code":1536,"language":477,"meta":362,"style":362},"\u003Cscript setup lang=\"ts\">\nimport { extend } from '@tresjs/core'\nimport * as THREE from 'three'\n\n// Custom geometry class\nclass StarGeometry extends THREE.BufferGeometry {\n  constructor(innerRadius = 0.5, outerRadius = 1, points = 5) {\n    super()\n    // ... geometry creation logic\n  }\n}\n\nextend({ StarGeometry })\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003CTresMesh>\n      \u003CTresStarGeometry :args=\"[0.5, 1, 5]\" />\n      \u003CTresMeshStandardMaterial color=\"gold\" />\n    \u003C/TresMesh>\n  \u003C/TresCanvas>\n\u003C/template>\n",[271,1538,1539,1559,1577,1599,1603,1608,1631,1673,1680,1685,1690,1695,1699,1714,1722,1726,1734,1743,1752,1773,1793,1802,1811],{"__ignoreMap":362},[366,1540,1541,1543,1545,1547,1549,1551,1553,1555,1557],{"class":368,"line":369},[366,1542,484],{"class":376},[366,1544,488],{"class":487},[366,1546,492],{"class":491},[366,1548,495],{"class":491},[366,1550,498],{"class":376},[366,1552,501],{"class":376},[366,1554,361],{"class":393},[366,1556,501],{"class":376},[366,1558,508],{"class":376},[366,1560,1561,1563,1565,1567,1569,1571,1573,1575],{"class":368,"line":400},[366,1562,373],{"class":372},[366,1564,377],{"class":376},[366,1566,381],{"class":380},[366,1568,384],{"class":376},[366,1570,387],{"class":372},[366,1572,390],{"class":376},[366,1574,394],{"class":393},[366,1576,397],{"class":376},[366,1578,1579,1581,1584,1587,1590,1593,1595,1597],{"class":368,"line":421},[366,1580,373],{"class":372},[366,1582,1583],{"class":376}," *",[366,1585,1586],{"class":372}," as",[366,1588,1589],{"class":380}," THREE ",[366,1591,1592],{"class":372},"from",[366,1594,390],{"class":376},[366,1596,273],{"class":393},[366,1598,397],{"class":376},[366,1600,1601],{"class":368,"line":427},[366,1602,424],{"emptyLinePlaceholder":39},[366,1604,1605],{"class":368,"line":434},[366,1606,1607],{"class":430},"// Custom geometry class\n",[366,1609,1610,1613,1617,1620,1623,1625,1628],{"class":368,"line":455},[366,1611,1612],{"class":491},"class",[366,1614,1616],{"class":1615},"sBMFI"," StarGeometry",[366,1618,1619],{"class":491}," extends",[366,1621,1622],{"class":1615}," THREE",[366,1624,641],{"class":376},[366,1626,1627],{"class":1615},"BufferGeometry",[366,1629,1630],{"class":376}," {\n",[366,1632,1633,1636,1638,1642,1644,1648,1650,1653,1655,1658,1660,1663,1665,1668,1671],{"class":368,"line":460},[366,1634,1635],{"class":491},"  constructor",[366,1637,440],{"class":376},[366,1639,1641],{"class":1640},"sHdIc","innerRadius",[366,1643,740],{"class":376},[366,1645,1647],{"class":1646},"sbssI"," 0.5",[366,1649,684],{"class":376},[366,1651,1652],{"class":1640}," outerRadius",[366,1654,740],{"class":376},[366,1656,1657],{"class":1646}," 1",[366,1659,684],{"class":376},[366,1661,1662],{"class":1640}," points",[366,1664,740],{"class":376},[366,1666,1667],{"class":1646}," 5",[366,1669,1670],{"class":376},")",[366,1672,1630],{"class":376},[366,1674,1675,1678],{"class":368,"line":586},[366,1676,1677],{"class":380},"    super",[366,1679,745],{"class":487},[366,1681,1682],{"class":368,"line":595},[366,1683,1684],{"class":430},"    // ... geometry creation logic\n",[366,1686,1687],{"class":368,"line":601},[366,1688,1689],{"class":376},"  }\n",[366,1691,1692],{"class":368,"line":611},[366,1693,1694],{"class":376},"}\n",[366,1696,1697],{"class":368,"line":794},[366,1698,424],{"emptyLinePlaceholder":39},[366,1700,1701,1703,1705,1707,1710,1712],{"class":368,"line":810},[366,1702,349],{"class":437},[366,1704,440],{"class":380},[366,1706,443],{"class":376},[366,1708,1709],{"class":380}," StarGeometry ",[366,1711,449],{"class":376},[366,1713,452],{"class":380},[366,1715,1716,1718,1720],{"class":368,"line":825},[366,1717,533],{"class":376},[366,1719,488],{"class":487},[366,1721,508],{"class":376},[366,1723,1724],{"class":368,"line":831},[366,1725,424],{"emptyLinePlaceholder":39},[366,1727,1728,1730,1732],{"class":368,"line":1043},[366,1729,484],{"class":376},[366,1731,548],{"class":487},[366,1733,508],{"class":376},[366,1735,1737,1739,1741],{"class":368,"line":1736},17,[366,1738,555],{"class":376},[366,1740,558],{"class":487},[366,1742,508],{"class":376},[366,1744,1746,1748,1750],{"class":368,"line":1745},18,[366,1747,565],{"class":376},[366,1749,990],{"class":487},[366,1751,508],{"class":376},[366,1753,1755,1757,1760,1762,1764,1766,1769,1771],{"class":368,"line":1754},19,[366,1756,997],{"class":376},[366,1758,1759],{"class":487},"TresStarGeometry",[366,1761,1003],{"class":491},[366,1763,498],{"class":376},[366,1765,501],{"class":376},[366,1767,1768],{"class":393},"[0.5, 1, 5]",[366,1770,501],{"class":376},[366,1772,583],{"class":376},[366,1774,1776,1778,1780,1782,1784,1786,1789,1791],{"class":368,"line":1775},20,[366,1777,997],{"class":376},[366,1779,1021],{"class":487},[366,1781,1467],{"class":491},[366,1783,498],{"class":376},[366,1785,501],{"class":376},[366,1787,1788],{"class":393},"gold",[366,1790,501],{"class":376},[366,1792,583],{"class":376},[366,1794,1796,1798,1800],{"class":368,"line":1795},21,[366,1797,1028],{"class":376},[366,1799,990],{"class":487},[366,1801,508],{"class":376},[366,1803,1805,1807,1809],{"class":368,"line":1804},22,[366,1806,604],{"class":376},[366,1808,558],{"class":487},[366,1810,508],{"class":376},[366,1812,1814,1816,1818],{"class":368,"line":1813},23,[366,1815,533],{"class":376},[366,1817,548],{"class":487},[366,1819,508],{"class":376},[262,1821,1823],{"id":1822},"naming-convention","Naming Convention",[267,1825,1826,1827,648],{},"The component name is derived from the class name you provide to ",[271,1828,349],{},[357,1830,1832],{"className":359,"code":1831,"language":361,"meta":362,"style":362},"extend({ RoundedBoxGeometry }) // \u003CTresRoundedBoxGeometry />\nextend({ TextGeometry })       // \u003CTresTextGeometry />\nextend({ MyCustomMaterial })   // \u003CTresMyCustomMaterial />\n",[271,1833,1834,1852,1870],{"__ignoreMap":362},[366,1835,1836,1838,1840,1842,1844,1846,1849],{"class":368,"line":369},[366,1837,349],{"class":437},[366,1839,440],{"class":380},[366,1841,443],{"class":376},[366,1843,951],{"class":380},[366,1845,449],{"class":376},[366,1847,1848],{"class":380},") ",[366,1850,1851],{"class":430},"// \u003CTresRoundedBoxGeometry />\n",[366,1853,1854,1856,1858,1860,1862,1864,1867],{"class":368,"line":400},[366,1855,349],{"class":437},[366,1857,440],{"class":380},[366,1859,443],{"class":376},[366,1861,446],{"class":380},[366,1863,449],{"class":376},[366,1865,1866],{"class":380},")       ",[366,1868,1869],{"class":430},"// \u003CTresTextGeometry />\n",[366,1871,1872,1874,1876,1878,1881,1883,1886],{"class":368,"line":421},[366,1873,349],{"class":437},[366,1875,440],{"class":380},[366,1877,443],{"class":376},[366,1879,1880],{"class":380}," MyCustomMaterial ",[366,1882,449],{"class":376},[366,1884,1885],{"class":380},")   ",[366,1887,1888],{"class":430},"// \u003CTresMyCustomMaterial />\n",[267,1890,1891],{},"You can also use custom names:",[357,1893,1895],{"className":359,"code":1894,"language":361,"meta":362,"style":362},"extend({\n  CustomGeometry: RoundedBoxGeometry // \u003CTresCustomGeometry />\n})\n",[271,1896,1897,1906,1918],{"__ignoreMap":362},[366,1898,1899,1901,1903],{"class":368,"line":369},[366,1900,349],{"class":437},[366,1902,440],{"class":380},[366,1904,1905],{"class":376},"{\n",[366,1907,1908,1911,1913,1915],{"class":368,"line":400},[366,1909,1910],{"class":487},"  CustomGeometry",[366,1912,648],{"class":376},[366,1914,951],{"class":380},[366,1916,1917],{"class":430},"// \u003CTresCustomGeometry />\n",[366,1919,1920,1922],{"class":368,"line":421},[366,1921,449],{"class":376},[366,1923,452],{"class":380},[262,1925,1927],{"id":1926},"global-vs-local-extension","Global vs Local Extension",[469,1929,1931],{"id":1930},"global-extension-recommended-for-shared-classes","Global Extension (Recommended for Shared Classes)",[267,1933,1934],{},"Extend in your main app entry or a plugin:",[357,1936,1938],{"className":359,"code":1937,"language":361,"meta":362,"style":362},"// plugins/tres.ts or main.ts\nimport { extend } from '@tresjs/core'\nimport { RoundedBoxGeometry } from 'three/addons/geometries/RoundedBoxGeometry'\nimport { TextGeometry } from 'three/addons/geometries/TextGeometry'\n\nextend({ RoundedBoxGeometry, TextGeometry })\n",[271,1939,1940,1945,1963,1981,1999,2003],{"__ignoreMap":362},[366,1941,1942],{"class":368,"line":369},[366,1943,1944],{"class":430},"// plugins/tres.ts or main.ts\n",[366,1946,1947,1949,1951,1953,1955,1957,1959,1961],{"class":368,"line":400},[366,1948,373],{"class":372},[366,1950,377],{"class":376},[366,1952,381],{"class":380},[366,1954,384],{"class":376},[366,1956,387],{"class":372},[366,1958,390],{"class":376},[366,1960,394],{"class":393},[366,1962,397],{"class":376},[366,1964,1965,1967,1969,1971,1973,1975,1977,1979],{"class":368,"line":421},[366,1966,373],{"class":372},[366,1968,377],{"class":376},[366,1970,921],{"class":380},[366,1972,384],{"class":376},[366,1974,387],{"class":372},[366,1976,390],{"class":376},[366,1978,930],{"class":393},[366,1980,397],{"class":376},[366,1982,1983,1985,1987,1989,1991,1993,1995,1997],{"class":368,"line":427},[366,1984,373],{"class":372},[366,1986,377],{"class":376},[366,1988,407],{"class":380},[366,1990,384],{"class":376},[366,1992,387],{"class":372},[366,1994,390],{"class":376},[366,1996,416],{"class":393},[366,1998,397],{"class":376},[366,2000,2001],{"class":368,"line":434},[366,2002,424],{"emptyLinePlaceholder":39},[366,2004,2005,2007,2009,2011,2013,2015,2017,2019],{"class":368,"line":455},[366,2006,349],{"class":437},[366,2008,440],{"class":380},[366,2010,443],{"class":376},[366,2012,921],{"class":380},[366,2014,684],{"class":376},[366,2016,446],{"class":380},[366,2018,449],{"class":376},[366,2020,452],{"class":380},[469,2022,2024],{"id":2023},"local-extension-component-specific","Local Extension (Component-Specific)",[267,2026,2027],{},"Extend in the component that needs it:",[357,2029,2031],{"className":475,"code":2030,"language":477,"meta":362,"style":362},"\u003Cscript setup lang=\"ts\">\nimport { extend } from '@tresjs/core'\nimport { SomeSpecialGeometry } from 'special-library'\n\n// Only this component uses this class\nextend({ SomeSpecialGeometry })\n\u003C/script>\n",[271,2032,2033,2053,2071,2091,2095,2100,2115],{"__ignoreMap":362},[366,2034,2035,2037,2039,2041,2043,2045,2047,2049,2051],{"class":368,"line":369},[366,2036,484],{"class":376},[366,2038,488],{"class":487},[366,2040,492],{"class":491},[366,2042,495],{"class":491},[366,2044,498],{"class":376},[366,2046,501],{"class":376},[366,2048,361],{"class":393},[366,2050,501],{"class":376},[366,2052,508],{"class":376},[366,2054,2055,2057,2059,2061,2063,2065,2067,2069],{"class":368,"line":400},[366,2056,373],{"class":372},[366,2058,377],{"class":376},[366,2060,381],{"class":380},[366,2062,384],{"class":376},[366,2064,387],{"class":372},[366,2066,390],{"class":376},[366,2068,394],{"class":393},[366,2070,397],{"class":376},[366,2072,2073,2075,2077,2080,2082,2084,2086,2089],{"class":368,"line":421},[366,2074,373],{"class":372},[366,2076,377],{"class":376},[366,2078,2079],{"class":380}," SomeSpecialGeometry",[366,2081,384],{"class":376},[366,2083,387],{"class":372},[366,2085,390],{"class":376},[366,2087,2088],{"class":393},"special-library",[366,2090,397],{"class":376},[366,2092,2093],{"class":368,"line":427},[366,2094,424],{"emptyLinePlaceholder":39},[366,2096,2097],{"class":368,"line":434},[366,2098,2099],{"class":430},"// Only this component uses this class\n",[366,2101,2102,2104,2106,2108,2111,2113],{"class":368,"line":455},[366,2103,349],{"class":437},[366,2105,440],{"class":380},[366,2107,443],{"class":376},[366,2109,2110],{"class":380}," SomeSpecialGeometry ",[366,2112,449],{"class":376},[366,2114,452],{"class":380},[366,2116,2117,2119,2121],{"class":368,"line":460},[366,2118,533],{"class":376},[366,2120,488],{"class":487},[366,2122,508],{"class":376},[262,2124,2126],{"id":2125},"typescript-support","TypeScript Support",[267,2128,2129],{},"For type safety with extended components, declare the types:",[357,2131,2133],{"className":359,"code":2132,"language":361,"meta":362,"style":362},"// types/tres.d.ts\nimport type { RoundedBoxGeometry } from 'three/addons/geometries/RoundedBoxGeometry'\n\ndeclare module '@tresjs/core' {\n  interface TresObjectMap {\n    RoundedBoxGeometry: typeof RoundedBoxGeometry\n  }\n}\n",[271,2134,2135,2140,2161,2165,2182,2192,2205,2209],{"__ignoreMap":362},[366,2136,2137],{"class":368,"line":369},[366,2138,2139],{"class":430},"// types/tres.d.ts\n",[366,2141,2142,2144,2147,2149,2151,2153,2155,2157,2159],{"class":368,"line":400},[366,2143,373],{"class":372},[366,2145,2146],{"class":372}," type",[366,2148,377],{"class":376},[366,2150,921],{"class":380},[366,2152,384],{"class":376},[366,2154,387],{"class":372},[366,2156,390],{"class":376},[366,2158,930],{"class":393},[366,2160,397],{"class":376},[366,2162,2163],{"class":368,"line":421},[366,2164,424],{"emptyLinePlaceholder":39},[366,2166,2167,2170,2173,2175,2177,2180],{"class":368,"line":427},[366,2168,2169],{"class":491},"declare",[366,2171,2172],{"class":491}," module",[366,2174,390],{"class":376},[366,2176,394],{"class":393},[366,2178,2179],{"class":376},"'",[366,2181,1630],{"class":376},[366,2183,2184,2187,2190],{"class":368,"line":434},[366,2185,2186],{"class":491},"  interface",[366,2188,2189],{"class":1615}," TresObjectMap",[366,2191,1630],{"class":376},[366,2193,2194,2197,2199,2202],{"class":368,"line":455},[366,2195,2196],{"class":487},"    RoundedBoxGeometry",[366,2198,648],{"class":376},[366,2200,2201],{"class":376}," typeof",[366,2203,2204],{"class":380}," RoundedBoxGeometry\n",[366,2206,2207],{"class":368,"line":460},[366,2208,1689],{"class":376},[366,2210,2211],{"class":368,"line":586},[366,2212,1694],{"class":376},[262,2214,2216],{"id":2215},"complete-example","Complete Example",[357,2218,2220],{"className":475,"code":2219,"language":477,"meta":362,"style":362},"\u003Cscript setup lang=\"ts\">\nimport { OrbitControls } from '@tresjs/cientos'\nimport { extend } from '@tresjs/core'\nimport { TextGeometry } from 'three/addons/geometries/TextGeometry'\nimport { FontLoader } from 'three/addons/loaders/FontLoader'\n\nextend({ TextGeometry })\n\n// Load font for TextGeometry\nconst fontLoader = new FontLoader()\nconst font = await new Promise((resolve) => {\n  fontLoader.load('/fonts/helvetiker_regular.typeface.json', resolve)\n})\n\nconst fontOptions = {\n  font,\n  size: 1,\n  height: 0.2,\n  curveSegments: 12,\n}\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas shadows>\n    \u003CTresPerspectiveCamera :position=\"[5, 5, 5]\" />\n    \u003COrbitControls />\n\n    \u003CTresMesh :position=\"[0, 0, 0]\">\n      \u003CTresTextGeometry :args=\"['TresJS', fontOptions]\" center />\n      \u003CTresMeshStandardMaterial color=\"#82dbc5\" />\n    \u003C/TresMesh>\n\n    \u003CTresAmbientLight :intensity=\"0.5\" />\n    \u003CTresDirectionalLight :position=\"[10, 10, 10]\" />\n  \u003C/TresCanvas>\n\u003C/template>\n",[271,2221,2222,2242,2260,2278,2296,2316,2320,2334,2338,2343,2359,2390,2416,2422,2426,2437,2445,2456,2468,2480,2484,2492,2496,2504,2516,2535,2544,2549,2569,2593,2613,2622,2627,2649,2670,2679],{"__ignoreMap":362},[366,2223,2224,2226,2228,2230,2232,2234,2236,2238,2240],{"class":368,"line":369},[366,2225,484],{"class":376},[366,2227,488],{"class":487},[366,2229,492],{"class":491},[366,2231,495],{"class":491},[366,2233,498],{"class":376},[366,2235,501],{"class":376},[366,2237,361],{"class":393},[366,2239,501],{"class":376},[366,2241,508],{"class":376},[366,2243,2244,2246,2248,2250,2252,2254,2256,2258],{"class":368,"line":400},[366,2245,373],{"class":372},[366,2247,377],{"class":376},[366,2249,517],{"class":380},[366,2251,384],{"class":376},[366,2253,387],{"class":372},[366,2255,390],{"class":376},[366,2257,526],{"class":393},[366,2259,397],{"class":376},[366,2261,2262,2264,2266,2268,2270,2272,2274,2276],{"class":368,"line":421},[366,2263,373],{"class":372},[366,2265,377],{"class":376},[366,2267,381],{"class":380},[366,2269,384],{"class":376},[366,2271,387],{"class":372},[366,2273,390],{"class":376},[366,2275,394],{"class":393},[366,2277,397],{"class":376},[366,2279,2280,2282,2284,2286,2288,2290,2292,2294],{"class":368,"line":427},[366,2281,373],{"class":372},[366,2283,377],{"class":376},[366,2285,407],{"class":380},[366,2287,384],{"class":376},[366,2289,387],{"class":372},[366,2291,390],{"class":376},[366,2293,416],{"class":393},[366,2295,397],{"class":376},[366,2297,2298,2300,2302,2305,2307,2309,2311,2314],{"class":368,"line":434},[366,2299,373],{"class":372},[366,2301,377],{"class":376},[366,2303,2304],{"class":380}," FontLoader",[366,2306,384],{"class":376},[366,2308,387],{"class":372},[366,2310,390],{"class":376},[366,2312,2313],{"class":393},"three/addons/loaders/FontLoader",[366,2315,397],{"class":376},[366,2317,2318],{"class":368,"line":455},[366,2319,424],{"emptyLinePlaceholder":39},[366,2321,2322,2324,2326,2328,2330,2332],{"class":368,"line":460},[366,2323,349],{"class":437},[366,2325,440],{"class":380},[366,2327,443],{"class":376},[366,2329,446],{"class":380},[366,2331,449],{"class":376},[366,2333,452],{"class":380},[366,2335,2336],{"class":368,"line":586},[366,2337,424],{"emptyLinePlaceholder":39},[366,2339,2340],{"class":368,"line":595},[366,2341,2342],{"class":430},"// Load font for TextGeometry\n",[366,2344,2345,2347,2350,2352,2355,2357],{"class":368,"line":601},[366,2346,725],{"class":491},[366,2348,2349],{"class":380}," fontLoader ",[366,2351,498],{"class":376},[366,2353,2354],{"class":376}," new",[366,2356,2304],{"class":437},[366,2358,745],{"class":380},[366,2360,2361,2363,2366,2368,2371,2373,2376,2378,2380,2383,2385,2388],{"class":368,"line":611},[366,2362,725],{"class":491},[366,2364,2365],{"class":380}," font ",[366,2367,498],{"class":376},[366,2369,2370],{"class":372}," await",[366,2372,2354],{"class":376},[366,2374,2375],{"class":1615}," Promise",[366,2377,440],{"class":380},[366,2379,440],{"class":376},[366,2381,2382],{"class":1640},"resolve",[366,2384,1670],{"class":376},[366,2386,2387],{"class":491}," =>",[366,2389,1630],{"class":376},[366,2391,2392,2395,2397,2400,2402,2404,2407,2409,2411,2414],{"class":368,"line":794},[366,2393,2394],{"class":380},"  fontLoader",[366,2396,641],{"class":376},[366,2398,2399],{"class":437},"load",[366,2401,440],{"class":487},[366,2403,2179],{"class":376},[366,2405,2406],{"class":393},"/fonts/helvetiker_regular.typeface.json",[366,2408,2179],{"class":376},[366,2410,684],{"class":376},[366,2412,2413],{"class":380}," resolve",[366,2415,452],{"class":487},[366,2417,2418,2420],{"class":368,"line":810},[366,2419,449],{"class":376},[366,2421,452],{"class":380},[366,2423,2424],{"class":368,"line":825},[366,2425,424],{"emptyLinePlaceholder":39},[366,2427,2428,2430,2433,2435],{"class":368,"line":831},[366,2429,725],{"class":491},[366,2431,2432],{"class":380}," fontOptions ",[366,2434,498],{"class":376},[366,2436,1630],{"class":376},[366,2438,2439,2442],{"class":368,"line":1043},[366,2440,2441],{"class":380},"  font",[366,2443,2444],{"class":376},",\n",[366,2446,2447,2450,2452,2454],{"class":368,"line":1736},[366,2448,2449],{"class":487},"  size",[366,2451,648],{"class":376},[366,2453,1657],{"class":1646},[366,2455,2444],{"class":376},[366,2457,2458,2461,2463,2466],{"class":368,"line":1745},[366,2459,2460],{"class":487},"  height",[366,2462,648],{"class":376},[366,2464,2465],{"class":1646}," 0.2",[366,2467,2444],{"class":376},[366,2469,2470,2473,2475,2478],{"class":368,"line":1754},[366,2471,2472],{"class":487},"  curveSegments",[366,2474,648],{"class":376},[366,2476,2477],{"class":1646}," 12",[366,2479,2444],{"class":376},[366,2481,2482],{"class":368,"line":1775},[366,2483,1694],{"class":376},[366,2485,2486,2488,2490],{"class":368,"line":1795},[366,2487,533],{"class":376},[366,2489,488],{"class":487},[366,2491,508],{"class":376},[366,2493,2494],{"class":368,"line":1804},[366,2495,424],{"emptyLinePlaceholder":39},[366,2497,2498,2500,2502],{"class":368,"line":1813},[366,2499,484],{"class":376},[366,2501,548],{"class":487},[366,2503,508],{"class":376},[366,2505,2507,2509,2511,2514],{"class":368,"line":2506},24,[366,2508,555],{"class":376},[366,2510,558],{"class":487},[366,2512,2513],{"class":491}," shadows",[366,2515,508],{"class":376},[366,2517,2519,2521,2523,2525,2527,2529,2531,2533],{"class":368,"line":2518},25,[366,2520,565],{"class":376},[366,2522,568],{"class":487},[366,2524,571],{"class":491},[366,2526,498],{"class":376},[366,2528,501],{"class":376},[366,2530,578],{"class":393},[366,2532,501],{"class":376},[366,2534,583],{"class":376},[366,2536,2538,2540,2542],{"class":368,"line":2537},26,[366,2539,565],{"class":376},[366,2541,199],{"class":487},[366,2543,583],{"class":376},[366,2545,2547],{"class":368,"line":2546},27,[366,2548,424],{"emptyLinePlaceholder":39},[366,2550,2552,2554,2556,2558,2560,2562,2565,2567],{"class":368,"line":2551},28,[366,2553,565],{"class":376},[366,2555,990],{"class":487},[366,2557,571],{"class":491},[366,2559,498],{"class":376},[366,2561,501],{"class":376},[366,2563,2564],{"class":393},"[0, 0, 0]",[366,2566,501],{"class":376},[366,2568,508],{"class":376},[366,2570,2572,2574,2577,2579,2581,2583,2586,2588,2591],{"class":368,"line":2571},29,[366,2573,997],{"class":376},[366,2575,2576],{"class":487},"TresTextGeometry",[366,2578,1003],{"class":491},[366,2580,498],{"class":376},[366,2582,501],{"class":376},[366,2584,2585],{"class":393},"['TresJS', fontOptions]",[366,2587,501],{"class":376},[366,2589,2590],{"class":491}," center",[366,2592,583],{"class":376},[366,2594,2596,2598,2600,2602,2604,2606,2609,2611],{"class":368,"line":2595},30,[366,2597,997],{"class":376},[366,2599,1021],{"class":487},[366,2601,1467],{"class":491},[366,2603,498],{"class":376},[366,2605,501],{"class":376},[366,2607,2608],{"class":393},"#82dbc5",[366,2610,501],{"class":376},[366,2612,583],{"class":376},[366,2614,2616,2618,2620],{"class":368,"line":2615},31,[366,2617,1028],{"class":376},[366,2619,990],{"class":487},[366,2621,508],{"class":376},[366,2623,2625],{"class":368,"line":2624},32,[366,2626,424],{"emptyLinePlaceholder":39},[366,2628,2630,2632,2635,2638,2640,2642,2645,2647],{"class":368,"line":2629},33,[366,2631,565],{"class":376},[366,2633,2634],{"class":487},"TresAmbientLight",[366,2636,2637],{"class":491}," :intensity",[366,2639,498],{"class":376},[366,2641,501],{"class":376},[366,2643,2644],{"class":393},"0.5",[366,2646,501],{"class":376},[366,2648,583],{"class":376},[366,2650,2652,2654,2657,2659,2661,2663,2666,2668],{"class":368,"line":2651},34,[366,2653,565],{"class":376},[366,2655,2656],{"class":487},"TresDirectionalLight",[366,2658,571],{"class":491},[366,2660,498],{"class":376},[366,2662,501],{"class":376},[366,2664,2665],{"class":393},"[10, 10, 10]",[366,2667,501],{"class":376},[366,2669,583],{"class":376},[366,2671,2673,2675,2677],{"class":368,"line":2672},35,[366,2674,604],{"class":376},[366,2676,558],{"class":487},[366,2678,508],{"class":376},[366,2680,2682,2684,2686],{"class":368,"line":2681},36,[366,2683,533],{"class":376},[366,2685,548],{"class":487},[366,2687,508],{"class":376},[262,2689,2691],{"id":2690},"key-takeaways","Key Takeaways",[2693,2694,2695,2707,2717,2723],"card-group",{},[2696,2697,2700],"card",{"icon":2698,"title":2699},"i-lucide-plus-circle","extend() Function",[267,2701,2702,2703,2706],{},"Use ",[271,2704,2705],{},"extend()"," to add any Three.js class to the TresJS catalogue.",[2696,2708,2711],{"icon":2709,"title":2710},"i-lucide-package","Addons Support",[267,2712,2713,2714,2716],{},"Classes from ",[271,2715,341],{}," aren't included by default - extend them as needed.",[2696,2718,2720],{"icon":2719,"title":1530},"i-lucide-code",[267,2721,2722],{},"Your own Three.js classes can be extended and used as Vue components.",[2696,2724,2727],{"icon":2725,"title":2726},"i-lucide-tag","Tres Prefix",[267,2728,2729,2730,2733,2734,2737,2738,641],{},"Extended classes become available with the ",[271,2731,2732],{},"Tres"," prefix: ",[271,2735,2736],{},"TextGeometry"," → ",[271,2739,2740],{},"\u003CTresTextGeometry />",[2742,2743,2744],"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 .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 .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 .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}",{"title":362,"searchDepth":369,"depth":400,"links":2746},[2747,2748,2750,2756,2760,2761,2765,2766,2767],{"id":264,"depth":400,"text":265},{"id":345,"depth":400,"text":2749},"The extend Function",{"id":466,"depth":400,"text":467,"children":2751},[2752,2753,2754,2755],{"id":471,"depth":421,"text":472},{"id":850,"depth":421,"text":851},{"id":1052,"depth":421,"text":1053},{"id":1170,"depth":421,"text":1171},{"id":1325,"depth":400,"text":1326,"children":2757},[2758,2759],{"id":1329,"depth":421,"text":1330},{"id":1529,"depth":421,"text":1530},{"id":1822,"depth":400,"text":1823},{"id":1926,"depth":400,"text":1927,"children":2762},[2763,2764],{"id":1930,"depth":421,"text":1931},{"id":2023,"depth":421,"text":2024},{"id":2125,"depth":400,"text":2126},{"id":2215,"depth":400,"text":2216},{"id":2690,"depth":400,"text":2691},"Learn how to add custom Three.js classes and third-party libraries to TresJS using the extend function.","md",null,{},{"title":71,"description":2768},"DhL5SX09PtUnlOXruQHnCuQtoTqjixn0T6oFFi20JWA",[2775,2777],{"title":67,"path":68,"stem":69,"description":2776,"children":-1},"Learn how TresJS maps Vue props to Three.js object properties for a declarative 3D development experience.",{"title":75,"path":76,"stem":77,"description":2778,"children":-1},"Learn how TresJS uses a custom renderer to attach child components as Three.js object properties, replacing Vue's slot system with a scene-graph-aware approach.",1787004784469]