20 Sep 2024

Customize viewer state using filter object - part 1

Revit Room Before and After

When focusing on a certain object or a particular state in the APS viewer, we get the viewer state using let state = viewer.getState(); and then restore it using viewer.restoreState(state); This works fine on most occasions, except when Revit Rooms are not hidden. restoreState selects the Revit room and the user cannot see anything inside of the room, as shown on the left side of the above image, ideally, we want only to store the camera angles, not make the room opaque.

To get to the viewer's state without making the room opaque, we have to use only part of the viewer.getState() involving the camera angles. If you open the viewer.getState() object, you can notice there are multiple properties like cutplanes, renderOptions etc..

{
   "seedURN":"<urn>",
   "objectSet":[{...}],
   "viewport":{"name":"","eye":[...],"target":[0,0,0],"up":[...],"worldUpVector":[0,0,1],...},
   "autocam":{...},
   "renderOptions":{...},
   "cutplanes":[...]
}

To get the camera angles, we just need eye, target and up property from viewport, as shown below:

{
   "viewport":{
      "eye":[...],
      "target":[...],
      "up":[...]
   }
}

We can use the filter object consisting of only the values we need from the getState function to get the modified state with only camera angles and achieve the visual like the right side of the above image. We will be using the instance of the variable viewer that we have defined at the time of initialization.

const filterObject = {viewport:{"eye":true,"target":true,"up":true}};
let newState = viewer.getState(filterObject);
viewer.restoreState(newState); 

In the next part we'll demonstrate customizing objectsets and renderoptions.

Related Article