Introduction
The following series of articles is meant for anyone looking to get familiar with creating Interactive 3D Experiences utilizing the toolset of the Threekit Platform. This walkthrough requires no knowledge of 3D whatsoever, no 3D or web development skill, no advanced knowledge of complex configuration scenarios, and no 3D collateral whatsoever. The goal is to set up an extremely simple box configurator. Go ahead, interact with the Threekit Player:
The steps in this walkthrough are strictly declarative. The intent is to illustrate key aspects of the Threekit Platform's architecture as well as emphasize the simplicity of setting up an interactive configuration experience. We do not expect you to market or sell this box.
Objectives of this Walkthrough
The overarching objective of the walkthrough is to understand the connection between product information and its corresponding visual representation in the context of creating a configurator. On a more granular level, the objectives are as follows:
- Understand the aspects of a Catalog Item instrumental to creating a configurator
- Understand the application/purpose of String and Number Catalog Item Attributes
- Understand how Item Attributes map to Visual Attributes, which are leveraged within Visual Rules to modify an Asset.
Step 1: Create the Catalog Item
As noted in the high-level overview, product data typically exists in some form, be it in an ERP, a PIM, a Spreadsheet, et al. The Catalog within the Threekit Platform is meant to accommodate this existing catalog architecture as much as possible.
Therefore, as we are building to the configuration experience on the previous page, the intrepid "sometimes visible and occasionally wide" box, it is assumed that the ability to hide/show the box, or change its width, were qualities already tethered to this box "product" in existing systems.
In the parlance of Threekit, the ability to toggle visibility and set the width are known as Item Attributes. The Yes/No from the visibility pick list and the open-ended value set in the field for width are known as Attribute Values.
Create the Box Catalog Item
Our first step is to ensure these Item Attributes and corresponding values (where applicable) are accounted for within the Catalog of Threekit. The manual steps for this setup are included below.
1.) Navigate to Catalog
2.) Hit Add Item
3.) Provide a Name: "Box"
4.) Hit Add Attribute
5.) Set Name: "Visible" (or "Is Visible")
6.) Set Type: String
7.) Hit Add
8.) Within the "Enter your string values " field, include values "Yes" and "No". NOTE: after entering a value, hitting "enter" will ensure the value is retained
9.) Hit Add Attribute
10.) Set Name: "Width"
11.) Set Type: Number
12.) Hit Add
13.) Hit Save Item
Reflect
You have created your first Catalog Item in Threekit. After hitting Save Item you are likely staring at an ominous panel making clear you have NO 3D ASSET ASSIGNED. The dichotomy between product information/data as untethered from corresponding visual representation is a concept covered in both the Visualization Workflows and Implementing Interactive 3D high-level overview. As we move forward with this walkthrough, we will explore this concept further as it is central to management of Assets at scale. For now, let's find that box.
Step 2: Create the Asset
Now we have product information, including the roadmap for how the product is to be configured,
It's time to create the Asset! An Asset in Threekit refers to any piece of collateral used to compose the stunning visual representations of whatever it is you sell.
Create the Asset
The steps to do so are as follows:
1.) Navigate to Assets
2.) Hit Create Asset
3.) Provide a Name: "Box"
4.) Select Model
5.) Hit Save Asset
6.) Hit + New
7.) Select the Box
8.) Verify the Auto-Save has executed (to the right of the Selection Dropdown)
9.) Navigate back to Catalog
Reflect
We created a Catalog Item with all product info and a model corresponding to said Catalog Item in the Asset Library. It is now time to associate these two records.
Step 3: Associate Asset with Catalog Item
Flipping the script a touch, we will first take the actions, then assess the state.
Associate Asset with Catalog Item
1.) From the Catalog, select the "Box" Item
2.) Hit Edit
3.) Enter "Box" into the Asset field, and select the "Box" Asset
4.) Hit Save Item (at the bottom of the page)
NOTE: The Asset and the Catalog Item do not require the same name.
Present State
Here is a representation of the configurator in its current state. Try toggling the Visibility Attribute and enter some values into the Width field.
Reflect
Much to our box-config chagrin, the visual representation is not responding to user interaction. This was intentional as we want to illustrate the two distinct sets of Logic present in the Threekit Platform. Item Attributes have no automated connection to the visual representation. We have to establish the connection between the Item and the Asset.
Step 4: Establish Visual Logic
We are nearing the end of our journey, on the precipice of never before seen levels of engagement during the purchasing experience of our flagship product, the "sometimes visible and occassionally wide" Box. At a high level, let us review the steps taken thus far:
1.) All relevant product information, likely sourced from some ERP or PIM, was included on the newly created Box Catalog Item
2.) A visual representation of the Box Catalog Item was created
3.) The visual representation was associated with the Box Catalog Item
Establish Visual Logic
Similar to Catalog Items, Assets also have an Attributes/Rules structure. On the Asset side, these are referred to as Visual Attributes and Visual Rules. Relative to the objectives from the introduction of this walkthrough, the mapping between to two sets of Attributes takes place by way of literal equivalence.
At a high level...
...we are accomplishing two main things when we take these steps:
1.) Creation of Visual Attributes ensures the connection of Item Attributes created in the previous step to the Visual Attributes on the Asset.
Why? Creating like-named Attributes on both Items and Assets ensures user-input commutes to the Visuals such that they can be leveraged within Visual Rules.
2.) Creation of Visual Rules ensures the visual representation is manipulated with fidelity.
Why? In a configuration experience, Attribute values often drive modification of the visual representation in some way. Visual Rules leverage Visual Attributes, allowing us to dictate that behavior.
The tactical steps to instituting the supporting Visual logic are below.
Create Visual Attributes
This is the step where the connection is made between the Item Attributes and the Visual Attributes. The mapping between these Attributes sets occurs via literal equivalence: "Visible" must be the name for the Item Attribute and the Visual Attribute.
1.) Navigate to the Asset Listing by clicking on Assets
2.) Select the "Box" Asset from the Asset Listing
3.) Navigate to Logic Mode by way of the Editor dropdown
4.) Hit Add Attribute
5.) Select String
6.) Set Name: Visible (must be exactly the same as the corresponding Item Attribute, case-sensitive)
7.) Set Options: "Yes" and "No" (Again, hit Enter to store values)
8.) Hit Done
9.) Hit Add Attribute
10.) Select Number
11.) Set Name: Width
12.) Hit Done
Create Visual Rules
We can now drive modification of the Asset on the basis of the Visual Attribute values by creating Visual Rules.
Visibility Rules
These two rules ensure the Yes/No pick list controls visibility of the Box
1.) Navigate to the Rules tab
2.) Hit Add Rule
3.) Set Name: "Visible - Yes"
4.) Hit Add Condition
5.) Set fields: Visible is Equal to Yes
6.) Hit Add Action
7.) Select set visibility
8.) Set fields: Box to True
9.) Hit Add Rule
10.) Set Name: "Visible - No"
11.) Hit Add Condition
12.) Set Fields: Visible is Equal to No
13.) Hit Add Action
14.) Select set visibility
15.) Set fields: Box to True
Width Rule
This rule ensures user-input manipulates the width of the box.
1.) Hit Add Rule
2.) Set Name: "Set Width"
3.) Hit Add Action
4.) Select set property
5.) Set fields: Set Box > Polymesh > Box > width To Attribute Width
Reflect
Of particular importance here is the 5th step in the creation of the Width Rule whence the toggle providing the choice between value/Attribute is set to "Attribute". This ensures the the action taken to modify the width of the box uses the value passed to it from the Width Visual Attribute. As we established in the previous step, the Width Visual Attribute has its value passed from the like-named Item Attribute. Thus, the configurator is now fully responsive to user input and you have built your first configurator on the Threekit Platform!
Step 5: Test the Configuration Experience
As always, be sure to test your configurator:
Check out further examples.
Quick links