Preparing the 3D model If you have been using Staggs 3D configurator, you know you have to include everything inside your 3D GLB model file before you can apply changes to it This also applies to adding texts and images onto your 3D model: you have to have a designated area with material where you can apply the text or image onto. This should be a distinct material name, which we will use later on for our attribute settings. See the image below for reference.
Setting up the attribute With our 3D model image and text area’s in place, we can start adding in the attributes to control the contents of the materials. Before we add in text or images onto our 3D model, we have to make sure the gallery settings are in place. Otherwise the image or text won’t show up at the desired location. To check the gallery settings, go over to your attribute and click on the Presentation tab Scroll down till you see the option “Gallery type” and make sure it is set to “3D model” Also make sure the Model part is set to Model material, and Material type is Base texture.
To add text to the 3D model, we will create a text attribute and enter the following settings: Enable preview: yes Preview width: your material area width Preview height: your material area height Material key: material name of the area. You can look this up using our 3D model inspector For the width and height, you can play around with the values to make it fit nicely. The text will be scaled down to the material surface, so if you have large width or height, you will notice that the text shrinks. Adding image on 3D model
To add an image to the 3D model, we will create a file upload attribute and enter the following settings: Enable preview: yes Preview width: your material area width Preview height: your material area height Material key: material name of the area. You can look this up using our 3D model inspector For the width and height, you can play around with the values to make it fit nicely. The image will be scaled down to the material surface, so if you have large width or height, you will notice that the image shrinks. Updating text values Not only can you add text onto 3D model, you can also update the text properties just like in the 2D previews. For example, you can set the text color and font family. Update 3D text font family To update text font family, you need to create an attribute with font options. Next, head over to the attribute presentation tab and make sure you have configured the same settings as for 3D text display: Gallery type: 3D model 3D Model Group Label: your 3D material label to update 3D Model Part: Model material 3D Model Material: Base texture Update 3D text color To update 3D text color, you also need to configure the 3D gallery options as described in the previous section. The only difference is you need to select attribute type of color instead of font family. And template should be color swatches. Common fix for rendering issues Sometimes images can appear cropped or only part of image or text appears on the 3D model. If this happens to you, please evaluate the 3D model layer settings. The Staggs plugin adds the full image or full text as an image layer to the defined material layer. So we don’t actively crop or resize the image. Tip: keep the ratio of entered width and height value the same as the ratio of the 3D material layer. Increasing width and height values will result in sharper preview. Not fix the image scale. Result Finally, save the attribute and add it to the configurator builder (if you have not done so already). And publish the product. You should now see that the text is being added onto the 3D model.