Looping through a component's children

Because Mattercraft is built on Three.js, every node in the scene is a THREE.Object3D. You can iterate over a node’s direct children using the children array, or walk the entire subtree using traverse():

// Direct children only
for (const child of this.instance.children) {
    // Do something with each direct child
}

// All descendants (including nested children)
this.instance.traverse((child) => {
    // Do something with each node in the subtree
});

traverse() includes the node itself as the first call. If you only want descendants, you can skip it by checking child !== this.instance.

Example usage

The following example hides all direct children of the node the behavior is attached to when the experience starts:

import { Behavior, zBehavior, zOnStart } from '@zcomponent/core';
import Scene from './Scene.zcomp';

@zBehavior({ icon: 'account_tree' })
export class HideChildrenBehavior extends Behavior<Scene> {
    protected zcomponent = this.getZComponentInstance(Scene);

    @zOnStart()
    private _init() {
        for (const child of this.instance.children) {
            child.visible = false;
        }
    }
}

For more on working with Three.js objects in Mattercraft, see the API References.