Restoring Original Material States Including Textures

Customization
1

Hi Shapespark community,

I’m working on a project where I need to dynamically modify materials in Shapespark and later restore them to their original state using a reset button. This includes both materials with solid colors and those with textures assigned to baseColorTexture.

To achieve this, I am storing the initial properties of each material, including:

  • HSL values (hue, saturation, lightness) using baseColor.getHSL()
  • Texture reference by capturing material.baseColorTexture
  • Texture ID by accessing material._correctedBaseColorTexture.texture.id (for materials with textures)

Issue Encountered

While the approach works well for materials without textures, I am having trouble restoring textures correctly after applying changes.

  • When I store material.baseColorTexture, it seems like I cannot directly reassign it later.
  • I tried using material.baseColorTexture = storedTexture; but it does not revert correctly.
  • I also tried tracking the texture ID (material._correctedBaseColorTexture.texture.id), but I could not find a method in the API to retrieve a texture by ID.

My Questions:

  1. How can I properly restore a material’s original texture once it has been modified?
  2. Is there an API method to retrieve a texture using its stored ID?
  3. Is there a recommended way to store and reapply baseColorTexture for materials that have it?

I would appreciate any insights or recommendations from the community. Thank you for your help!

Best regards,
Angel Castro

1 Like
2

We have the same issue to resolve, is there any function within the API to be able to control these parameters?

3

@Angel_Castro, could you compare your code with the below script? I’ve just tested that this script correctly swaps material’s base color texture between the original one and a one created with createTextureFromHtmlImage.

<script>
  const viewer = WALK.getViewer();

  let nextTexture = null;

  const swapTextures = () => {
    const material = viewer.findMaterial('<MATERIAL>');
    const img = document.getElementById('<IMG>');
    nextTexture = viewer.createTextureFromHtmlImage(img);

    setInterval(() => {
      const previousTexture = material.baseColorTexture;
      material.baseColorTexture = nextTexture;
      nextTexture = previousTexture;
      viewer.requestFrame();
    }, 1000);
  };

  viewer.setMaterialEditable('<MATERIAL>');
  viewer.onSceneReadyToDisplay(swapTextures);
</script>