Using External Packages

• Add-ons & Dependencies
• Additional Features
• Dependencies
• Dependencies Browser
• External Packages
• Mattercraft

Once you have successfully installed a package into your project using the Dependencies Browser, you can start using it in your project.

Some packages might require additional configuration or setup within your project. Always refer to the package's official documentation for specific instructions.

Using external packages in a script

Third party packages can be used in a custom script; for example, in a Custom Component or Custom Behavior Action.

1. Open the script file where you want to use the package
2. At the top of the script file, require the package by using an import statement*
3. You are then able to use the functions and utilities provided by the package in your code

*For instance, if you have installed a package named example-package, you would write something like the following: import * as ExamplePackage from 'example-package';

Example script

The below script is an example of using an external package in a Custom Behavior.

// Imports...
import { gsap } from "gsap";

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

/**
 * @zbehavior 
 * @zparents three/Object3D/Mesh/Box
 **/
export class externalPackages extends Behavior<Box> {

    protected zcomponent = this.getZComponentInstance(Scene);


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

                // Creating an easy to reference variable for
                // the component the behavior is attached to
        const box = this.instance;

                // Register an event, in this case when a user
                // clicks or taps on the box
        this.register(box.onPointerDown, evt => {

                        // Use external package to animate the component
            gsap.to(box.element.position, {y : 2});

        });

    }

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

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