Multi-part configurator¶

Open it live: maverickrender.com/scratchpad/viewer-multipart

A jewelry configurator over a single scene with interchangeable parts: two ring bands, an optional accent, and six center-stone heads the customer can swap. (Full source and app.js.) The trick is that the scene carries every variant as its own layer, and the page simply decides which layers are visible.

Layers as variants¶

The layer names are not invented by the page: they are the scene's own layers, exactly as they appear in the Excelsior Editor (and they are case-sensitive). Name your layers deliberately when you prepare the model, and the configurator falls out naturally. A plain map groups them per component:

var layerGroups = {
  'ring-base':   ['01 Metal Base'],
  'ring-band':   ['02 Metal Band'],
  'accent-base': ['01 Gem Accent', '01 Metal Accent'],
  '03':          ['03 Metal Em', '03 Gem Emerald'],
  '08':          ['08 Metal Ro', '08 Gem Round'],
  // ...
};

function setGroupVisibility(group, visible) {
  layerGroups[group].forEach(function (layerName) {
    wasm_i('set_string', layerName, 'obj_visible', visible ? 'true' : 'false');
  });
}

Business rules live in your page¶

Everything else is ordinary front-end logic. The head styles are mutually exclusive: show the newly selected group, hide the previous one.

function selectHead(group) {
  if (activeHead === group) return;

  setGroupVisibility(activeHead, false);  // Hide the previous head.
  activeHead = group;
  setGroupVisibility(group, true);        // Show the new one.
}

The accent band is only offered while the ring band is on, and pose switching is another globals_pose_id write. The viewer just renders the state your page sets; pricing, stock, and option constraints stay where they belong, in your code.

For the full picture of what a configurator can grow into, see the mockup webshop at catalog.maverickexcelsior.com.