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.