Layer-based configurator¶

Open the example · JavaScript source

This migration example keeps every product variant in one .webex scene. The page selects a variant by changing each layer's ordinary obj_visible property:

function setGroupVisibility(group, visible) {
  layerGroups[group].forEach(layer => {
    viewer.setProperty(layer, 'obj_visible', visible ? 'true' : 'false');
  });
}

There is deliberately no setLayerVisible command: visibility is data, so it uses setProperty. Business rules such as mutually exclusive heads, dependent accents, price, and button state remain normal page logic.

This technique is simple but downloads every variant up front. For a large catalog, use the multipart configurator, which fetches only selected parts. The "old" in the scratchpad name describes its single-scene architecture; its code has been migrated to the current SDK.