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