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