3D product configurators are becoming more popular, so we decided to add support for 3D models in our product configurator. In this post we will guide you through the steps to set up a 3D product configurator in Staggs. Curious for the result? Check out our 3D model shoe or 3D model bag demo. Identifying the attributes Before we start creating the 3D model, we have to know what attributes the product will have. And what attributes will represent a change in the model. Because once the model is created, you cannot add any more options without having to change the 3D model first. So it is very important to know what attributes the product has (and thus what attributes you are going to include in your configurator). We have created a special tool to see what options will be available in your 3D model with our model inspector. Click the button below and upload your GLB or GLTF model to see what is possible! Open 3D model inspector
Creating the 3D model We support the most popular 3D model formats called GLB and GLTF. These types are like the JPG’s and PNG’s of image types. With the stackable image feature, you can just stack whatever image you want. With the 3D model however, we have to add every change to the model itself! If the attribute is not implemented in the model, it won’t change when selecting the attribute value. So check your model carefully before uploading it in the configurator. You can find our requirements for 3D models in this article. Adding the 3D model to the configurator
Before we start, make sure you have checked the box: “Enable Staggs Product Configurator”. Now a new metabox should show up called “Staggs Configurator Builder”. By default the Configurator type will be set to Image. Change that to “3D model”.
Next, we upload the model in the 3D model field on our configurable product page. Now you will see an upload field for a file. Click “select file” and add your 3D model file. Customizing the 3D model display Version 1.x With the 3D model in place we can customize the display properties in our configurator theme If you don’t have a configurator theme set up yet, you can create one now Assuming you have linked your configurator theme, we can visit the theme edit page to customize the options.
Version 2.x Go to your configurator template and use the tabs “Gallery” and “Gallery background” There are various options you can customize, from initial camera viewpoint to targets to limits and zooming Here you can also set a background image for the model viewer to make a scene You can upload HDR image to WordPress if you install additional plugin that allows HDR uploads Or you can link from external location For more details on how to configure the specific options, please continue reading this article Creating the 3D configurator attributes Now we will create the attributes for the configurator. Head over to Staggs -> Attributes and create your attributes. You can change colors, show/hide parts, add hotspots, and control animations: How to set 3D model variants How to control 3D model parts display How to change 3D model textures How to change 3D model colors Add hotspots to your 3D model How to play 3D model animations Change the 3D camera positions Adding the 3D configurator attributes After creating the attributes, make sure to also add the attributes to the configurator builder. Otherwise there will be no attributes to display.
Bottom line In the PRO version of the Staggs product configurator you can create a configurator based on a .glb or .gltf 3D model. You can update the model based on variants, base textures and metallic textures.