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