3D Models

• 3D
• 3D Models
• Components
• Custom Components
• Mattercraft
• Media

Mattercraft provides robust support for incorporating 3D models into your projects, allowing you to create immersive and interactive experiences.

Supported Formats

• GLB

The Mattercraft Team is actively working on expanding the range of supported model file formats to provide even more flexibility and options in the future.

Adding 3D Models

Adding 3D models to your project is super easy in Mattercraft. You have two options:

Drag and Drop

Simply drag and drop your 3D models into the project files menu on the left:

From your Computer

Click on the + (plus) icon in the project files menu (located in the Left Menu) and select From your computer to browse and import your 3D models:

3D Model Viewer

Mattercraft features a built-in 3D model viewer which allows you to preview and inspect your 3D models.

When you click on a 3D model in the left menu, it will open into the viewer. This viewer is an excellent tool for checking if your model is set up correctly. You can test animations, materials, and morph targets without affecting your project.

Customizing Model Materials

You can easily add your own materials to a 3D model and update it inside Mattercraft.

To customize 3D model materials:

1. Click on an imported 3D model in the Left Menu to open the 3D model viewer window
2. Find the material you want to customize from the right hand side of the 3D model viewer
3. With the 3D model in a Scene, hover over it in the Hierarchy
4. Click on the three dots to the right of the 3D model's name, find + New, then Materials and pick a material
5. Click on the chosen material and in the Node Properties Panel find the Attach to property
6. Enter the name you recall from the 3D model viewer of the material you wish to update

You may then customize the 3D model's material within the parameters of the new material as you wish.

Playing Animations

Animating your 3D models in Mattercraft is made easy with the exposed Animation Behavior, Stream Tracks and script.

Behaviour Actions

Using the Animation Behavior Action, you can play and control animations associated with your 3D models.

Stream Tracks

Mattercraft also offers the ability to play animations via a stream track on a timeline.

To utilize this feature, follow these steps:

1. Click on the Animations panel to open it up
2. Click on Layers if your Timeline is inside a layer or Clips if it is independent
3. Find and click on the Timeline you wish to add the Stream Track to
4. Go to the Timeline Clip editor and find the + (plus) icon
5. Find Streams and then click on the 3D model animation you wish to add to the Timeline
6. Mattercraft will automatically add the Stream Track to the Timeline

You may then edit the time, speed, and other parameters of the animation manually along the timeline.

To learn more about timelines and playing stream tracks in Mattercraft, check out our dedicated Animation System articles.

In a Script

To play embedded 3D model animations in a script, you should create a mixer and action to play an animation clip.

This concept is similar to the Animation system in three.js.

An example of such may look like this:

// When the video this code references is playing...
this.register(this.instance.onPointerDown, evt => {

     // Create a mixer variable to play the animation
     const mixer : any = this.instance.mixer.value;  

     // Find an animation embedded into the 3D model
     const clip = this.instance.animationClips.value.get('Armature|Take 001|BaseLayer');

     // Create an action variable to play the
     // specified clip with the mixer you created
     const action = mixer.clipAction(clip);

     // Play the action (animation)
     action.play();

}); 

If you're using this in a behavior that isn't directly instancing the 3D model, replace this.instance. with this.nodes.zcomponent.Your3DModelNode.

By leveraging Mattercraft's 3D model capabilities, you can bring your projects to life with dynamic and engaging visuals.