# How to increase opacity of isolated nodes

**URL:** <https://forum.techsoft3d.com/t/how-to-increase-opacity-of-isolated-nodes/4608>\
**Category:** HOOPS Visualize Web\
**Tags:** code, sample, webviewer, learn\
**Created:** [May 5, 2025, 1:54pm UTC](https://forum.techsoft3d.com/t/how-to-increase-opacity-of-isolated-nodes/4608 "2025-05-05T13:54:26Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![raja.r](https://avatars.discourse-cdn.com/v4/letter/r/a3d4f5/32.png) [@raja.r](https://forum.techsoft3d.com/u/raja.r)\
**Post date:** [May 5, 2025, 1:54pm UTC](https://forum.techsoft3d.com/t/how-to-increase-opacity-of-isolated-nodes/4608/1 "2025-05-05T13:54:26Z")

</div>

![image](https://us1.discourse-cdn.com/flex020/uploads/techsoft3d/original/2X/6/64b2709b0ac75797060232075f27dda0b3e33c3d.jpeg)

```auto

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)

  }

```

---

<div class="post-metadata">

**Author:** ![tino](https://avatars.discourse-cdn.com/v4/letter/t/9dc877/32.png) [@tino](https://forum.techsoft3d.com/u/tino)\
**Post date:** [May 5, 2025, 2:38pm UTC](https://forum.techsoft3d.com/t/how-to-increase-opacity-of-isolated-nodes/4608/2 "2025-05-05T14:38:32Z")

</div>

Hello @raja.r,

It’s possible to set the opacity level for a given set of nodes via the function [setNodesOpacity](https://docs.techsoft3d.com/communicator/latest/api_ref/viewing/classes/Model.html#Model.setNodesOpacity).

Thanks,  
Tino

---

<div class="post-metadata">

**Author:** ![raja.r](https://avatars.discourse-cdn.com/v4/letter/r/a3d4f5/32.png) [@raja.r](https://forum.techsoft3d.com/u/raja.r)\
**Post date:** [May 5, 2025, 3:02pm UTC](https://forum.techsoft3d.com/t/how-to-increase-opacity-of-isolated-nodes/4608/3 "2025-05-05T15:02:16Z")

</div>

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](https://us1.discourse-cdn.com/flex020/uploads/techsoft3d/original/2X/e/e347cc208ca4416eb335abf46ce2d1adef8f6f0c.gif)

---

<div class="post-metadata">

**Author:** ![tino](https://avatars.discourse-cdn.com/v4/letter/t/9dc877/32.png) [@tino](https://forum.techsoft3d.com/u/tino)\
**Post date:** [May 5, 2025, 5:04pm UTC](https://forum.techsoft3d.com/t/how-to-increase-opacity-of-isolated-nodes/4608/4 "2025-05-05T17:04:18Z")

</div>

@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](https://docs.techsoft3d.com/communicator/latest/api_ref/viewing/classes/Model.html#Model.getNodesHaveTransparency) along the way to confirm at what point the transparency is changing.

---

<div class="post-metadata">

**Author:** ![raja.r](https://avatars.discourse-cdn.com/v4/letter/r/a3d4f5/32.png) [@raja.r](https://forum.techsoft3d.com/u/raja.r)\
**Post date:** [May 7, 2025, 1:46pm UTC](https://forum.techsoft3d.com/t/how-to-increase-opacity-of-isolated-nodes/4608/5 "2025-05-07T13:46:32Z")

</div>

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.

```auto
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)
  }

```

---

<div class="post-metadata">

**Author:** ![tino](https://avatars.discourse-cdn.com/v4/letter/t/9dc877/32.png) [@tino](https://forum.techsoft3d.com/u/tino)\
**Post date:** [May 7, 2025, 5:47pm UTC](https://forum.techsoft3d.com/t/how-to-increase-opacity-of-isolated-nodes/4608/6 "2025-05-07T17:47:50Z")

</div>

@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

---

<div class="post-metadata">

**Author:** ![raja.r](https://avatars.discourse-cdn.com/v4/letter/r/a3d4f5/32.png) [@raja.r](https://forum.techsoft3d.com/u/raja.r)\
**Post date:** [May 8, 2025, 4:05pm UTC](https://forum.techsoft3d.com/t/how-to-increase-opacity-of-isolated-nodes/4608/7 "2025-05-08T16:05:58Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![tino](https://avatars.discourse-cdn.com/v4/letter/t/9dc877/32.png) [@tino](https://forum.techsoft3d.com/u/tino)\
**Post date:** [May 8, 2025, 5:25pm UTC](https://forum.techsoft3d.com/t/how-to-increase-opacity-of-isolated-nodes/4608/8 "2025-05-08T17:25:53Z")

</div>

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](https://docs.techsoft3d.com/communicator/latest/api_ref/viewing/classes/WebViewer.html#webviewer) class that admittedly may or may not help. Immediately **before** `applyElements()` is called, first call [pauseRendering](https://docs.techsoft3d.com/communicator/latest/api_ref/viewing/classes/WebViewer.html#WebViewer.pauseRendering). And immediately **after** `applyElements()` is called, call the function [resumeRendering](https://docs.techsoft3d.com/communicator/latest/api_ref/viewing/classes/WebViewer.html#WebViewer.resumeRendering).