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 { 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);