> 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.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://bimwhale.gitbook.io/ifc-js/optimization/group-objects.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.