Bezier Curves
Studio is being deprecated, please head over to the documentation page for Mattercraft, our most advanced 3D tool for the web, where you can find the most recent information and tutorials.
The Bezier symbol component provides multiple preset bezier curves. It’s a great template for animating objects along a specific shaped curve. It comes with 4 pre-determined curve structures - straight, curved left, curved right and circle.
Creating a Bezier Curvers Symbol
Section titled “Creating a Bezier Curvers Symbol”A Bezier curve symbol can be added to your project by clicking on the plus icon + from the Symbol Definitions panel, and selecting the Bezier Curves component.
Using a Bezier Curves Symbol
Section titled “Using a Bezier Curves Symbol”Drag the Bezier Curves symbol into the Hierarchy from the Symbol Definitions, creating an instance of the symbol.
On first import, the Import Notes will appear giving step-by-step instructions on how the symbol can be used. The notes can be accessed again at any time by clicking on the burger menu at the top of the Hierarchy and opening Import or Modification notes.
Next, drag an object into the exposed Content Group. Then select the Bezier node and change the values of the References properties.
The Bezier Curves symbol provides 4 references properties:
Property | Type | Description |
---|---|---|
Type of Bezier | parameter | Sets the shape of the bezier. |
Autoplay | boolean | Sets whether the animation should play automatically. |
Loop | boolean | Sets whether the animation will loop. |
Speed | float | Sets playback speed of the animation. |
Exported Functions
Section titled “Exported Functions”The Bezier Curves symbol also has 1 exported function:
| Function | Description | |-|-|-| | play()| starts animation | | stop()| stops animation | | reset()| resets animation |
Example:
// Local variable storing the Bezier Curve nodeconst Bezier_Curves = symbol.nodes.Bezier_Curves;
// Calling the play functionBezier_Curves.nodes.Script.play();
In the examples,
Bezier
is a placeholder variable, and should be replaced by the name of the node the function is being called on. You can create a variable for your Bezier node in a script by dragging the node into the top of the script.
Modifying the Bezier Curves Symbol
Section titled “Modifying the Bezier Curves Symbol”The Bezier Curves symbol can be edited to create a unique curve by following the steps below.
-
Head into the symbol by double clicking on it in the Symbol Definitions panel.
-
Select the TypeOfBezier controller.
-
Select the state of the curve wanting to be changed and click back to the base controller.
-
Select the matching bezier node in the Hierarchy and edit the points properties to create a new unique personalised curve.
More information on editing a bezier curve can be found here: Bezier Curves.