How to create 3D product configurator with Staggs

3D product configurators are becoming more popular and more common as technology advances. The Staggs product configurator plugin also supports 3D visualizations, which allows you to create 3D configurations in Staggs. In this post we will guide you through the steps.

Let’s get right into it.

Checking your 3D model for the 3D configurator

Before we embark on our journey to create a stunning 3D configurator, let’s make sure our 3D model has the right format and structure to be used in the 3D configurator.

You can visit our 3D model inspector to see the available variations, nodes and materials. You are going to need these attributes to be able to succesfully create a 3D configurator in Staggs.

Furthermore, you can inspect the available animations, get the current camera values and add nodes in the model to get the desired node positions.

Finally, make sure your 3D model is of type GLB or glTF.

Creating the 3D configurator attributes

When we have ensured the compatibility of our 3D model, we can start creating the attributes.

Staggs supports 4 types of attributes:

1. Change model variations
2. Change model colors
3. Change model textures
4. Show/hide model parts (nodes)

We will go over each of the various types, starting with the variations.

Change 3D model variations

To create a new attribute, go over to Staggs -> Attributes and create a new attribute.

Add a name and select your type and template based on your preference.

You can find full list of attribute types and templates on this page.

Next, go over to the 3D model inspector to check your variant name.

Head back over to your attribute, scroll down to field “Gallery type” and make sure “3D model” is selected.

Next, we will enter “variantName” inside the “Model group label” field. And set “3D Model Part” to “Model variant”

When adding the items, make sure the variant name in the 3D model matches your attribute label.

This will ensure the variant is updated.

Change 3D model colors

To change colors of your 3D model parts, head back over to the 3D model inspector.

Assuming you have uploaded your 3D model, locate the dropdown “Model materials”

If you click with your mouse in the model, the value of the material select will change. That is the name of the material you just clicked.

You will also see that the part in the model is being highlighted when clicking, so you can make sure you select the right part to update.

When you know the material names, simply go back over to your configurator attribute and enter the material names in the field “3D Model Group Label”.

You can enter comma separated values if you wish to update multiple materials at the same time.

Finally, set the field “Material Type” to “Base Color”.

To be able to select colors, make sure you set the attribute type to “Color”. This field is located at the start of your attributes fields.

The template could be “Color swatches” for example, but other templates are fine too.

Finally, add your options and pick the colors you need.

And don’t forget to save the attribute.

Change 3D model textures

For 3D model textures we are going to follow a similar approach as the model colors.

But instead of selecting colors, we are uploading images that will function as the model texture.

This way you don’t have to include all colors and materials within the GLB model. But you can just upload and apply dynamically, saving you some time to build the configurator instead.

Head back over to the 3D model inspector.

Assuming you have uploaded your 3D model, locate the dropdown “Model materials”

If you click with your mouse in the model, the value of the material select will change. That is the name of the material you just clicked.

You will also see that the part in the model is being highlighted when clicking, so you can make sure you select the right part to update.

When you know the material names, simply go back over to your configurator attribute and enter the material names in the field “3D Model Group Label”.

You can enter comma separated values if you wish to update multiple materials at the same time.

Finally, set the field “Material Type” to “Base Texture”.

Now it is time to start adding the texture images. First, make sure your attribute type is set to “Image”

Next, start adding your material options. For each option you can upload your material image.

Show/hide 3D model parts

Finally, you can choose to conditionally show model parts based on the selected options.

First, head over to your configurable product and locate the Staggs configurator builder metabox.

Make sure you have 3D model type selected.

Now you will see a field called “3D model nodes”.

Here you can enter the base nodes.

These nodes should remain visible at all times, no matter the configuration.

We have added 8×8, which is the base frame for the given model.

Next, head over to your configurator attribute and makes sure you set “Gallery type” to “3D model” again.

You can leave the model group label empty, and set “3D Model Part” to “Model nodes” .

To get the model node names, head back over to the 3D model inspector.

Assuming you have your 3D model uploaded, locate the dropdown “Model nodes”.

