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