Instantiating zcomps

zcomponents can be added to your Hierarchy using the interface; however, there are times when you might want to instantiate them programmatically.

For example, if you are creating an environment with flowers, you might want to create multiple instances of a flower zcomponent and place them randomly in your scene. Doing this manually would be time-consuming, so we recommend instantiating them through code using the following method.

Usage

1. Import the zcomponent into your script:

   // Replace 'zcompExample' with your zcomponent name
   import zcompExample from "./zcompExample.zcomp";

2. Create a new instance of the zcomponent:

   // Creating a new instance of the zcomponent using the context manager
   const zcompExampleInstance = new zcompExample(this.contextManager, {});

3. Add the zcomponent instance to your scene - in this example, it is being added to a Group node:

   // Add the zcomponent instance to the 'myGroup' node
   this.zcomponent.nodes.myGroup.appendChild(zcompExampleInstance);

Example

To showcase how to use instantiated zcomponents, in the video and snippet below we show how 1000 individual flower zcomponents can be added to a scene and (or) group within a behavior.

Instantiating a zcomponent

Example code

import { Component, Behavior, BehaviorConstructorProps, ContextManager, registerBehaviorRunAtDesignTime } from "@zcomponent/core";
import { Group as Group } from "@zcomponent/three/lib/components/Group";
import { default as Scene} from "./Scene.zcomp";
import Stem from "./Stem.zcomp";

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

/** @zbehavior */
export class InstantiateStem extends Behavior<Group> {

  protected zcomponent = this.getZComponentInstance(Scene);


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

    this.instantiateStem();

  }

  instantiateStem() {
    const numStems = 1000; // Number of targets to create
    const minRadius = 1; // Minimum radius around the user
    const maxRadius = 15; // Maximum radius around the user
    const minY = -0.5; // Minimum y-coordinate
    const maxY = 1; // Maximum y-coordinate

    for (let i = 0; i < numStems; i++) {
      // Generate random angle and radius
      const angle = Math.random() * Math.PI * 2; // Random angle in radians
      const radius = Math.random() * (maxRadius - minRadius) + minRadius; // Random radius between min and max

      // Calculate position around the user
      const x = Math.cos(angle) * radius;
      const z = Math.sin(angle) * radius;

      // Get current y-coordinate
      const currentY = Math.random() * (maxY - minY) + minY;

      const target = new Stem(this.contextManager, {});

      // Set the position of the target
      target.position.value = [x, currentY, z];

      // Add the target to the scene
      this.zcomponent.nodes.StemGroup.appendChild(target);
    }
  }

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

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