Images

Mattercraft allows supported image formats to be easily imported into your projects. Images are useful for adding visual elements, but can also be utilized as buttons or UI components.

Supported formats

Mattercraft currently supports the following formats:

Adding Images

Adding images to your project is super easy in Mattercraft. You have three options:

Drag and Drop

Simply drag and drop your image into the project files menu:

Dragging images into the Left Menu

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 image:

Adding an Image 'From your computer'

Streaming

Your image must be hosted on a server and have a direct link to use this method (e.g. https://myHostingServer.com/myImage.jpg).

Click on the + (plus) icon in the Hierarchy (or the three dots on a Group) and select Image to add an image component to your Hierarchy
In the image's Source property, enter the image's direct URL from a hosting server to stream your image:

Adding streamed Images

Once you've added your image to the Hierarchy, you can choose whether it is a normal image or a 360 image.

Image type	Description
Normal Image	Your image will appear 'flat' or '2D' in the 3D scene space, as you might traditionally expect.
360 Image	Your image will appear as a 360 photosphere and will by default surround the canvas 360 degrees.

To learn more about adding interactivity to your Mattercraft projects, see our dedicated Behavior Actions articles.

360 degree images

You can create truly immersive experiences by using the Image360 component. For example, you may want to develop an office tour for onboarding new employees, or use interactive hotspots around a particular environment, which the user can navigate using their mouse or mobile gyro controls.

Adding 360 degree Images

To use a 360 degree image in your Mattercraft project, use the following steps:

Import the 360 degree Image to the Left Menu as you would a normal Image; using the instructions above (Adding Images)
Drag the 360 degree Image from the Left Menu into the Hierarchy and select Image360 when the cursor is released

This should add the image to your scene as a 360 photosphere. You can further refine the Radius to make the photosphere smaller or larger.

If you are streaming your image, you will have to create a new Image360 component from within the Hierarchy by clicking on the + (plus) icon or right clicking on a Group node.

Using images as textures

You can use imported images as textures for 3D models or other meshes you may add to your Mattercraft scene.

Adding an image as a texture

To add an image as a texture, you can do the following:

Make sure that your 3D Model or Mesh has a material component
Right-click on the material or use the three dots to find the Texture option and select ImageTexture

You will then be able to customise the texture properties; such as the kind of map this texture is (e.g. base color, ambient occlusion, bump map), as well as the Offset and Repeat properties.

If you are customizing the textures on a 3D Model, you should make sure that the material you are using has its Attach To property set to the embedded material you wish to override. For more information about this, see our Customizing Model Materials documentation.