zcomp communication

From time to time, you may need to access specific nodes within a zcomponent. This can be helpful when setting new values for various node properties for example.

You can access nodes within a zcomponent using the following snippet:

this.zcomponent.nodes.MYZCOMPNAME.nodes...

We’d recommend using the Emit Component Prop Event for events (e.g. button taps), rather than accessing the node directly this way.

Example

The below snippet shows accessing a specific node within a zcomponent, in this case the Color node property within a material component.

import { Behavior, zBehavior, zRegister } from '@zcomponent/core';
import { Plane } from '@zcomponent/three/lib/components/meshes/Plane';
import Scene from './Scene.zcomp';

@zBehavior()
export class ChangeColor extends Behavior<Plane> {
    protected zcomponent = this.getZComponentInstance(Scene);

    @zRegister('onPointerDown')
    private _handlePointerDown() {
        // Find the 'Vase' zcomponent and update its MeshPhysicalMaterial color
        this.zcomponent.nodes.Vase.nodes.MeshPhysicalMaterial.color.value = [1, 0, 0];
    }
}