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