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