> For the complete documentation index, see [llms.txt](https://bimwhale.gitbook.io/ifc-js/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://bimwhale.gitbook.io/ifc-js/optimization/group-objects.md).

# Hide Objects on Camera Movement

## Introduction

We can split the `structured` object into two groups - visible and hidden. Then, we can hide a group of objects during a camera move - i.e. pan, tilt, orbit, zoom.

![](/files/-MSWp1IpaolNbNtAG2h8)

The image above shows an extreme situation, were most objects are hidden. This will only reveal a skelekton. The perforance is super smooth - but the user experience might suffer.

## Group Objects

There are many ways achieve this. Here's my simple take.

```javascript
function buildScene(e) {
    let structured = e.data;
    structured.MainObject = mainObject;
    structured = buildGeometry(structured);
    /**
    * Split the structured into two groups: Visible & Hidden
    */
    let { visible, hidden } = groupStructure(structured);
    // TODO
}
export { buildScene };
```

### An Array with Hidden Objects

I have created an array with all the IFC objects that I want to disappear during a camera move. These are called `hidden objects`.

```javascript
const hiddenObjects = [
  'IfcBeam',
  'IfcColumn',
  'IfcCurtainWall',
  'IfcMember',
  'IfcPlate',
  'IfcBeam',
  'IfcBuildingElementProxy',
  'IfcColumn',
  'IfcElementAssembly',
  'IfcEquipmentElement',
  'IfcFastener',
  'IfcFlowSegment',
  'IfcFlowTerminal',
  'IfcFooting',
  'IfcFurnishingElement',
  'IfcMappedItem',
  'IfcMechanicalFastener',
  'IfcOpeningElement',
  'IfcRailing',
  'IfcRamp',
  'IfcReinforcingBar',
  'IfcReinforcingBar',
  'IfcReinforcingMesh',
];

```

Tweak this array to your own needs.

### Perform the Grouping

We can use the aforementioned array to group each object into a `visible` or `hidden` group. `Three.js` has a very nice way to deal with [groups](https://threejs.org/docs/#api/en/objects/Group).

```javascript
function groupStructure(structured) {
    let visible = new THREE.Object3D();
    let hidden = new THREE.Object3D();
    let visibleChildren = [];
    let hiddenChildren = [];
    structured.MainObject.children.forEach((child) => {
        const data = child._Data;
        if (data === undefined) return;
        const ifcClass = data._IfcClass;
        if (hiddenObjects.indexOf(ifcClass) === -1) {
            visibleChildren = [...visibleChildren, child];
        } else {
            hiddenChildren = [...hiddenChildren, child];
        }
    });
    visible.children = visibleChildren;
    hidden.children = hiddenChildren;
    return { visible, hidden };
}

```

Notice that we use the children parmameter of the [Three.Object3D()](https://threejs.org/docs/#api/en/core/Object3D).

## Add Groups to Scene

Let's add the two [groups](https://threejs.org/docs/#api/en/objects/Group) to the [scene](https://threejs.org/docs/#api/en/scenes/Scene). This is very straigh forward and easy to do.

```javascript
function buildScene(e) {
    let structured = e.data;
    structured.MainObject = mainObject;
    structured = buildGeometry(structured);
    let { visible, hidden } = groupStructure(structured);
    
    /**
    * Add visible objects to the first group
    */
    const visibleGroup = new THREE.Group();
    visibleGroup.add(visible);
    /**
    * Add hidden objects to the second group
    */
    const hiddenGroup = new THREE.Group();
    hiddenGroup.add(hidden);
    /**
    * Add both groups to the scene
    */
    scene.add(visibleGroup);
    scene.add(hiddenGroup);
    
    initScene();
    document.getElementById('c').style.display = 'block';
    toggleLoader();
}
export { buildScene };
```

## Hide on Camera Movement

The next step is to actually hide the `hiddenGroup` during a camera movement. A **simple (!)** way to do this is to place an event listener during a mouse press.

```javascript
canvas.addEventListener('mousedown', hideGroup);
canvas.addEventListener('mouseup', showGroup);
```

Then, all you do is change the `visible` property.

```javascript
const hideGroup = () => {
  scene.children[scene.children.length - 1].visible = false;
};
const showGroup = () => {
  scene.children[scene.children.length - 1].visible = true;
};
```

Please not that the `EventListener`might intefere with other parts of the `Three.js` scene.