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
Section titled “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 timeregisterBehaviorRunAtDesignTime(ChangeColor);