Introduction

The following series of articles is meant to add an additional layer of complexity to the previous example. As mentioned in the high-level overview, it's best to think of all of these steps as means to a particular end, but the sequence itself does not imply strict adherence. For example, it is completely acceptable to execute Step 4 prior to Step 3. The end result would be the same.

As opposed to the previous sequence which covers the build of a simple box configurator, this walkthrough may venture into slightly more esoteric territory with regard to 3D concepts. If this is out of your comfort zone, it is worth taking a few moments to read through some 3D Basics.

Below is the configurator we will build in this walkthrough:

The configuration requirements are as follows:

• User has the ability to select from two rim styles
• User has the ability to choose from 4 possible metal finishes for the rim

Objectives of this Walkthrough

For the first time, a real product will be used! Albeit, a very simple product. The main objectives for this walkthrough are as follows:

• Understand the use of Part Reference Item Attributes
• Understand how tags are leveraged within Part Reference Item Attributes to ease management of configuration experiences.
• Understand how Visual Attributes are leveraged within Visual Rules to support configurable Catalog Items.

Step 1: Create Catalog Items

5 Catalog Items are necessary to support the build of this configuration experience. 4 Catalog Items to account for each of the available metal finishes of the wheel, and one Catalog Item to house the wheel Product and its supporting configuration experience.

Create the Metal Finish Catalog Items

Creating the metals as dedicated Catalog Items might be a bit of an abstraction, but this setup allows for ease of management of assets at scale. We will speak to this a bit more later in this series. For now, it is time to create the Catalog Items representative of the metal finishes.

1.) Navigate to Catalog
2.) Hit Add Item
3.) Provide a Name: "Gold"
4.) Add a Tag: "metal" (hit Enter after typing in "metal")
5.) Hit Save Item

The aforementioned steps are executed for each of the remaining Metal finishes (Titanium, Steel, and Chrome).

Create the Wheel Catalog Item

This is the Catalog Item which references the Asset we wish to use within the configuration experience. We must therefore set up all relevant Item Attributes on this record.

Create the Style Attribute

1.) Navigate to Catalog
2.) Hit Add Item
3.) Provide a name (Wheel, or something of the sort)
4.) Hit Add Attribute
5.) Set Name: "Style"
6.) Set Type: String
7.) Hit Add
8.) Within the "Enter your string values " field, include values "A" and "B". NOTE: after entering a value, hitting Enter will ensure the value is retained.

Create the Metal Attribute

9.) Hit Add Attribute
10.) Set Name: Metal
11.) Set Type: Part Reference
12.) Hit Add
13.) Within the "Search for Parts or #tags" field, include "#metal"

14.) Hit Save Item

Reflect

As expected, based on the previous example, we are again left with a Catalog Item and no associated visual representation (yet).

Of particular importance here is the Part Reference leveraging tags. The pick list for the Metal Item Attribute is dynamically populated due to the inclusion of the "metal" tag on the respective metal finish Catalog Items, and the "#metal" on the Part Reference Attribute of the Wheel Catalog Items.

From a maintenance perspective, this is ideal. We can simply remove a tag from an existing Catalog Item if we no longer offer a given wheel in this finish. Conversely, we can create another Catalog Item, add the appropriate tag, and straightaway any artist creating the supporting assets for this experience knows what is required by simply looking at the attribute values.

Step 2: Import Assets

Drag and drop to both the Asset Panel and the Asset Listing is supported.

Reflection

The single FBX file of the imported wheel model, which contained all geometry and all requisite materials was split into individual assets. Meaning, there now exists a Model Asset for the geometry, a Material Asset for each material from the imported file, and dedicated image files stored as Texture Assets in the Threekit Platform. 

Further refinement of the imported Assets can be made within the Threekit Editor. Assets can also be refined within their native system, then merged accordingly once re-imported to the Threekit Platform.

Step 3: Associate Assets with Catalog Items

We have all of the configuration information present on the Wheel Catalog Item, and we now have all requisite Assets within the Asset Library. We can now make the association between the Catalog Items and the Assets.

Associate Asset with Catalog Item

The Metals

1.) Navigate to the "Gold" Catalog Item
2.) Hit Edit
3.) In the Asset Dropdown type "Gold"
4.) Select the "Metal Gold" Asset
5.) Hit Save Item
Repeat these steps for the Steel, Chrome, and Titanium Catalog Items.
Now that the Metal Catalog Items are associated with corresponding Assets, the preview presents the Material on a totem.

