Instantiating zcomps

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

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.

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