How to increase opacity of isolated nodes


async applySliceElements(viewer, slicedNodeIds) {
    
    await this.setXrayModeSettings(viewer);
    viewer.sliceNodeIds = slicedNodeIds;
    await viewer.model.setInstanceModifier(
      Communicator.InstanceModifier.DoNotSelect,
      [viewer.model.getAbsoluteRootNode()],
      true
    );
    await viewer.model.setInstanceModifier(
      Communicator.InstanceModifier.DoNotSelect,
      slicedNodeIds,
      false
    );
    await viewer.model.setInstanceModifier(
      Communicator.InstanceModifier.DoNotXRay,
      slicedNodeIds,
      true
    );
    await this.setNodesVisibility(viewer, slicedNodeIds, true);

  // JUST I AM TRING NOT SURE!
    setTimeout(async ()=>{
      await viewer.model.setInstanceModifier(
        Communicator.InstanceModifier.OverrideSceneVisibility,
        slicedNodeIds,
        true
      );
      await this.setNodesColors(slicedNodeIds, "#8F00FF");
      await viewer.model.setNodesVisibility(slicedNodeIds, true);
    }, 3000)

  }

Hello @raja.r,

It’s possible to set the opacity level for a given set of nodes via the function setNodesOpacity.

Thanks,
Tino

In my 3D viewer application, the model initially renders with correct opacity. However, after a component rerender or some user interaction, the model suddenly becomes much more transparent or faded. I suspect something is unintentionally altering the material or opacity settings during the rerender process.

Has anyone faced a similar issue where the model’s appearance changes after rerender? What are the best practices to ensure material settings (like opacity and transparency) persist across renders?
Screen Recording 2025-05-05 at 8.34.38 PM

@raja.r,

It’s not clear to us what is causing the opacity “reset” as shown in your GIF. Our recommendation is to step through your code and use getNodesHaveTransparency along the way to confirm at what point the transparency is changing.

i have tried with below code printing looks like the before x-ray and after x-ray also the transparance is true for node. when ever i interact with model it slightly faded away with color.

applyElements(viewer, slicedNodeIds) {
    const before = await viewer.model.getNodesHaveTransparency(slicedNodeIds);
    console.log ('Before.getNodesHaveTransparency', before);// Before & true
    if (viewer === this._viewer) {
      viewer.view.setXRayOpacity(0.01, Communicator.ElementType.Faces);
      viewer.view.setDrawMode(Communicator.DrawMode.XRay);
      viewer.view.setLineVisibility(false);
    }
    await viewer.model.setInstanceModifier(
      Communicator.InstanceModifier.DoNotSelect,
      [viewer.model.getAbsoluteRootNode()],
      true
    );
    await viewer.model.setInstanceModifier(
      Communicator.InstanceModifier.DoNotSelect,
      slicedNodeIds,
      false
    );
    await viewer.model.setInstanceModifier(
      Communicator.InstanceModifier.DoNotXRay,
      slicedNodeIds,
      true
    );
    await viewer.model.setNodesVisibility(slicedNodeIds, true);
    const after = await viewer.model.getNodesHaveTransparency(slicedNodeIds);// After & true
    console.log ('After.getNodesHaveTransparency', after)
  }

@raja.r,

With a few modifications, I was able to run your code snippet directly in the default Web Viewer. I don’t think the issue is in your code snippet.

It’s hard to tell in the GIF you previously attached but it looks like you are selecting an icon in the UI that is ultimately resetting the transparency. You can try inserting a breakpoint right before that function in the UI then step through the code to identify the function or functions that is affecting the transparency.

Thanks,
Tino

is there a specific order we need to follow? I’ve validated by significantly reducing the x-ray elements and checking only the colored element (violet), and I don’t see any blur. Could it be that when I first apply x-ray and isolate the element, interacting with the model causes the isolated or colored element to be moved behind the x-ray? That might be what’s creating the illusion of blur on the isolated elements?

Your async function applyElements() is making asynchronous calls and thus the execution of such calls are in linear sequential fashion. For a particularly large file, there may be a delay when making successive calls in order for the function to fully complete.

There are two functions in the WebViewer class that admittedly may or may not help. Immediately before applyElements() is called, first call pauseRendering. And immediately after applyElements() is called, call the function resumeRendering.