The Wheel

1.) Navigate to the "Wheel" Catalog Item
2.) Hit Edit
3.) In the Asset Dropdown type "Simple Wheel"
4.) Select the "Simple Wheel" Asset
5.) Hit Save Item

Present State

Reflect

The configurator will not respond to user-interaction at this point. We still need to make the connection to the Asset by way of mapping the Item Attributes to Visual Attributes. We can then create Visual Rules to manipulate the visual representation based on user input.

Step 4: Establish Visual Logic

All relevant configuration information is present, all Catalog Items have been associated with requisite Assets. Now, it is time to ensure the visual representation adjusts with fidelity based on user-interaction.

Establish Visual Logic

Prior to creating Visual Attributes and Visual Rules, it is important to note some relevant qualities of the Asset we associated with the Wheel Catalog Item in the previous step. The Asset itself contains both styles of wheel rim. Also notable, the scene hierarchy presents to us the individual mesh nodes that will be targeted for application of the appropriate metal finish.

Create "Style" Visual Attribute

Same idea as the first walkthrough; we need to ensure that user-input (Item Attribute Values) map to the Visual Attribute Values which are leveraged within the Visual Rule:
1.) Navigate to the Wheel Asset
2.) Hit Launch Editor
3.) Switch to Logic Mode
4.) Hit Add Attribute
5.) Select String
6.) Set Name: "Style"
7.) Enter Options: "A" and "B" (hit Enter to store values)
8.) Hit Done

Create "Set Style" Visual Rules

Now that we have the necessary Visual Attribute, the Rules must appropriately set the visibility of Styles A and B (shown below).

The steps for creating the Visual Rules to address this requirement are as follows:
1.) Navigate to Rules (assuming you are picking up where you left off on Step 8 above)
2.) Hit Add Rule
3.) Set Name: Set Style A
4.) Hit Add Condition
5.) Set fields: Style is Equal to A
6.) Hit Add Action
7.) Select set visibility
8.) Set fields: Set Wheel_Style_B To False
9.) Hit Add Action
10.) Select set visibility
11.) Set fields: Set Wheel_Style_A To True
12.) Hit Done

Repeat the same steps (inverted, of course) to create the rule for setting Wheel Style B

Create "Metal" Visual Attribute

Now that String and Number Visual Attributes are a known commodity, we can finally leverage the most powerful Visual Attribute of all, the Asset Visual Attribute. This Visual Attribute type allows us to create Asset References. For the purpose of this use-case, we are seeking to apply various metal Material Assets to certain areas of the wheel. The creation of this Asset Visual Attribute effectively informs the The Threekit Platform we are looking to use Material Assets from our Asset Library in some way (that "way" will be handled in the Visual Rule below). We will expand on the concept of Asset Visual Attributes in future walkthroughs, for now, the steps to create are as follows:

1.) Hit Add Attribute
2.) Select Asset
3.) Set Name: "Metal"
4.) Set Type: Material
5.) Hit Done

Create "Set Metal" Visual Rule

Now that the system knows we desire to apply some materials from our library to some thing in our library, metal to the wheel rim, in this case, we can create the Rule to target application of the Material to the necessary Wheel meshes.

1.) Navigate to Rules
2.) Hit Add Rule
3.) Set Name: "Set Metal"
4.) Hit Add Action
5.) Select set material
6.) Set: Valve, Lugs, Rim, Valve B, Lugs B, Rim B To Attribute / Metal
7.) Hit Done

Reflect

The loop has now been closed. We created an easily maintainable Metal Attribute in the first step, and now, simply by toggling to "Attribute" in the Action, we have created a situation in which everything flows from our already existing product data. This is one of the lynchpins of the Threekit Platform in action: ownership of the configuration experience, and maintenance thereof, in the hands of the individual who knows the product catalog best. Not a developer, not an artist, but the manager of the Product Catalog, the Merchandiser.

To complete the reflection, here is a diagrammatic representation of the "Metal" Item Attribute and how it was leveraged in the visual representation:

Last but not least, test the configurator!

Step 5: Test the Configuration Experience

In all its glory, the wheel configurator!