3D Visualisation is a ConfigBox Enterprise feature. With 3D Visualisation your customers will see a 3D model on the configurator page that can be rotated and zoomed in to. When your customer makes selections in the configurator, he can see the changes in the visualisation.

Get a parametric 3D model for your product

3D Visualisation requires some ground work - you must create a so-called parametric 3D model. Our partner ShapeDiver (www.shapediver.com) assists you in making parametric 3D models based on your existing model files or creates them from scratch.

Model parameters: You communicate to ShapeDiver which aspects of your product can be changed and how these changes affect the product visually. These aspects are the so-called parameters of your model. You link these parameters to appropriate questions in the configurator later.

Once the models are ready, they can be used within ConfigBox.

Integrating your ShapeDiver 3D Model in ConfigBox

Once your parametric 3D model is ready and uploaded on the ShapeDiver platform, you receive an embed URL and information about your model's parameters. You will use these infos in the next steps.

The basic principle is to assign a 3D model to your product and have fitting questions and answers. Then you select which questions control which 3D model parameter.

Enable 3D Visualisation in your product and supply model information

Go to your product edit screen to section Visualisation and use ShapeDiver 3D Model. You will be asked for the Embed URL; you enter it and click 'Load/refresh model parameters'. This will make the system read out parameter information for the next steps.

Open

Mind saving your product before you had to the next step.

Add questions and answers that control the visualisation

You know what can be changed in your product and which changes affect the 3D model. In this example, lets say there is a width parameter and we control it with a Configbox slider.

1. Add a question for entering a width.

Open

2. Select the ShapeDiver parameter that deals with the width

See section Visualisation in your question edit screen. There you will see a table with all parameters the model offers and their settings.

In the screenshot below you can see that the Width parameter is of type Integer and has a minimum-maximum range of 400-1500. This helps you to configure your question accordingly. In the section 'Text box settings' you can set appropriate input validation and default values - be sure to only allow customer inputs that your 3D model can handle.

Open

3. Save the question and see results

After saving your Width question will be ready and you can see how the model changes on the configurator page.

Parameter types and appropriate question settings

There are various parameter types in ShapeDiver and you choose the appropriate ConfigBox question type to control them.

Integer and Real

This parameter type typically accepts whole numbers (Integer) or decimal numbers (Real) and have a certain minimum/maximum range.

Appropriate question types

• Text box or slider with input validation and default value

Choices or StringList

Choices parameters have a set of possible values. You can see the possible choices in the parameter details when you pick a parameter in your question.

Appropriate question types

• Radio buttons

• Dropdown

• Checkbox

• Clickable Images

When you select a Choices parameter in your question, then you will see additional settings in your question's answers. On the right side of the answer edit screen you will see a section Visualisation and a dropdown with the choices of that parameter. 

Boolean

Boolean is essentially a yes/no switch. This type works with all question types that have predefined answers.

Appropriate question types

• Radio button

• Dropdown

• Checkbox

• Clickable Images

Image uploads

Currently, ShapeDiver does not have a specific parameter type for image uploads and instead you have type 'string'. Your model engineer will tell you directly which parameter is actually for image uploads.

Appropriate question types

• File Upload

Be sure to allow only image types png, jpg and gif and set an appropriate file size restriction to improve load time.

String

This is for arbitrary text inputs. Mind that image uploads currently also use the 'String' type (your model engineer will tell you which are actually image uploads).

Appropriate question types

• Text box

• Multiline text box

• Calendar

• Choices plus text box

Color

This type is for selecting a color. ConfigBox has two question types that can communicate a color to the ShapeDiver Model - 'RAL color' and 'Color Picker'

Appropriate question types

• RAL color picker

• Color picker