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