Assets generated by our Pictofit Content Service always come with a basic .json configuration file. This ensures that the product is display as intended in our viewer. Usually, you will want to customize the presentation of an object by adding a background, skybox, scene elements, etc. This can by done very easily by using scene cascading. This feature allows you to load multiple configuration files on top of each other and thereby combine them. Furthermore, you can also switch out specific levels of the cascade. This allows you to e.g. interactively change the background or lighting. Loading a configuration on top of another is done by setting the cascade parameter of loadConfigFromURL(url : string | Array<string>, cascade : boolean = false) : Promise<void> to true. This tells the viewer to apply the configuration on top instead of replacing them.

// ...
viewer.loadConfigFromURL("assets/background.json", true);
viewer.loadConfigFromURL("assets/product.json", true);
// ...
JSON

This will load background.json and apply product.json on top of it. The following images show how that could look.

You can also remove a cascade by invoking public unloadConfig() : void. Thereby, the topmost configuration on the stack will be unloaded. By defining multiple configurations for a cascade level, you can cycle through them using nextConfiguration(cascadeIndex : number = 0) : Promise<void> and previousConfiguration(cascadeIndex : number = 0) : Promise<void> respectively. How this is done can be seen in the following example:

// ...
viewer.loadConfigFromURL("assets/background.json", true);
viewer.loadConfigFromURL(["assets/product-1.json", "assets/product-2.json"], true);
// ...
viewer.nextConfiguration(1); // to cycle the products
// ...
JSON

You can also share (and switch out) materials between cascade levels. This is very handy if you e.g. want to change the appearance of a mannequin. If a configuration depends on elements defined by a upstream configuration, make sure to wait for it to finish loading before you start loading the downstream configuration. The loadConfigFromURL(...)method returns a promise that you can use for this:

// ...
viewer.loadConfigFromURL(["assets/material-1.json", "assets/material-2.json"], true).then(() => {
  // to make sure that the materials have been loaded
  viewer.loadConfigFromURL(["assets/mannequin-1.json", "assets/mannequin-2.json"], true);
});
// ...
JSON

Please have a look at this sample to see scene cascading in action.