The default option shows all nodes, but you can change the model node in the select.

After changing the active node, you will see that the 3D model viewer updates the model and only shows the particular 3D model node.

Now you know the names of your 3D model nodes, so we can start filling out the attributes.

Back on the Staggs attribute page, you can start adding your attribute options.

For each option, fill out the 3D model node names you wish to show, in addition to the base nodes.

Again, you can separate with comma’s if you wish to show multiple nodes per option.

If you want to conditionally show/hide parts, you can apply some conditional logic.

Creating the 3D configurator

With all our attributes in place, you can go over to your configurable product.

Make sure your product type is of type “Simple”, and you have checked the box “Enable Staggs Product Configurator” in the Product data tab.

Now you will see a new metabox called “Staggs Configurator Builder”

Here you can upload your GLB 3D model and attach your created attributes.

You can also apply the conditional logic here.

We also have various options to customize the 3D configurator display.

You can read more about it on this page.

Adding hotspots to the 3D model

With our base configurator in place, let’s explore some additional options. Staggs 3D configurator also support display of hotspots.

To get the correct hotspot positions, simply go over to our 3D model inspector.

Assuming you have uploaded your 3D model, locate the button “add hotspot” and click on the model at the desired position. The hotspot will be placed on the position you just clicked.

You will also see that a new row has been added to the hotspot list with position and normal. You will need these values later on.

When you have the hotspots in place, let’s head over to your active configurator theme.

Creating the available hotspots

In the “Appearance” tab, scroll down to the bottom. There you will find a field called “3D model hotspots”.

Each hotspot has 4 fields:

• ID: Unique identifier of the hotspot.
• Content: Content of the hotspot.
• Position: Position value as displayed in the 3D model inspector field
• Normal: Normal value as displayed in the 3D model inspector field

Define the base hotspots

With our 3D model hotspots in place, lets head over to the main product page.

There you will find a field called “3D model hotspots”. Here you can enter the unique hotspot ID’s that you have picked.

Only enter the IDs of the hotspots that should be visible at all times.

Define conditional hotspots

You can also choose to conditionally show/hide hotspots in the 3D model.

If you want to show hotspot for particular option, head over to your attribute.

Next, go over to the option and you will also find a field called “3D model hotspot(s)”.

Again, enter the hotspot ID(s) you wish to display for the particular option.

And save the attribute.

Update 3D camera positions

Staggs also support updates of the camera position when an attribute has been clicked.

This allows you to zoom in on a particular part of the 3D model so the customer can clearly see what part of the model is changing.

Collecting the 3D camera values

To get the camera positions, head over to the 3D model inspector and upload your model.

Next, zoom and rotate the model into the right spot. Finally, hit the button “get current camera values”

Now you will see that the three camera fields are being filled with values.

These values represent the current camera position.

Adding the camera values to the attribute

The only thing left to do is update the attribute camera values.

Head over to your attribute and locate the field “3D model camera target”.

If you don’t see this field, make sure the field “Gallery type” in the attribute is set to “3D model”.

Next, copy and paste the values from the 3D model inspector into the attribute fields.

Finally, save the attribute.

Adding 3D model animations

Finally, you can play animations when an attribute is clicked.

Simply enter the model animation name in the field “3D model animation”.

You can find this field in each attribute option item.

If you don’t know what the animation name is, simply head over to our 3D model inspector and upload your model.

After uploading the model, the Model animations field will contain all available animations in your 3D model.

Simply select the animation to see what it does.

The Staggs 3D product configurator

With the Staggs 3D configurator you can transform your WooCommerce simple products into fully functional 3D configurators.

You can change colors, apply textures and show or hide parts of the 3D model.

We also have some cool features like adding hotspots, updating the camera zoom and playing animations. all in our 3D configurator.

You can even show the 3D model in your own room thanks to the built-in AR module.

If there is something still not clear, or you have questions about setting up your configurator, feel free to contact us using the support form on our website.

If you are interested in our 3D configurator, you can start a 14-day free trial to see if this works for you.