3D Configurator Designer

We have created an application that allows users to create rule based 3D product configurators with absolutely no programming experience. If your needs are outside the capability of our rule based model, we also allow for scripting, through javascript hooks. The purpose of this document is to describe how to use this tool to create configurators, and how to include them on your web page, or in a store page with one of our integration partners.

Actions

Actions are the base functionality that can be applied to your scene, they are our rules. Each action will perform an operation on the scene using the supplied data. Actions are separated into 3 categories: basic, advanced, and product based. The basic actions are where you should start and potentially stay depending on the complexity of your configurator. Product actions are specifically for working with our integration partners (see below).

Basic Actions

Name	Target	Value	Description
Node Visibility	Node(s)	True or False	Hide or show node(s).
Node Material	Node(s)	Material	Apply material to node(s).
Play Clip	Animation Clip	N/A	Play an animation.
Move Camera	Camera	Duration (ms)	Animate to camera in duration.
Attribute Visibility	Attribute	True or False	Hide or show attribute in all forms (see `Configurator Forms` below).

Product Actions

Name	Target	Value	Description
Product Data	Product Handle	Quantity	Set data assosiated with a product (ex. quantity).
Product Variant	Product Handle	N/A	Tie option attribute to product variant.
Product Quantity	Product Handle	N/A	Tie number attribute to product quantity.

Advanced Actions

Operator Property: This is our most generic action, it can set any property that can be set within the editor. You could even achieve most of the basic options above using only this action. For example if you wanted to set the baseMap of a material you would use the following operator property action:

Node: Node Name
Plug: Physical
Property: baseMap
Value: Texture Name

Attribute Value: This action is for setting the value of an attribute that you have created within the configurator. The reason this action is more advanced is because it is easy to use this action and make your rule sets very complicated. It will quickly become unclear how your rules are being applied when rules change the value of other rules, so keep that in mind when using this action.

Use Variable

Actions have the option to apply a variable as the value for the operation in question. So for example if you have a Number attribute and you are setting the width of a PolyMesh you would be prompted with the option to use that Number instead of a static value.

Attributes

Attributes are used to define how your actions will be applied, they are our rule sets. Here is a list of all attribute types currently available:

Boolean
Color
String
Number
Options

Values: Values are what are being evaluated when you execute an attribute. Each attribute type defines its values based on the type, so for example, Boolean has the values "true" and "false". The Options type allows you to add any number of named values to it. So for example, if you have an Options attribute with the name "Size", you could add the values: "Small", "Medium", "Large".

Actions: You can add any number of actions either at the top level of an attribute or at the value level. Actions at the top level will be evaluated every time a value within the attribute is executed.

Configurator Forms

The configurator form is a container of attributes that will be converted into a set of ui elements, which will be used to interface with your configurator. You can have any number of forms so you are able to showcase your configurator in different ways. When you add an attribute to a form, you are given the option (Display As) to specify how that element will be displayed (ex. slider, dropdown, radio buttons, etc).

Using Your Configurator (API)

To see your configurator in action, here is an example of using a configurator form with the name "Display".

<body style="height: 95%; width: 95%;">
  <div id="player" style="position: absolute; top: 0; left: 0; width: 60%; height: 80%;" ></div>
  <div style="position: absolute; top: 0; left: 60%; width: 40%; height: 80%;" >
      <div id="configurator"></div>
  </div>
  <script src="https://clara.io/js/claraplayer.min.js"></script>
</body>
<script>
  var threekit = { api: claraplayer('player') };
  var sceneId = '8fa64d54-1536-4acb-aefd-d79cbe9a73d2';
  threekit.api.sceneIO.fetchAndUse(sceneId, null, { waitForPublish: true });

  threekit.api.on('loaded', function() {
    threekit.api.configuration.initConfigurator({ form: 'Display', el: document.getElementById('configurator') });
  });
</script>

You could build your own user interface and use our api to execute attribute values. So for example, say you have a select element, with the id "selectDesign", and you want to populate it with the values of the attribute named "Design" that you have setup in the configurator designer.

var ATTRIB_NAME = 'Design';
var selector = document.getElementById('selectDesign');

threekit.api.on('loaded', function() {
  var attrib = threekit.api.configuration.getAttribute(ATTRIB_NAME);

  var i = 0;
  for(i; i < attrib.values.length; i++) {
    if(attrib.values[i] !== undefined) {
      var option = document.createElement('option');
      option.text = attrib.values[i];
      selector.add(option);
    }
  }

  selector.onclick = function(ev) {
    var option = selector.value;
    threekit.api.configuration.executeAttribute(ATTRIB_NAME, option);
  }
});

If you need to perform some operation when an attribute value is executed, we emit an event which you can listen for.

threekit.api.on('configurationChange', function() {
  console.log(threekit.api.configuration.getConfiguration());
});

Please refer to our configuration api docs to learn more.

Integration Partners

Here is a list of our integration partners which link to the documentation needed to setup your configurator in their environment.

Shopify