[{"data":1,"prerenderedAt":1228},["ShallowReactive",2],{"navigation":3,"/essentials/concepts/child-attachments":239,"/essentials/concepts/child-attachments-surround":1223},[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":1217,"extension":1218,"links":1219,"meta":1220,"navigation":39,"path":76,"seo":1221,"stem":77,"__hash__":1222},"docs/2.essentials/2.concepts/6.child-attachments.md",{"type":242,"value":243,"toc":1208},"minimark",[244,249,253,348,364,367,471,481,487,491,494,551,554,562,568,644,650,745,748,849,857,861,870,1003,1010,1014,1020,1154,1158,1204],[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,728,736],{"__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,719,721,724,726],{"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":312}," :size",[264,718,316],{"class":270},[264,720,319],{"class":270},[264,722,723],{"class":322},"0.01",[264,725,319],{"class":270},[264,727,301],{"class":270},[264,729,730,732,734],{"class":266,"line":340},[264,731,333],{"class":270},[264,733,675],{"class":274},[264,735,278],{"class":270},[264,737,739,741,743],{"class":266,"line":738},7,[264,740,343],{"class":270},[264,742,275],{"class":274},[264,744,278],{"class":270},[250,746,747],{},"Or for attaching to nested properties:",[254,749,751],{"className":256,"code":750,"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,752,753,761,769,777,782,801,822,831,840],{"__ignoreMap":259},[264,754,755,757,759],{"class":266,"line":267},[264,756,271],{"class":270},[264,758,275],{"class":274},[264,760,278],{"class":270},[264,762,763,765,767],{"class":266,"line":281},[264,764,284],{"class":270},[264,766,287],{"class":274},[264,768,278],{"class":270},[264,770,771,773,775],{"class":266,"line":292},[264,772,295],{"class":270},[264,774,298],{"class":274},[264,776,301],{"class":270},[264,778,779],{"class":266,"line":304},[264,780,781],{"class":667},"    \u003C!-- attach to a nested property path -->\n",[264,783,784,786,789,791,793,795,797,799],{"class":266,"line":330},[264,785,295],{"class":270},[264,787,788],{"class":274},"TresMeshStandardMaterial",[264,790,597],{"class":312},[264,792,316],{"class":270},[264,794,319],{"class":270},[264,796,623],{"class":322},[264,798,319],{"class":270},[264,800,278],{"class":270},[264,802,803,806,809,811,813,815,818,820],{"class":266,"line":340},[264,804,805],{"class":270},"      \u003C",[264,807,808],{"class":274},"TresTexture",[264,810,597],{"class":312},[264,812,316],{"class":270},[264,814,319],{"class":270},[264,816,817],{"class":322},"map",[264,819,319],{"class":270},[264,821,301],{"class":270},[264,823,824,827,829],{"class":266,"line":738},[264,825,826],{"class":270},"    \u003C/",[264,828,788],{"class":274},[264,830,278],{"class":270},[264,832,834,836,838],{"class":266,"line":833},8,[264,835,333],{"class":270},[264,837,287],{"class":274},[264,839,278],{"class":270},[264,841,843,845,847],{"class":266,"line":842},9,[264,844,343],{"class":270},[264,846,275],{"class":274},[264,848,278],{"class":270},[472,850,851],{},[250,852,853,854,856],{},"Geometries and materials auto-attach correctly in the vast majority of cases. You only need ",[261,855,560],{}," for unusual object types or custom property targets.",[245,858,860],{"id":859},"scene-graph-children","Scene Graph Children",[250,862,863,864,866,867,869],{},"When a child is an ",[261,865,545],{}," subclass (meshes, lights, groups, cameras), TresJS calls ",[261,868,550],{}," to insert it into the Three.js scene graph. This is how nesting translates to scene hierarchy:",[254,871,873],{"className":256,"code":872,"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,874,875,883,904,909,917,926,945,953,958,963,985,994],{"__ignoreMap":259},[264,876,877,879,881],{"class":266,"line":267},[264,878,271],{"class":270},[264,880,275],{"class":274},[264,882,278],{"class":270},[264,884,885,887,890,893,895,897,900,902],{"class":266,"line":281},[264,886,284],{"class":270},[264,888,889],{"class":274},"TresGroup",[264,891,892],{"class":312}," :position",[264,894,316],{"class":270},[264,896,319],{"class":270},[264,898,899],{"class":322},"[0, 1, 0]",[264,901,319],{"class":270},[264,903,278],{"class":270},[264,905,906],{"class":266,"line":292},[264,907,908],{"class":667},"    \u003C!-- group.add(mesh) -->\n",[264,910,911,913,915],{"class":266,"line":304},[264,912,295],{"class":270},[264,914,287],{"class":274},[264,916,278],{"class":270},[264,918,919,921,924],{"class":266,"line":330},[264,920,805],{"class":270},[264,922,923],{"class":274},"TresSphereGeometry",[264,925,301],{"class":270},[264,927,928,930,932,934,936,938,941,943],{"class":266,"line":340},[264,929,805],{"class":270},[264,931,788],{"class":274},[264,933,313],{"class":312},[264,935,316],{"class":270},[264,937,319],{"class":270},[264,939,940],{"class":322},"orange",[264,942,319],{"class":270},[264,944,301],{"class":270},[264,946,947,949,951],{"class":266,"line":738},[264,948,826],{"class":270},[264,950,287],{"class":274},[264,952,278],{"class":270},[264,954,955],{"class":266,"line":833},[264,956,957],{"emptyLinePlaceholder":39},"\n",[264,959,960],{"class":266,"line":842},[264,961,962],{"class":667},"    \u003C!-- group.add(light) -->\n",[264,964,966,968,971,974,976,978,981,983],{"class":266,"line":965},10,[264,967,295],{"class":270},[264,969,970],{"class":274},"TresPointLight",[264,972,973],{"class":312}," :intensity",[264,975,316],{"class":270},[264,977,319],{"class":270},[264,979,980],{"class":322},"2",[264,982,319],{"class":270},[264,984,301],{"class":270},[264,986,988,990,992],{"class":266,"line":987},11,[264,989,333],{"class":270},[264,991,889],{"class":274},[264,993,278],{"class":270},[264,995,997,999,1001],{"class":266,"line":996},12,[264,998,343],{"class":270},[264,1000,275],{"class":274},[264,1002,278],{"class":270},[250,1004,1005,1006,1009],{},"Moving or rotating the ",[261,1007,1008],{},"\u003CTresGroup>"," affects all children, exactly as in Three.js.",[245,1011,1013],{"id":1012},"multiple-materials","Multiple Materials",[250,1015,1016,1017,1019],{},"Some Three.js objects accept an array of materials. Pass multiple materials using ",[261,1018,560],{}," with array index notation:",[254,1021,1023],{"className":256,"code":1022,"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,1024,1025,1033,1041,1049,1078,1108,1138,1146],{"__ignoreMap":259},[264,1026,1027,1029,1031],{"class":266,"line":267},[264,1028,271],{"class":270},[264,1030,275],{"class":274},[264,1032,278],{"class":270},[264,1034,1035,1037,1039],{"class":266,"line":281},[264,1036,284],{"class":270},[264,1038,287],{"class":274},[264,1040,278],{"class":270},[264,1042,1043,1045,1047],{"class":266,"line":292},[264,1044,295],{"class":270},[264,1046,298],{"class":274},[264,1048,301],{"class":270},[264,1050,1051,1053,1055,1057,1059,1061,1064,1066,1068,1070,1072,1074,1076],{"class":266,"line":304},[264,1052,295],{"class":270},[264,1054,788],{"class":274},[264,1056,597],{"class":312},[264,1058,316],{"class":270},[264,1060,319],{"class":270},[264,1062,1063],{"class":322},"material-0",[264,1065,319],{"class":270},[264,1067,313],{"class":312},[264,1069,316],{"class":270},[264,1071,319],{"class":270},[264,1073,323],{"class":322},[264,1075,319],{"class":270},[264,1077,301],{"class":270},[264,1079,1080,1082,1084,1086,1088,1090,1093,1095,1097,1099,1101,1104,1106],{"class":266,"line":330},[264,1081,295],{"class":270},[264,1083,788],{"class":274},[264,1085,597],{"class":312},[264,1087,316],{"class":270},[264,1089,319],{"class":270},[264,1091,1092],{"class":322},"material-1",[264,1094,319],{"class":270},[264,1096,313],{"class":312},[264,1098,316],{"class":270},[264,1100,319],{"class":270},[264,1102,1103],{"class":322},"blue",[264,1105,319],{"class":270},[264,1107,301],{"class":270},[264,1109,1110,1112,1114,1116,1118,1120,1123,1125,1127,1129,1131,1134,1136],{"class":266,"line":340},[264,1111,295],{"class":270},[264,1113,788],{"class":274},[264,1115,597],{"class":312},[264,1117,316],{"class":270},[264,1119,319],{"class":270},[264,1121,1122],{"class":322},"material-2",[264,1124,319],{"class":270},[264,1126,313],{"class":312},[264,1128,316],{"class":270},[264,1130,319],{"class":270},[264,1132,1133],{"class":322},"green",[264,1135,319],{"class":270},[264,1137,301],{"class":270},[264,1139,1140,1142,1144],{"class":266,"line":738},[264,1141,333],{"class":270},[264,1143,287],{"class":274},[264,1145,278],{"class":270},[264,1147,1148,1150,1152],{"class":266,"line":833},[264,1149,343],{"class":270},[264,1151,275],{"class":274},[264,1153,278],{"class":270},[245,1155,1157],{"id":1156},"key-takeaways","Key Takeaways",[1159,1160,1161,1171,1190,1197],"card-group",{},[1162,1163,1165],"card",{"icon":1164,"title":248},"i-lucide-x-circle",[250,1166,1167,1168,1170],{},"Children are attached via the custom renderer, not Vue's slot system. ",[261,1169,479],{}," and named slots don't apply.",[1162,1172,1175],{"icon":1173,"title":1174},"i-lucide-zap","Auto-Attachment",[250,1176,1177,1178,1181,1182,1185,1186,1189],{},"Geometries attach as ",[261,1179,1180],{},".geometry",", materials as ",[261,1183,1184],{},".material",", Object3Ds via ",[261,1187,1188],{},".add()"," — all automatically.",[1162,1191,1194],{"icon":1192,"title":1193},"i-lucide-link","The `attach` Prop",[250,1195,1196],{},"Explicitly target any property when auto-attachment doesn't cover your use case.",[1162,1198,1201],{"icon":1199,"title":1200},"i-lucide-git-branch","Scene Hierarchy",[250,1202,1203],{},"Nesting Object3D children mirrors the Three.js scene graph — transforms propagate down the tree.",[1205,1206,1207],"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}",{"title":259,"searchDepth":267,"depth":281,"links":1209},[1210,1211,1212,1214,1215,1216],{"id":247,"depth":281,"text":248},{"id":489,"depth":281,"text":490},{"id":556,"depth":281,"text":1213},"The attach Prop",{"id":859,"depth":281,"text":860},{"id":1012,"depth":281,"text":1013},{"id":1156,"depth":281,"text":1157},"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":1217},"iO6bF6cbIv_m8fMqTS_frct-Tt-NFQLb3yL_cDP8v9E",[1224,1226],{"title":71,"path":72,"stem":73,"description":1225,"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":1227,"children":-1},"Explore the TresJS components, composables, utilities and more.",1782052331208]