zcomp communication

• Best practices
• Getting Started
• Mattercraft
• Mattercraft structure
• zcomponents

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 { Component, Behavior, BehaviorConstructorProps, ContextManager, registerBehaviorRunAtDesignTime } from "@zcomponent/core";
import { Plane as Plane } from "@zcomponent/three/lib/components/meshes/Plane";
import { default as Scene} from "./Scene.zcomp";

interface ConstructionProps {
    // Add any constructor props you'd like for your behavior here
}

/**
 * @zbehavior 
 * @zparents three/Object3D/Mesh/Plane
 **/
export class ChangeColor extends Behavior<Plane> {

    protected zcomponent = this.getZComponentInstance(Scene);


    constructor(contextManager: ContextManager, instance: Plane, protected constructorProps: ConstructionProps) {
        super(contextManager, instance);

        // When this node is pressed...
        this.register(this.instance.onPointerDown,  evt => {
            // ...find the 'Vase' zcomponent in the current Heriarchy and
            // update it's MeshPhysicalMaterial component's color node property
            this.zcomponent.nodes.Vase.nodes.MeshPhysicalMaterial.color.value = [1, 0, 0];
        });
    }

    dispose() {
        // Clean up any resources
        // ...
        return super.dispose();
    }
}

// Uncomment below to run this behavior at design time
registerBehaviorRunAtDesignTime(ChangeColor);

Next article: Emitting component prop events