[{"data":1,"prerenderedAt":6023},["ShallowReactive",2],{"navigation":3,"/api/advanced/primitives":239,"/api/advanced/primitives-surround":6018},[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":166,"body":241,"description":6012,"extension":6013,"links":6014,"meta":6015,"navigation":39,"path":167,"seo":6016,"stem":168,"__hash__":6017},"docs/3.api/5.advanced/primitives.md",{"type":242,"value":243,"toc":5987},"minimark",[244,249,258,261,290,294,304,614,618,623,628,647,654,858,863,881,884,912,1289,1294,1308,1311,1973,1978,1993,1996,2175,2179,2182,2425,2429,2434,2967,2970,2974,2980,3227,3231,3236,3631,3635,3638,4043,4047,4050,4076,4199,4212,4466,4470,4475,4630,4634,4638,4795,4935,4939,5215,5219,5562,5566,5579,5833,5836,5847,5978,5983],[245,246,248],"h2",{"id":247},"what-are-primitives","What are Primitives?",[250,251,252,253,257],"p",{},"The ",[254,255,256],"code",{},"\u003Cprimitive />"," component is a versatile low-level component in TresJS that allows you to directly use any Three.js object within your Vue application without an abstraction. It acts as a bridge between Vue's reactivity system and THREE's scene graph.",[250,259,260],{},"This component is particularly useful when you need:",[262,263,264,272,278,284],"ul",{},[265,266,267,271],"li",{},[268,269,270],"strong",{},"Direct Three.js Integration",": Use existing Three.js objects without wrapper components",[265,273,274,277],{},[268,275,276],{},"Complex Model Rendering",": Display models loaded from external sources like GLTF files",[265,279,280,283],{},[268,281,282],{},"Performance Optimization",": Bypass component overhead for specific use cases",[265,285,286,289],{},[268,287,288],{},"Third-party Library Integration",": Integrate objects from Three.js ecosystem libraries",[245,291,293],{"id":292},"basic-usage","Basic Usage",[250,295,296,297,299,300,303],{},"The simplest way to use the ",[254,298,256],{}," component is by passing a Three.js object to the ",[254,301,302],{},"object"," prop:",[305,306,312],"pre",{"className":307,"code":308,"filename":309,"language":310,"meta":311,"style":311},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { BoxGeometry, Mesh, MeshBasicMaterial } from 'three'\n\n// Create a box geometry and a basic material\nconst geometry = new BoxGeometry(1, 1, 1)\nconst material = new MeshBasicMaterial({ color: 0x00FF00 })\n\n// Create a mesh with the geometry and material\nconst meshWithMaterial = new Mesh(geometry, material)\n\u003C/script>\n\n\u003Ctemplate>\n \u003CTresCanvas>\n \u003CTresPerspectiveCamera :position=\"[3, 3, 3]\" />\n \u003Cprimitive :object=\"meshWithMaterial\" />\n \u003CTresAmbientLight />\n \u003C/TresCanvas>\n\u003C/template>\n","basic-primitive.vue","vue","",[254,313,314,349,389,395,402,438,470,475,481,503,513,518,528,539,563,585,595,605],{"__ignoreMap":311},[315,316,319,323,327,331,334,337,340,344,346],"span",{"class":317,"line":318},"line",1,[315,320,322],{"class":321},"sMK4o","\u003C",[315,324,326],{"class":325},"swJcz","script",[315,328,330],{"class":329},"spNyl"," setup",[315,332,333],{"class":329}," lang",[315,335,336],{"class":321},"=",[315,338,339],{"class":321},"\"",[315,341,343],{"class":342},"sfazB","ts",[315,345,339],{"class":321},[315,347,348],{"class":321},">\n",[315,350,352,356,359,363,366,369,371,374,377,380,383,386],{"class":317,"line":351},2,[315,353,355],{"class":354},"s7zQu","import",[315,357,358],{"class":321}," {",[315,360,362],{"class":361},"sTEyZ"," BoxGeometry",[315,364,365],{"class":321},",",[315,367,368],{"class":361}," Mesh",[315,370,365],{"class":321},[315,372,373],{"class":361}," MeshBasicMaterial",[315,375,376],{"class":321}," }",[315,378,379],{"class":354}," from",[315,381,382],{"class":321}," '",[315,384,385],{"class":342},"three",[315,387,388],{"class":321},"'\n",[315,390,392],{"class":317,"line":391},3,[315,393,394],{"emptyLinePlaceholder":39},"\n",[315,396,398],{"class":317,"line":397},4,[315,399,401],{"class":400},"sHwdD","// Create a box geometry and a basic material\n",[315,403,405,408,411,413,416,419,422,426,428,431,433,435],{"class":317,"line":404},5,[315,406,407],{"class":329},"const",[315,409,410],{"class":361}," geometry ",[315,412,336],{"class":321},[315,414,415],{"class":321}," new",[315,417,362],{"class":418},"s2Zo4",[315,420,421],{"class":361},"(",[315,423,425],{"class":424},"sbssI","1",[315,427,365],{"class":321},[315,429,430],{"class":424}," 1",[315,432,365],{"class":321},[315,434,430],{"class":424},[315,436,437],{"class":361},")\n",[315,439,441,443,446,448,450,452,454,457,460,463,466,468],{"class":317,"line":440},6,[315,442,407],{"class":329},[315,444,445],{"class":361}," material ",[315,447,336],{"class":321},[315,449,415],{"class":321},[315,451,373],{"class":418},[315,453,421],{"class":361},[315,455,456],{"class":321},"{",[315,458,459],{"class":325}," color",[315,461,462],{"class":321},":",[315,464,465],{"class":424}," 0x00FF00",[315,467,376],{"class":321},[315,469,437],{"class":361},[315,471,473],{"class":317,"line":472},7,[315,474,394],{"emptyLinePlaceholder":39},[315,476,478],{"class":317,"line":477},8,[315,479,480],{"class":400},"// Create a mesh with the geometry and material\n",[315,482,484,486,489,491,493,495,498,500],{"class":317,"line":483},9,[315,485,407],{"class":329},[315,487,488],{"class":361}," meshWithMaterial ",[315,490,336],{"class":321},[315,492,415],{"class":321},[315,494,368],{"class":418},[315,496,497],{"class":361},"(geometry",[315,499,365],{"class":321},[315,501,502],{"class":361}," material)\n",[315,504,506,509,511],{"class":317,"line":505},10,[315,507,508],{"class":321},"\u003C/",[315,510,326],{"class":325},[315,512,348],{"class":321},[315,514,516],{"class":317,"line":515},11,[315,517,394],{"emptyLinePlaceholder":39},[315,519,521,523,526],{"class":317,"line":520},12,[315,522,322],{"class":321},[315,524,525],{"class":325},"template",[315,527,348],{"class":321},[315,529,531,534,537],{"class":317,"line":530},13,[315,532,533],{"class":321}," \u003C",[315,535,536],{"class":325},"TresCanvas",[315,538,348],{"class":321},[315,540,542,545,548,551,553,555,558,560],{"class":317,"line":541},14,[315,543,544],{"class":321}," \u003C",[315,546,547],{"class":325},"TresPerspectiveCamera",[315,549,550],{"class":329}," :position",[315,552,336],{"class":321},[315,554,339],{"class":321},[315,556,557],{"class":342},"[3, 3, 3]",[315,559,339],{"class":321},[315,561,562],{"class":321}," />\n",[315,564,566,568,571,574,576,578,581,583],{"class":317,"line":565},15,[315,567,544],{"class":321},[315,569,570],{"class":325},"primitive",[315,572,573],{"class":329}," :object",[315,575,336],{"class":321},[315,577,339],{"class":321},[315,579,580],{"class":342},"meshWithMaterial",[315,582,339],{"class":321},[315,584,562],{"class":321},[315,586,588,590,593],{"class":317,"line":587},16,[315,589,544],{"class":321},[315,591,592],{"class":325},"TresAmbientLight",[315,594,562],{"class":321},[315,596,598,601,603],{"class":317,"line":597},17,[315,599,600],{"class":321}," \u003C/",[315,602,536],{"class":325},[315,604,348],{"class":321},[315,606,608,610,612],{"class":317,"line":607},18,[315,609,508],{"class":321},[315,611,525],{"class":325},[315,613,348],{"class":321},[245,615,617],{"id":616},"props","Props",[250,619,252,620,622],{},[254,621,256],{}," component accepts the following props:",[624,625,626],"h3",{"id":302},[254,627,302],{},[262,629,630,639],{},[265,631,632,635,636],{},[268,633,634],{},"Type",": ",[254,637,638],{},"Object3D | Ref\u003CObject3D>",[265,640,641,635,644],{},[268,642,643],{},"Required",[254,645,646],{},"true",[250,648,649,650,653],{},"The primary Three.js object which the primitive component will render. This should be either a plain Three.js object or a reactive reference (preferably ",[254,651,652],{},"shallowRef",").",[305,655,657],{"className":307,"code":656,"language":310,"meta":311,"style":311},"\u003Cscript setup lang=\"ts\">\nimport { shallowRef } from 'vue'\nimport { BoxGeometry, Mesh, MeshBasicMaterial } from 'three'\n\n// Using shallowRef for better performance with Three.js objects\nconst mesh = shallowRef(\n new Mesh(\n new BoxGeometry(1, 1, 1),\n new MeshBasicMaterial({ color: 0xFF0000 })\n )\n)\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cprimitive :object=\"mesh\" />\n\u003C/template>\n",[254,658,659,679,698,724,728,733,747,756,781,802,807,811,819,823,831,850],{"__ignoreMap":311},[315,660,661,663,665,667,669,671,673,675,677],{"class":317,"line":318},[315,662,322],{"class":321},[315,664,326],{"class":325},[315,666,330],{"class":329},[315,668,333],{"class":329},[315,670,336],{"class":321},[315,672,339],{"class":321},[315,674,343],{"class":342},[315,676,339],{"class":321},[315,678,348],{"class":321},[315,680,681,683,685,688,690,692,694,696],{"class":317,"line":351},[315,682,355],{"class":354},[315,684,358],{"class":321},[315,686,687],{"class":361}," shallowRef",[315,689,376],{"class":321},[315,691,379],{"class":354},[315,693,382],{"class":321},[315,695,310],{"class":342},[315,697,388],{"class":321},[315,699,700,702,704,706,708,710,712,714,716,718,720,722],{"class":317,"line":391},[315,701,355],{"class":354},[315,703,358],{"class":321},[315,705,362],{"class":361},[315,707,365],{"class":321},[315,709,368],{"class":361},[315,711,365],{"class":321},[315,713,373],{"class":361},[315,715,376],{"class":321},[315,717,379],{"class":354},[315,719,382],{"class":321},[315,721,385],{"class":342},[315,723,388],{"class":321},[315,725,726],{"class":317,"line":397},[315,727,394],{"emptyLinePlaceholder":39},[315,729,730],{"class":317,"line":404},[315,731,732],{"class":400},"// Using shallowRef for better performance with Three.js objects\n",[315,734,735,737,740,742,744],{"class":317,"line":440},[315,736,407],{"class":329},[315,738,739],{"class":361}," mesh ",[315,741,336],{"class":321},[315,743,687],{"class":418},[315,745,746],{"class":361},"(\n",[315,748,749,752,754],{"class":317,"line":472},[315,750,751],{"class":321}," new",[315,753,368],{"class":418},[315,755,746],{"class":361},[315,757,758,761,763,765,767,769,771,773,775,778],{"class":317,"line":477},[315,759,760],{"class":321}," new",[315,762,362],{"class":418},[315,764,421],{"class":361},[315,766,425],{"class":424},[315,768,365],{"class":321},[315,770,430],{"class":424},[315,772,365],{"class":321},[315,774,430],{"class":424},[315,776,777],{"class":361},")",[315,779,780],{"class":321},",\n",[315,782,783,785,787,789,791,793,795,798,800],{"class":317,"line":483},[315,784,760],{"class":321},[315,786,373],{"class":418},[315,788,421],{"class":361},[315,790,456],{"class":321},[315,792,459],{"class":325},[315,794,462],{"class":321},[315,796,797],{"class":424}," 0xFF0000",[315,799,376],{"class":321},[315,801,437],{"class":361},[315,803,804],{"class":317,"line":505},[315,805,806],{"class":361}," )\n",[315,808,809],{"class":317,"line":515},[315,810,437],{"class":361},[315,812,813,815,817],{"class":317,"line":520},[315,814,508],{"class":321},[315,816,326],{"class":325},[315,818,348],{"class":321},[315,820,821],{"class":317,"line":530},[315,822,394],{"emptyLinePlaceholder":39},[315,824,825,827,829],{"class":317,"line":541},[315,826,322],{"class":321},[315,828,525],{"class":325},[315,830,348],{"class":321},[315,832,833,835,837,839,841,843,846,848],{"class":317,"line":565},[315,834,533],{"class":321},[315,836,570],{"class":325},[315,838,573],{"class":329},[315,840,336],{"class":321},[315,842,339],{"class":321},[315,844,845],{"class":342},"mesh",[315,847,339],{"class":321},[315,849,562],{"class":321},[315,851,852,854,856],{"class":317,"line":587},[315,853,508],{"class":321},[315,855,525],{"class":325},[315,857,348],{"class":321},[624,859,861],{"id":860},"dispose",[254,862,860],{},[262,864,865,872],{},[265,866,867,635,869],{},[268,868,634],{},[254,870,871],{},"boolean | 'default' | ((self: TresInstance) => void) | null",[265,873,874,635,877,880],{},[268,875,876],{},"Default",[254,878,879],{},"'default'"," (no disposal for primitives)",[250,882,883],{},"Controls how the primitive's resources are disposed when removed from the scene:",[262,885,886,891,901,906],{},[265,887,888,890],{},[254,889,879],{}," - Default behavior: don't dispose primitive resources",[265,892,893,896,897,900],{},[254,894,895],{},"false"," or ",[254,898,899],{},"null"," - Explicitly disable disposal",[265,902,903,905],{},[254,904,646],{}," - Force disposal of the primitive and its resources",[265,907,908,911],{},[254,909,910],{},"function"," - Custom disposal function",[305,913,915],{"className":307,"code":914,"language":310,"meta":311,"style":311},"\u003Cscript setup lang=\"ts\">\nimport { BoxGeometry, Mesh, MeshBasicMaterial } from 'three'\n\nconst mesh = new Mesh(\n new BoxGeometry(1, 1, 1),\n new MeshBasicMaterial({ color: 0xFF0000 })\n)\n\n// Custom disposal function\nfunction customDispose(instance) {\n console.log('Disposing:', instance)\n if (instance.geometry) { instance.geometry.dispose() }\n if (instance.material) { instance.material.dispose() }\n}\n\u003C/script>\n\n\u003Ctemplate>\n \u003C!-- Default: no disposal -->\n \u003Cprimitive :object=\"mesh\" />\n\n \u003C!-- Force disposal -->\n \u003Cprimitive :object=\"mesh.geometry\" :dispose=\"true\" />\n\n \u003C!-- Custom disposal -->\n \u003Cprimitive :object=\"mesh\" :dispose=\"customDispose\" />\n\u003C/template>\n",[254,916,917,937,963,967,981,1003,1023,1027,1031,1036,1054,1082,1118,1149,1153,1161,1165,1173,1178,1197,1202,1208,1239,1244,1250,1280],{"__ignoreMap":311},[315,918,919,921,923,925,927,929,931,933,935],{"class":317,"line":318},[315,920,322],{"class":321},[315,922,326],{"class":325},[315,924,330],{"class":329},[315,926,333],{"class":329},[315,928,336],{"class":321},[315,930,339],{"class":321},[315,932,343],{"class":342},[315,934,339],{"class":321},[315,936,348],{"class":321},[315,938,939,941,943,945,947,949,951,953,955,957,959,961],{"class":317,"line":351},[315,940,355],{"class":354},[315,942,358],{"class":321},[315,944,362],{"class":361},[315,946,365],{"class":321},[315,948,368],{"class":361},[315,950,365],{"class":321},[315,952,373],{"class":361},[315,954,376],{"class":321},[315,956,379],{"class":354},[315,958,382],{"class":321},[315,960,385],{"class":342},[315,962,388],{"class":321},[315,964,965],{"class":317,"line":391},[315,966,394],{"emptyLinePlaceholder":39},[315,968,969,971,973,975,977,979],{"class":317,"line":397},[315,970,407],{"class":329},[315,972,739],{"class":361},[315,974,336],{"class":321},[315,976,415],{"class":321},[315,978,368],{"class":418},[315,980,746],{"class":361},[315,982,983,985,987,989,991,993,995,997,999,1001],{"class":317,"line":404},[315,984,751],{"class":321},[315,986,362],{"class":418},[315,988,421],{"class":361},[315,990,425],{"class":424},[315,992,365],{"class":321},[315,994,430],{"class":424},[315,996,365],{"class":321},[315,998,430],{"class":424},[315,1000,777],{"class":361},[315,1002,780],{"class":321},[315,1004,1005,1007,1009,1011,1013,1015,1017,1019,1021],{"class":317,"line":440},[315,1006,751],{"class":321},[315,1008,373],{"class":418},[315,1010,421],{"class":361},[315,1012,456],{"class":321},[315,1014,459],{"class":325},[315,1016,462],{"class":321},[315,1018,797],{"class":424},[315,1020,376],{"class":321},[315,1022,437],{"class":361},[315,1024,1025],{"class":317,"line":472},[315,1026,437],{"class":361},[315,1028,1029],{"class":317,"line":477},[315,1030,394],{"emptyLinePlaceholder":39},[315,1032,1033],{"class":317,"line":483},[315,1034,1035],{"class":400},"// Custom disposal function\n",[315,1037,1038,1040,1043,1045,1049,1051],{"class":317,"line":505},[315,1039,910],{"class":329},[315,1041,1042],{"class":418}," customDispose",[315,1044,421],{"class":321},[315,1046,1048],{"class":1047},"sHdIc","instance",[315,1050,777],{"class":321},[315,1052,1053],{"class":321}," {\n",[315,1055,1056,1059,1062,1065,1067,1070,1073,1075,1077,1080],{"class":317,"line":515},[315,1057,1058],{"class":361}," console",[315,1060,1061],{"class":321},".",[315,1063,1064],{"class":418},"log",[315,1066,421],{"class":325},[315,1068,1069],{"class":321},"'",[315,1071,1072],{"class":342},"Disposing:",[315,1074,1069],{"class":321},[315,1076,365],{"class":321},[315,1078,1079],{"class":361}," instance",[315,1081,437],{"class":325},[315,1083,1084,1087,1090,1092,1094,1097,1100,1102,1104,1106,1108,1110,1112,1115],{"class":317,"line":520},[315,1085,1086],{"class":354}," if",[315,1088,1089],{"class":325}," (",[315,1091,1048],{"class":361},[315,1093,1061],{"class":321},[315,1095,1096],{"class":361},"geometry",[315,1098,1099],{"class":325},") ",[315,1101,456],{"class":321},[315,1103,1079],{"class":361},[315,1105,1061],{"class":321},[315,1107,1096],{"class":361},[315,1109,1061],{"class":321},[315,1111,860],{"class":418},[315,1113,1114],{"class":325},"() ",[315,1116,1117],{"class":321},"}\n",[315,1119,1120,1122,1124,1126,1128,1131,1133,1135,1137,1139,1141,1143,1145,1147],{"class":317,"line":530},[315,1121,1086],{"class":354},[315,1123,1089],{"class":325},[315,1125,1048],{"class":361},[315,1127,1061],{"class":321},[315,1129,1130],{"class":361},"material",[315,1132,1099],{"class":325},[315,1134,456],{"class":321},[315,1136,1079],{"class":361},[315,1138,1061],{"class":321},[315,1140,1130],{"class":361},[315,1142,1061],{"class":321},[315,1144,860],{"class":418},[315,1146,1114],{"class":325},[315,1148,1117],{"class":321},[315,1150,1151],{"class":317,"line":541},[315,1152,1117],{"class":321},[315,1154,1155,1157,1159],{"class":317,"line":565},[315,1156,508],{"class":321},[315,1158,326],{"class":325},[315,1160,348],{"class":321},[315,1162,1163],{"class":317,"line":587},[315,1164,394],{"emptyLinePlaceholder":39},[315,1166,1167,1169,1171],{"class":317,"line":597},[315,1168,322],{"class":321},[315,1170,525],{"class":325},[315,1172,348],{"class":321},[315,1174,1175],{"class":317,"line":607},[315,1176,1177],{"class":400}," \u003C!-- Default: no disposal -->\n",[315,1179,1181,1183,1185,1187,1189,1191,1193,1195],{"class":317,"line":1180},19,[315,1182,533],{"class":321},[315,1184,570],{"class":325},[315,1186,573],{"class":329},[315,1188,336],{"class":321},[315,1190,339],{"class":321},[315,1192,845],{"class":342},[315,1194,339],{"class":321},[315,1196,562],{"class":321},[315,1198,1200],{"class":317,"line":1199},20,[315,1201,394],{"emptyLinePlaceholder":39},[315,1203,1205],{"class":317,"line":1204},21,[315,1206,1207],{"class":400}," \u003C!-- Force disposal -->\n",[315,1209,1211,1213,1215,1217,1219,1221,1224,1226,1229,1231,1233,1235,1237],{"class":317,"line":1210},22,[315,1212,533],{"class":321},[315,1214,570],{"class":325},[315,1216,573],{"class":329},[315,1218,336],{"class":321},[315,1220,339],{"class":321},[315,1222,1223],{"class":342},"mesh.geometry",[315,1225,339],{"class":321},[315,1227,1228],{"class":329}," :dispose",[315,1230,336],{"class":321},[315,1232,339],{"class":321},[315,1234,646],{"class":342},[315,1236,339],{"class":321},[315,1238,562],{"class":321},[315,1240,1242],{"class":317,"line":1241},23,[315,1243,394],{"emptyLinePlaceholder":39},[315,1245,1247],{"class":317,"line":1246},24,[315,1248,1249],{"class":400}," \u003C!-- Custom disposal -->\n",[315,1251,1253,1255,1257,1259,1261,1263,1265,1267,1269,1271,1273,1276,1278],{"class":317,"line":1252},25,[315,1254,533],{"class":321},[315,1256,570],{"class":325},[315,1258,573],{"class":329},[315,1260,336],{"class":321},[315,1262,339],{"class":321},[315,1264,845],{"class":342},[315,1266,339],{"class":321},[315,1268,1228],{"class":329},[315,1270,336],{"class":321},[315,1272,339],{"class":321},[315,1274,1275],{"class":342},"customDispose",[315,1277,339],{"class":321},[315,1279,562],{"class":321},[315,1281,1283,1285,1287],{"class":317,"line":1282},26,[315,1284,508],{"class":321},[315,1286,525],{"class":325},[315,1288,348],{"class":321},[624,1290,1292],{"id":1291},"attach",[254,1293,1291],{},[262,1295,1296,1303],{},[265,1297,1298,635,1300],{},[268,1299,634],{},[254,1301,1302],{},"string | ((parent: any, self: TresInstance) => () => void)",[265,1304,1305],{},[268,1306,1307],{},"Optional",[250,1309,1310],{},"Specifies how to attach the primitive to its parent. Can be a property name or a custom attachment function.",[1312,1313,1314,1528,1710],"code-group",{},[305,1315,1318],{"className":307,"code":1316,"filename":1317,"language":310,"meta":311,"style":311},"\u003Cscript setup lang=\"ts\">\nimport { MeshStandardMaterial } from 'three'\n\n// Create a custom material\nconst customMaterial = new MeshStandardMaterial({\n color: 0xFF6600,\n metalness: 0.8,\n roughness: 0.2\n})\n\u003C/script>\n\n\u003Ctemplate>\n \u003CTresMesh>\n \u003CTresBoxGeometry :args=\"[1, 1, 1]\" />\n \u003C!-- Attach the primitive as the mesh's material -->\n \u003Cprimitive :object=\"customMaterial\" attach=\"material\" />\n \u003C/TresMesh>\n\u003C/template>\n","Material Attachment",[254,1319,1320,1340,1359,1363,1368,1386,1398,1410,1420,1427,1435,1439,1447,1456,1477,1482,1512,1520],{"__ignoreMap":311},[315,1321,1322,1324,1326,1328,1330,1332,1334,1336,1338],{"class":317,"line":318},[315,1323,322],{"class":321},[315,1325,326],{"class":325},[315,1327,330],{"class":329},[315,1329,333],{"class":329},[315,1331,336],{"class":321},[315,1333,339],{"class":321},[315,1335,343],{"class":342},[315,1337,339],{"class":321},[315,1339,348],{"class":321},[315,1341,1342,1344,1346,1349,1351,1353,1355,1357],{"class":317,"line":351},[315,1343,355],{"class":354},[315,1345,358],{"class":321},[315,1347,1348],{"class":361}," MeshStandardMaterial",[315,1350,376],{"class":321},[315,1352,379],{"class":354},[315,1354,382],{"class":321},[315,1356,385],{"class":342},[315,1358,388],{"class":321},[315,1360,1361],{"class":317,"line":391},[315,1362,394],{"emptyLinePlaceholder":39},[315,1364,1365],{"class":317,"line":397},[315,1366,1367],{"class":400},"// Create a custom material\n",[315,1369,1370,1372,1375,1377,1379,1381,1383],{"class":317,"line":404},[315,1371,407],{"class":329},[315,1373,1374],{"class":361}," customMaterial ",[315,1376,336],{"class":321},[315,1378,415],{"class":321},[315,1380,1348],{"class":418},[315,1382,421],{"class":361},[315,1384,1385],{"class":321},"{\n",[315,1387,1388,1391,1393,1396],{"class":317,"line":440},[315,1389,1390],{"class":325}," color",[315,1392,462],{"class":321},[315,1394,1395],{"class":424}," 0xFF6600",[315,1397,780],{"class":321},[315,1399,1400,1403,1405,1408],{"class":317,"line":472},[315,1401,1402],{"class":325}," metalness",[315,1404,462],{"class":321},[315,1406,1407],{"class":424}," 0.8",[315,1409,780],{"class":321},[315,1411,1412,1415,1417],{"class":317,"line":477},[315,1413,1414],{"class":325}," roughness",[315,1416,462],{"class":321},[315,1418,1419],{"class":424}," 0.2\n",[315,1421,1422,1425],{"class":317,"line":483},[315,1423,1424],{"class":321},"}",[315,1426,437],{"class":361},[315,1428,1429,1431,1433],{"class":317,"line":505},[315,1430,508],{"class":321},[315,1432,326],{"class":325},[315,1434,348],{"class":321},[315,1436,1437],{"class":317,"line":515},[315,1438,394],{"emptyLinePlaceholder":39},[315,1440,1441,1443,1445],{"class":317,"line":520},[315,1442,322],{"class":321},[315,1444,525],{"class":325},[315,1446,348],{"class":321},[315,1448,1449,1451,1454],{"class":317,"line":530},[315,1450,533],{"class":321},[315,1452,1453],{"class":325},"TresMesh",[315,1455,348],{"class":321},[315,1457,1458,1460,1463,1466,1468,1470,1473,1475],{"class":317,"line":541},[315,1459,544],{"class":321},[315,1461,1462],{"class":325},"TresBoxGeometry",[315,1464,1465],{"class":329}," :args",[315,1467,336],{"class":321},[315,1469,339],{"class":321},[315,1471,1472],{"class":342},"[1, 1, 1]",[315,1474,339],{"class":321},[315,1476,562],{"class":321},[315,1478,1479],{"class":317,"line":565},[315,1480,1481],{"class":400}," \u003C!-- Attach the primitive as the mesh's material -->\n",[315,1483,1484,1486,1488,1490,1492,1494,1497,1499,1502,1504,1506,1508,1510],{"class":317,"line":587},[315,1485,544],{"class":321},[315,1487,570],{"class":325},[315,1489,573],{"class":329},[315,1491,336],{"class":321},[315,1493,339],{"class":321},[315,1495,1496],{"class":342},"customMaterial",[315,1498,339],{"class":321},[315,1500,1501],{"class":329}," attach",[315,1503,336],{"class":321},[315,1505,339],{"class":321},[315,1507,1130],{"class":342},[315,1509,339],{"class":321},[315,1511,562],{"class":321},[315,1513,1514,1516,1518],{"class":317,"line":597},[315,1515,600],{"class":321},[315,1517,1453],{"class":325},[315,1519,348],{"class":321},[315,1521,1522,1524,1526],{"class":317,"line":607},[315,1523,508],{"class":321},[315,1525,525],{"class":325},[315,1527,348],{"class":321},[305,1529,1532],{"className":307,"code":1530,"filename":1531,"language":310,"meta":311,"style":311},"\u003Cscript setup lang=\"ts\">\nimport { ConeGeometry } from 'three'\n\n// Create a custom geometry\nconst customGeometry = new ConeGeometry(1, 2, 8)\n\u003C/script>\n\n\u003Ctemplate>\n \u003CTresMesh>\n \u003C!-- Attach the primitive as the mesh's geometry -->\n \u003Cprimitive :object=\"customGeometry\" attach=\"geometry\" />\n \u003CTresMeshBasicMaterial :color=\"0x00FF00\" />\n \u003C/TresMesh>\n\u003C/template>\n","Geometry Attachment",[254,1533,1534,1554,1573,1577,1582,1611,1619,1623,1631,1639,1644,1673,1694,1702],{"__ignoreMap":311},[315,1535,1536,1538,1540,1542,1544,1546,1548,1550,1552],{"class":317,"line":318},[315,1537,322],{"class":321},[315,1539,326],{"class":325},[315,1541,330],{"class":329},[315,1543,333],{"class":329},[315,1545,336],{"class":321},[315,1547,339],{"class":321},[315,1549,343],{"class":342},[315,1551,339],{"class":321},[315,1553,348],{"class":321},[315,1555,1556,1558,1560,1563,1565,1567,1569,1571],{"class":317,"line":351},[315,1557,355],{"class":354},[315,1559,358],{"class":321},[315,1561,1562],{"class":361}," ConeGeometry",[315,1564,376],{"class":321},[315,1566,379],{"class":354},[315,1568,382],{"class":321},[315,1570,385],{"class":342},[315,1572,388],{"class":321},[315,1574,1575],{"class":317,"line":391},[315,1576,394],{"emptyLinePlaceholder":39},[315,1578,1579],{"class":317,"line":397},[315,1580,1581],{"class":400},"// Create a custom geometry\n",[315,1583,1584,1586,1589,1591,1593,1595,1597,1599,1601,1604,1606,1609],{"class":317,"line":404},[315,1585,407],{"class":329},[315,1587,1588],{"class":361}," customGeometry ",[315,1590,336],{"class":321},[315,1592,415],{"class":321},[315,1594,1562],{"class":418},[315,1596,421],{"class":361},[315,1598,425],{"class":424},[315,1600,365],{"class":321},[315,1602,1603],{"class":424}," 2",[315,1605,365],{"class":321},[315,1607,1608],{"class":424}," 8",[315,1610,437],{"class":361},[315,1612,1613,1615,1617],{"class":317,"line":440},[315,1614,508],{"class":321},[315,1616,326],{"class":325},[315,1618,348],{"class":321},[315,1620,1621],{"class":317,"line":472},[315,1622,394],{"emptyLinePlaceholder":39},[315,1624,1625,1627,1629],{"class":317,"line":477},[315,1626,322],{"class":321},[315,1628,525],{"class":325},[315,1630,348],{"class":321},[315,1632,1633,1635,1637],{"class":317,"line":483},[315,1634,533],{"class":321},[315,1636,1453],{"class":325},[315,1638,348],{"class":321},[315,1640,1641],{"class":317,"line":505},[315,1642,1643],{"class":400}," \u003C!-- Attach the primitive as the mesh's geometry -->\n",[315,1645,1646,1648,1650,1652,1654,1656,1659,1661,1663,1665,1667,1669,1671],{"class":317,"line":515},[315,1647,544],{"class":321},[315,1649,570],{"class":325},[315,1651,573],{"class":329},[315,1653,336],{"class":321},[315,1655,339],{"class":321},[315,1657,1658],{"class":342},"customGeometry",[315,1660,339],{"class":321},[315,1662,1501],{"class":329},[315,1664,336],{"class":321},[315,1666,339],{"class":321},[315,1668,1096],{"class":342},[315,1670,339],{"class":321},[315,1672,562],{"class":321},[315,1674,1675,1677,1680,1683,1685,1687,1690,1692],{"class":317,"line":520},[315,1676,544],{"class":321},[315,1678,1679],{"class":325},"TresMeshBasicMaterial",[315,1681,1682],{"class":329}," :color",[315,1684,336],{"class":321},[315,1686,339],{"class":321},[315,1688,1689],{"class":342},"0x00FF00",[315,1691,339],{"class":321},[315,1693,562],{"class":321},[315,1695,1696,1698,1700],{"class":317,"line":530},[315,1697,600],{"class":321},[315,1699,1453],{"class":325},[315,1701,348],{"class":321},[315,1703,1704,1706,1708],{"class":317,"line":541},[315,1705,508],{"class":321},[315,1707,525],{"class":325},[315,1709,348],{"class":321},[305,1711,1714],{"className":307,"code":1712,"filename":1713,"language":310,"meta":311,"style":311},"\u003Cscript setup lang=\"ts\">\nimport { DirectionalLight } from 'three'\n\nconst customLight = new DirectionalLight(0xFFFFFF, 1)\n\n// Custom attachment function\nconst attachToTarget = (parent, self) => {\n // Attach light as target\n parent.target = self.object\n return () => {\n parent.target = null // Cleanup function\n }\n}\n\u003C/script>\n\n\u003Ctemplate>\n \u003CTresDirectionalLight :position=\"[5, 5, 5]\">\n \u003C!-- Custom attachment -->\n \u003Cprimitive :object=\"customLight\" :attach=\"attachToTarget\" />\n \u003C/TresDirectionalLight>\n\u003C/template>\n","Custom Attachment Function",[254,1715,1716,1736,1755,1759,1783,1787,1792,1818,1823,1843,1855,1872,1877,1881,1889,1893,1901,1921,1926,1957,1965],{"__ignoreMap":311},[315,1717,1718,1720,1722,1724,1726,1728,1730,1732,1734],{"class":317,"line":318},[315,1719,322],{"class":321},[315,1721,326],{"class":325},[315,1723,330],{"class":329},[315,1725,333],{"class":329},[315,1727,336],{"class":321},[315,1729,339],{"class":321},[315,1731,343],{"class":342},[315,1733,339],{"class":321},[315,1735,348],{"class":321},[315,1737,1738,1740,1742,1745,1747,1749,1751,1753],{"class":317,"line":351},[315,1739,355],{"class":354},[315,1741,358],{"class":321},[315,1743,1744],{"class":361}," DirectionalLight",[315,1746,376],{"class":321},[315,1748,379],{"class":354},[315,1750,382],{"class":321},[315,1752,385],{"class":342},[315,1754,388],{"class":321},[315,1756,1757],{"class":317,"line":391},[315,1758,394],{"emptyLinePlaceholder":39},[315,1760,1761,1763,1766,1768,1770,1772,1774,1777,1779,1781],{"class":317,"line":397},[315,1762,407],{"class":329},[315,1764,1765],{"class":361}," customLight ",[315,1767,336],{"class":321},[315,1769,415],{"class":321},[315,1771,1744],{"class":418},[315,1773,421],{"class":361},[315,1775,1776],{"class":424},"0xFFFFFF",[315,1778,365],{"class":321},[315,1780,430],{"class":424},[315,1782,437],{"class":361},[315,1784,1785],{"class":317,"line":404},[315,1786,394],{"emptyLinePlaceholder":39},[315,1788,1789],{"class":317,"line":440},[315,1790,1791],{"class":400},"// Custom attachment function\n",[315,1793,1794,1796,1799,1801,1803,1806,1808,1811,1813,1816],{"class":317,"line":472},[315,1795,407],{"class":329},[315,1797,1798],{"class":361}," attachToTarget ",[315,1800,336],{"class":321},[315,1802,1089],{"class":321},[315,1804,1805],{"class":1047},"parent",[315,1807,365],{"class":321},[315,1809,1810],{"class":1047}," self",[315,1812,777],{"class":321},[315,1814,1815],{"class":329}," =>",[315,1817,1053],{"class":321},[315,1819,1820],{"class":317,"line":477},[315,1821,1822],{"class":400}," // Attach light as target\n",[315,1824,1825,1828,1830,1833,1836,1838,1840],{"class":317,"line":483},[315,1826,1827],{"class":361}," parent",[315,1829,1061],{"class":321},[315,1831,1832],{"class":361},"target",[315,1834,1835],{"class":321}," =",[315,1837,1810],{"class":361},[315,1839,1061],{"class":321},[315,1841,1842],{"class":361},"object\n",[315,1844,1845,1848,1851,1853],{"class":317,"line":505},[315,1846,1847],{"class":354}," return",[315,1849,1850],{"class":321}," ()",[315,1852,1815],{"class":329},[315,1854,1053],{"class":321},[315,1856,1857,1860,1862,1864,1866,1869],{"class":317,"line":515},[315,1858,1859],{"class":361}," parent",[315,1861,1061],{"class":321},[315,1863,1832],{"class":361},[315,1865,1835],{"class":321},[315,1867,1868],{"class":321}," null",[315,1870,1871],{"class":400}," // Cleanup function\n",[315,1873,1874],{"class":317,"line":520},[315,1875,1876],{"class":321}," }\n",[315,1878,1879],{"class":317,"line":530},[315,1880,1117],{"class":321},[315,1882,1883,1885,1887],{"class":317,"line":541},[315,1884,508],{"class":321},[315,1886,326],{"class":325},[315,1888,348],{"class":321},[315,1890,1891],{"class":317,"line":565},[315,1892,394],{"emptyLinePlaceholder":39},[315,1894,1895,1897,1899],{"class":317,"line":587},[315,1896,322],{"class":321},[315,1898,525],{"class":325},[315,1900,348],{"class":321},[315,1902,1903,1905,1908,1910,1912,1914,1917,1919],{"class":317,"line":597},[315,1904,533],{"class":321},[315,1906,1907],{"class":325},"TresDirectionalLight",[315,1909,550],{"class":329},[315,1911,336],{"class":321},[315,1913,339],{"class":321},[315,1915,1916],{"class":342},"[5, 5, 5]",[315,1918,339],{"class":321},[315,1920,348],{"class":321},[315,1922,1923],{"class":317,"line":607},[315,1924,1925],{"class":400}," \u003C!-- Custom attachment -->\n",[315,1927,1928,1930,1932,1934,1936,1938,1941,1943,1946,1948,1950,1953,1955],{"class":317,"line":1180},[315,1929,544],{"class":321},[315,1931,570],{"class":325},[315,1933,573],{"class":329},[315,1935,336],{"class":321},[315,1937,339],{"class":321},[315,1939,1940],{"class":342},"customLight",[315,1942,339],{"class":321},[315,1944,1945],{"class":329}," :attach",[315,1947,336],{"class":321},[315,1949,339],{"class":321},[315,1951,1952],{"class":342},"attachToTarget",[315,1954,339],{"class":321},[315,1956,562],{"class":321},[315,1958,1959,1961,1963],{"class":317,"line":1199},[315,1960,600],{"class":321},[315,1962,1907],{"class":325},[315,1964,348],{"class":321},[315,1966,1967,1969,1971],{"class":317,"line":1204},[315,1968,508],{"class":321},[315,1970,525],{"class":325},[315,1972,348],{"class":321},[624,1974,1976],{"id":1975},"visible",[254,1977,1975],{},[262,1979,1980,1987],{},[265,1981,1982,635,1984],{},[268,1983,634],{},[254,1985,1986],{},"boolean",[265,1988,1989,635,1991],{},[268,1990,876],{},[254,1992,646],{},[250,1994,1995],{},"Controls the visibility of the primitive object.",[305,1997,1999],{"className":307,"code":1998,"language":310,"meta":311,"style":311},"\u003Cscript setup lang=\"ts\">\nimport { ref } from 'vue'\n\nconst isVisible = ref(true)\n\n// Toggle visibility every 2 seconds\nsetInterval(() => {\n isVisible.value = !isVisible.value\n}, 2000)\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cprimitive :object=\"mesh\" :visible=\"isVisible\" />\n\u003C/template>\n",[254,2000,2001,2021,2040,2044,2062,2066,2071,2085,2108,2118,2126,2130,2138,2167],{"__ignoreMap":311},[315,2002,2003,2005,2007,2009,2011,2013,2015,2017,2019],{"class":317,"line":318},[315,2004,322],{"class":321},[315,2006,326],{"class":325},[315,2008,330],{"class":329},[315,2010,333],{"class":329},[315,2012,336],{"class":321},[315,2014,339],{"class":321},[315,2016,343],{"class":342},[315,2018,339],{"class":321},[315,2020,348],{"class":321},[315,2022,2023,2025,2027,2030,2032,2034,2036,2038],{"class":317,"line":351},[315,2024,355],{"class":354},[315,2026,358],{"class":321},[315,2028,2029],{"class":361}," ref",[315,2031,376],{"class":321},[315,2033,379],{"class":354},[315,2035,382],{"class":321},[315,2037,310],{"class":342},[315,2039,388],{"class":321},[315,2041,2042],{"class":317,"line":391},[315,2043,394],{"emptyLinePlaceholder":39},[315,2045,2046,2048,2051,2053,2055,2057,2060],{"class":317,"line":397},[315,2047,407],{"class":329},[315,2049,2050],{"class":361}," isVisible ",[315,2052,336],{"class":321},[315,2054,2029],{"class":418},[315,2056,421],{"class":361},[315,2058,646],{"class":2059},"sfNiH",[315,2061,437],{"class":361},[315,2063,2064],{"class":317,"line":404},[315,2065,394],{"emptyLinePlaceholder":39},[315,2067,2068],{"class":317,"line":440},[315,2069,2070],{"class":400},"// Toggle visibility every 2 seconds\n",[315,2072,2073,2076,2078,2081,2083],{"class":317,"line":472},[315,2074,2075],{"class":418},"setInterval",[315,2077,421],{"class":361},[315,2079,2080],{"class":321},"()",[315,2082,1815],{"class":329},[315,2084,1053],{"class":321},[315,2086,2087,2090,2092,2095,2097,2100,2103,2105],{"class":317,"line":477},[315,2088,2089],{"class":361}," isVisible",[315,2091,1061],{"class":321},[315,2093,2094],{"class":361},"value",[315,2096,1835],{"class":321},[315,2098,2099],{"class":321}," !",[315,2101,2102],{"class":361},"isVisible",[315,2104,1061],{"class":321},[315,2106,2107],{"class":361},"value\n",[315,2109,2110,2113,2116],{"class":317,"line":483},[315,2111,2112],{"class":321},"},",[315,2114,2115],{"class":424}," 2000",[315,2117,437],{"class":361},[315,2119,2120,2122,2124],{"class":317,"line":505},[315,2121,508],{"class":321},[315,2123,326],{"class":325},[315,2125,348],{"class":321},[315,2127,2128],{"class":317,"line":515},[315,2129,394],{"emptyLinePlaceholder":39},[315,2131,2132,2134,2136],{"class":317,"line":520},[315,2133,322],{"class":321},[315,2135,525],{"class":325},[315,2137,348],{"class":321},[315,2139,2140,2142,2144,2146,2148,2150,2152,2154,2157,2159,2161,2163,2165],{"class":317,"line":530},[315,2141,533],{"class":321},[315,2143,570],{"class":325},[315,2145,573],{"class":329},[315,2147,336],{"class":321},[315,2149,339],{"class":321},[315,2151,845],{"class":342},[315,2153,339],{"class":321},[315,2155,2156],{"class":329}," :visible",[315,2158,336],{"class":321},[315,2160,339],{"class":321},[315,2162,2102],{"class":342},[315,2164,339],{"class":321},[315,2166,562],{"class":321},[315,2168,2169,2171,2173],{"class":317,"line":541},[315,2170,508],{"class":321},[315,2172,525],{"class":325},[315,2174,348],{"class":321},[624,2176,2178],{"id":2177},"pass-through-props","Pass-through Props",[250,2180,2181],{},"Any other props are passed through to the underlying Three.js object, allowing you to modify its properties directly:",[305,2183,2185],{"className":307,"code":2184,"language":310,"meta":311,"style":311},"\u003Cscript setup lang=\"ts\">\nimport { ref } from 'vue'\n\nconst rotationY = ref(0)\n\n// Animate rotation\nuseLoop().onBeforeRender(() => {\n rotationY.value += 0.01\n})\n\u003C/script>\n\n\u003Ctemplate>\n \u003C!-- These props are applied directly to the Three.js object -->\n \u003Cprimitive\n :object=\"mesh\"\n :position=\"[1, 2, 3]\"\n :rotation=\"[0, rotationY, 0]\"\n :scale=\"2\"\n name=\"my-primitive\"\n userData=\"{ customData: 'example' }\"\n />\n\u003C/template>\n",[254,2186,2187,2207,2225,2229,2247,2251,2256,2275,2290,2296,2304,2308,2316,2321,2328,2342,2356,2370,2384,2398,2412,2417],{"__ignoreMap":311},[315,2188,2189,2191,2193,2195,2197,2199,2201,2203,2205],{"class":317,"line":318},[315,2190,322],{"class":321},[315,2192,326],{"class":325},[315,2194,330],{"class":329},[315,2196,333],{"class":329},[315,2198,336],{"class":321},[315,2200,339],{"class":321},[315,2202,343],{"class":342},[315,2204,339],{"class":321},[315,2206,348],{"class":321},[315,2208,2209,2211,2213,2215,2217,2219,2221,2223],{"class":317,"line":351},[315,2210,355],{"class":354},[315,2212,358],{"class":321},[315,2214,2029],{"class":361},[315,2216,376],{"class":321},[315,2218,379],{"class":354},[315,2220,382],{"class":321},[315,2222,310],{"class":342},[315,2224,388],{"class":321},[315,2226,2227],{"class":317,"line":391},[315,2228,394],{"emptyLinePlaceholder":39},[315,2230,2231,2233,2236,2238,2240,2242,2245],{"class":317,"line":397},[315,2232,407],{"class":329},[315,2234,2235],{"class":361}," rotationY ",[315,2237,336],{"class":321},[315,2239,2029],{"class":418},[315,2241,421],{"class":361},[315,2243,2244],{"class":424},"0",[315,2246,437],{"class":361},[315,2248,2249],{"class":317,"line":404},[315,2250,394],{"emptyLinePlaceholder":39},[315,2252,2253],{"class":317,"line":440},[315,2254,2255],{"class":400},"// Animate rotation\n",[315,2257,2258,2260,2262,2264,2267,2269,2271,2273],{"class":317,"line":472},[315,2259,120],{"class":418},[315,2261,2080],{"class":361},[315,2263,1061],{"class":321},[315,2265,2266],{"class":418},"onBeforeRender",[315,2268,421],{"class":361},[315,2270,2080],{"class":321},[315,2272,1815],{"class":329},[315,2274,1053],{"class":321},[315,2276,2277,2280,2282,2284,2287],{"class":317,"line":477},[315,2278,2279],{"class":361}," rotationY",[315,2281,1061],{"class":321},[315,2283,2094],{"class":361},[315,2285,2286],{"class":321}," +=",[315,2288,2289],{"class":424}," 0.01\n",[315,2291,2292,2294],{"class":317,"line":483},[315,2293,1424],{"class":321},[315,2295,437],{"class":361},[315,2297,2298,2300,2302],{"class":317,"line":505},[315,2299,508],{"class":321},[315,2301,326],{"class":325},[315,2303,348],{"class":321},[315,2305,2306],{"class":317,"line":515},[315,2307,394],{"emptyLinePlaceholder":39},[315,2309,2310,2312,2314],{"class":317,"line":520},[315,2311,322],{"class":321},[315,2313,525],{"class":325},[315,2315,348],{"class":321},[315,2317,2318],{"class":317,"line":530},[315,2319,2320],{"class":400}," \u003C!-- These props are applied directly to the Three.js object -->\n",[315,2322,2323,2325],{"class":317,"line":541},[315,2324,533],{"class":321},[315,2326,2327],{"class":325},"primitive\n",[315,2329,2330,2333,2335,2337,2339],{"class":317,"line":565},[315,2331,2332],{"class":329}," :object",[315,2334,336],{"class":321},[315,2336,339],{"class":321},[315,2338,845],{"class":342},[315,2340,2341],{"class":321},"\"\n",[315,2343,2344,2347,2349,2351,2354],{"class":317,"line":587},[315,2345,2346],{"class":329}," :position",[315,2348,336],{"class":321},[315,2350,339],{"class":321},[315,2352,2353],{"class":342},"[1, 2, 3]",[315,2355,2341],{"class":321},[315,2357,2358,2361,2363,2365,2368],{"class":317,"line":597},[315,2359,2360],{"class":329}," :rotation",[315,2362,336],{"class":321},[315,2364,339],{"class":321},[315,2366,2367],{"class":342},"[0, rotationY, 0]",[315,2369,2341],{"class":321},[315,2371,2372,2375,2377,2379,2382],{"class":317,"line":607},[315,2373,2374],{"class":329}," :scale",[315,2376,336],{"class":321},[315,2378,339],{"class":321},[315,2380,2381],{"class":342},"2",[315,2383,2341],{"class":321},[315,2385,2386,2389,2391,2393,2396],{"class":317,"line":1180},[315,2387,2388],{"class":329}," name",[315,2390,336],{"class":321},[315,2392,339],{"class":321},[315,2394,2395],{"class":342},"my-primitive",[315,2397,2341],{"class":321},[315,2399,2400,2403,2405,2407,2410],{"class":317,"line":1199},[315,2401,2402],{"class":329}," userData",[315,2404,336],{"class":321},[315,2406,339],{"class":321},[315,2408,2409],{"class":342},"{ customData: 'example' }",[315,2411,2341],{"class":321},[315,2413,2414],{"class":317,"line":1204},[315,2415,2416],{"class":321}," />\n",[315,2418,2419,2421,2423],{"class":317,"line":1210},[315,2420,508],{"class":321},[315,2422,525],{"class":325},[315,2424,348],{"class":321},[245,2426,2428],{"id":2427},"events","Events",[250,2430,252,2431,2433],{},[254,2432,256],{}," component supports all the pointer events available on TresJS components, allowing you to interact with the object in the scene:",[305,2435,2438],{"className":307,"code":2436,"filename":2437,"language":310,"meta":311,"style":311},"\u003Cscript setup lang=\"ts\">\nimport { BoxGeometry, Mesh, MeshBasicMaterial } from 'three'\n\nconst mesh = new Mesh(\n new BoxGeometry(1, 1, 1),\n new MeshBasicMaterial({ color: 0x00FF00 })\n)\n\n// Event handlers\nfunction onClick(event) {\n console.log('Primitive clicked!', event)\n // Change color on click\n event.object.material.color.setHex(Math.random() * 0xFFFFFF)\n}\n\nfunction onPointerMove(event) {\n console.log('Pointer moving over primitive', event)\n}\n\nfunction onPointerEnter(event) {\n console.log('Pointer entered primitive', event)\n // Scale up on hover\n event.object.scale.setScalar(1.1)\n}\n\nfunction onPointerLeave(event) {\n console.log('Pointer left primitive', event)\n // Scale back to normal\n event.object.scale.setScalar(1)\n}\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cprimitive\n :object=\"mesh\"\n @click=\"onClick\"\n @pointermove=\"onPointerMove\"\n @pointerenter=\"onPointerEnter\"\n @pointerleave=\"onPointerLeave\"\n />\n\u003C/template>\n","primitive-events.vue",[254,2439,2440,2460,2486,2490,2504,2526,2546,2550,2554,2559,2575,2599,2604,2647,2651,2655,2670,2693,2697,2701,2716,2739,2744,2769,2773,2777,2792,2816,2822,2845,2850,2859,2864,2873,2880,2893,2908,2923,2938,2953,2958],{"__ignoreMap":311},[315,2441,2442,2444,2446,2448,2450,2452,2454,2456,2458],{"class":317,"line":318},[315,2443,322],{"class":321},[315,2445,326],{"class":325},[315,2447,330],{"class":329},[315,2449,333],{"class":329},[315,2451,336],{"class":321},[315,2453,339],{"class":321},[315,2455,343],{"class":342},[315,2457,339],{"class":321},[315,2459,348],{"class":321},[315,2461,2462,2464,2466,2468,2470,2472,2474,2476,2478,2480,2482,2484],{"class":317,"line":351},[315,2463,355],{"class":354},[315,2465,358],{"class":321},[315,2467,362],{"class":361},[315,2469,365],{"class":321},[315,2471,368],{"class":361},[315,2473,365],{"class":321},[315,2475,373],{"class":361},[315,2477,376],{"class":321},[315,2479,379],{"class":354},[315,2481,382],{"class":321},[315,2483,385],{"class":342},[315,2485,388],{"class":321},[315,2487,2488],{"class":317,"line":391},[315,2489,394],{"emptyLinePlaceholder":39},[315,2491,2492,2494,2496,2498,2500,2502],{"class":317,"line":397},[315,2493,407],{"class":329},[315,2495,739],{"class":361},[315,2497,336],{"class":321},[315,2499,415],{"class":321},[315,2501,368],{"class":418},[315,2503,746],{"class":361},[315,2505,2506,2508,2510,2512,2514,2516,2518,2520,2522,2524],{"class":317,"line":404},[315,2507,751],{"class":321},[315,2509,362],{"class":418},[315,2511,421],{"class":361},[315,2513,425],{"class":424},[315,2515,365],{"class":321},[315,2517,430],{"class":424},[315,2519,365],{"class":321},[315,2521,430],{"class":424},[315,2523,777],{"class":361},[315,2525,780],{"class":321},[315,2527,2528,2530,2532,2534,2536,2538,2540,2542,2544],{"class":317,"line":440},[315,2529,751],{"class":321},[315,2531,373],{"class":418},[315,2533,421],{"class":361},[315,2535,456],{"class":321},[315,2537,459],{"class":325},[315,2539,462],{"class":321},[315,2541,465],{"class":424},[315,2543,376],{"class":321},[315,2545,437],{"class":361},[315,2547,2548],{"class":317,"line":472},[315,2549,437],{"class":361},[315,2551,2552],{"class":317,"line":477},[315,2553,394],{"emptyLinePlaceholder":39},[315,2555,2556],{"class":317,"line":483},[315,2557,2558],{"class":400},"// Event handlers\n",[315,2560,2561,2563,2566,2568,2571,2573],{"class":317,"line":505},[315,2562,910],{"class":329},[315,2564,2565],{"class":418}," onClick",[315,2567,421],{"class":321},[315,2569,2570],{"class":1047},"event",[315,2572,777],{"class":321},[315,2574,1053],{"class":321},[315,2576,2577,2579,2581,2583,2585,2587,2590,2592,2594,2597],{"class":317,"line":515},[315,2578,1058],{"class":361},[315,2580,1061],{"class":321},[315,2582,1064],{"class":418},[315,2584,421],{"class":325},[315,2586,1069],{"class":321},[315,2588,2589],{"class":342},"Primitive clicked!",[315,2591,1069],{"class":321},[315,2593,365],{"class":321},[315,2595,2596],{"class":361}," event",[315,2598,437],{"class":325},[315,2600,2601],{"class":317,"line":520},[315,2602,2603],{"class":400}," // Change color on click\n",[315,2605,2606,2609,2611,2613,2615,2617,2619,2622,2624,2627,2629,2632,2634,2637,2639,2642,2645],{"class":317,"line":530},[315,2607,2608],{"class":361}," event",[315,2610,1061],{"class":321},[315,2612,302],{"class":361},[315,2614,1061],{"class":321},[315,2616,1130],{"class":361},[315,2618,1061],{"class":321},[315,2620,2621],{"class":361},"color",[315,2623,1061],{"class":321},[315,2625,2626],{"class":418},"setHex",[315,2628,421],{"class":325},[315,2630,2631],{"class":361},"Math",[315,2633,1061],{"class":321},[315,2635,2636],{"class":418},"random",[315,2638,1114],{"class":325},[315,2640,2641],{"class":321},"*",[315,2643,2644],{"class":424}," 0xFFFFFF",[315,2646,437],{"class":325},[315,2648,2649],{"class":317,"line":541},[315,2650,1117],{"class":321},[315,2652,2653],{"class":317,"line":565},[315,2654,394],{"emptyLinePlaceholder":39},[315,2656,2657,2659,2662,2664,2666,2668],{"class":317,"line":587},[315,2658,910],{"class":329},[315,2660,2661],{"class":418}," onPointerMove",[315,2663,421],{"class":321},[315,2665,2570],{"class":1047},[315,2667,777],{"class":321},[315,2669,1053],{"class":321},[315,2671,2672,2674,2676,2678,2680,2682,2685,2687,2689,2691],{"class":317,"line":597},[315,2673,1058],{"class":361},[315,2675,1061],{"class":321},[315,2677,1064],{"class":418},[315,2679,421],{"class":325},[315,2681,1069],{"class":321},[315,2683,2684],{"class":342},"Pointer moving over primitive",[315,2686,1069],{"class":321},[315,2688,365],{"class":321},[315,2690,2596],{"class":361},[315,2692,437],{"class":325},[315,2694,2695],{"class":317,"line":607},[315,2696,1117],{"class":321},[315,2698,2699],{"class":317,"line":1180},[315,2700,394],{"emptyLinePlaceholder":39},[315,2702,2703,2705,2708,2710,2712,2714],{"class":317,"line":1199},[315,2704,910],{"class":329},[315,2706,2707],{"class":418}," onPointerEnter",[315,2709,421],{"class":321},[315,2711,2570],{"class":1047},[315,2713,777],{"class":321},[315,2715,1053],{"class":321},[315,2717,2718,2720,2722,2724,2726,2728,2731,2733,2735,2737],{"class":317,"line":1204},[315,2719,1058],{"class":361},[315,2721,1061],{"class":321},[315,2723,1064],{"class":418},[315,2725,421],{"class":325},[315,2727,1069],{"class":321},[315,2729,2730],{"class":342},"Pointer entered primitive",[315,2732,1069],{"class":321},[315,2734,365],{"class":321},[315,2736,2596],{"class":361},[315,2738,437],{"class":325},[315,2740,2741],{"class":317,"line":1210},[315,2742,2743],{"class":400}," // Scale up on hover\n",[315,2745,2746,2748,2750,2752,2754,2757,2759,2762,2764,2767],{"class":317,"line":1241},[315,2747,2608],{"class":361},[315,2749,1061],{"class":321},[315,2751,302],{"class":361},[315,2753,1061],{"class":321},[315,2755,2756],{"class":361},"scale",[315,2758,1061],{"class":321},[315,2760,2761],{"class":418},"setScalar",[315,2763,421],{"class":325},[315,2765,2766],{"class":424},"1.1",[315,2768,437],{"class":325},[315,2770,2771],{"class":317,"line":1246},[315,2772,1117],{"class":321},[315,2774,2775],{"class":317,"line":1252},[315,2776,394],{"emptyLinePlaceholder":39},[315,2778,2779,2781,2784,2786,2788,2790],{"class":317,"line":1282},[315,2780,910],{"class":329},[315,2782,2783],{"class":418}," onPointerLeave",[315,2785,421],{"class":321},[315,2787,2570],{"class":1047},[315,2789,777],{"class":321},[315,2791,1053],{"class":321},[315,2793,2795,2797,2799,2801,2803,2805,2808,2810,2812,2814],{"class":317,"line":2794},27,[315,2796,1058],{"class":361},[315,2798,1061],{"class":321},[315,2800,1064],{"class":418},[315,2802,421],{"class":325},[315,2804,1069],{"class":321},[315,2806,2807],{"class":342},"Pointer left primitive",[315,2809,1069],{"class":321},[315,2811,365],{"class":321},[315,2813,2596],{"class":361},[315,2815,437],{"class":325},[315,2817,2819],{"class":317,"line":2818},28,[315,2820,2821],{"class":400}," // Scale back to normal\n",[315,2823,2825,2827,2829,2831,2833,2835,2837,2839,2841,2843],{"class":317,"line":2824},29,[315,2826,2608],{"class":361},[315,2828,1061],{"class":321},[315,2830,302],{"class":361},[315,2832,1061],{"class":321},[315,2834,2756],{"class":361},[315,2836,1061],{"class":321},[315,2838,2761],{"class":418},[315,2840,421],{"class":325},[315,2842,425],{"class":424},[315,2844,437],{"class":325},[315,2846,2848],{"class":317,"line":2847},30,[315,2849,1117],{"class":321},[315,2851,2853,2855,2857],{"class":317,"line":2852},31,[315,2854,508],{"class":321},[315,2856,326],{"class":325},[315,2858,348],{"class":321},[315,2860,2862],{"class":317,"line":2861},32,[315,2863,394],{"emptyLinePlaceholder":39},[315,2865,2867,2869,2871],{"class":317,"line":2866},33,[315,2868,322],{"class":321},[315,2870,525],{"class":325},[315,2872,348],{"class":321},[315,2874,2876,2878],{"class":317,"line":2875},34,[315,2877,533],{"class":321},[315,2879,2327],{"class":325},[315,2881,2883,2885,2887,2889,2891],{"class":317,"line":2882},35,[315,2884,2332],{"class":329},[315,2886,336],{"class":321},[315,2888,339],{"class":321},[315,2890,845],{"class":342},[315,2892,2341],{"class":321},[315,2894,2896,2899,2901,2903,2906],{"class":317,"line":2895},36,[315,2897,2898],{"class":329}," @click",[315,2900,336],{"class":321},[315,2902,339],{"class":321},[315,2904,2905],{"class":342},"onClick",[315,2907,2341],{"class":321},[315,2909,2911,2914,2916,2918,2921],{"class":317,"line":2910},37,[315,2912,2913],{"class":329}," @pointermove",[315,2915,336],{"class":321},[315,2917,339],{"class":321},[315,2919,2920],{"class":342},"onPointerMove",[315,2922,2341],{"class":321},[315,2924,2926,2929,2931,2933,2936],{"class":317,"line":2925},38,[315,2927,2928],{"class":329}," @pointerenter",[315,2930,336],{"class":321},[315,2932,339],{"class":321},[315,2934,2935],{"class":342},"onPointerEnter",[315,2937,2341],{"class":321},[315,2939,2941,2944,2946,2948,2951],{"class":317,"line":2940},39,[315,2942,2943],{"class":329}," @pointerleave",[315,2945,336],{"class":321},[315,2947,339],{"class":321},[315,2949,2950],{"class":342},"onPointerLeave",[315,2952,2341],{"class":321},[315,2954,2956],{"class":317,"line":2955},40,[315,2957,2416],{"class":321},[315,2959,2961,2963,2965],{"class":317,"line":2960},41,[315,2962,508],{"class":321},[315,2964,525],{"class":325},[315,2966,348],{"class":321},[2968,2969],"read-more",{"to":139},[245,2971,2973],{"id":2972},"children-via-slots","Children via Slots",[250,2975,2976,2977,2979],{},"You can add children to the ",[254,2978,256],{}," component using slots. This is particularly useful when you want to add additional objects or materials which are not part of the main object:",[305,2981,2984],{"className":307,"code":2982,"filename":2983,"language":310,"meta":311,"style":311},"\u003Cscript setup lang=\"ts\">\nimport { BoxGeometry, Mesh } from 'three'\n\n// Create a mesh with only geometry, material will be added via slot\nconst meshWithOnlyGeometry = new Mesh(new BoxGeometry(1, 1, 1))\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cprimitive :object=\"meshWithOnlyGeometry\">\n \u003C!-- Add material as child -->\n \u003CTresMeshBasicMaterial :color=\"0xFF0000\" />\n\n \u003C!-- Add additional objects as children -->\n \u003CTresMesh :position=\"[0, 1.5, 0]\">\n \u003CTresSphereGeometry :args=\"[0.3, 16, 16]\" />\n \u003CTresMeshBasicMaterial :color=\"0x00FF00\" />\n \u003C/TresMesh>\n \u003C/primitive>\n\u003C/template>\n","primitive-children.vue",[254,2985,2986,3006,3028,3032,3037,3072,3080,3084,3092,3111,3116,3135,3139,3144,3163,3184,3202,3211,3219],{"__ignoreMap":311},[315,2987,2988,2990,2992,2994,2996,2998,3000,3002,3004],{"class":317,"line":318},[315,2989,322],{"class":321},[315,2991,326],{"class":325},[315,2993,330],{"class":329},[315,2995,333],{"class":329},[315,2997,336],{"class":321},[315,2999,339],{"class":321},[315,3001,343],{"class":342},[315,3003,339],{"class":321},[315,3005,348],{"class":321},[315,3007,3008,3010,3012,3014,3016,3018,3020,3022,3024,3026],{"class":317,"line":351},[315,3009,355],{"class":354},[315,3011,358],{"class":321},[315,3013,362],{"class":361},[315,3015,365],{"class":321},[315,3017,368],{"class":361},[315,3019,376],{"class":321},[315,3021,379],{"class":354},[315,3023,382],{"class":321},[315,3025,385],{"class":342},[315,3027,388],{"class":321},[315,3029,3030],{"class":317,"line":391},[315,3031,394],{"emptyLinePlaceholder":39},[315,3033,3034],{"class":317,"line":397},[315,3035,3036],{"class":400},"// Create a mesh with only geometry, material will be added via slot\n",[315,3038,3039,3041,3044,3046,3048,3050,3052,3055,3057,3059,3061,3063,3065,3067,3069],{"class":317,"line":404},[315,3040,407],{"class":329},[315,3042,3043],{"class":361}," meshWithOnlyGeometry ",[315,3045,336],{"class":321},[315,3047,415],{"class":321},[315,3049,368],{"class":418},[315,3051,421],{"class":361},[315,3053,3054],{"class":321},"new",[315,3056,362],{"class":418},[315,3058,421],{"class":361},[315,3060,425],{"class":424},[315,3062,365],{"class":321},[315,3064,430],{"class":424},[315,3066,365],{"class":321},[315,3068,430],{"class":424},[315,3070,3071],{"class":361},"))\n",[315,3073,3074,3076,3078],{"class":317,"line":440},[315,3075,508],{"class":321},[315,3077,326],{"class":325},[315,3079,348],{"class":321},[315,3081,3082],{"class":317,"line":472},[315,3083,394],{"emptyLinePlaceholder":39},[315,3085,3086,3088,3090],{"class":317,"line":477},[315,3087,322],{"class":321},[315,3089,525],{"class":325},[315,3091,348],{"class":321},[315,3093,3094,3096,3098,3100,3102,3104,3107,3109],{"class":317,"line":483},[315,3095,533],{"class":321},[315,3097,570],{"class":325},[315,3099,573],{"class":329},[315,3101,336],{"class":321},[315,3103,339],{"class":321},[315,3105,3106],{"class":342},"meshWithOnlyGeometry",[315,3108,339],{"class":321},[315,3110,348],{"class":321},[315,3112,3113],{"class":317,"line":505},[315,3114,3115],{"class":400}," \u003C!-- Add material as child -->\n",[315,3117,3118,3120,3122,3124,3126,3128,3131,3133],{"class":317,"line":515},[315,3119,544],{"class":321},[315,3121,1679],{"class":325},[315,3123,1682],{"class":329},[315,3125,336],{"class":321},[315,3127,339],{"class":321},[315,3129,3130],{"class":342},"0xFF0000",[315,3132,339],{"class":321},[315,3134,562],{"class":321},[315,3136,3137],{"class":317,"line":520},[315,3138,394],{"emptyLinePlaceholder":39},[315,3140,3141],{"class":317,"line":530},[315,3142,3143],{"class":400}," \u003C!-- Add additional objects as children -->\n",[315,3145,3146,3148,3150,3152,3154,3156,3159,3161],{"class":317,"line":541},[315,3147,544],{"class":321},[315,3149,1453],{"class":325},[315,3151,550],{"class":329},[315,3153,336],{"class":321},[315,3155,339],{"class":321},[315,3157,3158],{"class":342},"[0, 1.5, 0]",[315,3160,339],{"class":321},[315,3162,348],{"class":321},[315,3164,3165,3168,3171,3173,3175,3177,3180,3182],{"class":317,"line":565},[315,3166,3167],{"class":321}," \u003C",[315,3169,3170],{"class":325},"TresSphereGeometry",[315,3172,1465],{"class":329},[315,3174,336],{"class":321},[315,3176,339],{"class":321},[315,3178,3179],{"class":342},"[0.3, 16, 16]",[315,3181,339],{"class":321},[315,3183,562],{"class":321},[315,3185,3186,3188,3190,3192,3194,3196,3198,3200],{"class":317,"line":587},[315,3187,3167],{"class":321},[315,3189,1679],{"class":325},[315,3191,1682],{"class":329},[315,3193,336],{"class":321},[315,3195,339],{"class":321},[315,3197,1689],{"class":342},[315,3199,339],{"class":321},[315,3201,562],{"class":321},[315,3203,3204,3207,3209],{"class":317,"line":597},[315,3205,3206],{"class":321}," \u003C/",[315,3208,1453],{"class":325},[315,3210,348],{"class":321},[315,3212,3213,3215,3217],{"class":317,"line":607},[315,3214,600],{"class":321},[315,3216,570],{"class":325},[315,3218,348],{"class":321},[315,3220,3221,3223,3225],{"class":317,"line":1180},[315,3222,508],{"class":321},[315,3224,525],{"class":325},[315,3226,348],{"class":321},[245,3228,3230],{"id":3229},"usage-with-models","Usage with Models",[250,3232,252,3233,3235],{},[254,3234,256],{}," component is especially powerful when working with complex models loaded from external sources. Here's how to use it with GLTF models:",[1312,3237,3238,3463],{},[305,3239,3242],{"className":307,"code":3240,"filename":3241,"language":310,"meta":311,"style":311},"\u003Cscript setup lang=\"ts\">\nimport { useGLTF } from '@tresjs/cientos'\n\n// Load a GLTF model\nconst { nodes, state } = useGLTF('/models/AkuAku.gltf')\n\n// You can use the entire scene or specific nodes\nconst modelNode = computed(() => nodes.value.AkuAku)\n\u003C/script>\n\n\u003Ctemplate>\n \u003C!-- Use specific node from the model -->\n \u003Cprimitive v-if=\"modelNode\" :object=\"modelNode\" />\n\n \u003C!-- Or use the entire scene -->\n \u003Cprimitive v-if=\"state.scene\" :object=\"state.scene\" />\n\u003C/template>\n","TheModel.vue",[254,3243,3244,3264,3284,3288,3293,3324,3328,3333,3362,3370,3374,3382,3387,3417,3421,3426,3455],{"__ignoreMap":311},[315,3245,3246,3248,3250,3252,3254,3256,3258,3260,3262],{"class":317,"line":318},[315,3247,322],{"class":321},[315,3249,326],{"class":325},[315,3251,330],{"class":329},[315,3253,333],{"class":329},[315,3255,336],{"class":321},[315,3257,339],{"class":321},[315,3259,343],{"class":342},[315,3261,339],{"class":321},[315,3263,348],{"class":321},[315,3265,3266,3268,3270,3273,3275,3277,3279,3282],{"class":317,"line":351},[315,3267,355],{"class":354},[315,3269,358],{"class":321},[315,3271,3272],{"class":361}," useGLTF",[315,3274,376],{"class":321},[315,3276,379],{"class":354},[315,3278,382],{"class":321},[315,3280,3281],{"class":342},"@tresjs/cientos",[315,3283,388],{"class":321},[315,3285,3286],{"class":317,"line":391},[315,3287,394],{"emptyLinePlaceholder":39},[315,3289,3290],{"class":317,"line":397},[315,3291,3292],{"class":400},"// Load a GLTF model\n",[315,3294,3295,3297,3299,3302,3304,3307,3309,3311,3313,3315,3317,3320,3322],{"class":317,"line":404},[315,3296,407],{"class":329},[315,3298,358],{"class":321},[315,3300,3301],{"class":361}," nodes",[315,3303,365],{"class":321},[315,3305,3306],{"class":361}," state ",[315,3308,1424],{"class":321},[315,3310,1835],{"class":321},[315,3312,3272],{"class":418},[315,3314,421],{"class":361},[315,3316,1069],{"class":321},[315,3318,3319],{"class":342},"/models/AkuAku.gltf",[315,3321,1069],{"class":321},[315,3323,437],{"class":361},[315,3325,3326],{"class":317,"line":440},[315,3327,394],{"emptyLinePlaceholder":39},[315,3329,3330],{"class":317,"line":472},[315,3331,3332],{"class":400},"// You can use the entire scene or specific nodes\n",[315,3334,3335,3337,3340,3342,3345,3347,3349,3351,3353,3355,3357,3359],{"class":317,"line":477},[315,3336,407],{"class":329},[315,3338,3339],{"class":361}," modelNode ",[315,3341,336],{"class":321},[315,3343,3344],{"class":418}," computed",[315,3346,421],{"class":361},[315,3348,2080],{"class":321},[315,3350,1815],{"class":329},[315,3352,3301],{"class":361},[315,3354,1061],{"class":321},[315,3356,2094],{"class":361},[315,3358,1061],{"class":321},[315,3360,3361],{"class":361},"AkuAku)\n",[315,3363,3364,3366,3368],{"class":317,"line":483},[315,3365,508],{"class":321},[315,3367,326],{"class":325},[315,3369,348],{"class":321},[315,3371,3372],{"class":317,"line":505},[315,3373,394],{"emptyLinePlaceholder":39},[315,3375,3376,3378,3380],{"class":317,"line":515},[315,3377,322],{"class":321},[315,3379,525],{"class":325},[315,3381,348],{"class":321},[315,3383,3384],{"class":317,"line":520},[315,3385,3386],{"class":400}," \u003C!-- Use specific node from the model -->\n",[315,3388,3389,3391,3393,3396,3398,3400,3403,3405,3407,3409,3411,3413,3415],{"class":317,"line":530},[315,3390,533],{"class":321},[315,3392,570],{"class":325},[315,3394,3395],{"class":329}," v-if",[315,3397,336],{"class":321},[315,3399,339],{"class":321},[315,3401,3402],{"class":342},"modelNode",[315,3404,339],{"class":321},[315,3406,573],{"class":329},[315,3408,336],{"class":321},[315,3410,339],{"class":321},[315,3412,3402],{"class":342},[315,3414,339],{"class":321},[315,3416,562],{"class":321},[315,3418,3419],{"class":317,"line":541},[315,3420,394],{"emptyLinePlaceholder":39},[315,3422,3423],{"class":317,"line":565},[315,3424,3425],{"class":400}," \u003C!-- Or use the entire scene -->\n",[315,3427,3428,3430,3432,3434,3436,3438,3441,3443,3445,3447,3449,3451,3453],{"class":317,"line":587},[315,3429,533],{"class":321},[315,3431,570],{"class":325},[315,3433,3395],{"class":329},[315,3435,336],{"class":321},[315,3437,339],{"class":321},[315,3439,3440],{"class":342},"state.scene",[315,3442,339],{"class":321},[315,3444,573],{"class":329},[315,3446,336],{"class":321},[315,3448,339],{"class":321},[315,3450,3440],{"class":342},[315,3452,339],{"class":321},[315,3454,562],{"class":321},[315,3456,3457,3459,3461],{"class":317,"line":597},[315,3458,508],{"class":321},[315,3460,525],{"class":325},[315,3462,348],{"class":321},[305,3464,3467],{"className":307,"code":3465,"filename":3466,"language":310,"meta":311,"style":311},"\u003Cscript setup lang=\"ts\">\nimport TheModel from './TheModel.vue'\n\u003C/script>\n\n\u003Ctemplate>\n \u003CTresCanvas>\n \u003CTresPerspectiveCamera :position=\"[5, 5, 5]\" :look-at=\"[0, 0, 0]\" />\n \u003CTresAmbientLight :intensity=\"0.5\" />\n \u003CTresDirectionalLight :position=\"[5, 5, 5]\" />\n\n \u003CTheModel />\n \u003C/TresCanvas>\n\u003C/template>\n","app.vue",[254,3468,3469,3489,3506,3514,3518,3526,3534,3564,3584,3602,3606,3615,3623],{"__ignoreMap":311},[315,3470,3471,3473,3475,3477,3479,3481,3483,3485,3487],{"class":317,"line":318},[315,3472,322],{"class":321},[315,3474,326],{"class":325},[315,3476,330],{"class":329},[315,3478,333],{"class":329},[315,3480,336],{"class":321},[315,3482,339],{"class":321},[315,3484,343],{"class":342},[315,3486,339],{"class":321},[315,3488,348],{"class":321},[315,3490,3491,3493,3496,3499,3501,3504],{"class":317,"line":351},[315,3492,355],{"class":354},[315,3494,3495],{"class":361}," TheModel ",[315,3497,3498],{"class":354},"from",[315,3500,382],{"class":321},[315,3502,3503],{"class":342},"./TheModel.vue",[315,3505,388],{"class":321},[315,3507,3508,3510,3512],{"class":317,"line":391},[315,3509,508],{"class":321},[315,3511,326],{"class":325},[315,3513,348],{"class":321},[315,3515,3516],{"class":317,"line":397},[315,3517,394],{"emptyLinePlaceholder":39},[315,3519,3520,3522,3524],{"class":317,"line":404},[315,3521,322],{"class":321},[315,3523,525],{"class":325},[315,3525,348],{"class":321},[315,3527,3528,3530,3532],{"class":317,"line":440},[315,3529,533],{"class":321},[315,3531,536],{"class":325},[315,3533,348],{"class":321},[315,3535,3536,3538,3540,3542,3544,3546,3548,3550,3553,3555,3557,3560,3562],{"class":317,"line":472},[315,3537,544],{"class":321},[315,3539,547],{"class":325},[315,3541,550],{"class":329},[315,3543,336],{"class":321},[315,3545,339],{"class":321},[315,3547,1916],{"class":342},[315,3549,339],{"class":321},[315,3551,3552],{"class":329}," :look-at",[315,3554,336],{"class":321},[315,3556,339],{"class":321},[315,3558,3559],{"class":342},"[0, 0, 0]",[315,3561,339],{"class":321},[315,3563,562],{"class":321},[315,3565,3566,3568,3570,3573,3575,3577,3580,3582],{"class":317,"line":477},[315,3567,544],{"class":321},[315,3569,592],{"class":325},[315,3571,3572],{"class":329}," :intensity",[315,3574,336],{"class":321},[315,3576,339],{"class":321},[315,3578,3579],{"class":342},"0.5",[315,3581,339],{"class":321},[315,3583,562],{"class":321},[315,3585,3586,3588,3590,3592,3594,3596,3598,3600],{"class":317,"line":483},[315,3587,544],{"class":321},[315,3589,1907],{"class":325},[315,3591,550],{"class":329},[315,3593,336],{"class":321},[315,3595,339],{"class":321},[315,3597,1916],{"class":342},[315,3599,339],{"class":321},[315,3601,562],{"class":321},[315,3603,3604],{"class":317,"line":505},[315,3605,394],{"emptyLinePlaceholder":39},[315,3607,3608,3610,3613],{"class":317,"line":515},[315,3609,544],{"class":321},[315,3611,3612],{"class":325},"TheModel",[315,3614,562],{"class":321},[315,3616,3617,3619,3621],{"class":317,"line":520},[315,3618,600],{"class":321},[315,3620,536],{"class":325},[315,3622,348],{"class":321},[315,3624,3625,3627,3629],{"class":317,"line":530},[315,3626,508],{"class":321},[315,3628,525],{"class":325},[315,3630,348],{"class":321},[624,3632,3634],{"id":3633},"working-with-multiple-model-parts","Working with Multiple Model Parts",[250,3636,3637],{},"If you are working with complex models, you may want to access and manipulate specific parts:",[305,3639,3642],{"className":307,"code":3640,"filename":3641,"language":310,"meta":311,"style":311},"\u003Cscript setup lang=\"ts\">\nimport { useGLTF } from '@tresjs/cientos'\n\nconst { nodes } = await useGLTF('/models/complex-model.gltf')\n\n// Access specific parts of the model\nconst chassis = computed(() => nodes.value.Chassis)\nconst wheels = computed(() => nodes.value.Wheels)\nconst engine = computed(() => nodes.value.Engine)\n\n// You can modify materials or properties\nwatchEffect(() => {\n if (chassis.value) {\n chassis.value.material.color.setHex(0xFF0000)\n }\n})\n\u003C/script>\n\n\u003Ctemplate>\n \u003CTresGroup>\n \u003C!-- Render different parts with different transformations -->\n \u003Cprimitive v-if=\"chassis\" :object=\"chassis\" />\n \u003Cprimitive v-if=\"wheels\" :object=\"wheels\" :rotation=\"[0, rotationY, 0]\" />\n \u003Cprimitive v-if=\"engine\" :object=\"engine\" @click=\"startEngine\" />\n \u003C/TresGroup>\n\u003C/template>\n","primitive-model-parts.vue",[254,3643,3644,3664,3682,3686,3715,3719,3724,3752,3780,3808,3812,3817,3830,3847,3874,3878,3884,3892,3896,3904,3913,3918,3946,3986,4027,4035],{"__ignoreMap":311},[315,3645,3646,3648,3650,3652,3654,3656,3658,3660,3662],{"class":317,"line":318},[315,3647,322],{"class":321},[315,3649,326],{"class":325},[315,3651,330],{"class":329},[315,3653,333],{"class":329},[315,3655,336],{"class":321},[315,3657,339],{"class":321},[315,3659,343],{"class":342},[315,3661,339],{"class":321},[315,3663,348],{"class":321},[315,3665,3666,3668,3670,3672,3674,3676,3678,3680],{"class":317,"line":351},[315,3667,355],{"class":354},[315,3669,358],{"class":321},[315,3671,3272],{"class":361},[315,3673,376],{"class":321},[315,3675,379],{"class":354},[315,3677,382],{"class":321},[315,3679,3281],{"class":342},[315,3681,388],{"class":321},[315,3683,3684],{"class":317,"line":391},[315,3685,394],{"emptyLinePlaceholder":39},[315,3687,3688,3690,3692,3695,3697,3699,3702,3704,3706,3708,3711,3713],{"class":317,"line":397},[315,3689,407],{"class":329},[315,3691,358],{"class":321},[315,3693,3694],{"class":361}," nodes ",[315,3696,1424],{"class":321},[315,3698,1835],{"class":321},[315,3700,3701],{"class":354}," await",[315,3703,3272],{"class":418},[315,3705,421],{"class":361},[315,3707,1069],{"class":321},[315,3709,3710],{"class":342},"/models/complex-model.gltf",[315,3712,1069],{"class":321},[315,3714,437],{"class":361},[315,3716,3717],{"class":317,"line":404},[315,3718,394],{"emptyLinePlaceholder":39},[315,3720,3721],{"class":317,"line":440},[315,3722,3723],{"class":400},"// Access specific parts of the model\n",[315,3725,3726,3728,3731,3733,3735,3737,3739,3741,3743,3745,3747,3749],{"class":317,"line":472},[315,3727,407],{"class":329},[315,3729,3730],{"class":361}," chassis ",[315,3732,336],{"class":321},[315,3734,3344],{"class":418},[315,3736,421],{"class":361},[315,3738,2080],{"class":321},[315,3740,1815],{"class":329},[315,3742,3301],{"class":361},[315,3744,1061],{"class":321},[315,3746,2094],{"class":361},[315,3748,1061],{"class":321},[315,3750,3751],{"class":361},"Chassis)\n",[315,3753,3754,3756,3759,3761,3763,3765,3767,3769,3771,3773,3775,3777],{"class":317,"line":477},[315,3755,407],{"class":329},[315,3757,3758],{"class":361}," wheels ",[315,3760,336],{"class":321},[315,3762,3344],{"class":418},[315,3764,421],{"class":361},[315,3766,2080],{"class":321},[315,3768,1815],{"class":329},[315,3770,3301],{"class":361},[315,3772,1061],{"class":321},[315,3774,2094],{"class":361},[315,3776,1061],{"class":321},[315,3778,3779],{"class":361},"Wheels)\n",[315,3781,3782,3784,3787,3789,3791,3793,3795,3797,3799,3801,3803,3805],{"class":317,"line":483},[315,3783,407],{"class":329},[315,3785,3786],{"class":361}," engine ",[315,3788,336],{"class":321},[315,3790,3344],{"class":418},[315,3792,421],{"class":361},[315,3794,2080],{"class":321},[315,3796,1815],{"class":329},[315,3798,3301],{"class":361},[315,3800,1061],{"class":321},[315,3802,2094],{"class":361},[315,3804,1061],{"class":321},[315,3806,3807],{"class":361},"Engine)\n",[315,3809,3810],{"class":317,"line":505},[315,3811,394],{"emptyLinePlaceholder":39},[315,3813,3814],{"class":317,"line":515},[315,3815,3816],{"class":400},"// You can modify materials or properties\n",[315,3818,3819,3822,3824,3826,3828],{"class":317,"line":520},[315,3820,3821],{"class":418},"watchEffect",[315,3823,421],{"class":361},[315,3825,2080],{"class":321},[315,3827,1815],{"class":329},[315,3829,1053],{"class":321},[315,3831,3832,3834,3836,3839,3841,3843,3845],{"class":317,"line":530},[315,3833,1086],{"class":354},[315,3835,1089],{"class":325},[315,3837,3838],{"class":361},"chassis",[315,3840,1061],{"class":321},[315,3842,2094],{"class":361},[315,3844,1099],{"class":325},[315,3846,1385],{"class":321},[315,3848,3849,3852,3854,3856,3858,3860,3862,3864,3866,3868,3870,3872],{"class":317,"line":541},[315,3850,3851],{"class":361}," chassis",[315,3853,1061],{"class":321},[315,3855,2094],{"class":361},[315,3857,1061],{"class":321},[315,3859,1130],{"class":361},[315,3861,1061],{"class":321},[315,3863,2621],{"class":361},[315,3865,1061],{"class":321},[315,3867,2626],{"class":418},[315,3869,421],{"class":325},[315,3871,3130],{"class":424},[315,3873,437],{"class":325},[315,3875,3876],{"class":317,"line":565},[315,3877,1876],{"class":321},[315,3879,3880,3882],{"class":317,"line":587},[315,3881,1424],{"class":321},[315,3883,437],{"class":361},[315,3885,3886,3888,3890],{"class":317,"line":597},[315,3887,508],{"class":321},[315,3889,326],{"class":325},[315,3891,348],{"class":321},[315,3893,3894],{"class":317,"line":607},[315,3895,394],{"emptyLinePlaceholder":39},[315,3897,3898,3900,3902],{"class":317,"line":1180},[315,3899,322],{"class":321},[315,3901,525],{"class":325},[315,3903,348],{"class":321},[315,3905,3906,3908,3911],{"class":317,"line":1199},[315,3907,533],{"class":321},[315,3909,3910],{"class":325},"TresGroup",[315,3912,348],{"class":321},[315,3914,3915],{"class":317,"line":1204},[315,3916,3917],{"class":400}," \u003C!-- Render different parts with different transformations -->\n",[315,3919,3920,3922,3924,3926,3928,3930,3932,3934,3936,3938,3940,3942,3944],{"class":317,"line":1210},[315,3921,544],{"class":321},[315,3923,570],{"class":325},[315,3925,3395],{"class":329},[315,3927,336],{"class":321},[315,3929,339],{"class":321},[315,3931,3838],{"class":342},[315,3933,339],{"class":321},[315,3935,573],{"class":329},[315,3937,336],{"class":321},[315,3939,339],{"class":321},[315,3941,3838],{"class":342},[315,3943,339],{"class":321},[315,3945,562],{"class":321},[315,3947,3948,3950,3952,3954,3956,3958,3961,3963,3965,3967,3969,3971,3973,3976,3978,3980,3982,3984],{"class":317,"line":1241},[315,3949,544],{"class":321},[315,3951,570],{"class":325},[315,3953,3395],{"class":329},[315,3955,336],{"class":321},[315,3957,339],{"class":321},[315,3959,3960],{"class":342},"wheels",[315,3962,339],{"class":321},[315,3964,573],{"class":329},[315,3966,336],{"class":321},[315,3968,339],{"class":321},[315,3970,3960],{"class":342},[315,3972,339],{"class":321},[315,3974,3975],{"class":329}," :rotation",[315,3977,336],{"class":321},[315,3979,339],{"class":321},[315,3981,2367],{"class":342},[315,3983,339],{"class":321},[315,3985,562],{"class":321},[315,3987,3988,3990,3992,3994,3996,3998,4001,4003,4005,4007,4009,4011,4013,4016,4018,4020,4023,4025],{"class":317,"line":1246},[315,3989,544],{"class":321},[315,3991,570],{"class":325},[315,3993,3395],{"class":329},[315,3995,336],{"class":321},[315,3997,339],{"class":321},[315,3999,4000],{"class":342},"engine",[315,4002,339],{"class":321},[315,4004,573],{"class":329},[315,4006,336],{"class":321},[315,4008,339],{"class":321},[315,4010,4000],{"class":342},[315,4012,339],{"class":321},[315,4014,4015],{"class":329}," @click",[315,4017,336],{"class":321},[315,4019,339],{"class":321},[315,4021,4022],{"class":342},"startEngine",[315,4024,339],{"class":321},[315,4026,562],{"class":321},[315,4028,4029,4031,4033],{"class":317,"line":1252},[315,4030,600],{"class":321},[315,4032,3910],{"class":325},[315,4034,348],{"class":321},[315,4036,4037,4039,4041],{"class":317,"line":1282},[315,4038,508],{"class":321},[315,4040,525],{"class":325},[315,4042,348],{"class":321},[245,4044,4046],{"id":4045},"performance-considerations","Performance Considerations",[250,4048,4049],{},"When using primitives, keep these performance tips in mind:",[4051,4052,4053],"note",{},[250,4054,4055,4058,4059,4067,4068,4075],{},[268,4056,4057],{},"Reactivity Optimization",": Use ",[4060,4061,4065],"a",{"href":4062,"rel":4063},"https://vuejs.org/api/reactivity-advanced.html#shallowref",[4064],"nofollow",[254,4066,652],{}," instead of ",[4060,4069,4072],{"href":4070,"rel":4071},"https://vuejs.org/api/reactivity-core.html#ref",[4064],[254,4073,4074],{},"ref"," for Three.js objects to avoid deep reactivity overhead, as Three.js objects have complex internal structures that don't benefit from Vue's reactivity system.",[305,4077,4079],{"className":307,"code":4078,"language":310,"meta":311,"style":311},"\u003Cscript setup lang=\"ts\">\nimport { shallowRef } from 'vue'\nimport { BoxGeometry, Mesh, MeshBasicMaterial } from 'three'\n\n// โœ… Good - Use shallowRef for Three.js objects\nconst mesh = shallowRef(new Mesh(geometry, material))\n\n// โŒ Avoid - Regular ref creates unnecessary reactivity overhead\n// const mesh = ref(new Mesh(geometry, material))\n\u003C/script>\n",[254,4080,4081,4101,4119,4145,4149,4154,4177,4181,4186,4191],{"__ignoreMap":311},[315,4082,4083,4085,4087,4089,4091,4093,4095,4097,4099],{"class":317,"line":318},[315,4084,322],{"class":321},[315,4086,326],{"class":325},[315,4088,330],{"class":329},[315,4090,333],{"class":329},[315,4092,336],{"class":321},[315,4094,339],{"class":321},[315,4096,343],{"class":342},[315,4098,339],{"class":321},[315,4100,348],{"class":321},[315,4102,4103,4105,4107,4109,4111,4113,4115,4117],{"class":317,"line":351},[315,4104,355],{"class":354},[315,4106,358],{"class":321},[315,4108,687],{"class":361},[315,4110,376],{"class":321},[315,4112,379],{"class":354},[315,4114,382],{"class":321},[315,4116,310],{"class":342},[315,4118,388],{"class":321},[315,4120,4121,4123,4125,4127,4129,4131,4133,4135,4137,4139,4141,4143],{"class":317,"line":391},[315,4122,355],{"class":354},[315,4124,358],{"class":321},[315,4126,362],{"class":361},[315,4128,365],{"class":321},[315,4130,368],{"class":361},[315,4132,365],{"class":321},[315,4134,373],{"class":361},[315,4136,376],{"class":321},[315,4138,379],{"class":354},[315,4140,382],{"class":321},[315,4142,385],{"class":342},[315,4144,388],{"class":321},[315,4146,4147],{"class":317,"line":397},[315,4148,394],{"emptyLinePlaceholder":39},[315,4150,4151],{"class":317,"line":404},[315,4152,4153],{"class":400},"// โœ… Good - Use shallowRef for Three.js objects\n",[315,4155,4156,4158,4160,4162,4164,4166,4168,4170,4172,4174],{"class":317,"line":440},[315,4157,407],{"class":329},[315,4159,739],{"class":361},[315,4161,336],{"class":321},[315,4163,687],{"class":418},[315,4165,421],{"class":361},[315,4167,3054],{"class":321},[315,4169,368],{"class":418},[315,4171,497],{"class":361},[315,4173,365],{"class":321},[315,4175,4176],{"class":361}," material))\n",[315,4178,4179],{"class":317,"line":472},[315,4180,394],{"emptyLinePlaceholder":39},[315,4182,4183],{"class":317,"line":477},[315,4184,4185],{"class":400},"// โŒ Avoid - Regular ref creates unnecessary reactivity overhead\n",[315,4187,4188],{"class":317,"line":483},[315,4189,4190],{"class":400},"// const mesh = ref(new Mesh(geometry, material))\n",[315,4192,4193,4195,4197],{"class":317,"line":505},[315,4194,508],{"class":321},[315,4196,326],{"class":325},[315,4198,348],{"class":321},[4200,4201,4202],"warning",{},[250,4203,4204,4207,4208,4211],{},[268,4205,4206],{},"Manual Disposal Required",": TresJS does NOT automatically dispose primitive resources by default. This is intentional to avoid altering the user's ",[254,4209,4210],{},":object",". You must manually dispose of geometries, materials, and textures when they're no longer needed to prevent memory leaks.",[305,4213,4215],{"className":307,"code":4214,"language":310,"meta":311,"style":311},"\u003Cscript setup lang=\"ts\">\nimport { onUnmounted, shallowRef } from 'vue'\nimport { BoxGeometry, Mesh, MeshBasicMaterial } from 'three'\n\nconst geometry = new BoxGeometry(1, 1, 1)\nconst material = new MeshBasicMaterial({ color: 0xFF0000 })\nconst mesh = shallowRef(new Mesh(geometry, material))\n\n// โœ… Clean up resources when component is unmounted\nonUnmounted(() => {\n geometry.dispose()\n material.dispose()\n // Note: The mesh itself doesn't need disposal, but its resources do\n})\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cprimitive :object=\"mesh\" />\n\u003C/template>\n",[254,4216,4217,4237,4260,4286,4290,4316,4342,4364,4368,4373,4386,4398,4409,4414,4420,4428,4432,4440,4458],{"__ignoreMap":311},[315,4218,4219,4221,4223,4225,4227,4229,4231,4233,4235],{"class":317,"line":318},[315,4220,322],{"class":321},[315,4222,326],{"class":325},[315,4224,330],{"class":329},[315,4226,333],{"class":329},[315,4228,336],{"class":321},[315,4230,339],{"class":321},[315,4232,343],{"class":342},[315,4234,339],{"class":321},[315,4236,348],{"class":321},[315,4238,4239,4241,4243,4246,4248,4250,4252,4254,4256,4258],{"class":317,"line":351},[315,4240,355],{"class":354},[315,4242,358],{"class":321},[315,4244,4245],{"class":361}," onUnmounted",[315,4247,365],{"class":321},[315,4249,687],{"class":361},[315,4251,376],{"class":321},[315,4253,379],{"class":354},[315,4255,382],{"class":321},[315,4257,310],{"class":342},[315,4259,388],{"class":321},[315,4261,4262,4264,4266,4268,4270,4272,4274,4276,4278,4280,4282,4284],{"class":317,"line":391},[315,4263,355],{"class":354},[315,4265,358],{"class":321},[315,4267,362],{"class":361},[315,4269,365],{"class":321},[315,4271,368],{"class":361},[315,4273,365],{"class":321},[315,4275,373],{"class":361},[315,4277,376],{"class":321},[315,4279,379],{"class":354},[315,4281,382],{"class":321},[315,4283,385],{"class":342},[315,4285,388],{"class":321},[315,4287,4288],{"class":317,"line":397},[315,4289,394],{"emptyLinePlaceholder":39},[315,4291,4292,4294,4296,4298,4300,4302,4304,4306,4308,4310,4312,4314],{"class":317,"line":404},[315,4293,407],{"class":329},[315,4295,410],{"class":361},[315,4297,336],{"class":321},[315,4299,415],{"class":321},[315,4301,362],{"class":418},[315,4303,421],{"class":361},[315,4305,425],{"class":424},[315,4307,365],{"class":321},[315,4309,430],{"class":424},[315,4311,365],{"class":321},[315,4313,430],{"class":424},[315,4315,437],{"class":361},[315,4317,4318,4320,4322,4324,4326,4328,4330,4332,4334,4336,4338,4340],{"class":317,"line":440},[315,4319,407],{"class":329},[315,4321,445],{"class":361},[315,4323,336],{"class":321},[315,4325,415],{"class":321},[315,4327,373],{"class":418},[315,4329,421],{"class":361},[315,4331,456],{"class":321},[315,4333,459],{"class":325},[315,4335,462],{"class":321},[315,4337,797],{"class":424},[315,4339,376],{"class":321},[315,4341,437],{"class":361},[315,4343,4344,4346,4348,4350,4352,4354,4356,4358,4360,4362],{"class":317,"line":472},[315,4345,407],{"class":329},[315,4347,739],{"class":361},[315,4349,336],{"class":321},[315,4351,687],{"class":418},[315,4353,421],{"class":361},[315,4355,3054],{"class":321},[315,4357,368],{"class":418},[315,4359,497],{"class":361},[315,4361,365],{"class":321},[315,4363,4176],{"class":361},[315,4365,4366],{"class":317,"line":477},[315,4367,394],{"emptyLinePlaceholder":39},[315,4369,4370],{"class":317,"line":483},[315,4371,4372],{"class":400},"// โœ… Clean up resources when component is unmounted\n",[315,4374,4375,4378,4380,4382,4384],{"class":317,"line":505},[315,4376,4377],{"class":418},"onUnmounted",[315,4379,421],{"class":361},[315,4381,2080],{"class":321},[315,4383,1815],{"class":329},[315,4385,1053],{"class":321},[315,4387,4388,4391,4393,4395],{"class":317,"line":515},[315,4389,4390],{"class":361}," geometry",[315,4392,1061],{"class":321},[315,4394,860],{"class":418},[315,4396,4397],{"class":325},"()\n",[315,4399,4400,4403,4405,4407],{"class":317,"line":520},[315,4401,4402],{"class":361}," material",[315,4404,1061],{"class":321},[315,4406,860],{"class":418},[315,4408,4397],{"class":325},[315,4410,4411],{"class":317,"line":530},[315,4412,4413],{"class":400}," // Note: The mesh itself doesn't need disposal, but its resources do\n",[315,4415,4416,4418],{"class":317,"line":541},[315,4417,1424],{"class":321},[315,4419,437],{"class":361},[315,4421,4422,4424,4426],{"class":317,"line":565},[315,4423,508],{"class":321},[315,4425,326],{"class":325},[315,4427,348],{"class":321},[315,4429,4430],{"class":317,"line":587},[315,4431,394],{"emptyLinePlaceholder":39},[315,4433,4434,4436,4438],{"class":317,"line":597},[315,4435,322],{"class":321},[315,4437,525],{"class":325},[315,4439,348],{"class":321},[315,4441,4442,4444,4446,4448,4450,4452,4454,4456],{"class":317,"line":607},[315,4443,533],{"class":321},[315,4445,570],{"class":325},[315,4447,573],{"class":329},[315,4449,336],{"class":321},[315,4451,339],{"class":321},[315,4453,845],{"class":342},[315,4455,339],{"class":321},[315,4457,562],{"class":321},[315,4459,4460,4462,4464],{"class":317,"line":1180},[315,4461,508],{"class":321},[315,4463,525],{"class":325},[315,4465,348],{"class":321},[624,4467,4469],{"id":4468},"controlling-disposal-behavior","Controlling Disposal Behavior",[250,4471,4472,4473,303],{},"You can override the default behavior using the ",[254,4474,860],{},[305,4476,4478],{"className":307,"code":4477,"language":310,"meta":311,"style":311},"\u003Ctemplate>\n \u003C!-- Default: Don't dispose primitive resources -->\n \u003Cprimitive :object=\"mesh\" />\n\n \u003C!-- Explicitly disable disposal -->\n \u003Cprimitive :object=\"mesh\" :dispose=\"false\" />\n\n \u003C!-- Force disposal of the primitive and its resources -->\n \u003Cprimitive :object=\"mesh\" :dispose=\"true\" />\n\n \u003C!-- Custom disposal function -->\n \u003Cprimitive :object=\"mesh\" :dispose=\"customDispose\" />\n\u003C/template>\n",[254,4479,4480,4488,4493,4511,4515,4520,4548,4552,4557,4585,4589,4594,4622],{"__ignoreMap":311},[315,4481,4482,4484,4486],{"class":317,"line":318},[315,4483,322],{"class":321},[315,4485,525],{"class":325},[315,4487,348],{"class":321},[315,4489,4490],{"class":317,"line":351},[315,4491,4492],{"class":400}," \u003C!-- Default: Don't dispose primitive resources -->\n",[315,4494,4495,4497,4499,4501,4503,4505,4507,4509],{"class":317,"line":391},[315,4496,533],{"class":321},[315,4498,570],{"class":325},[315,4500,573],{"class":329},[315,4502,336],{"class":321},[315,4504,339],{"class":321},[315,4506,845],{"class":342},[315,4508,339],{"class":321},[315,4510,562],{"class":321},[315,4512,4513],{"class":317,"line":397},[315,4514,394],{"emptyLinePlaceholder":39},[315,4516,4517],{"class":317,"line":404},[315,4518,4519],{"class":400}," \u003C!-- Explicitly disable disposal -->\n",[315,4521,4522,4524,4526,4528,4530,4532,4534,4536,4538,4540,4542,4544,4546],{"class":317,"line":440},[315,4523,533],{"class":321},[315,4525,570],{"class":325},[315,4527,573],{"class":329},[315,4529,336],{"class":321},[315,4531,339],{"class":321},[315,4533,845],{"class":342},[315,4535,339],{"class":321},[315,4537,1228],{"class":329},[315,4539,336],{"class":321},[315,4541,339],{"class":321},[315,4543,895],{"class":342},[315,4545,339],{"class":321},[315,4547,562],{"class":321},[315,4549,4550],{"class":317,"line":472},[315,4551,394],{"emptyLinePlaceholder":39},[315,4553,4554],{"class":317,"line":477},[315,4555,4556],{"class":400}," \u003C!-- Force disposal of the primitive and its resources -->\n",[315,4558,4559,4561,4563,4565,4567,4569,4571,4573,4575,4577,4579,4581,4583],{"class":317,"line":483},[315,4560,533],{"class":321},[315,4562,570],{"class":325},[315,4564,573],{"class":329},[315,4566,336],{"class":321},[315,4568,339],{"class":321},[315,4570,845],{"class":342},[315,4572,339],{"class":321},[315,4574,1228],{"class":329},[315,4576,336],{"class":321},[315,4578,339],{"class":321},[315,4580,646],{"class":342},[315,4582,339],{"class":321},[315,4584,562],{"class":321},[315,4586,4587],{"class":317,"line":505},[315,4588,394],{"emptyLinePlaceholder":39},[315,4590,4591],{"class":317,"line":515},[315,4592,4593],{"class":400}," \u003C!-- Custom disposal function -->\n",[315,4595,4596,4598,4600,4602,4604,4606,4608,4610,4612,4614,4616,4618,4620],{"class":317,"line":520},[315,4597,533],{"class":321},[315,4599,570],{"class":325},[315,4601,573],{"class":329},[315,4603,336],{"class":321},[315,4605,339],{"class":321},[315,4607,845],{"class":342},[315,4609,339],{"class":321},[315,4611,1228],{"class":329},[315,4613,336],{"class":321},[315,4615,339],{"class":321},[315,4617,1275],{"class":342},[315,4619,339],{"class":321},[315,4621,562],{"class":321},[315,4623,4624,4626,4628],{"class":317,"line":530},[315,4625,508],{"class":321},[315,4627,525],{"class":325},[315,4629,348],{"class":321},[245,4631,4633],{"id":4632},"common-use-cases","Common Use Cases",[624,4635,4637],{"id":4636},"_1-integrating-third-party-libraries","1. Integrating Third-party Libraries",[305,4639,4641],{"className":307,"code":4640,"language":310,"meta":311,"style":311},"\u003Cscript setup lang=\"ts\">\nimport { Text } from 'troika-three-text'\n\nconst textMesh = new Text()\ntextMesh.text = 'Hello TresJS!'\ntextMesh.fontSize = 0.5\ntextMesh.color = 0xFF6600\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cprimitive :object=\"textMesh\" />\n\u003C/template>\n",[254,4642,4643,4663,4683,4687,4702,4721,4735,4749,4757,4761,4769,4787],{"__ignoreMap":311},[315,4644,4645,4647,4649,4651,4653,4655,4657,4659,4661],{"class":317,"line":318},[315,4646,322],{"class":321},[315,4648,326],{"class":325},[315,4650,330],{"class":329},[315,4652,333],{"class":329},[315,4654,336],{"class":321},[315,4656,339],{"class":321},[315,4658,343],{"class":342},[315,4660,339],{"class":321},[315,4662,348],{"class":321},[315,4664,4665,4667,4669,4672,4674,4676,4678,4681],{"class":317,"line":351},[315,4666,355],{"class":354},[315,4668,358],{"class":321},[315,4670,4671],{"class":361}," Text",[315,4673,376],{"class":321},[315,4675,379],{"class":354},[315,4677,382],{"class":321},[315,4679,4680],{"class":342},"troika-three-text",[315,4682,388],{"class":321},[315,4684,4685],{"class":317,"line":391},[315,4686,394],{"emptyLinePlaceholder":39},[315,4688,4689,4691,4694,4696,4698,4700],{"class":317,"line":397},[315,4690,407],{"class":329},[315,4692,4693],{"class":361}," textMesh ",[315,4695,336],{"class":321},[315,4697,415],{"class":321},[315,4699,4671],{"class":418},[315,4701,4397],{"class":361},[315,4703,4704,4707,4709,4712,4714,4716,4719],{"class":317,"line":404},[315,4705,4706],{"class":361},"textMesh",[315,4708,1061],{"class":321},[315,4710,4711],{"class":361},"text ",[315,4713,336],{"class":321},[315,4715,382],{"class":321},[315,4717,4718],{"class":342},"Hello TresJS!",[315,4720,388],{"class":321},[315,4722,4723,4725,4727,4730,4732],{"class":317,"line":440},[315,4724,4706],{"class":361},[315,4726,1061],{"class":321},[315,4728,4729],{"class":361},"fontSize ",[315,4731,336],{"class":321},[315,4733,4734],{"class":424}," 0.5\n",[315,4736,4737,4739,4741,4744,4746],{"class":317,"line":472},[315,4738,4706],{"class":361},[315,4740,1061],{"class":321},[315,4742,4743],{"class":361},"color ",[315,4745,336],{"class":321},[315,4747,4748],{"class":424}," 0xFF6600\n",[315,4750,4751,4753,4755],{"class":317,"line":477},[315,4752,508],{"class":321},[315,4754,326],{"class":325},[315,4756,348],{"class":321},[315,4758,4759],{"class":317,"line":483},[315,4760,394],{"emptyLinePlaceholder":39},[315,4762,4763,4765,4767],{"class":317,"line":505},[315,4764,322],{"class":321},[315,4766,525],{"class":325},[315,4768,348],{"class":321},[315,4770,4771,4773,4775,4777,4779,4781,4783,4785],{"class":317,"line":515},[315,4772,533],{"class":321},[315,4774,570],{"class":325},[315,4776,573],{"class":329},[315,4778,336],{"class":321},[315,4780,339],{"class":321},[315,4782,4706],{"class":342},[315,4784,339],{"class":321},[315,4786,562],{"class":321},[315,4788,4789,4791,4793],{"class":317,"line":520},[315,4790,508],{"class":321},[315,4792,525],{"class":325},[315,4794,348],{"class":321},[4051,4796,4797,4822],{},[250,4798,4799,4800,4803,4804,4811,4812,4814,4815,4817,4818,4821],{},"For SDF text you usually don't need the manual ",[254,4801,4802],{},"\u003Cprimitive>"," wiring above. The ",[4060,4805,4808],{"href":4806,"rel":4807},"https://cientos.tresjs.org/api/objects/text",[4064],[254,4809,4810],{},"\u003CText>"," component from ",[254,4813,3281],{}," wraps ",[254,4816,4680],{}," for you โ€” it calls ",[254,4819,4820],{},".sync()"," on prop changes and disposes of the instance automatically:",[305,4823,4825],{"className":307,"code":4824,"language":310,"meta":311,"style":311},"\u003Cscript setup lang=\"ts\">\nimport { Text } from '@tresjs/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n \u003CText text=\"Hello TresJS!\" :font-size=\"0.5\" color=\"#FF6600\" />\n\u003C/template>\n",[254,4826,4827,4847,4865,4873,4877,4885,4927],{"__ignoreMap":311},[315,4828,4829,4831,4833,4835,4837,4839,4841,4843,4845],{"class":317,"line":318},[315,4830,322],{"class":321},[315,4832,326],{"class":325},[315,4834,330],{"class":329},[315,4836,333],{"class":329},[315,4838,336],{"class":321},[315,4840,339],{"class":321},[315,4842,343],{"class":342},[315,4844,339],{"class":321},[315,4846,348],{"class":321},[315,4848,4849,4851,4853,4855,4857,4859,4861,4863],{"class":317,"line":351},[315,4850,355],{"class":354},[315,4852,358],{"class":321},[315,4854,4671],{"class":361},[315,4856,376],{"class":321},[315,4858,379],{"class":354},[315,4860,382],{"class":321},[315,4862,3281],{"class":342},[315,4864,388],{"class":321},[315,4866,4867,4869,4871],{"class":317,"line":391},[315,4868,508],{"class":321},[315,4870,326],{"class":325},[315,4872,348],{"class":321},[315,4874,4875],{"class":317,"line":397},[315,4876,394],{"emptyLinePlaceholder":39},[315,4878,4879,4881,4883],{"class":317,"line":404},[315,4880,322],{"class":321},[315,4882,525],{"class":325},[315,4884,348],{"class":321},[315,4886,4887,4889,4892,4895,4897,4899,4901,4903,4906,4908,4910,4912,4914,4916,4918,4920,4923,4925],{"class":317,"line":440},[315,4888,533],{"class":321},[315,4890,4891],{"class":325},"Text",[315,4893,4894],{"class":329}," text",[315,4896,336],{"class":321},[315,4898,339],{"class":321},[315,4900,4718],{"class":342},[315,4902,339],{"class":321},[315,4904,4905],{"class":329}," :font-size",[315,4907,336],{"class":321},[315,4909,339],{"class":321},[315,4911,3579],{"class":342},[315,4913,339],{"class":321},[315,4915,459],{"class":329},[315,4917,336],{"class":321},[315,4919,339],{"class":321},[315,4921,4922],{"class":342},"#FF6600",[315,4924,339],{"class":321},[315,4926,562],{"class":321},[315,4928,4929,4931,4933],{"class":317,"line":472},[315,4930,508],{"class":321},[315,4932,525],{"class":325},[315,4934,348],{"class":321},[624,4936,4938],{"id":4937},"_2-custom-geometries","2. Custom Geometries",[305,4940,4942],{"className":307,"code":4941,"language":310,"meta":311,"style":311},"\u003Cscript setup lang=\"ts\">\nimport { BufferAttribute, BufferGeometry } from 'three'\n\n// Create custom geometry\nconst geometry = new BufferGeometry()\nconst vertices = new Float32Array([\n -1,\n -1,\n 0,\n 1,\n -1,\n 0,\n 0,\n 1,\n 0\n])\ngeometry.setAttribute('position', new BufferAttribute(vertices, 3))\n\nconst customMesh = new Mesh(geometry, new MeshBasicMaterial({ color: 0x00FF00 }))\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cprimitive :object=\"customMesh\" />\n\u003C/template>\n",[254,4943,4944,4964,4988,4992,4997,5011,5028,5037,5045,5052,5059,5067,5073,5079,5085,5090,5095,5129,5133,5168,5176,5180,5188,5207],{"__ignoreMap":311},[315,4945,4946,4948,4950,4952,4954,4956,4958,4960,4962],{"class":317,"line":318},[315,4947,322],{"class":321},[315,4949,326],{"class":325},[315,4951,330],{"class":329},[315,4953,333],{"class":329},[315,4955,336],{"class":321},[315,4957,339],{"class":321},[315,4959,343],{"class":342},[315,4961,339],{"class":321},[315,4963,348],{"class":321},[315,4965,4966,4968,4970,4973,4975,4978,4980,4982,4984,4986],{"class":317,"line":351},[315,4967,355],{"class":354},[315,4969,358],{"class":321},[315,4971,4972],{"class":361}," BufferAttribute",[315,4974,365],{"class":321},[315,4976,4977],{"class":361}," BufferGeometry",[315,4979,376],{"class":321},[315,4981,379],{"class":354},[315,4983,382],{"class":321},[315,4985,385],{"class":342},[315,4987,388],{"class":321},[315,4989,4990],{"class":317,"line":391},[315,4991,394],{"emptyLinePlaceholder":39},[315,4993,4994],{"class":317,"line":397},[315,4995,4996],{"class":400},"// Create custom geometry\n",[315,4998,4999,5001,5003,5005,5007,5009],{"class":317,"line":404},[315,5000,407],{"class":329},[315,5002,410],{"class":361},[315,5004,336],{"class":321},[315,5006,415],{"class":321},[315,5008,4977],{"class":418},[315,5010,4397],{"class":361},[315,5012,5013,5015,5018,5020,5022,5025],{"class":317,"line":440},[315,5014,407],{"class":329},[315,5016,5017],{"class":361}," vertices ",[315,5019,336],{"class":321},[315,5021,415],{"class":321},[315,5023,5024],{"class":418}," Float32Array",[315,5026,5027],{"class":361},"([\n",[315,5029,5030,5033,5035],{"class":317,"line":472},[315,5031,5032],{"class":321}," -",[315,5034,425],{"class":424},[315,5036,780],{"class":321},[315,5038,5039,5041,5043],{"class":317,"line":477},[315,5040,5032],{"class":321},[315,5042,425],{"class":424},[315,5044,780],{"class":321},[315,5046,5047,5050],{"class":317,"line":483},[315,5048,5049],{"class":424}," 0",[315,5051,780],{"class":321},[315,5053,5054,5057],{"class":317,"line":505},[315,5055,5056],{"class":424}," 1",[315,5058,780],{"class":321},[315,5060,5061,5063,5065],{"class":317,"line":515},[315,5062,5032],{"class":321},[315,5064,425],{"class":424},[315,5066,780],{"class":321},[315,5068,5069,5071],{"class":317,"line":520},[315,5070,5049],{"class":424},[315,5072,780],{"class":321},[315,5074,5075,5077],{"class":317,"line":530},[315,5076,5049],{"class":424},[315,5078,780],{"class":321},[315,5080,5081,5083],{"class":317,"line":541},[315,5082,5056],{"class":424},[315,5084,780],{"class":321},[315,5086,5087],{"class":317,"line":565},[315,5088,5089],{"class":424}," 0\n",[315,5091,5092],{"class":317,"line":587},[315,5093,5094],{"class":361},"])\n",[315,5096,5097,5099,5101,5104,5106,5108,5111,5113,5115,5117,5119,5122,5124,5127],{"class":317,"line":597},[315,5098,1096],{"class":361},[315,5100,1061],{"class":321},[315,5102,5103],{"class":418},"setAttribute",[315,5105,421],{"class":361},[315,5107,1069],{"class":321},[315,5109,5110],{"class":342},"position",[315,5112,1069],{"class":321},[315,5114,365],{"class":321},[315,5116,415],{"class":321},[315,5118,4972],{"class":418},[315,5120,5121],{"class":361},"(vertices",[315,5123,365],{"class":321},[315,5125,5126],{"class":424}," 3",[315,5128,3071],{"class":361},[315,5130,5131],{"class":317,"line":607},[315,5132,394],{"emptyLinePlaceholder":39},[315,5134,5135,5137,5140,5142,5144,5146,5148,5150,5152,5154,5156,5158,5160,5162,5164,5166],{"class":317,"line":1180},[315,5136,407],{"class":329},[315,5138,5139],{"class":361}," customMesh ",[315,5141,336],{"class":321},[315,5143,415],{"class":321},[315,5145,368],{"class":418},[315,5147,497],{"class":361},[315,5149,365],{"class":321},[315,5151,415],{"class":321},[315,5153,373],{"class":418},[315,5155,421],{"class":361},[315,5157,456],{"class":321},[315,5159,459],{"class":325},[315,5161,462],{"class":321},[315,5163,465],{"class":424},[315,5165,376],{"class":321},[315,5167,3071],{"class":361},[315,5169,5170,5172,5174],{"class":317,"line":1199},[315,5171,508],{"class":321},[315,5173,326],{"class":325},[315,5175,348],{"class":321},[315,5177,5178],{"class":317,"line":1204},[315,5179,394],{"emptyLinePlaceholder":39},[315,5181,5182,5184,5186],{"class":317,"line":1210},[315,5183,322],{"class":321},[315,5185,525],{"class":325},[315,5187,348],{"class":321},[315,5189,5190,5192,5194,5196,5198,5200,5203,5205],{"class":317,"line":1241},[315,5191,533],{"class":321},[315,5193,570],{"class":325},[315,5195,573],{"class":329},[315,5197,336],{"class":321},[315,5199,339],{"class":321},[315,5201,5202],{"class":342},"customMesh",[315,5204,339],{"class":321},[315,5206,562],{"class":321},[315,5208,5209,5211,5213],{"class":317,"line":1246},[315,5210,508],{"class":321},[315,5212,525],{"class":325},[315,5214,348],{"class":321},[624,5216,5218],{"id":5217},"_3-particle-systems","3. Particle Systems",[305,5220,5222],{"className":307,"code":5221,"language":310,"meta":311,"style":311},"\u003Cscript setup lang=\"ts\">\nimport { BufferAttribute, BufferGeometry, Points, PointsMaterial } from 'three'\n\nconst particleGeometry = new BufferGeometry()\nconst particleCount = 1000\nconst positions = new Float32Array(particleCount * 3)\n\nfor (let i = 0; i \u003C particleCount * 3; i++) {\n positions[i] = (Math.random() - 0.5) * 10\n}\n\nparticleGeometry.setAttribute('position', new BufferAttribute(positions, 3))\n\nconst particles = new Points(\n particleGeometry,\n new PointsMaterial({ color: 0xFF6600, size: 0.1 })\n)\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cprimitive :object=\"particles\" />\n\u003C/template>\n",[254,5223,5224,5244,5276,5280,5295,5307,5329,5333,5376,5415,5419,5423,5455,5459,5474,5481,5511,5515,5523,5527,5535,5554],{"__ignoreMap":311},[315,5225,5226,5228,5230,5232,5234,5236,5238,5240,5242],{"class":317,"line":318},[315,5227,322],{"class":321},[315,5229,326],{"class":325},[315,5231,330],{"class":329},[315,5233,333],{"class":329},[315,5235,336],{"class":321},[315,5237,339],{"class":321},[315,5239,343],{"class":342},[315,5241,339],{"class":321},[315,5243,348],{"class":321},[315,5245,5246,5248,5250,5252,5254,5256,5258,5261,5263,5266,5268,5270,5272,5274],{"class":317,"line":351},[315,5247,355],{"class":354},[315,5249,358],{"class":321},[315,5251,4972],{"class":361},[315,5253,365],{"class":321},[315,5255,4977],{"class":361},[315,5257,365],{"class":321},[315,5259,5260],{"class":361}," Points",[315,5262,365],{"class":321},[315,5264,5265],{"class":361}," PointsMaterial",[315,5267,376],{"class":321},[315,5269,379],{"class":354},[315,5271,382],{"class":321},[315,5273,385],{"class":342},[315,5275,388],{"class":321},[315,5277,5278],{"class":317,"line":391},[315,5279,394],{"emptyLinePlaceholder":39},[315,5281,5282,5284,5287,5289,5291,5293],{"class":317,"line":397},[315,5283,407],{"class":329},[315,5285,5286],{"class":361}," particleGeometry ",[315,5288,336],{"class":321},[315,5290,415],{"class":321},[315,5292,4977],{"class":418},[315,5294,4397],{"class":361},[315,5296,5297,5299,5302,5304],{"class":317,"line":404},[315,5298,407],{"class":329},[315,5300,5301],{"class":361}," particleCount ",[315,5303,336],{"class":321},[315,5305,5306],{"class":424}," 1000\n",[315,5308,5309,5311,5314,5316,5318,5320,5323,5325,5327],{"class":317,"line":440},[315,5310,407],{"class":329},[315,5312,5313],{"class":361}," positions ",[315,5315,336],{"class":321},[315,5317,415],{"class":321},[315,5319,5024],{"class":418},[315,5321,5322],{"class":361},"(particleCount ",[315,5324,2641],{"class":321},[315,5326,5126],{"class":424},[315,5328,437],{"class":361},[315,5330,5331],{"class":317,"line":472},[315,5332,394],{"emptyLinePlaceholder":39},[315,5334,5335,5338,5340,5343,5346,5348,5351,5354,5356,5358,5360,5362,5364,5366,5369,5372,5374],{"class":317,"line":477},[315,5336,5337],{"class":354},"for",[315,5339,1089],{"class":361},[315,5341,5342],{"class":329},"let",[315,5344,5345],{"class":361}," i ",[315,5347,336],{"class":321},[315,5349,5350],{"class":424}," 0",[315,5352,5353],{"class":321},";",[315,5355,5345],{"class":361},[315,5357,322],{"class":321},[315,5359,5301],{"class":361},[315,5361,2641],{"class":321},[315,5363,5126],{"class":424},[315,5365,5353],{"class":321},[315,5367,5368],{"class":361}," i",[315,5370,5371],{"class":321},"++",[315,5373,1099],{"class":361},[315,5375,1385],{"class":321},[315,5377,5378,5381,5384,5387,5390,5392,5394,5396,5398,5400,5402,5405,5408,5410,5412],{"class":317,"line":483},[315,5379,5380],{"class":361}," positions",[315,5382,5383],{"class":325},"[",[315,5385,5386],{"class":361},"i",[315,5388,5389],{"class":325},"] ",[315,5391,336],{"class":321},[315,5393,1089],{"class":325},[315,5395,2631],{"class":361},[315,5397,1061],{"class":321},[315,5399,2636],{"class":418},[315,5401,1114],{"class":325},[315,5403,5404],{"class":321},"-",[315,5406,5407],{"class":424}," 0.5",[315,5409,1099],{"class":325},[315,5411,2641],{"class":321},[315,5413,5414],{"class":424}," 10\n",[315,5416,5417],{"class":317,"line":505},[315,5418,1117],{"class":321},[315,5420,5421],{"class":317,"line":515},[315,5422,394],{"emptyLinePlaceholder":39},[315,5424,5425,5428,5430,5432,5434,5436,5438,5440,5442,5444,5446,5449,5451,5453],{"class":317,"line":520},[315,5426,5427],{"class":361},"particleGeometry",[315,5429,1061],{"class":321},[315,5431,5103],{"class":418},[315,5433,421],{"class":361},[315,5435,1069],{"class":321},[315,5437,5110],{"class":342},[315,5439,1069],{"class":321},[315,5441,365],{"class":321},[315,5443,415],{"class":321},[315,5445,4972],{"class":418},[315,5447,5448],{"class":361},"(positions",[315,5450,365],{"class":321},[315,5452,5126],{"class":424},[315,5454,3071],{"class":361},[315,5456,5457],{"class":317,"line":530},[315,5458,394],{"emptyLinePlaceholder":39},[315,5460,5461,5463,5466,5468,5470,5472],{"class":317,"line":541},[315,5462,407],{"class":329},[315,5464,5465],{"class":361}," particles ",[315,5467,336],{"class":321},[315,5469,415],{"class":321},[315,5471,5260],{"class":418},[315,5473,746],{"class":361},[315,5475,5476,5479],{"class":317,"line":565},[315,5477,5478],{"class":361}," particleGeometry",[315,5480,780],{"class":321},[315,5482,5483,5485,5487,5489,5491,5493,5495,5497,5499,5502,5504,5507,5509],{"class":317,"line":587},[315,5484,751],{"class":321},[315,5486,5265],{"class":418},[315,5488,421],{"class":361},[315,5490,456],{"class":321},[315,5492,459],{"class":325},[315,5494,462],{"class":321},[315,5496,1395],{"class":424},[315,5498,365],{"class":321},[315,5500,5501],{"class":325}," size",[315,5503,462],{"class":321},[315,5505,5506],{"class":424}," 0.1",[315,5508,376],{"class":321},[315,5510,437],{"class":361},[315,5512,5513],{"class":317,"line":597},[315,5514,437],{"class":361},[315,5516,5517,5519,5521],{"class":317,"line":607},[315,5518,508],{"class":321},[315,5520,326],{"class":325},[315,5522,348],{"class":321},[315,5524,5525],{"class":317,"line":1180},[315,5526,394],{"emptyLinePlaceholder":39},[315,5528,5529,5531,5533],{"class":317,"line":1199},[315,5530,322],{"class":321},[315,5532,525],{"class":325},[315,5534,348],{"class":321},[315,5536,5537,5539,5541,5543,5545,5547,5550,5552],{"class":317,"line":1204},[315,5538,533],{"class":321},[315,5540,570],{"class":325},[315,5542,573],{"class":329},[315,5544,336],{"class":321},[315,5546,339],{"class":321},[315,5548,5549],{"class":342},"particles",[315,5551,339],{"class":321},[315,5553,562],{"class":321},[315,5555,5556,5558,5560],{"class":317,"line":1210},[315,5557,508],{"class":321},[315,5559,525],{"class":325},[315,5561,348],{"class":321},[245,5563,5565],{"id":5564},"customizing-the-primitive-component-name","Customizing the Primitive Component Name",[250,5567,5568,5569,5571,5572,5575,5576,462],{},"By default, TresJS provides the ",[254,5570,256],{}," component for rendering Three.js objects. You can customize the component name using the ",[254,5573,5574],{},"primitivePrefix"," option in ",[254,5577,5578],{},"\u003CTresCanvas>",[305,5580,5583],{"className":307,"code":5581,"filename":5582,"language":310,"meta":311,"style":311},"\u003Cscript setup lang=\"ts\">\nimport { BoxGeometry, Mesh, MeshBasicMaterial } from 'three'\n\n// Configure custom primitive prefix\nconst customRendererOptions = {\n primitivePrefix: 'my',\n}\n\nconst mesh = new Mesh(\n new BoxGeometry(1, 1, 1),\n new MeshBasicMaterial({ color: 0x00FF00 })\n)\n\u003C/script>\n\n\u003Ctemplate>\n \u003CTresCanvas :custom-renderer-options=\"customRendererOptions\">\n \u003CTresPerspectiveCamera :position=\"[3, 3, 3]\" />\n \u003C!-- Use the custom prefixed primitive component -->\n \u003Cmyprimitive :object=\"mesh\" />\n \u003C/TresCanvas>\n\u003C/template>\n","custom-primitive-prefix.vue",[254,5584,5585,5605,5631,5635,5640,5651,5667,5671,5675,5689,5711,5731,5735,5743,5747,5755,5775,5793,5798,5817,5825],{"__ignoreMap":311},[315,5586,5587,5589,5591,5593,5595,5597,5599,5601,5603],{"class":317,"line":318},[315,5588,322],{"class":321},[315,5590,326],{"class":325},[315,5592,330],{"class":329},[315,5594,333],{"class":329},[315,5596,336],{"class":321},[315,5598,339],{"class":321},[315,5600,343],{"class":342},[315,5602,339],{"class":321},[315,5604,348],{"class":321},[315,5606,5607,5609,5611,5613,5615,5617,5619,5621,5623,5625,5627,5629],{"class":317,"line":351},[315,5608,355],{"class":354},[315,5610,358],{"class":321},[315,5612,362],{"class":361},[315,5614,365],{"class":321},[315,5616,368],{"class":361},[315,5618,365],{"class":321},[315,5620,373],{"class":361},[315,5622,376],{"class":321},[315,5624,379],{"class":354},[315,5626,382],{"class":321},[315,5628,385],{"class":342},[315,5630,388],{"class":321},[315,5632,5633],{"class":317,"line":391},[315,5634,394],{"emptyLinePlaceholder":39},[315,5636,5637],{"class":317,"line":397},[315,5638,5639],{"class":400},"// Configure custom primitive prefix\n",[315,5641,5642,5644,5647,5649],{"class":317,"line":404},[315,5643,407],{"class":329},[315,5645,5646],{"class":361}," customRendererOptions ",[315,5648,336],{"class":321},[315,5650,1053],{"class":321},[315,5652,5653,5656,5658,5660,5663,5665],{"class":317,"line":440},[315,5654,5655],{"class":325}," primitivePrefix",[315,5657,462],{"class":321},[315,5659,382],{"class":321},[315,5661,5662],{"class":342},"my",[315,5664,1069],{"class":321},[315,5666,780],{"class":321},[315,5668,5669],{"class":317,"line":472},[315,5670,1117],{"class":321},[315,5672,5673],{"class":317,"line":477},[315,5674,394],{"emptyLinePlaceholder":39},[315,5676,5677,5679,5681,5683,5685,5687],{"class":317,"line":483},[315,5678,407],{"class":329},[315,5680,739],{"class":361},[315,5682,336],{"class":321},[315,5684,415],{"class":321},[315,5686,368],{"class":418},[315,5688,746],{"class":361},[315,5690,5691,5693,5695,5697,5699,5701,5703,5705,5707,5709],{"class":317,"line":505},[315,5692,751],{"class":321},[315,5694,362],{"class":418},[315,5696,421],{"class":361},[315,5698,425],{"class":424},[315,5700,365],{"class":321},[315,5702,430],{"class":424},[315,5704,365],{"class":321},[315,5706,430],{"class":424},[315,5708,777],{"class":361},[315,5710,780],{"class":321},[315,5712,5713,5715,5717,5719,5721,5723,5725,5727,5729],{"class":317,"line":515},[315,5714,751],{"class":321},[315,5716,373],{"class":418},[315,5718,421],{"class":361},[315,5720,456],{"class":321},[315,5722,459],{"class":325},[315,5724,462],{"class":321},[315,5726,465],{"class":424},[315,5728,376],{"class":321},[315,5730,437],{"class":361},[315,5732,5733],{"class":317,"line":520},[315,5734,437],{"class":361},[315,5736,5737,5739,5741],{"class":317,"line":530},[315,5738,508],{"class":321},[315,5740,326],{"class":325},[315,5742,348],{"class":321},[315,5744,5745],{"class":317,"line":541},[315,5746,394],{"emptyLinePlaceholder":39},[315,5748,5749,5751,5753],{"class":317,"line":565},[315,5750,322],{"class":321},[315,5752,525],{"class":325},[315,5754,348],{"class":321},[315,5756,5757,5759,5761,5764,5766,5768,5771,5773],{"class":317,"line":587},[315,5758,533],{"class":321},[315,5760,536],{"class":325},[315,5762,5763],{"class":329}," :custom-renderer-options",[315,5765,336],{"class":321},[315,5767,339],{"class":321},[315,5769,5770],{"class":342},"customRendererOptions",[315,5772,339],{"class":321},[315,5774,348],{"class":321},[315,5776,5777,5779,5781,5783,5785,5787,5789,5791],{"class":317,"line":597},[315,5778,544],{"class":321},[315,5780,547],{"class":325},[315,5782,550],{"class":329},[315,5784,336],{"class":321},[315,5786,339],{"class":321},[315,5788,557],{"class":342},[315,5790,339],{"class":321},[315,5792,562],{"class":321},[315,5794,5795],{"class":317,"line":607},[315,5796,5797],{"class":400}," \u003C!-- Use the custom prefixed primitive component -->\n",[315,5799,5800,5802,5805,5807,5809,5811,5813,5815],{"class":317,"line":1180},[315,5801,544],{"class":321},[315,5803,5804],{"class":325},"myprimitive",[315,5806,573],{"class":329},[315,5808,336],{"class":321},[315,5810,339],{"class":321},[315,5812,845],{"class":342},[315,5814,339],{"class":321},[315,5816,562],{"class":321},[315,5818,5819,5821,5823],{"class":317,"line":1199},[315,5820,600],{"class":321},[315,5822,536],{"class":325},[315,5824,348],{"class":321},[315,5826,5827,5829,5831],{"class":317,"line":1204},[315,5828,508],{"class":321},[315,5830,525],{"class":325},[315,5832,348],{"class":321},[250,5834,5835],{},"This feature is useful when:",[262,5837,5838,5841,5844],{},[265,5839,5840],{},"You need to avoid naming conflicts with other libraries or components",[265,5842,5843],{},"Your project requires a specific naming convention",[265,5845,5846],{},"You want to add TypeScript support for custom primitive names",[4051,5848,5849,5855],{},[250,5850,5851,5854],{},[268,5852,5853],{},"TypeScript Support",": When using a custom prefix, you can extend Vue's global components type to get full intellisense support:",[305,5856,5860],{"className":5857,"code":5858,"language":5859,"meta":311,"style":311},"language-typescript shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","// types/tres.d.ts\nimport type { TresPrimitive } from '@tresjs/core'\nimport type { DefineComponent } from 'vue'\n\ndeclare module 'vue' {\n interface GlobalComponents {\n myprimitive: DefineComponent\u003CTresPrimitive>\n }\n}\n\nexport {}\n","typescript",[254,5861,5862,5867,5890,5911,5915,5931,5942,5958,5962,5966,5970],{"__ignoreMap":311},[315,5863,5864],{"class":317,"line":318},[315,5865,5866],{"class":400},"// types/tres.d.ts\n",[315,5868,5869,5871,5874,5876,5879,5881,5883,5885,5888],{"class":317,"line":351},[315,5870,355],{"class":354},[315,5872,5873],{"class":354}," type",[315,5875,358],{"class":321},[315,5877,5878],{"class":361}," TresPrimitive",[315,5880,376],{"class":321},[315,5882,379],{"class":354},[315,5884,382],{"class":321},[315,5886,5887],{"class":342},"@tresjs/core",[315,5889,388],{"class":321},[315,5891,5892,5894,5896,5898,5901,5903,5905,5907,5909],{"class":317,"line":391},[315,5893,355],{"class":354},[315,5895,5873],{"class":354},[315,5897,358],{"class":321},[315,5899,5900],{"class":361}," DefineComponent",[315,5902,376],{"class":321},[315,5904,379],{"class":354},[315,5906,382],{"class":321},[315,5908,310],{"class":342},[315,5910,388],{"class":321},[315,5912,5913],{"class":317,"line":397},[315,5914,394],{"emptyLinePlaceholder":39},[315,5916,5917,5920,5923,5925,5927,5929],{"class":317,"line":404},[315,5918,5919],{"class":329},"declare",[315,5921,5922],{"class":329}," module",[315,5924,382],{"class":321},[315,5926,310],{"class":342},[315,5928,1069],{"class":321},[315,5930,1053],{"class":321},[315,5932,5933,5936,5940],{"class":317,"line":440},[315,5934,5935],{"class":329}," interface",[315,5937,5939],{"class":5938},"sBMFI"," GlobalComponents",[315,5941,1053],{"class":321},[315,5943,5944,5947,5949,5951,5953,5956],{"class":317,"line":472},[315,5945,5946],{"class":325}," myprimitive",[315,5948,462],{"class":321},[315,5950,5900],{"class":5938},[315,5952,322],{"class":321},[315,5954,5955],{"class":5938},"TresPrimitive",[315,5957,348],{"class":321},[315,5959,5960],{"class":317,"line":477},[315,5961,1876],{"class":321},[315,5963,5964],{"class":317,"line":483},[315,5965,1117],{"class":321},[315,5967,5968],{"class":317,"line":505},[315,5969,394],{"emptyLinePlaceholder":39},[315,5971,5972,5975],{"class":317,"line":515},[315,5973,5974],{"class":354},"export",[315,5976,5977],{"class":321}," {}\n",[250,5979,252,5980,5982],{},[254,5981,256],{}," component provides the flexibility to integrate any Three.js object seamlessly into your TresJS application while maintaining the benefits of Vue's reactivity and component system.",[5984,5985,5986],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}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 .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}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 .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}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 .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 .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}",{"title":311,"searchDepth":318,"depth":351,"links":5988},[5989,5990,5991,5998,5999,6000,6003,6006,6011],{"id":247,"depth":351,"text":248},{"id":292,"depth":351,"text":293},{"id":616,"depth":351,"text":617,"children":5992},[5993,5994,5995,5996,5997],{"id":302,"depth":391,"text":302},{"id":860,"depth":391,"text":860},{"id":1291,"depth":391,"text":1291},{"id":1975,"depth":391,"text":1975},{"id":2177,"depth":391,"text":2178},{"id":2427,"depth":351,"text":2428},{"id":2972,"depth":351,"text":2973},{"id":3229,"depth":351,"text":3230,"children":6001},[6002],{"id":3633,"depth":391,"text":3634},{"id":4045,"depth":351,"text":4046,"children":6004},[6005],{"id":4468,"depth":391,"text":4469},{"id":4632,"depth":351,"text":4633,"children":6007},[6008,6009,6010],{"id":4636,"depth":391,"text":4637},{"id":4937,"depth":391,"text":4938},{"id":5217,"depth":391,"text":5218},{"id":5564,"depth":351,"text":5565},"Use the primitive component to directly integrate any Three.js object within your Vue application.","md",null,{},{"title":166,"description":6012},"KzgK4tER7isdRmFJiXPGjd2i0uX1krHjiLJfVBQfQ6I",[6019,6021],{"title":162,"path":163,"stem":164,"description":6020,"children":-1},"Quick guide with tips to improve the performance of your TresJS application.",{"title":170,"path":171,"stem":172,"description":6022,"children":-1},"Explore experimental WebGPU rendering capabilities in TresJS.",1782052333735]