Child Attachments
Not Vue Slots
When you nest components in TresJS:
<template>
<TresMesh>
<TresBoxGeometry />
<TresMeshBasicMaterial color="red" />
</TresMesh>
</template>
This looks like Vue slots, but it isn't. TresJS uses a custom Vue renderer — there is no DOM, no <slot />. Instead, the renderer intercepts each child component and attaches it as a property of the parent Three.js object.
The equivalent vanilla Three.js code is:
const geometry = new THREE.BoxGeometry()
const material = new THREE.MeshBasicMaterial({ color: 'red' })
const mesh = new THREE.Mesh(geometry, material)
v-slot, named slots, or scoped slots with TresJS scene components. Child attachment is handled at the renderer level, not Vue's component system.How Auto-Attachment Works
TresJS inspects the type of each child and automatically decides how to attach it:
| Child type | Attachment |
|---|---|
BufferGeometry subclass | parent.geometry = child |
Material subclass | parent.material = child |
Object3D subclass | parent.add(child) |
This means in most cases you don't need to think about it — just nest the component and TresJS does the right thing.
The attach Prop
For cases where auto-attachment isn't enough, use the attach prop to explicitly specify the target property:
<template>
<TresMesh>
<TresBoxGeometry attach="geometry" />
<TresMeshBasicMaterial attach="material" />
</TresMesh>
</template>
This is particularly useful with objects that don't follow the standard Mesh pattern:
<template>
<!-- Points uses the same geometry/material pattern but attach makes it explicit -->
<TresPoints>
<TresBufferGeometry attach="geometry" />
<TresPointsMaterial attach="material" :size="0.01" />
</TresPoints>
</template>
Or for attaching to nested properties:
<template>
<TresMesh>
<TresBoxGeometry />
<!-- attach to a nested property path -->
<TresMeshStandardMaterial attach="material">
<TresTexture attach="map" />
</TresMeshStandardMaterial>
</TresMesh>
</template>
attach for unusual object types or custom property targets.Scene Graph Children
When a child is an Object3D subclass (meshes, lights, groups, cameras), TresJS calls parent.add(child) to insert it into the Three.js scene graph. This is how nesting translates to scene hierarchy:
<template>
<TresGroup :position="[0, 1, 0]">
<!-- group.add(mesh) -->
<TresMesh>
<TresSphereGeometry />
<TresMeshStandardMaterial color="orange" />
</TresMesh>
<!-- group.add(light) -->
<TresPointLight :intensity="2" />
</TresGroup>
</template>
Moving or rotating the <TresGroup> affects all children, exactly as in Three.js.
Multiple Materials
Some Three.js objects accept an array of materials. Pass multiple materials using attach with array index notation:
<template>
<TresMesh>
<TresBoxGeometry />
<TresMeshStandardMaterial attach="material-0" color="red" />
<TresMeshStandardMaterial attach="material-1" color="blue" />
<TresMeshStandardMaterial attach="material-2" color="green" />
</TresMesh>
</template>
Key Takeaways
Not Vue Slots
Children are attached via the custom renderer, not Vue's slot system. v-slot and named slots don't apply.
Auto-Attachment
Geometries attach as .geometry, materials as .material, Object3Ds via .add() — all automatically.
The `attach` Prop
Explicitly target any property when auto-attachment doesn't cover your use case.
Scene Hierarchy
Nesting Object3D children mirrors the Three.js scene graph — transforms propagate down the tree.