Interacting with the Attributes through the Threekit Javascript API
Overview
Once the player has been initialized in a webpage using the following guide - embedding the Threekit Player, you should see the Threekit player load up your initial configuration as defined in your Organization on the Threekit platform.
From there we can use the Threekit API to get the Configurator for the item we have initialized the player with. The item’s configurator is how we interact with the Attributes for that item, where we follow a simple loop of using the Configurator to get the Attributes dataset, presenting them to the user, and subsequently passing their selection on to the Configurator for it to be applied.
Code Examples
You will need the following commands to achieve this.
The following command will get the configurator for the initialized item and assign it a variable of your choice.
To get the dataset for the attributes, we simply run:
This function will return all the attributes, which includes both the options for the attribute and the selected value if any.
Finally when the user makes their selection, we pass that back on to the configurator as an object, where each key matches an Attribute and the value contains the users selection:
It is worth noting that while most Attribute types (i.e. String, Color, Number) simply require us to pass the value to the setConfiguration function as demonstrated above, this is not true for Part Reference or Asset type Attributes. Those require the value itself to be an object containing the assetId of the item selected:
Threekit's Configurator API is initialized by calling player.getConfigurator()
This can be initialized at anytime but typically it's initialized with the player and stored somewhere for later use.
Attribute Types
It's worth mentioning the difference between primitive values & part reference values. Primitive values (e.g. String, Number, etc) are straightforward.
Primitive Values
However, reference attributes (e.g. materials, parts, etc.) receive the id of the Threekit Item/Asset. For example, to set the Wheels attribute in this example, we need to pass the id of the Wheel Item as the value.
Part References
Setting Values
Let's begin with an example that takes values from an external form and sets the player's configuration.