[{"data":1,"prerenderedAt":1252},["ShallowReactive",2],{"navigation":3,"/essentials/concepts/child-attachments":239,"/essentials/concepts/child-attachments-surround":1247},[4,29,78,173,205,215,219,223,227,231,235],{"title":5,"path":6,"stem":7,"children":8,"icon":27,"titleTemplate":28},"Getting Started","/getting-started","1.getting-started/1.index",[9,12,17,22],{"title":10,"path":6,"stem":7,"icon":11},"Introduction","i-lucide-house",{"title":13,"path":14,"stem":15,"icon":16},"Installation","/getting-started/installation","1.getting-started/2.installation","i-lucide-download",{"title":18,"path":19,"stem":20,"icon":21},"Your First Scene","/getting-started/your-first-scene","1.getting-started/3.your-first-scene","i-lucide-donut",{"title":23,"path":24,"stem":25,"icon":26},"Upgrade Guide","/getting-started/upgrade-guide","1.getting-started/4.upgrade-guide","i-lucide-circle-arrow-up","i-lucide-rocket","%s · Get Started with TresJS",{"title":30,"path":31,"stem":32,"children":33},"Essentials","/essentials","2.essentials",[34,36,48],{"title":30,"path":31,"stem":35},"2.essentials/index",{"title":37,"icon":38,"open":39,"path":40,"stem":41,"children":42,"page":47},"Core Architecture","i-lucide-cpu",true,"/essentials/core-architecture","2.essentials/1.core-architecture",[43],{"title":44,"path":45,"stem":46},"Custom Vue Renderer","/essentials/core-architecture/custom-vue-renderer","2.essentials/1.core-architecture/2.custom-vue-renderer",false,{"title":49,"icon":50,"open":39,"path":51,"stem":52,"children":53,"page":47},"Key Concepts","i-lucide-medal","/essentials/concepts","2.essentials/2.concepts",[54,58,62,66,70,74],{"title":55,"path":56,"stem":57},"Declarative vs Imperative","/essentials/concepts/declarative-vs-imperative","2.essentials/2.concepts/1.declarative-vs-imperative",{"title":59,"path":60,"stem":61},"Reactivity","/essentials/concepts/reactivity","2.essentials/2.concepts/2.reactivity",{"title":63,"path":64,"stem":65},"Constructor Arguments","/essentials/concepts/constructor-arguments","2.essentials/2.concepts/3.constructor-arguments",{"title":67,"path":68,"stem":69},"Declarative Properties","/essentials/concepts/declarative-properties","2.essentials/2.concepts/4.declarative-properties",{"title":71,"path":72,"stem":73},"Extending the Catalogue","/essentials/concepts/extending-catalogue","2.essentials/2.concepts/5.extending-catalogue",{"title":75,"path":76,"stem":77},"Child Attachments","/essentials/concepts/child-attachments","2.essentials/2.concepts/6.child-attachments",{"title":79,"path":80,"stem":81,"children":82},"API","/api","3.api",[83,86,104,131,141,155],{"title":84,"path":80,"stem":85},"TresJS API Reference","3.api/1.index",{"title":87,"icon":88,"open":39,"path":89,"stem":90,"children":91,"page":47},"Components","i-lucide-box","/api/components","3.api/1.components",[92,96,100],{"title":93,"path":94,"stem":95},"\u003CTresCanvas />","/api/components/tres-canvas","3.api/1.components/tres-canvas",{"title":97,"path":98,"stem":99},"\u003CTresCanvasContext />","/api/components/tres-context","3.api/1.components/tres-context",{"title":101,"path":102,"stem":103},"Tres Components","/api/components/tres-objects","3.api/1.components/tres-objects",{"title":105,"titleTemplate":106,"icon":107,"path":108,"stem":109,"children":110,"page":47},"Composables","%s · TresJS Composables","i-lucide-arrow-right-left","/api/composables","3.api/2.composables",[111,115,119,123,127],{"title":112,"path":113,"stem":114},"useTres","/api/composables/use-tres","3.api/2.composables/1.use-tres",{"title":116,"path":117,"stem":118},"useTresContext","/api/composables/use-tres-context","3.api/2.composables/2.use-tres-context",{"title":120,"path":121,"stem":122},"useLoop","/api/composables/use-loop","3.api/2.composables/3.use-loop",{"title":124,"path":125,"stem":126},"useGraph","/api/composables/use-graph","3.api/2.composables/4.use-graph",{"title":128,"path":129,"stem":130},"useLoader","/api/composables/use-loader","3.api/2.composables/5.use-loader",{"title":132,"icon":133,"path":134,"stem":135,"children":136,"page":47},"Event handling","i-lucide-mouse-pointer-2","/api/events","3.api/3.events",[137],{"title":138,"path":139,"stem":140},"Pointer Events","/api/events/pointer-events","3.api/3.events/1.pointer-events",{"title":142,"icon":143,"path":144,"stem":145,"children":146,"page":47},"Utils","i-lucide-wrench","/api/utils","3.api/4.utils",[147,151],{"title":148,"path":149,"stem":150},"Type Guards","/api/utils/type-guards","3.api/4.utils/1.type-guards",{"title":152,"path":153,"stem":154},"Directives","/api/utils/directives","3.api/4.utils/2.directives",{"title":156,"icon":157,"path":158,"stem":159,"children":160,"page":47},"Advanced","i-lucide-brain-circuit","/api/advanced","3.api/5.advanced",[161,165,169],{"title":162,"path":163,"stem":164},"Scaling Performance 🚀","/api/advanced/performance","3.api/5.advanced/performance",{"title":166,"path":167,"stem":168},"Primitives","/api/advanced/primitives","3.api/5.advanced/primitives",{"title":170,"path":171,"stem":172},"WebGPU","/api/advanced/web-gpu","3.api/5.advanced/web-gpu",{"title":174,"path":175,"stem":176,"children":177},"Cookbook","/cookbook","4.cookbook",[178,181,185,189,193,197,201],{"title":179,"path":175,"stem":180},"Cookbook 🍳🧑‍🍳","4.cookbook/index",{"title":182,"path":183,"stem":184},"OrbitControls","/cookbook/orbit-controls","4.cookbook/1.orbit-controls",{"title":186,"path":187,"stem":188},"Basic Animations","/cookbook/basic-animations","4.cookbook/2.basic-animations",{"title":190,"path":191,"stem":192},"Model Animation","/cookbook/model-animation","4.cookbook/3.model-animation",{"title":194,"path":195,"stem":196},"Advanced GSAP Animations","/cookbook/advanced-gsap-animations","4.cookbook/4.advanced-gsap-animations",{"title":198,"path":199,"stem":200},"Tweakpane","/cookbook/tweakpane","4.cookbook/5.tweakpane",{"title":202,"path":203,"stem":204},"Dynamic components","/cookbook/transition-dynamic","4.cookbook/6.transition-dynamic",{"title":206,"path":207,"stem":208,"children":209},"Community","/community","5.community/1.index",[210,211],{"title":206,"path":207,"stem":208},{"title":212,"path":213,"stem":214},"Awesome Resources","/community/awesome-resources","5.community/awesome-resources",{"title":216,"path":217,"stem":218},"German Translation","/de","de",{"title":220,"path":221,"stem":222},"Spanish Translation","/es","es",{"title":224,"path":225,"stem":226},"French Translation","/fr","fr",{"title":228,"path":229,"stem":230},"Italian Translation","/it","it",{"title":232,"path":233,"stem":234},"Japanese Translation","/jp","jp",{"title":236,"path":237,"stem":238},"Chinese Translation","/zh","zh",{"id":240,"title":75,"body":241,"description":1241,"extension":1242,"links":1243,"meta":1244,"navigation":39,"path":76,"seo":1245,"stem":77,"__hash__":1246},"docs/2.essentials/2.concepts/6.child-attachments.md",{"type":242,"value":243,"toc":1232},"minimark",[244,249,253,348,364,367,471,481,487,491,494,551,554,562,568,644,650,749,752,853,861,865,874,1027,1034,1038,1044,1178,1182,1228],[245,246,248],"h2",{"id":247},"not-vue-slots","Not Vue Slots",[250,251,252],"p",{},"When you nest components in TresJS:",[254,255,260],"pre",{"className":256,"code":257,"language":258,"meta":259,"style":259},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Ctemplate>\n  \u003CTresMesh>\n    \u003CTresBoxGeometry />\n    \u003CTresMeshBasicMaterial color=\"red\" />\n  \u003C/TresMesh>\n\u003C/template>\n","vue","",[261,262,263,279,290,302,328,338],"code",{"__ignoreMap":259},[264,265,268,272,276],"span",{"class":266,"line":267},"line",1,[264,269,271],{"class":270},"sMK4o","\u003C",[264,273,275],{"class":274},"swJcz","template",[264,277,278],{"class":270},">\n",[264,280,282,285,288],{"class":266,"line":281},2,[264,283,284],{"class":270},"  \u003C",[264,286,287],{"class":274},"TresMesh",[264,289,278],{"class":270},[264,291,293,296,299],{"class":266,"line":292},3,[264,294,295],{"class":270},"    \u003C",[264,297,298],{"class":274},"TresBoxGeometry",[264,300,301],{"class":270}," />\n",[264,303,305,307,310,314,317,320,324,326],{"class":266,"line":304},4,[264,306,295],{"class":270},[264,308,309],{"class":274},"TresMeshBasicMaterial",[264,311,313],{"class":312},"spNyl"," color",[264,315,316],{"class":270},"=",[264,318,319],{"class":270},"\"",[264,321,323],{"class":322},"sfazB","red",[264,325,319],{"class":270},[264,327,301],{"class":270},[264,329,331,334,336],{"class":266,"line":330},5,[264,332,333],{"class":270},"  \u003C/",[264,335,287],{"class":274},[264,337,278],{"class":270},[264,339,341,344,346],{"class":266,"line":340},6,[264,342,343],{"class":270},"\u003C/",[264,345,275],{"class":274},[264,347,278],{"class":270},[250,349,350,351,355,356,359,360,363],{},"This looks like Vue slots, but it isn't. TresJS uses a ",[352,353,354],"strong",{},"custom Vue renderer"," — there is no DOM, no ",[261,357,358],{},"\u003Cslot />",". Instead, the renderer intercepts each child component and ",[352,361,362],{},"attaches it as a property"," of the parent Three.js object.",[250,365,366],{},"The equivalent vanilla Three.js code is:",[254,368,372],{"className":369,"code":370,"language":371,"meta":259,"style":259},"language-js shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","const geometry = new THREE.BoxGeometry()\nconst material = new THREE.MeshBasicMaterial({ color: 'red' })\nconst mesh = new THREE.Mesh(geometry, material)\n","js",[261,373,374,401,444],{"__ignoreMap":259},[264,375,376,379,383,385,388,391,394,398],{"class":266,"line":267},[264,377,378],{"class":312},"const",[264,380,382],{"class":381},"sTEyZ"," geometry ",[264,384,316],{"class":270},[264,386,387],{"class":270}," new",[264,389,390],{"class":381}," THREE",[264,392,393],{"class":270},".",[264,395,397],{"class":396},"s2Zo4","BoxGeometry",[264,399,400],{"class":381},"()\n",[264,402,403,405,408,410,412,414,416,419,422,425,427,430,433,435,438,441],{"class":266,"line":281},[264,404,378],{"class":312},[264,406,407],{"class":381}," material ",[264,409,316],{"class":270},[264,411,387],{"class":270},[264,413,390],{"class":381},[264,415,393],{"class":270},[264,417,418],{"class":396},"MeshBasicMaterial",[264,420,421],{"class":381},"(",[264,423,424],{"class":270},"{",[264,426,313],{"class":274},[264,428,429],{"class":270},":",[264,431,432],{"class":270}," '",[264,434,323],{"class":322},[264,436,437],{"class":270},"'",[264,439,440],{"class":270}," }",[264,442,443],{"class":381},")\n",[264,445,446,448,451,453,455,457,459,462,465,468],{"class":266,"line":292},[264,447,378],{"class":312},[264,449,450],{"class":381}," mesh ",[264,452,316],{"class":270},[264,454,387],{"class":270},[264,456,390],{"class":381},[264,458,393],{"class":270},[264,460,461],{"class":396},"Mesh",[264,463,464],{"class":381},"(geometry",[264,466,467],{"class":270},",",[264,469,470],{"class":381}," material)\n",[472,473,474],"tip",{},[250,475,476,477,480],{},"You cannot use ",[261,478,479],{},"v-slot",", named slots, or scoped slots with TresJS scene components. Child attachment is handled at the renderer level, not Vue's component system.",[482,483],"video-accordion",{"start-time":484,"title":485,"video-id":486},"619","Watch this video from Alvarosabu about child attachments in TresJS","XsXfF9-qe60",[245,488,490],{"id":489},"how-auto-attachment-works","How Auto-Attachment Works",[250,492,493],{},"TresJS inspects the type of each child and automatically decides how to attach it:",[495,496,497,510],"table",{},[498,499,500],"thead",{},[501,502,503,507],"tr",{},[504,505,506],"th",{},"Child type",[504,508,509],{},"Attachment",[511,512,513,527,539],"tbody",{},[501,514,515,522],{},[516,517,518,521],"td",{},[261,519,520],{},"BufferGeometry"," subclass",[516,523,524],{},[261,525,526],{},"parent.geometry = child",[501,528,529,534],{},[516,530,531,521],{},[261,532,533],{},"Material",[516,535,536],{},[261,537,538],{},"parent.material = child",[501,540,541,546],{},[516,542,543,521],{},[261,544,545],{},"Object3D",[516,547,548],{},[261,549,550],{},"parent.add(child)",[250,552,553],{},"This means in most cases you don't need to think about it — just nest the component and TresJS does the right thing.",[245,555,557,558,561],{"id":556},"the-attach-prop","The ",[261,559,560],{},"attach"," Prop",[250,563,564,565,567],{},"For cases where auto-attachment isn't enough, use the ",[261,566,560],{}," prop to explicitly specify the target property:",[254,569,571],{"className":256,"code":570,"language":258,"meta":259,"style":259},"\u003Ctemplate>\n  \u003CTresMesh>\n    \u003CTresBoxGeometry attach=\"geometry\" />\n    \u003CTresMeshBasicMaterial attach=\"material\" />\n  \u003C/TresMesh>\n\u003C/template>\n",[261,572,573,581,589,609,628,636],{"__ignoreMap":259},[264,574,575,577,579],{"class":266,"line":267},[264,576,271],{"class":270},[264,578,275],{"class":274},[264,580,278],{"class":270},[264,582,583,585,587],{"class":266,"line":281},[264,584,284],{"class":270},[264,586,287],{"class":274},[264,588,278],{"class":270},[264,590,591,593,595,598,600,602,605,607],{"class":266,"line":292},[264,592,295],{"class":270},[264,594,298],{"class":274},[264,596,597],{"class":312}," attach",[264,599,316],{"class":270},[264,601,319],{"class":270},[264,603,604],{"class":322},"geometry",[264,606,319],{"class":270},[264,608,301],{"class":270},[264,610,611,613,615,617,619,621,624,626],{"class":266,"line":304},[264,612,295],{"class":270},[264,614,309],{"class":274},[264,616,597],{"class":312},[264,618,316],{"class":270},[264,620,319],{"class":270},[264,622,623],{"class":322},"material",[264,625,319],{"class":270},[264,627,301],{"class":270},[264,629,630,632,634],{"class":266,"line":330},[264,631,333],{"class":270},[264,633,287],{"class":274},[264,635,278],{"class":270},[264,637,638,640,642],{"class":266,"line":340},[264,639,343],{"class":270},[264,641,275],{"class":274},[264,643,278],{"class":270},[250,645,646,647,649],{},"This is particularly useful with objects that don't follow the standard ",[261,648,461],{}," pattern:",[254,651,653],{"className":256,"code":652,"language":258,"meta":259,"style":259},"\u003Ctemplate>\n  \u003C!-- Points uses the same geometry/material pattern but attach makes it explicit -->\n  \u003CTresPoints>\n    \u003CTresBufferGeometry attach=\"geometry\" />\n    \u003CTresPointsMaterial attach=\"material\" :size=\"0.01\" />\n  \u003C/TresPoints>\n\u003C/template>\n",[261,654,655,663,669,678,697,732,740],{"__ignoreMap":259},[264,656,657,659,661],{"class":266,"line":267},[264,658,271],{"class":270},[264,660,275],{"class":274},[264,662,278],{"class":270},[264,664,665],{"class":266,"line":281},[264,666,668],{"class":667},"sHwdD","  \u003C!-- Points uses the same geometry/material pattern but attach makes it explicit -->\n",[264,670,671,673,676],{"class":266,"line":292},[264,672,284],{"class":270},[264,674,675],{"class":274},"TresPoints",[264,677,278],{"class":270},[264,679,680,682,685,687,689,691,693,695],{"class":266,"line":304},[264,681,295],{"class":270},[264,683,684],{"class":274},"TresBufferGeometry",[264,686,597],{"class":312},[264,688,316],{"class":270},[264,690,319],{"class":270},[264,692,604],{"class":322},[264,694,319],{"class":270},[264,696,301],{"class":270},[264,698,699,701,704,706,708,710,712,714,717,720,722,724,728,730],{"class":266,"line":330},[264,700,295],{"class":270},[264,702,703],{"class":274},"TresPointsMaterial",[264,705,597],{"class":312},[264,707,316],{"class":270},[264,709,319],{"class":270},[264,711,623],{"class":322},[264,713,319],{"class":270},[264,715,716],{"class":270}," :",[264,718,719],{"class":312},"size",[264,721,316],{"class":270},[264,723,319],{"class":270},[264,725,727],{"class":726},"sbssI","0.01",[264,729,319],{"class":270},[264,731,301],{"class":270},[264,733,734,736,738],{"class":266,"line":340},[264,735,333],{"class":270},[264,737,675],{"class":274},[264,739,278],{"class":270},[264,741,743,745,747],{"class":266,"line":742},7,[264,744,343],{"class":270},[264,746,275],{"class":274},[264,748,278],{"class":270},[250,750,751],{},"Or for attaching to nested properties:",[254,753,755],{"className":256,"code":754,"language":258,"meta":259,"style":259},"\u003Ctemplate>\n  \u003CTresMesh>\n    \u003CTresBoxGeometry />\n    \u003C!-- attach to a nested property path -->\n    \u003CTresMeshStandardMaterial attach=\"material\">\n      \u003CTresTexture attach=\"map\" />\n    \u003C/TresMeshStandardMaterial>\n  \u003C/TresMesh>\n\u003C/template>\n",[261,756,757,765,773,781,786,805,826,835,844],{"__ignoreMap":259},[264,758,759,761,763],{"class":266,"line":267},[264,760,271],{"class":270},[264,762,275],{"class":274},[264,764,278],{"class":270},[264,766,767,769,771],{"class":266,"line":281},[264,768,284],{"class":270},[264,770,287],{"class":274},[264,772,278],{"class":270},[264,774,775,777,779],{"class":266,"line":292},[264,776,295],{"class":270},[264,778,298],{"class":274},[264,780,301],{"class":270},[264,782,783],{"class":266,"line":304},[264,784,785],{"class":667},"    \u003C!-- attach to a nested property path -->\n",[264,787,788,790,793,795,797,799,801,803],{"class":266,"line":330},[264,789,295],{"class":270},[264,791,792],{"class":274},"TresMeshStandardMaterial",[264,794,597],{"class":312},[264,796,316],{"class":270},[264,798,319],{"class":270},[264,800,623],{"class":322},[264,802,319],{"class":270},[264,804,278],{"class":270},[264,806,807,810,813,815,817,819,822,824],{"class":266,"line":340},[264,808,809],{"class":270},"      \u003C",[264,811,812],{"class":274},"TresTexture",[264,814,597],{"class":312},[264,816,316],{"class":270},[264,818,319],{"class":270},[264,820,821],{"class":322},"map",[264,823,319],{"class":270},[264,825,301],{"class":270},[264,827,828,831,833],{"class":266,"line":742},[264,829,830],{"class":270},"    \u003C/",[264,832,792],{"class":274},[264,834,278],{"class":270},[264,836,838,840,842],{"class":266,"line":837},8,[264,839,333],{"class":270},[264,841,287],{"class":274},[264,843,278],{"class":270},[264,845,847,849,851],{"class":266,"line":846},9,[264,848,343],{"class":270},[264,850,275],{"class":274},[264,852,278],{"class":270},[472,854,855],{},[250,856,857,858,860],{},"Geometries and materials auto-attach correctly in the vast majority of cases. You only need ",[261,859,560],{}," for unusual object types or custom property targets.",[245,862,864],{"id":863},"scene-graph-children","Scene Graph Children",[250,866,867,868,870,871,873],{},"When a child is an ",[261,869,545],{}," subclass (meshes, lights, groups, cameras), TresJS calls ",[261,872,550],{}," to insert it into the Three.js scene graph. This is how nesting translates to scene hierarchy:",[254,875,877],{"className":256,"code":876,"language":258,"meta":259,"style":259},"\u003Ctemplate>\n  \u003CTresGroup :position=\"[0, 1, 0]\">\n    \u003C!-- group.add(mesh) -->\n    \u003CTresMesh>\n      \u003CTresSphereGeometry />\n      \u003CTresMeshStandardMaterial color=\"orange\" />\n    \u003C/TresMesh>\n\n    \u003C!-- group.add(light) -->\n    \u003CTresPointLight :intensity=\"2\" />\n  \u003C/TresGroup>\n\u003C/template>\n",[261,878,879,887,926,931,939,948,967,975,980,985,1009,1018],{"__ignoreMap":259},[264,880,881,883,885],{"class":266,"line":267},[264,882,271],{"class":270},[264,884,275],{"class":274},[264,886,278],{"class":270},[264,888,889,891,894,896,899,901,903,906,909,912,915,917,919,922,924],{"class":266,"line":281},[264,890,284],{"class":270},[264,892,893],{"class":274},"TresGroup",[264,895,716],{"class":270},[264,897,898],{"class":312},"position",[264,900,316],{"class":270},[264,902,319],{"class":270},[264,904,905],{"class":270},"[",[264,907,908],{"class":726},"0",[264,910,911],{"class":270},", ",[264,913,914],{"class":726},"1",[264,916,911],{"class":270},[264,918,908],{"class":726},[264,920,921],{"class":270},"]",[264,923,319],{"class":270},[264,925,278],{"class":270},[264,927,928],{"class":266,"line":292},[264,929,930],{"class":667},"    \u003C!-- group.add(mesh) -->\n",[264,932,933,935,937],{"class":266,"line":304},[264,934,295],{"class":270},[264,936,287],{"class":274},[264,938,278],{"class":270},[264,940,941,943,946],{"class":266,"line":330},[264,942,809],{"class":270},[264,944,945],{"class":274},"TresSphereGeometry",[264,947,301],{"class":270},[264,949,950,952,954,956,958,960,963,965],{"class":266,"line":340},[264,951,809],{"class":270},[264,953,792],{"class":274},[264,955,313],{"class":312},[264,957,316],{"class":270},[264,959,319],{"class":270},[264,961,962],{"class":322},"orange",[264,964,319],{"class":270},[264,966,301],{"class":270},[264,968,969,971,973],{"class":266,"line":742},[264,970,830],{"class":270},[264,972,287],{"class":274},[264,974,278],{"class":270},[264,976,977],{"class":266,"line":837},[264,978,979],{"emptyLinePlaceholder":39},"\n",[264,981,982],{"class":266,"line":846},[264,983,984],{"class":667},"    \u003C!-- group.add(light) -->\n",[264,986,988,990,993,995,998,1000,1002,1005,1007],{"class":266,"line":987},10,[264,989,295],{"class":270},[264,991,992],{"class":274},"TresPointLight",[264,994,716],{"class":270},[264,996,997],{"class":312},"intensity",[264,999,316],{"class":270},[264,1001,319],{"class":270},[264,1003,1004],{"class":726},"2",[264,1006,319],{"class":270},[264,1008,301],{"class":270},[264,1010,1012,1014,1016],{"class":266,"line":1011},11,[264,1013,333],{"class":270},[264,1015,893],{"class":274},[264,1017,278],{"class":270},[264,1019,1021,1023,1025],{"class":266,"line":1020},12,[264,1022,343],{"class":270},[264,1024,275],{"class":274},[264,1026,278],{"class":270},[250,1028,1029,1030,1033],{},"Moving or rotating the ",[261,1031,1032],{},"\u003CTresGroup>"," affects all children, exactly as in Three.js.",[245,1035,1037],{"id":1036},"multiple-materials","Multiple Materials",[250,1039,1040,1041,1043],{},"Some Three.js objects accept an array of materials. Pass multiple materials using ",[261,1042,560],{}," with array index notation:",[254,1045,1047],{"className":256,"code":1046,"language":258,"meta":259,"style":259},"\u003Ctemplate>\n  \u003CTresMesh>\n    \u003CTresBoxGeometry />\n    \u003CTresMeshStandardMaterial attach=\"material-0\" color=\"red\" />\n    \u003CTresMeshStandardMaterial attach=\"material-1\" color=\"blue\" />\n    \u003CTresMeshStandardMaterial attach=\"material-2\" color=\"green\" />\n  \u003C/TresMesh>\n\u003C/template>\n",[261,1048,1049,1057,1065,1073,1102,1132,1162,1170],{"__ignoreMap":259},[264,1050,1051,1053,1055],{"class":266,"line":267},[264,1052,271],{"class":270},[264,1054,275],{"class":274},[264,1056,278],{"class":270},[264,1058,1059,1061,1063],{"class":266,"line":281},[264,1060,284],{"class":270},[264,1062,287],{"class":274},[264,1064,278],{"class":270},[264,1066,1067,1069,1071],{"class":266,"line":292},[264,1068,295],{"class":270},[264,1070,298],{"class":274},[264,1072,301],{"class":270},[264,1074,1075,1077,1079,1081,1083,1085,1088,1090,1092,1094,1096,1098,1100],{"class":266,"line":304},[264,1076,295],{"class":270},[264,1078,792],{"class":274},[264,1080,597],{"class":312},[264,1082,316],{"class":270},[264,1084,319],{"class":270},[264,1086,1087],{"class":322},"material-0",[264,1089,319],{"class":270},[264,1091,313],{"class":312},[264,1093,316],{"class":270},[264,1095,319],{"class":270},[264,1097,323],{"class":322},[264,1099,319],{"class":270},[264,1101,301],{"class":270},[264,1103,1104,1106,1108,1110,1112,1114,1117,1119,1121,1123,1125,1128,1130],{"class":266,"line":330},[264,1105,295],{"class":270},[264,1107,792],{"class":274},[264,1109,597],{"class":312},[264,1111,316],{"class":270},[264,1113,319],{"class":270},[264,1115,1116],{"class":322},"material-1",[264,1118,319],{"class":270},[264,1120,313],{"class":312},[264,1122,316],{"class":270},[264,1124,319],{"class":270},[264,1126,1127],{"class":322},"blue",[264,1129,319],{"class":270},[264,1131,301],{"class":270},[264,1133,1134,1136,1138,1140,1142,1144,1147,1149,1151,1153,1155,1158,1160],{"class":266,"line":340},[264,1135,295],{"class":270},[264,1137,792],{"class":274},[264,1139,597],{"class":312},[264,1141,316],{"class":270},[264,1143,319],{"class":270},[264,1145,1146],{"class":322},"material-2",[264,1148,319],{"class":270},[264,1150,313],{"class":312},[264,1152,316],{"class":270},[264,1154,319],{"class":270},[264,1156,1157],{"class":322},"green",[264,1159,319],{"class":270},[264,1161,301],{"class":270},[264,1163,1164,1166,1168],{"class":266,"line":742},[264,1165,333],{"class":270},[264,1167,287],{"class":274},[264,1169,278],{"class":270},[264,1171,1172,1174,1176],{"class":266,"line":837},[264,1173,343],{"class":270},[264,1175,275],{"class":274},[264,1177,278],{"class":270},[245,1179,1181],{"id":1180},"key-takeaways","Key Takeaways",[1183,1184,1185,1195,1214,1221],"card-group",{},[1186,1187,1189],"card",{"icon":1188,"title":248},"i-lucide-x-circle",[250,1190,1191,1192,1194],{},"Children are attached via the custom renderer, not Vue's slot system. ",[261,1193,479],{}," and named slots don't apply.",[1186,1196,1199],{"icon":1197,"title":1198},"i-lucide-zap","Auto-Attachment",[250,1200,1201,1202,1205,1206,1209,1210,1213],{},"Geometries attach as ",[261,1203,1204],{},".geometry",", materials as ",[261,1207,1208],{},".material",", Object3Ds via ",[261,1211,1212],{},".add()"," — all automatically.",[1186,1215,1218],{"icon":1216,"title":1217},"i-lucide-link","The `attach` Prop",[250,1219,1220],{},"Explicitly target any property when auto-attachment doesn't cover your use case.",[1186,1222,1225],{"icon":1223,"title":1224},"i-lucide-git-branch","Scene Hierarchy",[250,1226,1227],{},"Nesting Object3D children mirrors the Three.js scene graph — transforms propagate down the tree.",[1229,1230,1231],"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 .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 .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}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 .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}",{"title":259,"searchDepth":267,"depth":281,"links":1233},[1234,1235,1236,1238,1239,1240],{"id":247,"depth":281,"text":248},{"id":489,"depth":281,"text":490},{"id":556,"depth":281,"text":1237},"The attach Prop",{"id":863,"depth":281,"text":864},{"id":1036,"depth":281,"text":1037},{"id":1180,"depth":281,"text":1181},"Learn how TresJS uses a custom renderer to attach child components as Three.js object properties, replacing Vue's slot system with a scene-graph-aware approach.","md",null,{},{"title":75,"description":1241},"K3CQg0pT1RNJkK-viViKYXQNVp6072yuR-xt6n1tOtY",[1248,1250],{"title":71,"path":72,"stem":73,"description":1249,"children":-1},"Learn how to add custom Three.js classes and third-party libraries to TresJS using the extend function.",{"title":84,"path":80,"stem":85,"description":1251,"children":-1},"Explore the TresJS components, composables, utilities and more.",1774953658494]